IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

交互小细节——信息层级展示规则

Catherine • 2017-05-20 03:15 • 交互设计

信息层级展示规则是交互设计中的小细节。要分析信息的优先级,用户的核心行为;并通过位置、大小、距离、内容形式、表现方法来建立信息层级;设计过程和结束都要不断审视页面视觉流,看看用户浏览是否顺畅。作为设计师的你,注意到了吗?

文章目录[隐藏]

  • 1.前期的了解和分析
    • (1)页面定位是帮助分析页面信息优先级、核心行为的前提
    • (2)了解页面需要营造的氛围
    • (3)分析信息优先级
    • (4)分析用户核心行为
  • 2.建立信息层级的视觉方法
    • (1) 位置
    • (2)大小
    • (3) 距离
    • (4)内容形式
    • (5)色彩
  • 3.审视页面视觉流
    • (1)线性视觉流
    • (2)导向性视觉流
    • (4)放射性视觉流
  • 4、小结

信息层级展示规则是交互设计中的小细节。要分析信息的优先级,用户的核心行为;并通过位置、大小、距离、内容形式、表现方法来建立信息层级;设计过程和结束都要不断审视页面视觉流,看看用户浏览是否顺畅。作为设计师的你,注意到了吗?

交互小细节——信息层级展示规则

2016年8月26日,照旧收到招商的账单通知,一眼就绝望的数字,然后我忽然发现了惊喜。它的展示样式发生了变化。

交互小细节——信息层级展示规则

特意截图对比两个不同的信息展示。在没有看新版之前,看旧版也没有什么问题,我依旧可以获取到我想获取的信息。都是信息展示,能有什么差异呢?我们来看看新版,可以明显地看到三个层级:黑色的文字,灰色的文字,绿色的按钮。信息拆解的更清楚。这一堆信息里,用户主要想关注什么?产品本身又想传达什么?用户需要知道这是什么?标题强化告知用户这是信息是什么?用户关注的信息账单、最低还款信息强化。而对应的账单日期等用户的关注度更低。增加一个功能:立即还款。选用绿色很清晰的就可以看见。

改动不大不小,也许有些用户根本感知不到,但可以肯定的是用户获取有效信息的时间更短了,速度越快了。我想这就是设计中的小较真,小细节。

带着这个小较真开始去翻信息展示的规则。看过一个实验,我们真实看到的信息跟我们眼睛实际获取的不一样。看下面两张图,左图为相机拍摄的效果,右图为人眼不移动时看到的效果,可以发现人眼对信息的获取并不是一次性完成的,它不能同时产生多个焦点从而把视线停留在更多的地方,设计师需要考虑的是让用户通过眼球移动,按照一定的顺序获取信息,帮助获取和理解的过程高效自然。

交互小细节——信息层级展示规则

与之相匹配的设计准则主要有两个:

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

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

2、设计师的专业性

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

小tips

1.前期的了解和分析

在开始设计前,除了对项目本身的背景目标有所了解外,也需要了解一些内容,页面的信息层级和用户的核心行为。

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

通常有:

  • 用户是谁
  • 用户来自哪里,即从什么渠道来到该页面
  • 页面内容定位,提供什么、不提供什么
  • 页面作用

举个例子:

在设计数据分析的首页时,因为新增很多的功能,整个框架大调整,通过对页面的用户对服务的熟知度进行分析,确定首页的最核心功能是传达产品的基本功能。

交互小细节——信息层级展示规则

(2)了解页面需要营造的氛围

了解页面需要营造的氛围,能帮助我们判断哪些元素能帮助达到目标,氛围可以是内容本身,也可以通过视觉元素设计来营造。

一般运营页面和产品主页比较多,营造页面氛围传达信息。

(3)分析信息优先级

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

2)二级信息帮助理解:针对一级信息进行解释,提炼精华内容,帮助用户在尽量短时间内理解信息;

3)三级信息详细了解:一级和二级信息已经很好的解释,三级信息做补充,更多的做为一个展示或者入口,提供跳转功能。

交互小细节——信息层级展示规则

(4)分析用户核心行为

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

交互小细节——信息层级展示规则

有了这些分析,交互产出物文档中会给予大模块的信息优先级和用户行为优先级,哪些需要重要展示,哪些信息可以弱化。交互稿可以通过黑白灰眼色来展示页面的信息层级。

2.建立信息层级的视觉方法

表现手法主要有以下几种元素:

  • 位置
  • 大小
  • 距离
  • 内容形式
  • 色彩

(1) 位置

