如何建立网站视觉层次感

⑴ 网站设计应该注意哪些视觉效果

企业网站建设是一个庞大的系统工程，网页则是其基本元素。设计具有视觉审美的网页，进行网页视觉创意，是现代企业网站视觉设计的必然要求。
1．技艺融合
技是技术，艺是指艺术。二者要紧密结合，互相扶持。可以说，企业网站的视觉设计是否新颖决定了网民看到网站时所驻足的时间，在这个基础上网站的内容才能进一步吸引网民。因此，企业应当首先认识到网站界面设计与创意是企业网站建设的重要组成部分。同时，技术是实现网页视觉效果的基础。设计者应主动掌握现有的各种网络技术规律，注重技术和艺术的紧密结合，穷尽技术之长，实现艺术想象，达到理想的视觉效果。
2．完善版面设计
网页视觉设计特别讲究编排和布局，国外有设计者认为网站界面设计的95％是排版。优秀的版面设计通过文字图形的空间组合，表达出和谐与美，能够优化阅读，准确传递信息，使网站具有亲和力。我们可以将平面构成中的形式美法则，如平衡、对比、调和、节奏等原则灵活应用于网站的版面设计中，使纷杂的页面更具美感、重点突出，更加有条理。
3．色彩的和谐运用
色彩是艺术表现的视觉要素之一。浏览者在浏览网页时，第一印象就是页面的色彩，页面色彩直接影响浏览者的阅读兴趣。在网页设计中，应根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配。在企业网站的色彩设计中，我们可以根据企业CI（企业形象识别系统）中VI（企业视觉识别系统）进行标准色的选取运用，使企业整体化统一。如麦当劳的设计中，我们常可以看到标准的红、黄色一直贯穿到企业的整体设计中。
一般而言，我们应当先确立一种主色调，以利于网站主题的表现与气氛的烘托。然后确定和主色调类似色的辅助色，这样有利于界面风格的统一。最后还可以选择小面积的对比色，从而实现“大面积协调’／小面积对比”。这样，网站在统一协调的基础上会显得更加活泼、生动。网站界面色彩主色调太多会显得花哨，只有同类色而没有对比色，网站界面色彩则显得单调。总之，应当将色彩构成、色彩情感等知识灵活应用于网站界面设计之中。
4．媒体综合
视觉设计者应综合运用多种媒体元素来设计网页，以满足和丰富浏览者对网络信息的要求，这也是未来网页艺术设计的发展方向。当然我们应尽量避免使用过多过大的图片、动画等，减少过度的装饰。
5．视觉设计的统一

视觉设计的最终目的不是单纯追求视觉感染力而是更好地表现网 页的主题因此各方面的统一非常重要。首先，视觉设计要与主题相统一，视觉设计必须服务于网页主题的表达。其次，内容与形式要统一，即整体视觉印象和内容意境的统一。视觉设计中应利用各组成部分在内 容上的内在联系和表现形式上相呼应，并注意整体设计风格的一致性，实现视觉上和心理上的连贯。
总之，网页的视觉设计决不是只凭感觉，必须遵循其内在的规律和基本原则。一个成功的网页视觉设计必须做到艺术与技术的完美统一，它涉及到视听元素的处理及网页整体布局的规划设计等多项内容。它以主题思想和诉求鲜明突出、形式与内容相统一、强调网站中各相关页面的整体统一和谐为审美原则。

⑵ 如何增强网页中的“视觉冲击力”解析 PS笔刷吧

一个浏览者每天上网都要浏览无数网页，一个页面完全下载完后也许没半分钟就被关掉了。主要的原因是界面的整体感觉上缺少视觉冲击力，网站的界面设计之重要性就明显体现出来了。 提高网站的视觉冲击力可以从两方面来入手：
一：色彩搭配。
1、利用反差大的色调，但注意搭配起来要合理，页面不要让人有很脏、零乱的感觉。
2、清新自然色调，但要注意不要感觉整个网站显得单调、轻浮。
二：框架结构。
页面在总体上有一种整体感，但一个页面中各个内容块又要有一定的层次感；在每块内容中要注意字间距与行间距的调整，给人以宽松自然的感觉。 还是那句老话：一切以客户需求为中心。从各方面展示我的亲和力，显示网站服务的忠诚感，让你在浏览我提供的信息与服务过程中轻轻松松、舒舒服服。我个人在对一个网站进行第一次接触的时候，除了看界面，还喜欢看网站的措辞，因为这也是网站亲和力的一个很重要的表现方面，这也是国内很多网站忽视的地方。

⑶ 如何增加设计层次感，让整个设计感觉很大气

