“页面该怎么布局？”交互方法论之古腾堡原则

前沿：此文仅记载自己对设计知识点的理解和梳理，非权威发布，欢迎设计爱好者们多多交流。

在UX设计中，我们常常会面临按钮、行动点的设计，排除样式风格，在位置上为什么常常会将其放置最底部，当有双选按钮出现时，左右该如何排布？指导原则又是什么？

按钮布局

什么是古腾堡原则？

古腾堡原则展示了人们在阅读时遵循的一般规律。这个规律表明当我们在阅读时，眼睛运动规律是水平方向的从左到右，在页面上上下滑动。人们在阅读时的载入点是左上角，并且在退出页面的时候视觉落点在右下角，这是人们阅读时的自然路径。

古腾堡原则

第一视觉区

页面的左上部分是用户的主要焦点，无论用户在搜索内容、主动阅读或者快速浏览，这都是用户阅读的第一落点区域。

因此在这个区域我们应放置一级内容或者核心功能。例如标题，二级TAB。这样用户才会第一时间获取最重要的信息去影响下面的浏览行为。

强休息区

视觉从左上角的第一落点区域移开时，视线会移动到页面的右上部分，重要性不高，因此在这个阶段，我们不应该去设置一个重要的行动点，一方面用户容易忽视，另一方面，当用户浏览完中心区域的内容后，再返回到强休息区操作，视线会有个折回过程，用户体验并不太理想。

这个区域不容易引起注意，因此这里可以放置辅助性功能或者需要谨慎操作的行为。（如修改后的保存）

弱休息区

左下部分的区域是人们浏览最弱的区域，用户对这块的注意程度也最低。

此区域注意力最弱，因此也用来放置最弱的信息提示（比如时间，话题来源等）

视觉终端区

右下部分是阅读视线最终的落点区，当用户浏览到这个部分时，阅读或扫描的行为会被中断并且采取措施，我们可以在这里插入按钮或者行动点。这也就能解释为什么按钮都会在右下角出现。

这个区域是用户浏览行为的最终落点区域，当用户的浏览行为结束后，可以进行操作反馈。

思路拓展

星巴克的弹窗说明就是完全运用了古腾堡原则设计。

标题居于左上角，按钮居于右下角。现在国内的APP说明性弹窗还是居中显示的比较多，两者都可以，因为弹窗所承载的内容较少，人们在阅读是基本不需要寻找的，因此居中显示也适合。按照目前的接受度，个人看法，居中显示反而更容易让人接受。

但是当我们在浏览上下滑动页面的时候，如果有子标题，标题居左对齐大多数情况下是最好的选择。（当用户有对此页面是有兴趣的时候，用户的浏览行为是适用于古腾堡原则，但是当用户对页面是无兴趣的时候（例如搜索），按照尼尔森的研究表明，更多的时候会以“F”形浏览。）

弹窗设计

实操演练

设计一张广场动态的页面。

这是一张常见的动态发布页面，将评论与点赞的互动机制置于每一条动态容器的右下角，左下角的时间日期弱化，在整个页面来看，发布的核心功能置于页面的右下角。

社区动态列表设计