怎样把复杂逻辑与信息，转化为简洁的界面体验？(2)

页面布局

1、建立视觉层级的方法

好的视觉层级会帮助用户提高获取和理解信息的效率，一般来说会从以下几个元素来表现：

1）位置

一般情况下，人眼对左上和中部的观察最佳，依次是右上、左下和右下，当然这也与书写习惯和文化因素有关。除此以外，大多数人的眼睛沿水平方向移动更加快速和不易疲劳，因此左右关注度的差别要小于上下关注度的差别。

如果设计师想要体现并列关系的时候，左右排列会更佳，而想要拉开差距，上下排列更能突出。当然这也要根据实际情况来斟酌，例如信息过长过于复杂就会采用上下列表的形式，而同级并列的重要功能操作多数采用横向排列。

另外，在上下关系中，用户会优先关注上部内容，例如网页设计中首屏的信息会比第二、三屏层级要高，所以在功能模块的布局中，同级的功能的尽量采用横向排列的方式。

就下面两个模块的布局方式，第二种布局用户会不自觉认为前面两三个功能tab更加重要，越往下的功能越次要。

2）大小

重要的元素需要更大，可以通过拉开大小差距的手法突出重点。例如下面的QQ音乐的界面设计，使用图片的大小划分来抢夺用户的视线，从而达到视觉层级的划分。

3）距离

这里不得不提格式塔理论，也可以简单理解为接近性原则：

人们在感知复杂的对象的时候，会有意识或者无意识地将接近的物体纳入到一个有组织的系统当中，而不是简单的视作为对象的集合，这是格式塔原理的基础。

格式塔原理会适用到不同层次的认知当中，有的是显性的，有的则是隐性的，但是最有趣的是可视化的部分，也就是设计师借助这种原理所创造出来的各种设计。可以看下面左侧的图片，我们会非常自然的将元素在视觉上做了分组，这就是接近性原则的魅力。

通过研究和验证，接近性原则中距离的接近，比起色彩和形状的近似，更容易被人所认知，下侧右图就很好的认证了这一观点。合理运用接近性原则能够让用户更轻松地获取信息，感知内容。很多时候，用户并没有准备好花费时间来学习复杂的界面，可以快速被感知和识别的信息，能更好的留住用户。

4）色彩

（编辑：ASP站长网）