视觉层级强力拆解

自从上一篇发文得到一些发表方向，以后决定以个人独特的总结以及符合商业的思维逻辑来写作设计拆解的相关文章教程，前期我还是按大类去诠释我的整个想法，看看大家的反馈，如果理解门槛还是有很大障碍，我在后期的文章中会再将文章细化出来。

拆解分类

拆解1、视觉面积的影响

拆解2、明度对比的影响

拆解3、色彩的影响

拆解4、视觉位置的影响

拆解5、丰富层度的影响

拆解6、其他（浮层、常用点、角标、动效）

拆解1、视觉面积的影响

视觉面积越大层级越高，而且与比较层的面积倍数有关，参考层如果为1级，那比较层的等级是由和参考层的倍数有关，大一倍那就为2级，大两倍那就是3级，依次类推。这是美术基础中的近远的关系，越靠近的视觉点越大，越靠远的视觉点越远，这样也很容易知道，越近获得关注越高，越远越低。

界面举例我们告一段落，这里再说一下比较常遇到的文字视觉面积，这块很容易被忽略，其实文字也是具有视觉面积的，而且有不同的视觉大小。接下来我会将所有可能性都拆解出来。

同字号大小，不同粗细层度的影响/文字的边宽形成的格式塔大小就是文字面积，但不一样的是，文字是线性结构，所以他不是实面，而是虚面，所以它相对于实面来说还是低一个等级，再说回到粗细的层级比较，越粗的文字他是越靠近实面的，所以这就能判断越粗的文字层级越高这个道理。

同粗细，同字号大小，一个是有文字底块，一个没有，这样有文字底块的视觉层级会比没有文字底块的视觉层级要高，因为有底块相当于为实面，这样就比没有文字底块的层级要高了

同粗细，不同字号大小，这个不难理解，这个不存在实面虚面的概念了，因为都是一样的粗细，但是这个格式塔大小不一样，也就是说，格式塔越大的层级越高，字号越大的层级越高。

拆解2、明度对比的影响

明度对比越高的视觉点会比明度对比低的视觉点视觉层级要高，这里其实也是美术基础中的空间的视觉差，越远的物体越模糊（对比小），越近的物体越清晰（对比大）。所以对比大的层级会比对比小的层级会高。（这里插一句，色相也是有明度的，不同的色相也是有不同明度解析，这个可以运用到电商banner的配色上）

下面来看看文字和背景不同对比度对视觉层级的影响。我们将统一文字大小和粗细，背景为白色。

拆解3、色彩的影响 

有色的视觉点总会比无色的视觉点更吸引人，因为色彩也是美术的一类，给没有色彩的视觉上色是提升视觉体验的一步。

文字为例：同等大小同等粗细同等明度的字，有颜色的字体会有更大的关注点。

拆解4、视觉位置的影响

给界面一个横轴和纵轴，从横轴的左边到右边起视觉层级逐渐减弱，从纵轴的上到下边视觉层级逐渐减弱。这是因为用户阅读习惯的问题，人们习惯从左上方开始往右边阅读，然后慢慢的往下读取信息。

拆解5、丰富层度的影响

丰富层度越高的视觉层级越高，丰富层度越高的点信息量越大，越需要花时间停留。

文字为例：设计过的字体丰富层度会比默认字体高，所以有些需要强调的标题或者banner上的字体都是有精心设计过，为了拉开于界面的层级。

界面为例：界面首页中的banner是丰富层度最高，其次是金刚区，再是标签栏。

拆解6、其他

除了上诉的主要层级影响，还有其他一些特殊的影响，我这就说两三个子吧。一个呢是给模块直接加投影，硬生生的造成前后层级。还有角标的影响，在干净的页面中突然来个提示角标，例如微信有消息时的小角标。还一个就是用户常用关键点，那个视觉层级整个产品中的最高层级，这个需要打破所有规则，这个是由用户主动选择的视觉层级点，例如电商软件的搜索框，不管这个搜索框大小如何，层级怎么低都行，但对于用户进来，第一个渴望的点就是这里，最后是动效的影响，每个动效就是一个互动，动的东西永远比静止的东西有活力更加吸引人。

图片来源UIGREAT的作者JGM

总结

视觉层级的梳理可以很大幅度的提升视觉规范和用户体验，通过视觉层级的分析，可以从不同方面去诠释复杂的页面，也可以更好的去处理文本关系。