网页设计层级 第1篇
除了冷暖色对眼睛的刺激不同，色彩的反差是最容易造成关注度差别的因素，在自然界动物为了生存，运用的保护色就是和反差相关，如图中的猫头鹰，和它生活的环境相关，毛色都进化成类似的色彩，以起到隐藏保护的作用；相反，颜色反差大就特别容易引起注视，如下黄色郁金香中独特的红色。
前面讲到的大小、远近都是体现能反差的视觉手段，色彩上的反差主要通过以下方法达到效果：
色相反差，下图中主色调为蓝色，蓝色行动点和整体颜色一致，层级相对较弱，而绿色行动点和蓝色在色相上的反差使得层级变高
但颜色有很多种，如何确定反差的大小？我们可以通过色相环来查看，如下图所示，色相反差强弱取决于色相环上的距离，距离越大对比越强，反之则越弱。
饱和度反差和明度反差比较容易理解，而且他们有数值可以控制，两个颜色之间饱和度或明度数值相差越大，反差也就越大，反之亦然，看看具体的实例：如以下导航图，当前的人物icon明度较高，和低明度黑色背景形成高反差而容易先被注视
以下环状饼图，已完成的百分比饱和度高，和总体低饱和度形成对比，相同色相通过饱和度进行对比不仅能拉开差距形成视觉层级，同时视觉效果具有整体性
总结一下上面讲到的视觉表现手法，形成表格方便大家记忆如下：
运用视觉表现手法建立信息层级后，需要设计师不断审视用户的浏览顺序是否真如我们期望的层级1到2到3…，包括页面大模块和模块内的浏览，这些浏览顺序会在页面上形成视觉流；
审视页面视觉流能帮助我们判断用户浏览页面是否顺畅，浏览的顺序是否有规律可循；如果我们的设计不能有效引导用户的视线，用户的浏览更趋向于随机性，就难以将希望表达的信息快速传到到位。
下面的内容主要是介绍比较典型的视觉流及每种类型的特征，包括：
网页设计层级 第2篇
想要达到距离被拉远的效果，下面列举的方法是让信息变得不清晰，眼睛看起来无法对焦到信息上面，包括：
模糊元素：
图背景的人物被模糊后，使它和两个行动点以及右侧的图标不在一个平面上，离眼睛更远，用户在进行行动点和文字识别时也不会被模糊的背景所干扰
降低透明度也同样可以起到作用，当有些背景图模糊后比较难被整体感知，选择降低透明度也能拉远距离
增加半透明图层，在界面色彩或元素比较多的情况下，仅降低透明度也可能无法拉开距离，如下图希望突出TV购时，其他四个模块降低透明度后由于本身色彩比较丰富而没有明显拉开差距，通过加上灰色的半透明图层后，TV购以外的模块自然的退到视线后面了。
网页设计层级 第3篇
色彩的不同色相，对人眼的刺激及产生的反映目前没有找到绝对的先后顺序，但是冷色类和暖色类色彩，是有明显的层次差别的，如下图，人眼一般会优先看到左侧的图片，这和我们人眼对不同波长的反映有一定关系;
从生理学上讲，人眼晶状体的调节，对于距离的变化是非常精密和灵敏的，我们能判断出物体离我们的远近，但是它有一定的限度，对于波长微小的差异就无法正确调节。眼睛在同一距离观察不同波长的色彩时，波长长的暖色如红、橙等色，在视网膜上形成内侧映像；波长短的冷色如蓝、紫色等，则在视网膜上形成外侧映像。因此，暖色好象在前进，冷色好象在后退。
网页设计层级 第4篇
横向视觉流引导用户视线从左到右或从右到左视觉流动，是最符合用户视觉习惯的浏览方式，给人稳定可信之感。
如首页，整体页面和单个模块都是典型的横向视觉流，用户从左到右浏览到边界后，视线回扫到下一行继续从左到右阅读；这里会有一个横向浏览最佳区域的数值，如digg选用的页面宽度为1000px左右，每行展示3个item，用户屏幕的分辨率变大后，这两个数值是否应该继续增加，增加到什么程度，是人眼获取信息效率最高的？这个疑问我还没有找到相应的理论或实验支撑，后续再查找资料。
纵向视觉流引导用户视线从上到下浏览，由于眼睛纵向的运动方式需要瞳孔不断对焦，当纵向扫视页面模块时效率和横向浏览相差不大，但阅读细节时效率会变低，如纵向排列的文字，更适用于需要逐字阅读的古诗古文；
下图是将原来横向视觉流的digg首页的排版调整后，变成了纵向视觉流，除了大图，用户会选择三栏的其中一列纵向浏览直到找到某一目标信息后，横向浏览细节。
网页界面的纵向高度限制比横向小，因为用户习惯上下滚动来浏览更多信息，当用户还处于确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息；如下图facebook日历界面，时间轴横向排列时，由于宽度受限，需要横向切换或滚动条来查看更多日期：
将时间轴方向调整为纵向，使得用户能通过上下滚动更高效查看当月所有日期。
斜线视觉流能营造运动感和速度感，但由于角度倾斜使文字认知上会有一定困难，大量文字信息排列不适合这种视觉流，常用于设计中的点缀或本身信息量比较少的界面，如下图的健身俱乐部海报；
还有网页界面上小范围的斜线视觉流，来体现运动感。
曲线视觉流，用户视线会形成个性化的曲线，具有律动和活泼感，这种类型由于眼动幅度较大，长时间大量的运用会产生视觉疲劳，所以不适合大段文字使用，一般会结合图形做曲线视觉流，让用户的视线在图像区域稍作停留；
如下图在曲线视觉流中配上图片，让视线在图片这个节点上稍作停留并浏览这个节点的内容，然后继续延曲线浏览。