运用分组建立层次 在设计中，相邻的元素比分开较远的元素会更加吸引人注意，在做设计阅读顺序时，利用设计分组是一个非常有效的方法，将不同信息进行视觉间距分组。能提升用户对于内容上的理解。▲如上图slack的设计，插画引导图和底部按钮上面文字拉开了距离，使得内容更聚焦。第二个界面的顶部头像和下面的文字也是通过分组形成了对比。 ▲stadium-live的产品设计上，登录页面按钮为一组，顶部品牌LOGO和slogan一组，人物为一组，每组信息之间分组非常明确，互相都不会对对方视觉产生干扰，后面两张页面也是如此，顶部的导航，和下面表单信息，以及头像和底部按钮，通过分组处理，内容更加符合用户的视觉动线。 ▲在球员定制的处理上，最右边那张图，通过卡片和线条分组处理，从视觉上很清晰的看见排名；哪两个球队之间正在进行比赛。 ▲当一组信息比较接近时，证明他们是有关联的，如果距离比较远，这意味着这组信息和他们是不同的，简单来说，通过邻近性原则创造这些关系，为信息带来层次。 运用空白建立视觉层次 空白也是视觉设计元素，并不是留白就是空着，如果设计中留白运用合理，可以帮助用户理解很多信息，因此任何设计都需要通过适当的负空间来传递信息。▲如上图我喜欢的一个应用classpass设计非常极简，页面中大量运用留白来凸显内容。 ▲classpass的设计不会使用太多的视觉元素，而是运用留白把内容进行分组，每个页面的留白恰到好处，同时留白本身就是对信息进行区分，所以页面中减少了很多线条使用，会更加干净有品质感。 ▲must是一款电影软件，整体设计非常杂志风，页面就是通过图文处理，以及留白空间的处理，增加对比，基本产品使用过程中你不会感觉到视觉负担，元素之间的信息组织的非常清晰。 ▲在电影展示页面，信息的处理，以及打分设计上，多次运用留白来处理信息层级，在设计中，当你元素周围留白越多，它产生聚焦注意力的作用也越强，如右边的打分页面，几乎所有焦点都在这个弹窗上。 ▲Artsy是一款艺术品电商网站，整个app的设计也充满了艺术气息，每次我设计找不到感觉的时候就会去打开看看，里面的排版、还有设计的细节处理，都值得我学习，但我喜欢的还是他对于板式和留白空间的处理。 ▲在首页设计，我最喜欢他相框的设计，就像欣赏美术馆的一幅画，页面留白也非常大，衬线体和非衬线体的对比也运用的非常好。 ▲整个APP的设计被大量留白包围，虽然现在流行各种质感，光感，C4D的设计，但是大量视觉元素会让页面过于饱和，如果没有很好的视觉引导，用户会感到不知所措。这种简单的返璞归真，也能让人视觉不容易产生疲劳。 运用氛围建立层次 ▲每个纹理的运用，有设计感的纹理从视觉感受上比简约主义更能吸引用户注意力，但是背景纹理的运用不能为了设计而设计，而是需要和产品内容有关系。比如纹理和文字内容、和信息是密切相关的。如上图，是一款打车软件，背景结合了打车的地图，公路线路，用车场景；让页面对比和设计层次更加突出。 ▲Jour这款产品在设计上，背景通过有层次的氛围纹理和质感，使得页面氛围感很强，层次细节更加丰富，当然在设计时候切忌对于设计氛围过度运用，那样会让用户分散注意力。 ▲其它场景上氛围纹理的运用，卡片上通过系列插画的塑造，页面虽然有很多插画，但是页面平衡感同样被把握的很好。用的时候需要考虑用户在不同界面看见的元素视觉感受是一致的。 ▲氛围除了图形，其实色彩也是很重要一种方式，我很喜欢的ASANS的设计，在背景上就是运用了一些几何图形的肌理效果让整个空间感更加丰富，这些几何图形丰富细节的同时也让整个内容更加凸显。 ▲如上图是里面一个注册登录场景，界面中，除了背景灰色底纹通过几何图形来烘托视觉层次，同时在插画上也非常巧妙，用户输出时，完成后，整个插画到品牌图形的连贯变化体验非常好。 ▲Sift是一款新闻类阅读产品，这类型产品设计一般就是文字排版，设计简约为主，但是sift运用了一种大胆的设计，背景氛围上采用一些点线底纹的肌理效果，和内容结合的平衡感把握的很不错。 ▲Lugg是一款货车APP有点像国内的货拉拉，整个设计氛围感也非常强，运用的全插画设计，从引导页，到核心功能页面的设计都能看见完整插画的运用，是我目前见过运用插画氛围作为主设计最好的产品。 ▲感兴趣的同学可以去美国苹果商店下载使用，页面中增加氛围是一种增加层次很好用的方式，但是同样需要注意好视觉平衡，不要本末倒置。 运用字体对比建立层次 ▲运用衬线字体和非衬线字体对比是非常常用的方式，如上图运用了Adelle Sans和Tiempos这两款字体的对比让页面内容结构非常清晰 ▲上图官网的设计，干净的排版，通过字体大小、字型进行对比，体现出视觉层次。 字体的选择本身也是设计中很重要的因素，好的设计不仅能提升设计品质，同时也能让页面视觉层次更加分明。

