前言 

在以往的学习功能中，我发现市面上大部分文章对于Web端的设计布局讲的比较零散，一般提及更多的是F式布局以及Z式布局，但对于古腾堡图设计布局很少。因此我这边会对常用的三种模式布局来进行讲解，结合实际案例为大家进行分享。

 古腾堡图 

古登堡图（Gutenberg Diagram）又称对角线平衡法则（Diagonal Balance），由14世纪西方活字印刷术的发明人约翰·古腾堡提出。

古登堡图将页面设计布局分成了四个象限：

1.第一视觉区(Primary Optical Area)：左上方，用户首先注意到的地方。

2.最终视觉落点区(Final Optical Area)：右下方，视觉流的终点。

3.强视觉盲区(Strong  Visual Blind Area)：右上方，较少被注意到。

4.弱视觉盲区(Weak Visual Blind Area)：左下方，最少被注意到。

在进行设计布局时，要考虑用户的视线是很自然就会以从左上方看到右下方，并且每次扫视都沿着一条方向轴开始从左到右看。古登堡图揭示了一个实用的视觉轨迹规律：阅读引力是从上到下，从左到右，符合用户习惯性的眼动规律。

古登堡图以企业级中后台产品的数据表格设计为例。「主操作」是页面最核心的操作，按钮通常使用主题色填充，位于「顶部筛选区」的最左侧，其次是次要功能，超过三个次要功能需进行聚合，搜索和辅助功能放在位于「顶部筛选区」的最右侧。根据古登堡图表法的对角线视线流，即落在页面的「第一视觉着落点」，最易被发现。

 Z式布局 

Z式阅读布局遵循字母Z的形状，跟从人眼扫描页面时从左到右，从上到下的行进路线：首先，我们从左上角到右上角进行阅读，形成一条水平线；接着，在页面左下方。会创建一条对角线；最后，再往右转，形成第二条水平线。当用户的眼睛以这种模式移动时，它形成了一个虚构的”Z”形。

Z式布局视为一系列的Z型移动而不是一个大Z移动的方式布局。可以充分利用z式布局，将重要的信息放在视线自然落到的地方，并且增强视觉强点。

Z式布局以企业级中后台产品的首页为例。首页主要是以数据模块和内容模块呈现给用户使用的，这时候常用的展示方式是卡片式布局，让功能与功能更加分明清晰。根据用户的阅读方式更加适合Z式布局，阅读表格一目了然。如图：

 F式布局 

F式布局源于NNGroup的一项眼动研究项目，发现用户的眼球快速浏览网页时，尤其是在快速浏览文字内容的时候，眼球的运动轨迹类似字母F，可读性更强。并且整个运动过程遵循下面三个部分：

1.用户先会沿着水平方向浏览，优先浏览内容块的上部，这个时候的眼动构成了字母F 最上面一横。

2.视线会沿着屏幕左侧向下垂直扫视，寻找段落中能引起兴趣点的内容，当他们发现引起他们兴趣的内容之时，继续横向仔细浏览，而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更小一些，而这个视线轨迹则构成了字母F中间的一横。

3.用户会将视线移到屏幕左侧，继续向下浏览。

F式布局能让你创造出更加富有层次感的设计，这样的设计更容易为用户浏览和获取信息。对于大部分国家而言，F式布局是非常符合人眼动阅读习惯的。主要适用于文本的浏览和操作,能够更好控制内容的可见性，确定内容的优先级、设置初始预期、为速读而设计、善用侧边栏，避免无聊的设计布局。

F式布局以企业级中后台产品的表单设计为例。表单内容运用了F型布局排版，让用户快速阅读和填写内容，满足用户的操作效率以及浏览方式。

 总结与思考 

古腾堡图、Z式布局和F式布局三种设计布局都是遵循人类浏览信息的趋势和习惯的，帮助产品优化布局与结构。当然有趣的设计和良好的可读性同等重要，满足用户高效使用产品，提升产品体验。

参考文献：

23条黄金体验法则——互联网大厂年度总结

3种设计布局：古腾堡图、Z型和F型，你了解吗？

古登堡图：视觉流在设计中的应用

Powered by Froala Editor