全国免费咨询热线:400-611-9921
 
如何运用视觉表现建立网页的信息层级?

2015-03-06

1500

yangmei:作为视觉设计师,我们的作用除了最基本的满足用户审美需求,还会有品牌传达,信息传达,功能传达等,其中想要信息有效的传达给用户,需要我们建立信息层级,而不是一股脑的丢给用户自己理解,要做到这点有...
如何运用视觉表现建立网页的信息层级?,互联网的一些事
  yangmei:作为视觉设计师,我们的作用除了最基本的满足用户审美需求,还会有品牌传达,信息传达,功能传达等,其中想要信息有效的传达给用户,需要我们建立信息层级,而不是一股脑的丢给用户自己理解,要做到这点有哪些视觉方法,这些方法的背后是否有理论依据,是本文的主题。“互联网的一些事”特推荐此文,大家跟随笔者的步伐,了解如何运用视觉表建立信息层级吧!

 

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

 

如何运用视觉表现建立网页的信息层级?,互联网的一些事
  这个设计方法希望解决的主要是两个问题:

 

  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倍左右;

 

 

如何运用视觉表现建立网页的信息层级?,互联网的一些事
  假如对界面调整如下:焦点新闻图缩小两倍后,可以看出视觉层级的区分就不明显了。

 

 

如何运用视觉表现建立网页的信息层级?,互联网的一些事

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


总结一下:

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

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

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

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



关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
纵天信息技术有限公司公众号
关键词:纵天,广州品牌网站建设公司,广州网站制作公司,广州网站建设,广州网站设计,网站建设,手机网站开发,品牌设计,用户体验
热门标签
广州做网站营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