《运用视觉表现建立网页的信息层级》由会员分享，可在线阅读，更多相关《运用视觉表现建立网页的信息层级（35页珍藏版）》请在金锄头文库上搜索。
1、设计师必读！运用视觉表现建立网页的信息设计师必读！运用视觉表现建立网页的信息 层级层级作为视觉设计师，我们的作用除了最基本的满足用户审美需求最基本的满足用户审美需求，还会有品品牌传达，信息传达，功能传达牌传达，信息传达，功能传达等，其中想要信息有效的传达给用户，需要我们建立信息层级信息层级，而不是一股脑的丢给用户自己理解，要做到这点有哪些视觉方法，这些方法的背后是否有理论依据，是本文的主题。首先看下面两张图，左图为相机拍摄的效果，右图为人眼不移动时看到的效果，可以发现人眼对信息的获取并不是一次性完成的，它不能同时产生多个焦点从而把视线停留在更多的地方，设计师需要考虑的是让用户通过眼球移动，让用
2、户通过眼球移动，按照一定的顺序获取信息按照一定的顺序获取信息，帮助获取和理解的过程高效自然。这个设计方法希望解决的主要是两个问题：1 1、用户获取和理解信息的效率、用户获取和理解信息的效率建立良好的信息层级，能让用户在有限的时间里，快速获取和理解有用、感兴趣的信息，并产生下一步行为；2 2、设计师的专业性、设计师的专业性设计师有意识的分析信息优先级，了解哪些视觉表现手法可以建立信息层级及每一种方法背后的理论依据，不仅仅凭感觉做设计不仅仅凭感觉做设计。一、前期了解一、前期了解& &分析分析在开始设计前，除了对项目本身的背景目标有所了解外，视觉设计师针对具体的页面也需要了解一些内容以帮助后面的设计
3、有指导方向，包括页面定位、氛围营造、信息优先级和用户核心行为。1.11.1、页面定位页面定位是帮助分析页面信息优先级、核心行为的前提是帮助分析页面信息优先级、核心行为的前提通常有：用户是谁用户来自哪里，即从什么渠道来到该页面页面内容定位，提供什么、不提供什么页面作用1.21.2、了解页面需要营造的氛围、了解页面需要营造的氛围，能帮助我们判断哪些元素能帮助达到目标，氛围可以是内容本身，也可以通过视觉元素设计来营造，但必须注意氛围营造不必须注意氛围营造不应强过用户关注的内容本身应强过用户关注的内容本身氛围可能有：新年主题大促低折扣信息鲜活用户活跃等等以下是大促活动正式页面，左图延续了预热期嘉年华的
4、氛围，但到活动开始阶段氛围已经不是重点，用户更关心商品及折扣本身，右图为调整后将氛围的营造和类目图片相结合，很好的解决了氛围和内容的关系问题。1.31.3、分析信息优先级、分析信息优先级 1）一级信息吸引用户一级信息吸引用户：假设用户只会在这个页面停留 3-5 秒，最能够吸引最能够吸引用户继续浏览的是页面的核心卖点用户继续浏览的是页面的核心卖点，是一级信息，它必须少而精，在设计上要重点展示。2）二级信息帮助理解二级信息帮助理解：有了一级信息的吸引，用户进一步了解内容而可能停留 3-5 分钟，这时展示二级信息即提炼的精华内容，帮助用户在尽量短时间内理解信息。3）三级信息详细了解三级信息详细了解：
5、前两类信息基本上能帮助用户获取足够的信息，用户如果继续停留更长的时间去详细了解，这类信息量会更多，在设计上视觉层级会靠后，或通过交互方式展示、提供入口跳转。二、建立信息层级的视觉方法二、建立信息层级的视觉方法视觉表现手法主要有以下几种元素，实际设计中为了让效果拉开主次，可能会同时使用多种方法以达到更好的效果：位置大小距离内容形式色彩2.12.1、位置、位置位置是在设计开始就会考虑的元素，人眼观看事物时，总会遵循一些特定的规律，设计上遵循这些规律，能帮助用户更容易、更快捷地看到或理解眼前的事物。其中有两条规律和位置设计元素有关：1）当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优
6、，依次为右上，左下，而右下最差。因此，左上部和上中部被称为左上部和上中部被称为“最佳视最佳视域域” 。例如，网站 logo、商品名、主题等重要信息，一般放在最佳视域内。当然，这种划分也受文化因素的影响，比如阿拉伯文字是从右向左书写的，这时最佳视域就是右上部。下图是摘自摘自张帆、罗琦、宫晓东的网页界面设计艺术教程对一个屏幕划分后，用户对不同位置不同的关注度差别：2）第二条规律是眼睛沿水平方向运动比沿垂直方向运动快而且不易疲劳眼睛沿水平方向运动比沿垂直方向运动快而且不易疲劳，一般先看到水平方向的物体，后看到垂直方向的物体。如下图所示，左右的关注度差别要小于上下关注度差别，如想要体现并列的关系，左右
7、排列会更合适；而如果要拉开差距，仅通过位置来实现，上下排列更容易达到目标。举个例子：如下图时代周刊网站首页，左侧大图是当天的焦点新闻，在信息层级上为一级信息，视觉表现上不仅面积大、内容形式用大图，位置也放在优势区域，可能 98%的用户会先关注到这个区域；假如对设计稿的位置做调整如下，如果焦点新闻图片是第一优先级的信息，虽然它是大图的形式，占的面积也够大，但由于位置不在最佳视域，会被 “Latest Headlines”分散一部分视线，可能只有 60%的用户先看到右侧了；如果信息有主次，就要让视觉表现上拉开差距，而不是一个接近均等的局面如果信息有主次，就要让视觉表现上拉开差距，而不是一个接近均等
8、的局面。3）用户优先关注上部，在网页设计中有首屏首屏的概念，首屏的信息比通过用户拖动滚动条出现的第二、三屏层级要高。由于用户使用的屏幕分辨率不同造成首屏的高度会有差别，根据我们网站的数据，目前分辨率高度为 768 占多数，所以设计时会以 768 高度为基准，去掉浏览器本身的菜单等占用的高度，实际展示给用户的第一屏平均为实际展示给用户的第一屏平均为 600px600px，这个数据会根据以后目标用户的分辨率变化做相应的调整，我们在设计时可用这个数 值作为首屏的参考线。2.22.2、大小、大小在确定了模块的位置后，我们会考虑给这模块多大的地盘，大小会很直观大小会很直观反映信息的重要等级反映信息的重要
9、等级。有个体育海报设计的案例，涉及到四种球类运动包括足球、高尔夫球、棒球、篮球，如果按照实际大小设计会让篮球和足球显得更重要，为了体现体育的平等性，设计上将球的大小做了调整。Giles Colborne 的简约至上书中的结论可以指导我们通过大小拉开差距：1 1）重要的元素要大一些，即使比例失调也可以考虑重要的元素要大一些，即使比例失调也可以考虑2） 要想办法表现出差距，若一个元素的重要性是若一个元素的重要性是 2 2，那就把它的大小做成，那就把它的大小做成4 4 还是以时代周刊首页为例，目前的设计左侧的焦点新闻图占的面积和中间新闻图对比拉开了差距，使得用户容易先关注到一级信息而且不容易被周边干
10、扰；我们对两个新闻图片的面积进行对比可以看到差距有 4 倍左右；假如对界面调整如下：焦点新闻图缩小两倍后，可以看出视觉层级的区分就不明显了。除了元素本身所占的面积会影响视觉层级，元素的细节放大程度也同样起到作用，细节放大后，人眼会感受到元素更清晰，离眼睛更近而容易先去关注，当然前提是保证信息可被理解，如果局部细节放大但用户不能理解信息是什么就不能起到吸引用户的作用；下图是一个模特公司的网站，首页上随机出现模特的照片包括面部和半身照片，放大脸部特征后的照片保证了用户能理解这是一个模特的形象，使得用户会优先关注细节放大的照片。2.32.3、距离、距离前面讲到的将元素的细节放大，眼睛会感受离它更近而
11、被优先注意到，虽然信息展现的媒介是个平面，但是通过视觉手段能体现出三维的效果，除了大小，还有其他视觉手法如下：1 1）拉远三维距离）拉远三维距离想要达到距离被拉远的效果，下面列举的方法是让信息变得不清晰，眼睛看起来无法对焦到信息上面，包括：模糊元素：模糊元素：图背景的人物被模糊后，使它和两个行动点以及右侧的图标不在一个平面上，离眼睛更远，用户在进行行动点和文字识别时也不会被模糊的背景所干扰；降低透明度降低透明度也同样可以起到作用，当有些背景图模糊后比较难被整体感知，选择降低透明度也能拉远距离。增加半透明图层增加半透明图层，在界面色彩或元素比较多的情况下，仅降低透明度也可能无法拉开距离，如下图希
12、望突出 TV 购时，其他四个模块降低透明度后由于本身色彩比较丰富而没有明显拉开差距，通过加上灰色的半透明图层后，TV 购以外的模块自然的退到视线后面了。2 2）拉近三维距离）拉近三维距离增加投影增加投影是最常用到的让元素看起来和其他内容不在同一平面的视觉手法，通常像弹出框、鼠标移上后出现的浮层等由于要压在其他信息之上，增加投影能帮助用户聚焦在带投影的模块而不受下面信息的干扰。3）除了三维，二维距离对视觉层级也有影响，根据格式塔心理学接近性定律，距离较短或互相接近的部分容易组成整体；人眼对距离临近的信息更容易人眼对距离临近的信息更容易先去关注先去关注，在视觉手法应用上，元素距离上一个焦点近的，视
13、觉层级高元素距离上一个焦点近的，视觉层级高。如下图，第一层级的新闻焦点图和右侧的小图片比较临近，视线容易往右上角运动；对距离做了调整后，虽然中间的小图片本身比文字更吸引人，但由于焦点图下方的标题距离更近而形成整体，视线容易先往下运动。2.42.4、内容形式、内容形式确定了模块的位置、大小和距离关系后，我们会继续考虑内容的形式包括视频、图片、文字等，这里主要讲我们经常使用的图形和文字经常使用的图形和文字；相比起文字，图片在抓住用户眼球这一点上是功不可没的，同时还能使用户在短时间内形成形象记忆，从视觉层级上，人眼一般会先关注图后关注文字。但仅仅这点还不够，通过图片抓取用户眼球后引导视线到下一个关注
14、点引导视线到下一个关注点，是设计上更多会考虑的点，概括有以下表现手法：1 1）方向性引导）方向性引导图片中的形象有些具有明显的方向性形象有些具有明显的方向性，如人眼注视的方向、手势所指的方向、物体运动方向、光照方向等，这些特征会引导人眼视线朝着设定的方向运动，从而达到视觉层级有主有次。下图假设中间的人物首先吸引了人的视线，为第一层级的信息，由于人眼注视方向为右侧，使得用户关注的下一个目标会转向“coder”文字，为第二层级的信息。下图 WHAT WE DO 位置在左上角容易先被关注，同时右侧的人物形象占的篇幅较大也会抢视线，但由于人物运动的方向下没有其他信息，图片没有充分发挥引导的作用，用户浏
15、览起来会不太顺畅。经过调整后的效果，虽然“WHAT WE DO”位置上并不在优势区域，但通过图片方向的引导很自然的让人眼落在文字信息上。2 2）符号引导）符号引导除了图片，一些符号本身带有顺序和方向性一些符号本身带有顺序和方向性，也能有效引导视线根据符号来浏览，包括阿拉伯数字、字母顺序、时间顺序、箭头等。下图的排行榜前三名，虽然用户更习惯从左到右阅读，但由于数字的引导，视线也会被影响而按照 123 的顺序阅读，如果希望这样的顺序更加明显，可以再通过放大 1 的图片大小，拉开差距，结合多种视觉方法达到效果。时间轴时间轴在界面中应用也很广泛，人眼会受时间顺序的影响去浏览信息，甚至会打破常规的如从左
16、到右的浏览习惯，如下图虽然 2 的位置更容易引导用户优先浏览，但时间轴对信息的影响更明显，一般用户会优先查看模块 1，再根据时间先后从右向左关注模块 2。2.52.5、色彩、色彩色彩是影响用户对界面第一印象的重要因素色彩是影响用户对界面第一印象的重要因素，色彩的应用对视觉层级的影响也能起到立竿见影的效果，总结起来人眼对色彩的关注度差别主要是以下两点：1 1）先暖色后冷色）先暖色后冷色色彩的不同色相，对人眼的刺激及产生的反映目前没有找到绝对的先后顺序，但是冷色类和暖色类色彩，是有明显的层次差别的，如下图，人眼一般会优先看到左侧的图片，这和我们人眼对不同波长的反映有一定关系。从生理学上讲，人眼晶状体的调节，对于距离的变化是非常精密和灵敏的，我们能判断出物体离我们的远近，但是它有一定的限度，对于波长微小的差异就无法正确调节。眼睛在同一距离观察不同波长的色彩时，波长长的暖色如红、橙等色，在视网膜上形成内侧映像；波长短的冷色如蓝、紫色等，则在视网膜上形成外侧映像。因此，暖色好象在前进，冷色好象在后退暖色好象在前进，冷色好象在后退。美国数字营销公司 H
