3招学会优化界面信息层级

为什么觉得界面总是太平，不能突出主体缺乏层级感？

多半是因为信息层级没有处理好。

信息层级的处理有三个方面： 

组织信息

对比原则

视觉流

（总结）

1:组织信息

亲密性原则

将相同属性的信息组织在一起，建立内部良好的浏览秩序，符合用户阅读习惯，避免耗费过多的精力或看不懂的情况。

2）对比原则

核心思想：避免页面的元素过于相似，通过对比让页面上重要的元素首先引起用户的注意，而不是整体都很平庸。

方式：字体、粗细、大小、色彩

A：通常使用两种不同类型字体对比，突出重要信息。

例如：Banner里面用书法字体和辅助的无衬线体。

B：粗细对比（字重）

例如：导航栏切换经常使用，选中采用加粗字体，不选中则偏细。

C：大小对比：大的文字信息更有视觉冲击力

6-8的差别

D：色彩对比

色彩性格鲜明，对比无色相的黑白文字更加出彩，有很强的视觉吸引力，也可以添加背景色来区分。

例如：飞猪的运营看卡片设计。

3）视觉流：

根据谷歌的研究，用户浏览界面的内容是F型，越往下视觉注意力越少。

页面的上半部分是用户关注的职位信息和薪资待遇，下半部分则是次要的公司地址信息。

自左到右则是用户关注的招聘信息，右边则是次要的公司logo。

整体符合用户自上而下、自左到右的视觉阅读习惯。

总结：

首先：借助亲密性原则组织信息，使页面看起来整齐有序。

然后：通过对比原则来区分信息主次，突出主要信息。

最后：结合视觉流的原则审视自己的设计是否符合用户的阅读习惯。