篮球介绍英语
当前位置:主页 > 网页教程 > 设计制作综合 > 内容欢迎大家投稿

运用视觉表现建立网页的信息层级

时间:2014-02-27 18:20来源:未知 作者:大宝库 点击:读取中
阅读工具字体

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

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

运用视觉表现建立网页的信息层级 三联

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

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

建立?#24049;?#30340;信息层级能让用户在有限的时间里快速获取和理解有用感兴趣的信息并产生下一步行为;

2设计师的专业性

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

一前期了解&分析

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

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

通常有

用户是谁

用户来自哪里?#21019;?#20160;么渠道来到该页面

页面内容定位提供什么不提供什么

页面作用

举个例子

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

P3

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

氛围可能有

新年主题大促

低折扣

信息鲜活

用户活跃等等

以下是大促活动正式页面左图?#26377;?#20102;预热期?#25991;?#21326;的氛围但到活动开始阶段氛围已经不是重点用户更关心商品及折扣本身右图为调整后将氛围的营造和类目?#35745;?#30456;结合很好的解决了氛围和内容的关系问题

P4

1.3分析信息优先级

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

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

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

P5

1.4分析用户核心行为

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

?#28909;?#21830;品详情页面有些用户在决定购买之前会查看用户评价历?#26041;?#26131;等内容但这些查看的行为最终是帮助用户判断是否购买这个商品所以核心行为是最终导向的购买

P6

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

P7

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

P8

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

视觉表现手法主要有以下几种元素?#23548;?#35774;计中为了让效果拉开主次可能会同时使用多种方法以达到更好的效果

位置

大小

距离

内容?#38382;?/p>

色彩

2.1位置

位置是在设计开始就会考虑的元素?#25628;?#35266;看事物时总会遵循一些特定的规律设计上遵循这些规律能帮助用户更容易更快捷地看到或理解眼前的事物其中有?#25945;?#35268;律和位置设计元素有关

1)当眼睛偏离视中心时在偏离距离相等的情况下?#25628;?#23545;左上的观察最优依次为右?#24076;?#24038;下而右下最差因此左上部和?#29616;?#37096;被称为“最佳视域”例如网站logo商品名主题等重要信息一般放在最佳视域内当然这种划分也受文化因素的影响?#28909;?#38463;拉伯文字是从右向左书写的这时最佳视域就是右上部

下图是摘自摘自张帆 罗琦 宫晓东的网页界面设计艺术教程对一个屏幕划分后用户对不同位置不同的关注度差别

P9

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

P10

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

P11

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

P12

3)用户优先关注上部在网页设计中有首屏的?#25293;?#39318;屏的信息比通过用户拖动滚动条出现的第二三屏层级要高

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

2.2大小

在确定了模块的位置后我们会考虑给这模块多大的地盘大小会很直观?#20174;?#20449;息的重要等级

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

P13

Giles Colborne的?#37117;?#32422;至上书中的结论可以指导我们通过大小拉开差距

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

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

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

P14

我们对两个新闻?#35745;?#30340;面积进行?#21592;?#21487;以看到差距有4倍左右;

P15

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

P16

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

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

P17

2.3距离

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

1)拉远三维距离

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

模糊元素

图背景的人物被模糊后使它和两个行动点以及右侧的图标不在一个平面?#24076;?#31163;眼睛更远用户在进行行动点和文字识别时也不会被模糊的背景所干扰

P18

降低?#35813;?#24230;也同样可?#20113;?#21040;作用当有些背景图模糊后比较难被整体感知选择降低?#35813;?#24230;也能拉远距离

P19

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

P20
pp

2)拉近三维距离

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

P21

3)除了三维二维距离对视觉层级也有影响根据格式塔心理学接近性定律距离较短或互相接近的部分容易组成整体;?#25628;?#23545;距离临近的信息更容易先去关注在视觉手法应用?#24076;?#20803;素距离上一个焦点近的视觉层级高如下图第一层级的新闻焦点?#24049;?#21491;侧的小?#35745;?#27604;较临近视线容易往右上角运动;

P22

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

P23

2.4内容?#38382;?/p>

确定了模块的位置大小和距离关系后我们会继续考虑内容的?#38382;?#21253;括视频?#35745;?#25991;字等这里主要讲我们经常使用的图形和文字;相比起文字?#35745;?#22312;抓住用户眼球这一点上是功不可没的同时还能使用户在短时间内形成形象?#19988;?#20174;视觉层级?#24076;搜?#19968;般会先关注?#24049;?#20851;注文字但仅仅这点还?#36824;?#36890;过?#35745;?#25235;取用户眼球后引导视线到下一个关注点是设计上更多会考虑的点概括有以下表现手法