提到信息展示规则就不得不提格式塔原则。位置的摆放是在设计开始就会考虑的元素,视线扫描事物时,总会遵循一些特定的规律,设计上如果遵循这些规律,就能够帮助用户更容易并且更高效地看到或者理解信息。

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

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

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

虽然这个更多是视觉设计师的工作,但是输出交互原型的时候也应该考虑到这些细节问题,重要的信息展示在第一屏。由于用户使用的屏幕分辨率不同造成首屏的高度会有差别,根据网站的数据,分辨率的高度取多数值,根据多数值为基准,去掉浏览器本身的菜单等占用的高度,然后给出实际的展示高度。这个数据根据以后目标用户的分辨率变化做相应的调整,在设计时可用这个数值作为首屏的参考线。

(2)大小

在确定了模块的位置需要考虑给这个模块多大的地盘,大小往往直观反映信息的重要程度。

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

交互小细节——信息层级展示规则

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

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

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

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

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

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

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

交互小细节——信息层级展示规则

(3) 距离

前面讲到的将元素的细节放大,眼睛会感受离它更近而被优先注意到虽然信息展现的媒介是个平面,但是通过视觉手段能体现出三维的效果,除了三维,二维距离对视觉层级也有影响。根据格式塔心理学接近性定律,距离较短或互相接近的部分容易组成整体;人眼对距离临近的信息更容易先去关注,在表现手法应用上,元素距离上一个焦点近的,层级更高。如下图,第一层级的新闻焦点图和右侧的小图片比较临近,视线容易往右上角运动;

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

(4)内容形式

确定模块的位置、大小和距离关系后,我们会考虑内容的形式包括视频、图片、文字等。相比起文字,图片在抓住用户眼球这一点上是功不可没的,同时还能使用户在短时间内形成形象记忆。从视觉层级上,人眼一般会先关注图后关注文字。

(5)色彩

1)先暖色后冷色

交互小细节——信息层级展示规则

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

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

交互小细节——信息层级展示规则

3.审视页面视觉流

设计师不断审视用户的浏览顺序是否真如我们期望的层级1到2到3……包括页面大模块和模块内的浏览,这些浏览顺序会在页面上形成视觉流;审视页面视觉流能帮助我们判断用户浏览页面是否顺畅,浏览的顺序是否有规律可循;如果我们的设计不能有效引导用户的视线,用户的浏览更趋向于随机性,就难以将希望表达的信息快速传到到位。

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

  • 线性视觉流
  • 导向性视觉流
  • 跳动性视觉流
  • 放射性视觉流

(1)线性视觉流

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

交互小细节——信息层级展示规则

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

之前在小浪做门户网站的时候也做过相对应的研究,页面宽度的增加,4个item是最合适的宽度。不过后续没有验证。

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

(2)导向性视觉流

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

交互小细节——信息层级展示规则

(3)跳动视觉流

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

交互小细节——信息层级展示规则

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

(4)放射性视觉流

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

交互小细节——信息层级展示规则

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

交互小细节——信息层级展示规则

七七八八说的四种视觉流类型是比较典型的,但不代表全部。无论是那种路径,用户浏览是否顺畅,信息是否按照主次传递到位,是我们要一直坚守的目标。

4、小结

最后归纳:

1.分析信息的优先级,用户的核心行为;

2. 通过位置、大小、距离、内容形式、表现方法来建立信息层级;

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

 

作者:阮小阮

来源:微信公众号【阮的梦空间】

版权:人人都是产品经理遵循行业规范,任何转载的稿件都会明确标注作者和来源,若标注有误,请联系主编QQ:419297645

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28148/

logoPS交互交互设计产品产品经理信息层级原型展示规则微信心理学格式塔原则理论用户用户行为界面设计网页设计视觉视觉设计设计设计师资料转载运营页面视觉流
赞 (0)
CatherineCatherine
0
生成海报
用好这些可用性原则,你就能简单做好交互设计!
上一篇 2017-05-20 02:10
译文|移动体验设计禁忌
下一篇 2017-05-20 04:21