⑷ 如何让页面有层次感

1.设计内容有主次之分
网页上的各项元素都有自己的作用意义，我们在做网页层次时首先考虑画面中各元素作用，根据网页元素的不同角色确定优先级，有空间感和距离感以及有虚实之分并且光影层次清晰，然后进行视觉层次的构建。简单举例，以淘宝图片为主，首先图片展示出来的是商品，然后背景会搭配使用场景或者突出重点的背景图片，其他还会增加文章说明等，在设计时要有重点分主次。
2.网页画面的远近关系
网页图片设置上由近及远，让画面用空间感，有深度，用背景图片等衬托出层次感，然后在图片基础上突出重点，可以使页面看起来更透气，也能够通过场景来传递出很强的代入感，但注意画面搭配。
3.注意色彩的适用
网页设计时注意色彩搭配，色彩明亮的页面元素更容易从相对柔和的元素中脱颖而出。背景色对于网页整体风格基调也有明显作用。例如，淡蓝色，一般代表平静祥和，适合一些日常事物管理类软件选择。色彩模块的适用及应用，在网页设计界面元素的逻辑关系中发挥着举足轻重的作用。
4.善用对比增加页面层次
UI设计师在页面设计时利用内容中的差异、对立等方面结合比较，带入画面做出比较，形成强烈的视觉冲击。用对比给用户增加画面层次感，同样用对比给内容做出更明显的比较。设计元素上可以用色彩、明暗、间距、尺寸等做出差异感将页面整体提升层次感。
5.注意网站功能
UI设计师初期常常出现的错误就是忽略了网站功能，为了设计出更优秀的画面却忽略了网站的自身左右。UI设计师在设计网页过程中首先要了解的就是功能，整体画面突出功能来展现出层次感也是网页设计中突出层次感的重要方法之一，设计与功能相结合，功能融入到设计当中然后突出整体重点层次感自然展现出来。
注意事项
以上列举了几点网页设计如何突出层次感，应用过程中一定要结合自身网站内容去选择方法，不要都用上也不要乱用找适合网站的方法突出自己的设计即可。

⑸ 如何增强网站的视觉冲击力

一个浏览者每天上网都要浏览无数网页,一个页面完全下载完后也许没半分钟就被关掉了(我就经常这样)。主要的原因是界面的整体感觉上缺少视觉冲击力(除非你的网站真有很独特的内容,可以忽略界面,但想想国内网站的内容有多少真正原创且很有吸引力的呢) 网站的界面设计之重要性就明显体现出来了。 提高网站的视觉冲击力可以从两方面来入手： 一.色彩搭配. 1.利用反差大的色调,但注意搭配起来要合理,页面不要让人有很脏,零乱的感觉; 2.清新自然色调.但要注意不要感觉整个网站显得单调,轻浮。 二.框架结构. 页面在总体上有一种整体感，但一个页面中各个内容块又要有一定的层次感;在每块内容中要注意字间距与行间距的调整,给人以宽松自然的感觉。 还是那句老话:一切以客户需求为中心.从各方面展示我的亲和力,显示网站服务的忠诚感,让你在浏览我提供的信息与服务过程中轻轻松松.舒舒服服。 我个人在对一个网站进行第一次接触的时候,除了看界面,还喜欢看网站的措辞,因为这也是网站亲和力的一个很重要的表现方面.这也是国内很多网站忽视的地方。

⑹ 如何有效建立视觉层级

为页面，尤其是企业网站落地页，建立清晰的视觉层级可以确保用户在正确的时机看到正确的信息，并且不会因无关或次要的内容而分心。

1. 在正确的时机回答正确的问题

通常来说，用户在查看落地页时会下意识地提出一系列问题。这些问题依次为：

• 这个页面提供了什么？（价值主张）

• 对我有什么帮助？（优势）

• 产品如何运作？（特点）

• 为什么我要信任此页面？（社会认同）

• 接下来我该怎么办？（行为召唤）

因此，页面的视觉层级在一定程度上能够映射用户提出这些问题的顺序是至关重要的。页面内容以正确的结构顺序展示只完成了有效视觉层级的一半，另一个挑战是确保用户看到最关键的屏幕元素。我们可以用多种方式来吸引用户的注意力，单从视觉上来讲包括但不限于：颜色、布局及交互等。

Tips：

（1）颜色——清晰的色彩体系

品牌色：延续品牌视觉感受，固化品牌形象；

转化色：尽量选择与品牌相对的对比色，明显区别于品牌色，常见的转化色为红色、橙色等，这些色彩能够刺激用户进行点击，进行有效的行为召唤。

（2）布局

• 紧凑的页面布局

紧凑的布局更能够牢牢抓住用户视线，有效区域宽度推荐：1180px。

• F式布局

