网页设计布局(二): F 型布局

作者: 贾凡，用户体验设计师，GE数字集团

今天我们继续上一次的网页设计 Z 型布局话题谈一谈网页布局中的 F 型布局.

 网页设计中的 F 型布局其实来源于眼动仪对现有网页的实验结果.在对测试者只用眼动仪观测其浏览大量的网页以后,结果发现,被测试者的阅读习惯是从页面的左上角浏览到右上角,页面左侧是视线停留很长的部分,偶尔会看相页面右边的部分. 这样的眼动实验告诉我们,应该尽量把页面比较重要的信息,例如 logo, 导航,重要的操作指引放在页面的左侧.

下图就是测试者视觉停留热区的展示.

用户的普遍视觉流程是:

1. 从页面的左上角开始
2. 浏览最上部分(导航/订阅信息/搜索框 ....)
3. 然后视觉向下转移,从左往右

在设计中的实际应用有很多,比如 Predxi UI: