新手学习UI界面设计的视觉层级！

位置是在设计之初就会考虑的因素。人们在阅读和浏览事物时，会遵循一些特定的规律，在用户界面设计上遵循这些规律，能帮助用户更容易、更快捷地看到并理解眼前的事物。其中有两条规律和位置设计元素有关：

①当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优，依次为右上、左下，而右下最差。因此，左上部和上中部被称为“最佳视域”。

②第二条规律是眼镜沿水平方向运动比沿垂直方向运动更快而且不易疲劳。人们一般先看到水平方向的物体，后看到垂直方向的物体。

依据信息的优先级确定了界面中元素的位置后，应该考虑给各个元素占多大的空间，元素的尺寸大小可以很直观地反映信息的重要等级。

除了元素本身的尺寸大小会影响视觉层级外，元素的细节放大程度也同样起到作用，细节放大后，人眼会感受到元素更清晰，离眼睛更近而容易先去关注，当然前提是保证信息可被理解，如果局部细节放大但用户不能理解信息是什么就不能起到吸引用户的作用。

前面讲到的将元素的细节放大，眼睛会感受离它更近而被优先注意到，虽然信息展现的媒介是个平面，但是通过视觉手段能体现出三维的效果，除了大小，还可以采用一些其他视觉手法来实现。

①拉远三维距离。想要达到距离被拉远的效果，下面列举的方法是让信息变得不清晰，眼睛看起来无法对焦到信息上面，包括：模糊元素；降低透明度也同样可以起到作用，当有些背景图模糊后比较难被整体感知，选择降低透明度也能拉远距离；增加半透明图层，在界面色彩或元素比较多的情况下，仅降低透明度也可能无法拉开距离。

②拉近三维距离。增加投影是最常用到的让元素看起来和其他内容不在同一平面的视觉手法，通常像弹出框、移上后出现的浮层等由于要压在其他信息之上，增加投影能帮助用户聚焦在带投影的模块而不受下面信息的干扰。

③除了三维，二维距离对视觉层级也有影响。根据格式塔心理学接近性定律，距离较短或互相接近的部分容易组成整体。人眼对距离邻近的信息更容易先去关注，在视觉手法应用上，元素距离上一个焦点近的，视觉层级较高。

确定了界面元素的位置、大小和距离关系后，我们应该继续考虑内容的形式，包括视频、图片、文字等，这里主要讲我们经常使用的图形和文字。相比起文字，图片在抓住用户眼球这一点上是功不可没的，同时还能使用户在短时间内形成形象记忆。从视觉层级上，眼睛一般会先关注图后关注文字。

①方向性引导。图片中的形象有些具有明显的方向性，如人眼注视的方向、手势所指的方向、物体运动的方向光线照射的方向等，这些特征会引导人眼视线朝着设定的方向运动，从而达到视觉层级有主有次。

【零基础转行学习UI设计有哪些技巧】

http://yanguosheji.com/h-col-105.html

②符号引导。除了图片，一些符号本身带有顺序和方向性，能有效引导视线根据符号来浏览，包括阿拉伯数字，字母顺序、时间顺序、箭头等。时间轴在界面中应用也很广泛，人眼会受时间顺序的影响去测览信息。

色彩是影响用户对界面层级性感知的另一重要因素，色彩的应用对视觉层级的影响也能起到立竿见影的效果，总结起来人眼对色彩的关注度差别主要是以下两点：

①先暖色后冷色。色彩的不同色相，对人眼的刺激及产生的反应目前没有找到绝对的先后顺序，但是冷色类和暖色类色彩，是有明显的层次差别的。

②先高反差后低反差。除了冷暖色对眼睛的刺激不同，色彩的反差是最容易造成关注度差别的因素，在自然界动物为了生存，运用的保护色就是和反差相关。除了尺寸大小、距离能体现视觉的反差外，运用色彩也可以达到视觉的反差：色相反差、饱和度反差和明度反差，数值可以控制，两个颜色之间饱和度或明度数值相差越大，反差也就越大，反之亦然。