F式布局是一种科学的布局方法，基本原理依据了大量的眼动研究。据此，我们习惯性的把重要元素（诸如品牌logo、导航栏、行为召唤控件）放在左边，而右边一般放置一些关联信息。



（3）交互——友好的体验

Akob Nielsen（雅各布·尼尔森）的十大交互设计原则是广泛的经验法则，而不是特定的可用性指导原则。因此，我们不能把它上升为一种标准，而是应该当做一种经验来学习，然后跟现实中的设计结合来使用。

常用的交互原则为：状态可见、环境贴切、一致性原则、防错及人性化帮助。

2. 简化界面

建议通过三个问题系统地检查落地页上的每个元素。

• 这个元素是否可以删除？

如果删除，后果是什么？是否会比其他元素造成的认知负担更具破坏性？如果不会，最好删除。

• 如果这个元素非常有价值无法删除，我可以隐藏这个元素吗？

• 是否可以将元素减弱，放在子页面、标签下或者折叠面板中？

3. 测试你的视觉层级

有一种便捷的方法可以测试用户是否看到了必要的屏幕元素，这种方法叫“五秒测试”，测试过程是向用户展示你的设计，五秒钟后让用户回忆他们记住了什么元素。

⑺ 优秀的电商网站如何建设

1、站点地图

设计网站地图主要目标是为可以给用户提供良好的浏览使用体验，用户必须始终知道他们所在站点的位置，如果站点太大，理想的是插入一个地图，以便用户更容易找到他们正在寻找的内容。

2、首页简约整洁

网站的主页应立即传达核心信息。毕竟，很少阅读网站上的文字。相反我们快速浏览页面，挑选关键词，句子和图像。

3、价值信息

当用户访问网站时，他们正在寻找他们感兴趣的或有价值的信息。因此，我们必须考虑质量，数量并不是很重要。

4、要标新立异与众不同

就是有一个简单性和独特性，才可以更快地被识别和传达。要避免和其他标志风格相似才会更令人难忘。

5、要有视觉层次感

设计时要考虑视觉层次结构是设计的重要原则，有助于以清晰有效的方式显示您的内容。通过正确使用层次结构，您可以从最重要的部分开始按优先展示给网站访问者。

6、易于阅读

可读性是人们识别词语，句子和短语的难易程度。当您网站的可读性很高时，用户将可以轻松地对其扫描或浏览。

⑻ 网页页面设计的时候没有层次感，请问怎么可以加强一下

段时间我一直在说设计需要有层次感，这种层次感可能有很多类型，比如色彩的层次感，或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能，一种是单调，一种是花哨。在设计中我们常常陷于对于某一种色彩或是某一种效果的偏爱，而这种情况会使我们的设计缺乏长久的生命力。并且我们自己在审美上会局限于对这种偏爱的执着从而影响我们的进步。而这种偏执也常会导致我们的设计缺乏层次感。

那么层次感通常表现在什么地方呢？在以前写的《色彩解答》系列中第一篇就讲过关于色彩的层次，在那篇文中有讲到用“黑、白、灰”去分析色彩的层次。我们在设计的时候可能会使用一种色彩把整个网站做出来，结果发现这单一的色彩做出来的效果让我们的网站变得很单调，很土气。有时就算是多用了色彩也一样的土气，网站使用的色彩并没有层次感，也没有对比。都处在相似的灰度上，所以网站看起来就灰头土脸的。当然我们还可以使用高对比纯色块来做设计，（韩国的网站有很多都是这种手法）这种手法有讨巧的地方，因为相对来说比较简单，但是同样也比较容易被抄袭。但这样的设计缺乏生命力，作为一种风潮，也有点像是快餐，谁都能复制得了。不需要任何的文化作为基垫。当然并不是说这种手法就真的一无是处，这种只能作为一种手法来应用，不能当作是万用灵药到处使。

光用文字来说必然是感觉不到的。那么我们来看看这张图。

我们看到IBM的设计色彩并不多，但是层次感就却是有了。他这里有黑色、淡蓝色、白色、其中黑色与淡蓝色之间的对比较为吸引眼球。并且我们发现黑色是纯黑、而浅蓝色却是属于高亮的那种。这种强对比对人的视觉是有一定吸引力的。并且黑白灰三者都有了。加上三者之间的比例并非均等的。而我们在设计的时候通常会使用一些灰度相近的色彩放在一起，并且饱和度也不高，所以最后出来的作品只能是灰头土脸。这样的网站我就不找例子了，找谁的来说谁也不开心。当然也包括我自己。呵呵，大家可以去我的作品集去找找，一定有那种灰头土脸的东西。

另外我们还可以看到IBM这次新的设计比原来的设计更有立体感，这就是我上面所说的元素层次。这种层次感拉开了浏览者的视觉深度，使得我们的网页不再平面。虽然也不是3D的效果，但是我相信2D的效果必然会成为网页设计的一个新的趋势。通过2D模拟出视觉立体感，会使得网页设计更有张力，内容也更为丰富。