相关推荐

  • 微信热点

    观点 | 交互设计在未来会多火?

    周一:AE动效 | 如何入手创作才能更加真实?周二:马克笔如何通过"叠加技法"精准调色周三:更快更好 | 手绘板也能比着尺子画!?周四:观点 | 交互设计在未来会有多火?周五:开拓视野 | 哪些用户体验很棒的APP设计好在哪里周六:如何看懂艾迪.斯理曼的Dior Homme周日:学珠宝设计我们推荐给你的必看书目交互设计是什么?对你而言,它可能还是未知数。让我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计...

    2018-04-06
  • 交互设计

    三招两式讲需求,看完你们也懂需求了

    美国一家市场研究公司通过分析101家科技创业公司的失败案例,总结出了创业公司失败的20大主要原因,排名首位的就是:No Market Need!据统计42%的失败创业公司出现过这个问题,创始人执着于执行自己的创意,却没有…

    2023-03-03
  • 微信热点

    开始自己的建筑笔记 | Sketch Journal 作品展示

    大家是否在网络时常看到精美的建筑师手绘本?是否也准备打造一本属于自己的建筑笔记?今天为大家带来笔者大一阶段的Sketch Journal。笔记虽不算精美,但却是自己一年辛勤努力后的结果,它记录的不只是这一年的想法,更是自己一年的学习历程。相信这也是大家在不断完成自己的建筑笔记时最享受的一个过程吧。建筑笔记的几点心得:慎用大尺度手绘本!笔者本科第一年的Sketch Journal选择了A3尺寸,结局是很悲惨的。你需要付出比常人多的时间去完...

    2018-04-21
  • 微信热点

    电梯按钮的交互设计

    开始注意和观察电梯的按钮面板,是因为觉察到自己因常乘的两部电梯设计细节方面的种种不同而陷入了混乱。电梯常常会和自己"想的不一样",即预设的或已建立的心理模型失效了,我们不得不重新审视电梯的操作面板,重新建立心理模型,找到对应的按钮。如果日常常搭乘几部电梯,它们之间的操作规则和心理模型还不一样的话,一是容易让人混乱,二则给人增加了记忆负担,实在是很麻烦。觉得这一小块可操作区域很有趣很值得分析之后,好奇之下找了不少图进行研究,五花八门的设计...

    2018-02-06
  • Mate S、S6 edge+用户交互设计对比体验 交互设计

    Mate S、S6 edge+用户交互设计对比体验

    每年竞争激烈的手机市场中都会带给我们消费者惊喜。在配置性能等硬实力愈发相近的情况下,各厂商在外观,材质,以及操作系统包括界面优化,交互设计等方面都下足了功夫,来为消费者提供具有各具特色的使用体验,以…

    2015-11-10
  • # 干货收藏!一张图教你看懂产品的一生! 交互设计

    # 干货收藏!一张图教你看懂产品的一生!

    这是Laura Klein创作的一个产品思考图表,你可以在它的指引下一步一步去分析你自己的产品。 思考一下你的产品在每个环节的表现如何,找到较为薄弱的部分,然后想想如何去改善它,接下来就乖乖的回去改线框图吧,把…

    2016-03-15
  • 一篇文章读懂用户体验(下) 交互设计

    一篇文章读懂用户体验(下)

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,我觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。举个栗子:假设我是个潮人,同时我也是个医生,那我就有两个角色。如果给我设计一款音乐播放器,应该给我一款酷炫的,我会喜欢。但当我坐在办公桌边,给病患开药的时候,我电脑的开药软件需要很酷炫吗?我一边摇晃脑袋踩着节奏,看着充满特效的界面开出来的药,你敢吃吗?所以医院的软件需要简洁,保证开药的准确度。(然而需要强烈的视觉表达情绪的设计例外)。

    2017-06-01
  • 微信热点

    用户体验 | 6个细节成就了今天的X1 Carbon 2018(下篇)

    上篇我们聊了Logo配色、ThinkShutter以及电源键设计,这一次我们一起来看看外形设计、移动便携和扩展能力ThinkPad X1 Carbon 2018在用户体验上有什么有趣的故事吧!一条曲线的神奇虽然建筑师高迪说直线属于人类,而曲线属于上帝,而逐渐读懂曲线的意义,思考曲线与直线之间合理应用,这整个的过程正是人类自我救赎和思想进化的过程。纵观笔记本变化的历史,外形和颜色往往决定着“颜值”,改变外形或者颜色设计的情况比比皆是,连M...

    2018-03-22
  • 在交互稿完成前,记得开一场需求评审会 交互设计

    在交互稿完成前,记得开一场需求评审会

    需求评审会是交互稿完成之前,最为重要、参与成员最多的一次会议。

    2017-05-11
  • 聊聊为应用创建「一致性设计」的几个原则 交互设计

    聊聊为应用创建「一致性设计」的几个原则

    我们在创造某些体验后,需要一些理由给它们做出定义。伟大的设计是无形的,因为他们具有一致性,并让人熟悉。

    2017-05-24
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress