如何在设计中建立良好的视觉层级
2013-10-22 23:34:12;  来源:;  作者:;  评论:0 点击:

随着互联网信息爆炸式增长,用户浏览单个网页时,并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看,为什么?一、视觉层级为什么重
\

随着互联网信息爆炸式增长,用户浏览单个网页时,并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看,为什么?

一、 视觉层级为什么重要

\

左侧是设计师期望用户的浏览方式,右侧为用户实际的浏览方式—摘自《Don’t make me think》
用户来到一个网站有他自己特定的目标,如阅读新闻、购物、查看新消息,然而信息量太大,逐一查看需要大量时间,这就要求网站能抓住主流用户特征,将重点推送给他,用户找到自己的目标或感兴趣的点,才有可能继续浏览或产生下一步动作,否则就会离开。
用户时间有限加上互联网信息量巨大,这两项原因正是考验视觉设计师要建立良好的视觉层级呈现给用户,帮助用户快速找到目标的功力。

二、 建立良好视觉层级的作用

1、 提高识别效率
2、 激发受众兴趣
举几个例子:

\

左地图是市级展示的地名,当用户搜索到街道级别时,才会把本街区内的店铺展示给用户,在特定的情况下只展示必要的信息,有利于用户高效找到自己的目标

\

我们看新闻时首先要关注的当天的头条新闻,其次是编辑推荐的,时代周刊首页很好的让头条新闻和logo一起第一眼被我们捕捉到,主次处理的很清晰

\

辛德勒名单电影中的某镜头,通过色彩强烈的对比拉开视觉层次,给观众留下了深刻的印象同时成为经典

三、 如何建立视觉层级

我整理了三个方向内容供大家参考:

1、决定不要展示什么

页面简约的前提是所呈现的内容都是主流用户多数情况下必需的,这样可以让设计师专注于解决有限的重要问题,而不是大量的信息没有经过筛选就开始排列优先级

\

上图是我们家中常用的遥控器,大多数功能使用量很少甚至一次都没有用过,右图将不常用的功能键做简单的删除,前后对比,后者看起来让人轻松多了—摘自《简约至上》
再由设计师对剩下的按键进行设计,相信遥控器使用起来会更简单,干扰更少。

\

Outlook邮件网页界面,默认情况下对邮件的操作入口都是隐藏的,只有当用户选择了邮件之后,才会出现对邮件的操作,同时不常用的操作也会被隐 藏到下拉菜单中,如“答复”菜单下隐藏的“全部答复、转发”,这种隐藏非核心内容的处理方式,能让用户更集中于他可关注的信息和主要操作

2、 深度加工信息

\

为了更快速的让信息被感知和接收,我们需要对信息进行加工,简单的文字罗列需要用户静下心阅读,而经过深层分析的比表层分析的信息,给用户留下的印象会深刻很多。

\

举个例子:国家地理蓝鲸网站 为了呼吁保护蓝鲸,首先要让人们了解蓝鲸的特征及当前的威胁,网站通过动态的将蓝鲸与其他生物和人造物进行对比,形象直观的传达蓝鲸的重量、大小,加上视频展示目前蓝鲸的主要生活威胁,用户即使不阅读文字也能大致明白网站想要传达的信息

3、组织信息

1) 表达信息之间的关系

信息之间的关系有并列、关联、包含、因果等,每种关系都可以通过多种视觉表现形式来传达,这块可以深入去探讨,我大致举一些实际项目过程中对信息关系处理的案例,来看看前后的变化

信息的关联

\

设计中的留白是很重要的元素,它能很直接的影响用户对信息关联关系的理解,如上图,因为留白的不当,“楚中天”被轻易理解为“林蛋大”

信息的并列

\

对软件中众多功能进行并列的分块组织,能让用户在大块中再寻找小块,提高识别效率,如Excel界面,当我们想要对字体样式进行编辑时,能很快定位到第二模块进行寻找,而不受其他模块的干扰

案例:外贸邮界面优化

\

上面的是我们外贸邮界面目前的状态,所有的操作都并列摆放,随着功能的增多,用户识别的效率大大降低,优化的方案是将相关的操作进行分组,正是运用关联和并列的信息关系进行设计

信息的因果顺序关系

\

上图是一个减肥饮料的广告,通过前后人物的变化,轻松的表达产品的功效,而在我们网页界面中,主要还是通过色彩的对比和方向指向来传达顺序关系
如常见的步骤条,当前步骤为最显著焦点,已进行的为二级,让人感受为已激活的,未走过的步骤为灰色,层级最弱

\

下图是PayPal支付页面的一次优化过程,老版视觉虽然有层级区别,却打乱了完成任务的视线顺序,优化后强调行动点,行动前的视觉顺序在同一方向上,顺序的关系很明显,能提升用户的任务完成率。

\

信息的包含关系

\

Fluent新型电子邮件界面,箭头指向、缩进的表现形式很清晰的表达信息的包含关系,虽然这个创业团队没有成功,但产品的设计还是很值得借鉴的
本文属转载文章,并不能保证完全正确,只供学习交流参考,版权归原作者所有。如果您认为有侵犯权利等不和法行为,请联系我们及时改正。http://www.zhuitaiyang.com/html/sheji/454.html

相关热词搜索:设计 视觉层 视觉层级

上一篇:我们为何要在设计中重视“留白”
下一篇:25 个 404 错误页面的设计创新灵感

收藏
回到顶部