而在纯色块的布局之中色彩鲜艳的图片更加显得醒目。这又是一种视觉层次，也可以说是复杂与简单的对比！设计没有什么一定的规律，这里包含的因素有很我。设计得好与不好，重要的是在于设计师对于这个世界的理解有多宽广。所以设计师不能只光顾着加强自己的制作技巧，更要不断的积累自己的文化知识。不断的增加自己的厚度，那样才能设计出更多精彩的作品。

⑼ 设计干货～视觉表现建立信息层级【深度好文】

长文预警，建议先收藏后看！

作为视觉设计师，我们的作用除了最基本的满足用户审美需求，还会有品牌传达，信息传达，功能传达等，其中想要信息有效的传达给用户，需要我们建立信息层级，而不是一股脑的丢给用户自己理解，要做到这点有哪些视觉方法，这些方法的背后是否有理论依据，是本文的主题。

首先看下面两张图，左图为相机拍摄的效果，右图为人眼不移动时看到的效果，可以发现人眼对信息的获取并不是一次性完成的，它不能同时产生多个焦点从而把视线停留在更多的地方，设计师需要考虑的是让用户通过眼球移动，按照一定的顺序获取信息，帮助获取和理解的过程高效自然。

这个设计方法希望解决的主要是两个问题：

1、用户获取和理解信息的效率

建立良好的信息层级，能让用户在有限的时间里，快速获取和理解有用、感兴趣的信息，并产生下一步行为；

2、设计师的专业性

设计师有意识的分析信息优先级，了解哪些视觉表现手法可以建立信息层级及每一种方法背后的理论依据，不仅仅凭感觉做设计。

一、前期了解&分析

在开始设计前，除了对项目本身的背景目标有所了解外，视觉设计师针对具体的页面也需要了解一些内容以帮助后面的设计有指导方向，包括页面定位、氛围营造、信息优先级和用户核心行为。

1.1、页面定位是帮助分析页面信息优先级、核心行为的前提

通常有：

· 用户是谁

· 用户来自哪里，即从什么渠道来到该页面

· 页面内容定位，提供什么、不提供什么

· 页面作用

举个例子：

我们在设计采购直达市场新首页时，交互通过对页面的用户对服务的熟知度进行分析，确定首页的最核心目标用户是新买家；页面内容定位是展示市场的价值点，用户产生的数据让新买家对采购直达形成品牌的认知；

1.2、了解页面需要营造的氛围，能帮助我们判断哪些元素能帮助达到目标，氛围可以是内容本身，也可以通过视觉元素设计来营造，但必须注意氛围营造不应强过用户关注的内容本身

氛围可能有：

· 新年主题大促

· 低折扣

· 信息鲜活

· 用户活跃等等

以下是大促活动正式页面，左图延续了预热期嘉年华的氛围，但到活动开始阶段氛围已经不是重点，用户更关心商品及折扣本身，右图为调整后将氛围的营造和类目图片相结合，很好的解决了氛围和内容的关系问题。

1.3、分析信息优先级

1） 一级信息吸引用户 ：假设用户只会在这个页面停留3-5秒，最能够吸引用户继续浏览的是页面的核心卖点，是一级信息，它必须少而精，在设计上要重点展示

2） 二级信息帮助理解 ：有了一级信息的吸引，用户进一步了解内容而可能停留3-5分钟，这时展示二级信息即提炼的精华内容，帮助用户在尽量短时间内理解信息

3） 三级信息详细了解 ：前两类信息基本上能帮助用户获取足够的信息，用户如果继续停留更长的时间去详细了解，这类信息量会更多，在设计上视觉层级会靠后，或通过交互方式展示、提供入口跳转

1.4、分析用户核心行为

不同类型用户会在不同阶段产生行为，我们要判断这些行为最终导向是什么？

比如商品详情页面，有些用户在决定购买之前，会查看用户评价、历史交易等内容，但这些查看的行为，最终是帮助用户判断是否购买这个商品，所以核心行为是最终导向的购买。

有了这些分析，交互产出物文档中会给予大模块的信息优先级和用户行为优先级，如下图

视觉在进行细节设计前，需要对每个模块内的具体内容进行优先级的分析并产出如下示意图并和交互和业务方确认，这些都是帮助视觉设计过程不偏离方向的重要产出物。

二、建立信息层级的视觉方法

视觉表现手法主要有以下几种元素，实际设计中为了让效果拉开主次，可能会同时使用多种方法以达到更好的效果：

· 位置

· 大小

· 距离

· 内容形式

· 色彩

2.1、位置

位置是在设计开始就会考虑的元素，人眼观看事物时，总会遵循一些特定的规律，设计上遵循这些规律，能帮助用户更容易、更快捷地看到或理解眼前的事物。其中有两条规律和位置设计元素有关：