1)方向性引导

?#35745;?#20013;的形象有些具有明显的方向性如?#25628;?#27880;视的方向手势所指的方向物体运动方向光照方向等这些特征会引导?#25628;?#35270;线朝着设定的方向运动从而达到视觉层级有主有次

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

P24

下图WHAT WE DO位置在左上角容易先?#36824;?#27880;同时右侧的人物形象占的篇幅较大也会抢视线但由于人物运动的方向下没有其他信息?#35745;?#27809;有充分发?#21491;?#23548;的作用用户浏览起来会不太顺畅

P25

经过调整后的效果虽然“WHAT WE DO”位置上并不在优势区域但通过?#35745;?#26041;向的引?#24049;?#33258;然的让?#25628;?#33853;在文字信息上

P26

2)符号引导

除了?#35745;?#19968;些符号本身带有顺序和方向性也能有效引导视线根据符号来浏览包括阿拉伯数字字母顺序时间顺序箭头等

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

P27

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

P28

2.5色彩

色彩是影响用户对界面第一印象的重要因素色彩的应用对视觉层级的影响也能起到立?#22270;?#24433;的效果总结起来?#25628;?#23545;色彩的关注度差别主要是以下两点

1)先暖色后冷色

色彩的不同色相对?#25628;?#30340;刺激及产生的?#20174;?#30446;前没有找到绝对的先后顺序但是冷色类和暖色类色彩是有明显的层次差别的如下图?#25628;?#19968;般会优先看到左侧的?#35745;?#36825;和我们?#25628;?#23545;不同波长的?#20174;?#26377;一定关系;

P29

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

P30

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

这个测?#28304;?#19968;定程度上?#20174;?#20102;暖色对用户关注度和行动力的影响当然并不是说为了提高点击率就要用暖色具体的色?#21490;?#26684;还是要根据产品定位来设计

P31

2)先高反差后低反差

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

P32
pp1

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

色相反差下图中主色调为蓝色蓝色行动点和整体颜色一致层级相对?#20808;?#32780;绿色行动点和蓝色在色相上的反差使得层级变高

P33

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

P34

饱?#25237;确?#24046;和明度反差比较容易理解而且他们有数值可以控制两个颜色之间饱?#25237;然?#26126;度数值相差越大反差也就越大反之亦然看看具体的?#36947;?#22914;以下?#24049;?#22270;当前的人物icon明度较高和低明度黑色背景形成高反差而容易先被注视

P35

以下环状饼图已完成的百分比饱?#25237;?#39640;和总体低饱?#25237;?#24418;成?#21592;x?#30456;同色相通过饱?#25237;?#36827;行?#21592;?#19981;仅能拉开差距形成视觉层级同时视觉效果具有整体性

P36

总结一下上面讲到的视觉表现手法形成表格方便大家?#19988;?#22914;下

P37

三审视页面视觉流

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

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

下面的内容主要是介绍比?#31995;?#22411;的视觉流及每种类型的特征包括

线性视觉流

导向性视觉流

跳动性视觉流

放射性视觉流

1)线性视觉流

横向视觉流引导用户视线从左到?#19968;?#20174;右到左视觉流动是最符合用户视觉习惯的浏览方式给人稳定可信之?#23567;?/p>

P38

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

P39

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

P40

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

P41

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

P42

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

P43

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

P44

还有网页界面上小范围的斜线视觉流来体现运动?#23567;?/p>

P45

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

P46

如下图在曲线视觉流?#20449;?#19978;?#35745;?#35753;视线在?#35745;?#36825;个节点上稍作停留并浏览这个节点的内容然后继续延曲线浏览

P47

2)导向性视觉流

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

P48

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

P49

前面讲到的内容?#38382;?#20174;?#35745;?#25110;符号引导到下一个视觉焦点从视觉流角度也是导向性类?#20572;?#19979;面这两个例子就是在页面局部使用了导向性视觉流

P50
P51

3)跳动性视觉流

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

P52

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

P53

4)放射性视觉流

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

P54

?#28909;?#24456;多汽车网站中间的主图最能体现信息的核心通过主图再发散到上方的?#24049;交?#19979;方的其他服务入口

P55

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

总结一下

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

2. 通过位置大小距离内容?#38382;健?#33394;彩这些视觉表现方法来建立信息层级

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

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

(责任编辑大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接


Ӣ