在日常的界面设计中，大家是否思考过一个问题，那就是在界面的布局中，到底应该遵循怎样的原则，核心信息的位置应该如何摆放？基于这个问题，我们分别来拆解，用户在浏览信息的时候，到底会有怎样的视觉动线？
古腾堡法则
古登堡法则（Gutenberg Diagram）又称对角线平衡法则（Diagonal Balance），古腾堡法则提出的背景是古腾堡认为人们在阅读报纸时，应该是遵循某种习惯进行的，最终总结出人们的阅读方式遵循从从左到右，从上到下的眼动规律，并且将画面显示的内容分成四个象限：
古腾堡法则的实际应用
对于古腾堡法则的应用，我们从小非常熟悉的一种应用场景便是如下所示：
古腾堡法的核心在于人的视线会自然遵循“左上-右下”的对角线轨迹移动，强调的是左上角的视觉起点与右下角视觉终点的“首位呼应”。
古腾堡法则在界面设计中，往往用于引导用户完成决策，强化目标。如下面枚举的两张图，商品详情页核心在于引导用户购买，授权页重点在于引导用户同意授权。
古腾堡法则在按钮排布中的应用
根据古腾堡法则，对于水平排布的按钮，核心操作按钮应该放置在视觉终端落点上，所以我们常见的按钮排布便如图所示：
此时我们便要思考一个问题，为什么【保存为草稿】按钮进行了高亮处理，但是最右侧的按钮却是【发表】呢？
以下是我的理解：【发表】是整个微信公众号文章操作动线中最核心的按钮，因为【发表】才是公众号文章要推向观众的唯一操作，所以【发表】按钮放在最右侧的视觉终点没毛病。但是为什么要将【保存为草稿】按钮做高亮处理呢？我的推测是因为【保存为草稿】是用户最常用的操作，因为一篇公众号文章的编写往往不是一蹴而就的，写作时间或许比较长，用户为了保证草稿能够获得即时的保存，往往会手动不断地进行保存，将按钮进行高亮，也是为了方便用户快速发现，提高操作效率。
车机HMI设计中，不一样的设计点
在车机设计中，对于主操作的放置，却是主操作在左，次操作在右，这明显是与古腾堡法则相悖的，那么为什么还要这样设计呢？
这就涉及另外一个概念—“费茨定律”，即从一个起始位置移动到一个最终目标所需的时间由两个参数决定，到目标的距离（D）和目标的大小（W），数学公式表达为：T=a+b log2(D/W+1)。
T：完成任务所需要的时间
a和b：经验常数（与设备和用户相关）
D：起始点到目标的距离
W：目标的有效宽度
车机的中控屏与手机等移动设备的不同点在于，对于左舵车来说，用户的身体往往是位于中控屏的左侧，用户在进行任务操作，尤其是行驶过程中的任务操作时，主操作放在左侧，可以有效地缩短到目标的距离（D），从而减少操作时长（T）。
Z型布局
Z型布局，与古腾堡法则最直接的不同点，在于Z型布局会将用户的视觉沿“左上→右上→左下→右下”的Z字型轨迹进行引导，用户的视觉动线会穿越古腾堡的两个休憩区。
如果用户的视觉动线从“左上”水平浏览到“右上”，然后沿对角线回到“左下”后，便停止继续移动，那么将会得到一个倒三角，也就是所谓的“金三角图案”，我们想要体现的重点信息，便可以放置在这个金三角区域。
F型布局
F型浏览习惯，是美国一家专门研究网站和产品易用性的公司Nielsen Norman Group通过眼动实验，得出如下图的眼动热区图：
不同的布局法则在界面设计中的应用
在日常的界面设计中，布局法则的运用往往不是单一的。一张界面中可能包含多种布局法则的呈现，即布局规则之间可能存在嵌套。因此在设计中，如何灵活地运用设计法则，是一个长期且持续的话题。比如下图的贝壳找房界面，整体布局沿用的是Z型布局。但是当用户视线聚焦到特定的房产信息时，又是典型的F型布局排列，“户型”、“重点标签”、“房价”等重点信息都是按照左侧边缘排列。
在体验设计中，对于不同布局应用的进阶
第一阶段（新手）：机械套用古腾堡/Z型/F型布局；
第二阶段（进阶）：根据实际业务目标动态组合、灵活运用设计模型。比如在一个界面中可以通过多种布局法则的运用，引导用户更好的完成用户/业务目标；
第三阶段（高手）：建立用户认知-行为预测模型。比如通过眼动、AB测试等方法持续优化视觉权重分配。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