1）当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优，依次为右上，左下，而右下最差。因此，左上部和上中部被称为“最佳视域”。例如，网站logo、商品名、主题等重要信息，一般放在最佳视域内。当然，这种划分也受文化因素的影响，比如阿拉伯文字是从右向左书写的，这时最佳视域就是右上部。下图是摘自摘自张帆 罗琦 宫晓东的《网页界面设计艺术教程》对一个屏幕划分后，用户对不同位置不同的关注度差别：

2）第二条规律是眼睛沿水平方向运动比沿垂直方向运动快而且不易疲劳，一般先看到水平方向的物体，后看到垂直方向的物体。如下图所示，左右的关注度差别要小于上下关注度差别，如想要体现并列的关系，左右排列会更合适；而如果要拉开差距，仅通过位置来实现，上下排列更容易达到目标。

举个例子：如下图时代周刊网站首页，左侧大图是当天的焦点新闻，在信息层级上为一级信息，视觉表现上不仅面积大、内容形式用大图，位置也放在优势区域，可能98%的用户会先关注到这个区域；

假如对设计稿的位置做调整如下，如果焦点新闻图片是第一优先级的信息，虽然它是大图的形式，占的面积也够大，但由于位置不在最佳视域，会被“Latest Headlines”分散一部分视线，可能只有60%的用户先看到右侧了；如果信息有主次，就要让视觉表现上拉开差距，而不是一个接近均等的局面。

3）用户优先关注上部，在网页设计中有首屏的概念，首屏的信息比通过用户拖动滚动条出现的第二、三屏层级要高

由于用户使用的屏幕分辨率不同造成首屏的高度会有差别，根据我们网站的数据，目前分辨率高度为768占多数，所以设计时会以768高度为基准，去掉浏览器本身的菜单等占用的高度，实际展示给用户的第一屏平均为600px，这个数据会根据以后目标用户的分辨率变化做相应的调整，我们在设计时可用这个数值作为首屏的参考线。

2.2、大小

在确定了模块的位置后，我们会考虑给这模块多大的地盘，大小会很直观反映信息的重要等级。

有个体育海报设计的案例，涉及到四种球类运动包括足球、高尔夫球、棒球、篮球，如果按照实际大小设计会让篮球和足球显得更重要，为了体现体育的平等性，设计上将球的大小做了调整。

Giles Colborne的《简约至上》书中的结论可以指导我们通过大小拉开差距：

1）重要的元素要大一些，即使比例失调也可以考虑

2）要想办法表现出差距；如果一个元素的重要性是2，那就把它的大小做成4

还是以时代周刊首页为例，目前的设计左侧的焦点新闻图占的面积和中间新闻图对比拉开了差距，使得用户容易先关注到一级信息而且不容易被周边干扰；

我们对两个新闻图片的面积进行对比可以看到差距有4倍左右；

假如对界面调整如下：焦点新闻图缩小两倍后，可以看出视觉层级的区分就不明显了。

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

下图是一个模特公司的网站，首页上随机出现模特的照片包括面部和半身照片，放大脸部特征后的照片保证了用户能理解这是一个模特的形象，使得用户会优先关注细节放大的照片。

2.3、距离

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

1）拉远三维距离

想要达到距离被拉远的效果，下面列举的方法是让信息变得不清晰，眼睛看起来无法对焦到信息上面，包括：

· 模糊元素，下图背景的人物被模糊后，使它和两个行动点以及右侧的图标不在一个平面上，离眼睛更远，用户在进行行动点和文字识别时也不会被模糊的背景所干扰

· 降低透明度也同样可以起到作用，当有些背景图模糊后比较难被整体感知，选择降低透明度也能拉远距离

· 增加半透明图层，在界面色彩或元素比较多的情况下，仅降低透明度也可能无法拉开距离，如下图希望突出TV购时，其他四个模块降低透明度后由于本身色彩比较丰富而没有明显拉开差距，通过加上灰色的半透明图层后，TV购以外的模块自然的退到视线后面了。

2）拉近三维距离

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

3）除了三维，二维距离对视觉层级也有影响，根据格式塔心理学接近性定律，距离较短或互相接近的部分容易组成整体；人眼对距离临近的信息更容易先去关注，在视觉手法应用上，元素距离上一个焦点近的，视觉层级高。如下图，第一层级的新闻焦点图和右侧的小图片比较临近，视线容易往右上角运动；

对距离做了调整后，虽然中间的小图片本身比文字更吸引人，但由于焦点图下方的标题距离更近而形成整体，视线容易先往下运动。

2.4、内容形式

确定了模块的位置、大小和距离关系后，我们会继续考虑内容的形式包括视频、图片、文字等，这里主要讲我们经常使用的图形和文字；相比起文字，图片在抓住用户眼球这一点上是功不可没的，同时还能使用户在短时间内形成形象记忆，从视觉层级上，人眼一般会先关注图后关注文字。但仅仅这点还不够，通过图片抓取用户眼球后引导视线到下一个关注点，是设计上更多会考虑的点，概括有以下表现手法：

