设计法则精进：古腾堡原则——让你的界面设计有理可依
引言：设计师的底层逻辑
如果你不知道如何提升设计能力，那就先打好基础，搭建好知识体系，让你的设计有理可依、有据可引。体现你的专业，才能让人信服，让别人看到你的价值。
今天我们来聊聊设计中的三大视觉浏览模型之一：古腾堡原则。
一、什么是古腾堡原则
古腾堡原则由 14 世纪西方活字印刷术发明人约翰·古腾堡提出。早在 20 世纪 50 年代，他在设计报纸的过程中发现：人的阅读方式遵循某种习惯——由左到右，从上到下。
这一发现最终被后人总结为「古腾堡原则」，它还有一个更好记的名字：对角线平衡法则。
这个原则的支撑点是「阅读重心」——将页面设计与阅读重心相协调，能有效帮助读者梳理阅读逻辑。研究发现，这样做能显著提高读者的阅读节奏和理解能力。
古腾堡原则将画面内容划分为 四个视觉象限：
1. 第一视觉区（Primary Optical Area）—— 左上角
这是读者首先注意到、也是视觉权重最高的位置。无论是搜索、主动阅读还是快速浏览，用户的视线都会首先落在这个区域。因此，一级内容或核心功能应放置于此，如 Logo、标题、导航等。
2. 最终视觉区（Terminal Area）—— 右下角
这是用户浏览行为的终点站。当用户视线抵达这里时，已经完成了一次完整的阅读流，此时是最佳的行动触发时机。这也是为什么按钮和 CTA（Call to Action）通常出现在右下角——用户在浏览结束后可以立即执行操作反馈。
3. 强休息区（Strong Follow Area）—— 右上角
此区域较少被用户注意到，不适合放置关键行动点。一方面用户容易忽视；另一方面，用户浏览完中心内容后再折返回右上角操作，视线会产生回流，体验并不理想。
4. 弱休息区（Weak Follow Area）—— 左下角
这是用户注意程度最弱的区域，通常用来放置最次要的信息提示或辅助内容。
核心记忆要点：左上→右下 构成一条阅读对角线，这是用户最自然的视觉路径。
二、古腾堡原则在设计中的应用
遵循古腾堡法则，界面的左上和右下是视觉最为重点关注的区域：
- 主视觉区：放置关键元素
- 最终视觉区：放置操作按钮
- 休息区：放置辅助图形、次要文字信息
我们常见的弹窗、各类文件和合同文件，实际上都遵循了这一设计原则。
1. Web 端页面布局
以人人都是产品经理网站为例，其信息结构布局完美体现了古腾堡原则：
| 区域 | 放置内容 | 设计理由 |
|---|---|---|
| 第一视觉区（左上） | Logo + 主导航 + 推荐图文 | 用户第一眼所见，建立品牌认知 |
| 弱休息区（左下） | 最新推荐文章列表 | 吸引用户持续滚动浏览 |
| 强休息区（右上） | 惊喜推送内容 | 利用浏览间隙推送额外信息 |
| 最终视觉区（右下） | 推荐课程 / 社区入口 / 广告位 | 浏览终点，引导转化 |
2. 移动端页面布局
商品详情页是古腾堡原则最经典的移动端应用案例：
- 顶部：商品图片、名称、价格、快递、优惠——用户最关心的信息
- 右上 & 左下：分享、客服、收藏——次要操作
- 右下角：立刻购买 / 加入购物车按钮——最终交易转化
3. 图文信息的视觉优先级
结合古腾堡的视线强弱分析，左侧的第一视觉区必然是强视觉区。但图片与文字的排列也蕴含着深刻的设计思考：
今日头条 vs 美团 的布局对比：
- 今日头条：配图传达信息效率远不如文字，所以第一视觉区留给文字标题，图片放右侧
- 美团：图片能一眼告诉用户这家是西餐还是中餐、正餐还是早点，信息传递更直观高效，所以图片放在第一视觉区
两种布局的共同目的：让用户快速浏览，不让信息接收受阻造成体验中断。
延伸思考：今日头条的视频条目也采用"先文字后视频"的布局——将视频作为终端休息区进行视觉强化，既能强化信息种类的分类辨识度，又能让视频条目传达信息更快，同时维持 APP 整体使用的一致性和用户心智。
三、古腾堡原则在按钮设计中的应用
按钮位置的设计往往并非随意为之，背后都有古腾堡原则的影子。
1. 标题在上，操作按钮在下
引导用户操作的页面中，按钮通常放在界面底部——不仅仅是因为"离手近、方便操作"，更因为：
- 用户视线根据页面元素向下移动，最终停在底部
- 标题和内容放在顶部（第一视觉区）→ 用户依次浏览 → 最终到达底部按钮（终端休息区）
- 这种布局既符合从上到下的阅读习惯，又能达成产品的转化目标
2. 底部垂直双按钮
垂直 vs 水平布局的眼动效率：
| 布局方式 | 眼动路径 | 浏览效率 | 适用场景 |
|---|---|---|---|
| 垂直布局 | 单纯向下 ↓ | 最高 | 快速浏览、快速完成 |
| 水平布局 | 左→右往复 | 较低 | 需要仔细阅读、认真判断 |
这与表单布局方向同理——想让你快速完成的表单用垂直布局，需要你仔细填写的用水平布局。
反直觉的实践：微信授权页
按照古腾堡原则，重要按钮应放在页面最底部。但微信授权页的「允许」按钮却被放在了上方——为什么？
因为如果按古腾堡原则把「拒绝」放在下方（浅色按钮），它很容易被用户忽略，这就违背了"保证每个按钮都有足够关注度"的业务目标。将「允许」按钮颜色加重并放在上方，能让眼睛原本垂直向下的轨迹产生回流，确保「拒绝」按钮也被注意到，起到防错作用。
⚠️ 设计原则是基础，但并非一成不变。要合理权衡设计原则与产品目标之间的关系。
3. 水平按钮的主次关系
水平摆放的按钮，最典型的是电商详情页的「加入购物车」和「立即购买」。
按照古腾堡原则，右下角是视觉终端区域，所以与转化率直接相关的「立即购买」按钮放在右下角，让用户更容易注意到。
常见的「确认」和「取消」弹窗也是同理——推荐操作的按钮（确认、提交、转入等）通常放在右侧，因为用户的视线终点在右下角，将主操作放在这里能让流程最顺畅。
这些按钮的差异不仅仅是位置，样式、颜色、尺寸等维度也都存在明显差异，共同服务于业务转化目标。
如果把推荐按钮放在左侧会怎样？
当推荐按钮放在右侧时，用户视线从左上→右下自然流动，操作一气呵成。而如果放在左侧，眼睛运动轨迹会在水平轴上反复往复，无形中增加了用户的决策时间。
反例应用：卸载软件时的确认弹窗往往把「卸载」放在左侧——通过故意制造视觉回流，让用户多停留一秒，确认这不是误操作。
4. 右上角按钮的特殊设计
根据古腾堡原则，右上角（强休息区）是用户注意程度最低的区域。那为什么很多页面的「发布」「编辑」按钮还在右上角？
答案在于按钮与内容的关系：
- 顶部按钮（如发布、编辑）：核心在于可编辑的内容区域，而非按钮本身。按钮尺寸较小，需要用户谨慎操作，更适合编辑场景
- 底部按钮（如提交、确认）：核心在于按钮本身，适合全局最终确定操作
四、应用古腾堡原则的注意事项
尽管古腾堡原则揭示了普遍适用的阅读规律，但在实际设计中需要注意以下几点：
1. 并非所有页面都适用
古腾堡原则的阅读规律只在信息均匀分布的页面中得到充分验证。如果页面中存在特别醒目的视觉元素——比如鲜艳的颜色、超大的图形、动效——它们会首先吸引用户的目光，打破原有的阅读顺序。
例如上面的 Banner 中，右侧的 3D 视觉内容首先捕获用户注意力，然后视线才回到左侧的文字——这就是典型的焦点优先原则对古腾堡原则的"覆盖"。
2. 语言文化差异
古腾堡原则建立在对"从左到右、从上到下"阅读习惯的假设上。对于阿拉伯语等从右至左书写的语言，这一规律的适用性需要重新审视。
3. 用户已养成的独特习惯
长期使用特定产品的用户可能已形成独特的页面扫描习惯，不遵循古腾堡规律。最典型的例子是轮播图盲视区（Banner Blindness）——用户自动跳过看似广告的轮播区域，直接进入实际内容。
五、总结与实战建议
古腾堡原则贯穿于界面设计的每个角落。只要记住阅读引力的核心顺序——从上到下，从左到右，综合阅读流来排布视觉层级，就能做出合理的设计。
实战应用建议
原则是基础，不是教条
设计原则需要结合产品目标灵活运用，而非机械套用。当业务需求与原则冲突时，要以用户体验和业务目标为最终判断依据。不迷信单一原则
在焦点模式下，用户会首先查看页面上视觉权重最大的元素，顺序取决于这些焦点的相对权重以及引导视线移动的视觉线索。按钮位置的场景化选择
- 让用户快速操作、促进转化 → 主按钮放右侧（右下角），流动顺畅
- 需要用户确认思考、防止误操作 → 主按钮可放左侧，制造视觉回流，达到反复确认的效果
善用层级和视觉流
创建清晰的层次结构和引导流程，有时反而能颠覆固有的视觉动线模型，创造出更高效的浏览体验。保持学习与反思
设计法则是工具，不是枷锁。真正优秀的设计师，既懂得规则，更知道何时打破规则。