如何从0到1构建UI视觉层级？

版权申明：本文出自“丘丘的设计笔记”原创，感谢“丘丘的设计笔记”的原创教程分享！

工作中，你是否经常听到"视觉层级"这词？就犹如"用户体验"一样让人耳熟能详。抛开装逼因素，这两个词的多次提及，可见其重要程度。

音乐有节奏，好的音乐能通过音阶的高低起伏变化表达音乐情绪。

例如：《Main Title》即使你没看过《冰与火之歌》，光听音乐你是否能感觉到音乐给你营造千军万马恢弘之势。《Playing Love from The Legend of 1900》你是否想到一个宁静夜晚，佳人与你倾诉衷肠，柔情似水。

反之，节奏不好，则无法和听众达成共鸣。

绘画有节奏，张驰有度、大小对比、远近疏密变化，构成了画面的节奏。反之，没有节奏，则画面平淡。

同样的，APP UI也有节奏。页面良好的视觉层级，方便用户在浏览的过程中抓取关键信息，帮助用户快速达到目的。

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/

那么，如何构建？

1.明确页面目的与需求主次

拿到原型，明确页面目的和需求的1、2、3层级，并理解消化。开启设计师的隐形技能：根据一句话或者一个词，在大脑开始构建画面布局。在构思阶段，建议同时浏览同类型UI设计以及交互布局，在找参考的过程中，结合自身APP的页面目的一起构思，并在纸上绘出可行性方案。 

由于，APP是为人服务。那么我们需要知道，人眼浏览习惯模式的科学依据。

2.人眼浏览模式

曾有一数据显示：如果在3S内无法吸引用户，你将流失这个用户。如今我们所在的时代快节奏、碎片化，用户的日常浏览是"扫描"而非"阅读"。所以，了解人眼浏览习惯，变得十分重要。

人眼浏览习惯有：F型；Z型；其他；

F型浏览模式

Z型浏览模式

还有，其他浏览模式，海哥HMI人机交互在他一篇文中《用户是怎么阅读的？尼尔森F模型》提到：

蛋糕模式：眼睛只关注标题和副标题时，水平一层一层；

斑点模式：跳过大块的文本和扫描，寻找特定的东西，比如按钮，数字；

标记模式：轻扫页面时，将眼睛聚焦在一个地方，呈圆形分布。（移动端会常发生）；

承诺模式：通篇阅读，用户确实充满动力和兴趣。

在明白人眼视线流程后，我们开始运用视觉手段，吸引用户来看我们想给他看的内容，并按照我们的预想顺序，依次阅读。

3.设计手法

a.对比

对比，让视觉有轻重，用户看起来不累。需要强调的信息放大，没那么重要的东西缩小。如果同一层级的模块，通过颜色或者样式的变化来表达。如：字体大小对比，颜色对比；模块大小对比；图片大小对比等。 

b.字重

字体千千万形状各不相同，然而他们都有着相似之处：字重的大与小。在同一字号大小下，字重大的笔画，以面构成，会比字重小的，更具视觉冲击力。

需要强调的信息，字号变大，字体加粗，这样就能区分主与次，建立更易读的视觉层级。