1）方向性引导

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

下图假设中间的人物首先吸引了人的视线，为第一层级的信息，由于人眼注视方向为右侧，使得用户关注的下一个目标会转向“coder”文字，为第二层级的信息。

下图WHAT WE DO位置在左上角容易先被关注，同时右侧的人物形象占的篇幅较大也会抢视线，但由于人物运动的方向下没有其他信息，图片没有充分发挥引导的作用，用户浏览起来会不太顺畅

经过调整后的效果，虽然“WHAT WE DO”位置上并不在优势区域，但通过图片方向的引导很自然的让人眼落在文字信息上。

2）符号引导

除了图片，一些符号本身带有顺序和方向性，也能有效引导视线根据符号来浏览，包括阿拉伯数字、字母顺序、时间顺序、箭头等。

下图的排行榜前三名，虽然用户更习惯从左到右阅读，但由于数字的引导，视线也会被影响而按照1>2>3的顺序阅读，如果希望这样的顺序更加明显，可以再通过放大1的图片大小，拉开差距，结合多种视觉方法达到效果。

时间轴在界面中应用也很广泛，人眼会受时间顺序的影响去浏览信息，甚至会打破常规的如从左到右的浏览习惯，如下图虽然2的位置更容易引导用户优先浏览，但时间轴对信息的影响更明显，一般用户会优先查看模块1，再根据时间先后从右向左关注模块2。

2.5、色彩

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

1）先暖色后冷色

色彩的不同色相，对人眼的刺激及产生的反映目前没有找到绝对的先后顺序，但是冷色类和暖色类色彩，是有明显的层次差别的，如下图，人眼一般会优先看到左侧的图片，这和我们人眼对不同波长的反映有一定关系;

从生理学上讲，人眼晶状体的调节，对于距离的变化是非常精密和灵敏的，我们能判断出物体离我们的远近，但是它有一定的限度，对于波长微小的差异就无法正确调节。眼睛在同一距离观察不同波长的色彩时，波长长的暖色如红、橙等色，在视网膜上形成内侧映像；波长短的冷色如蓝、紫色等，则在视网膜上形成外侧映像。因此，暖色好象在前进，冷色好象在后退。

美国数字营销公司Hubspot曾经做过一场A/B Test，用于测试不同颜色对于用户点击转化造成的差异。 在图中，左右两个测试页面在内容上完全一致，唯一不同的是按钮的颜色，在超过2000人次的样本测试中，最终红色方案的点击率超过绿色方案的点击率足足21%。而在测试之前，大部分的研究员都猜测绿色方案会获得更高的点击，因为就直觉而言，绿色代表着通行、准许通过的意思，而红色则更倾向于警告、阻止意味。

这个测试从一定程度上反映了暖色对用户关注度和行动力的影响，当然并不是说为了提高点击率就要用暖色，具体的色彩风格还是要根据产品定位来设计。

2）先高反差后低反差

除了冷暖色对眼睛的刺激不同，色彩的反差是最容易造成关注度差别的因素，在自然界动物为了生存，运用的保护色就是和反差相关，如图中的猫头鹰，和它生活的环境相关，毛色都进化成类似的色彩，以起到隐藏保护的作用；相反，颜色反差大就特别容易引起注视，如下黄色郁金香中独特的红色

前面讲到的大小、远近都是体现能反差的视觉手段，色彩上的反差主要通过以下方法达到效果：

· 色相反差，下图中主色调为蓝色，蓝色行动点和整体颜色一致，层级相对较弱，而绿色行动点和蓝色在色相上的反差使得层级变高

但颜色有很多种，如何确定反差的大小？我们可以通过色相环来查看，如下图所示，色相反差强弱取决于色相环上的距离，距离越大对比越强，反之则越弱。

· 饱和度反差和明度反差比较容易理解，而且他们有数值可以控制，两个颜色之间饱和度或明度数值相差越大，反差也就越大，反之亦然，看看具体的实例：如以下导航图，当前的人物icon明度较高，和低明度黑色背景形成高反差而容易先被注视

以下环状饼图，已完成的百分比饱和度高，和总体低饱和度形成对比，相同色相通过饱和度进行对比不仅能拉开差距形成视觉层级，同时视觉效果具有整体性

总结一下上面讲到的视觉表现手法，形成表格方便大家记忆如下：

三、审视页面视觉流

运用视觉表现手法建立信息层级后，需要设计师不断审视用户的浏览顺序是否真如我们期望的层级1到2到3…，包括页面大模块和模块内的浏览，这些浏览顺序会在页面上形成视觉流；

审视页面视觉流能帮助我们判断用户浏览页面是否顺畅，浏览的顺序是否有规律可循；如果我们的设计不能有效引导用户的视线，用户的浏览更趋向于随机性，就难以将希望表达的信息快速传到到位。

下面的内容主要是介绍比较典型的视觉流及每种类型的特征，包括：

· 线性视觉流

· 导向性视觉流

· 跳动性视觉流

· 放射性视觉流

1）线性视觉流

· 横向视觉流引导用户视线从左到右或从右到左视觉流动，是最符合用户视觉习惯的浏览方式，给人稳定可信之感。

如digg.com首页，整体页面和单个模块都是典型的横向视觉流，用户从左到右浏览到边界后，视线回扫到下一行继续从左到右阅读；这里会有一个横向浏览最佳区域的数值，如digg选用的页面宽度为1000px左右，每行展示3个item，用户屏幕的分辨率变大后，这两个数值是否应该继续增加，增加到什么程度，是人眼获取信息效率最高的？这个疑问我还没有找到相应的理论或实验支撑，后续再查找资料。

· 纵向视觉流引导用户视线从上到下浏览，由于眼睛纵向的运动方式需要瞳孔不断对焦，当纵向扫视页面模块时效率和横向浏览相差不大，但阅读细节时效率会变低，如纵向排列的文字，更适用于需要逐字阅读的古诗古文；

下图是将原来横向视觉流的digg首页的排版调整后，变成了纵向视觉流，除了大图，用户会选择三栏的其中一列纵向浏览直到找到某一目标信息后，横向浏览细节。

网页界面的纵向高度限制比横向小，因为用户习惯上下滚动来浏览更多信息，当用户还处于确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息；如下图facebook日历界面，时间轴横向排列时，由于宽度受限，需要横向切换或滚动条来查看更多日期：

将时间轴方向调整为纵向，使得用户能通过上下滚动更高效查看当月所有日期。

· 斜线视觉流能营造运动感和速度感，但由于角度倾斜使文字认知上会有一定困难，大量文字信息排列不适合这种视觉流，常用于设计中的点缀或本身信息量比较少的界面，如下图的健身俱乐部海报；

还有网页界面上小范围的斜线视觉流，来体现运动感。

· 曲线视觉流，用户视线会形成个性化的曲线，具有律动和活泼感，这种类型由于眼动幅度较大，长时间大量的运用会产生视觉疲劳，所以不适合大段文字使用，一般会结合图形做曲线视觉流，让用户的视线在图像区域稍作停留；

如下图在曲线视觉流中配上图片，让视线在图片这个节点上稍作停留并浏览这个节点的内容，然后继续延曲线浏览。

2）导向性视觉流

如下图所示，导向性视觉流会设计一个诱导元素吸引用户注意，再通过诱导元素注意到目标信息；常见的诱导元素可以分为线条、形象包括人物或物品、指示符号如箭头字母等。这种视觉流要把握好诱导元素与目标信息的主次关系，纯诱导元素不宜太强，否则会削弱目标信息的传播力度；如果能在诱导元素中包含部分目标信息，可以增加信息传达的有效性。

如下图管子里的红色液体是运动的，吸引用户沿着它运动的方向到达目标消息

前面讲到的内容形式，从图片或符号引导到下一个视觉焦点，从视觉流角度也是导向性类型，下面这两个例子就是在页面局部使用了导向性视觉流

3）跳动性视觉流

在性质相同或相似的信息中，选择突出或感兴趣的信息之间跳动浏览, 给人一种自主选择的权利，但设计上也可以通过调整元素的强弱，不露痕迹的传递主次。

如前面提过的模特公司网站界面，模特的照片都是同等性质的信息，用户浏览具有一定的随机性，但通过放大和缩小人像同样也传递了主次。

4）放射性视觉流

视线开端在页面中部，使中间的元素冲击感最强，信息传达最明确，再形成由中部发散出去的视觉运动。

比如很多汽车网站，中间的主图最能体现信息的核心，通过主图再发散到上方的导航或下方的其他服务入口。

以上介绍的四种视觉流类型是比较典型的，但不代表全部，我们也可以设计出更富创意的视觉流，无论是那种路径，用户浏览是否顺畅，信息是否按照主次传递到位，是我们要一直坚守的目标。

最后再总结一下：

1.项目前期我们需要了解页面营造的氛围，内容定位；和交互一起分析信息的优先级，用户的核心行为；前期的准备能帮助视觉设计过程不偏离方向

2. 通过位置、大小、距离、内容形式、色彩这些视觉表现方法来建立信息层级

3. 设计过程和结束都要不断审视页面视觉流，看看用户浏览是否顺畅。

我们有意识的分析用户关注的信息优先级，并通过视觉表现出来，是视觉设计师这个岗位很重要的职责，希望梳理的这些方法能帮助我们将这份职责做的更好，我也乐在其中，与大家共勉！

我和朋友做了一款小程序理论坞 · 打造属于你自己的理论库 ；有很多关于交互的术语、心理学、管理学的定律和理论， 微信扫描 下面小程序码快速体验！