Design设计交互设计

用户体验的要素:表现层

2016-11-15  本文已影响715人  IvanHung

七、表现层:感知设计

在表现层,内容、功能和美学汇集到一起来产生一个最终设计,完成其他四个层面的所有目标,并同时满足用户的感官感受。

1.表现层定义

在框架层,我们主要解决放置的事情。表现层则要解决并弥补“产品框架层的逻辑排布”的感知呈现问题。通过关注视觉设计,我们决定信息设计的安排在视觉上应该如何呈现。

2.合理设计感知

我们的每一次经历最终是通过我们的感官器官来进行的:


嗅觉和味觉:用户体验设计师较少考虑的范畴。比较相关的例子:新车的气味。

触觉:通过振动与用户互动。如果是实物,会包括外形、材质、原料等。

听觉:用来通知用户,也可以让产品更具个性。

视觉:把注意力集中在“运作是否良好”,而不是“什么具有美感(受个人品味影响大)”上,即视觉设计对之前层面确定的目标的支持效果如何,例如视觉设计可以传达品牌形象。

3.忠于眼睛

评估一个产品视觉设计的简单方法之一,是提出这样的问题:视线首先落在什么地方?哪个设计要素在第一时间吸引了用户的注意力?它们是对于战略目标来讲是很重要的东西吗?用户第一时间注意到的东西与他(或你)的目标背道而驰吗?

一般来说,人们视线的移动方式遵循着相当一致的模式。如果你的设计是成功的,用户眼球的移动轨迹的模式应该有以下两个重要的特点。


首先,它们遵循的是一条流畅的路径。如果人们评论一个设计是忙碌或拥挤时,这表示这个设计没能顺利地引导他们在页面上移动。他们的眼睛在各种各样的元素之间跳来跳去,所有元素都在试图引起他们的注意。

其次,在不需要太多细节来吓到用户的前提下,它为用户提供有效选择的、某种可能的“引导”。这些引导应该支持用户试图在此刻通过与产品交互去完成的某个目标或任务,且不应该分散用户对那些“能完成目标的信息或功能”的注意力。

4.对比和一致性

对比(contrast)是用于吸引用户注意的一个主要工具,把用户的注意力吸引到界面中的关键部分,帮助用户理解页面导航元素之间的关系,传达信息设计中的概念群组。如下图,左上毫无重点,右上引导用户视线方向,左下突出几个重点,右下过度对比显得杂乱。

对比

在设计中保持一致性(uniformity)是另一个重要的组成部分。例如将视觉元素的大小保持一致的尺寸;基于栅格线(grid-based layout)的布局,基于栅格线的方法是通过使用母版来确保设计的一致性,各种布局都是按照这个模板来创建的。

一致性

5.内部和外部的一致性

内部一致性的问题:在产品的不同地方反映了不同的设计方法

外部一致性的问题:这个产品没有在同一个企业的其他产品中,反映出被使用的、相同的设计方法。

确定有可能在产品各种各样的导航、界面和信息设计等不同环境中反复出现的设计元素,把它们独立出来统一设计。不过在使用时也需要适应环境而调整。

用一个统一的品牌识别形象强化呈现出来的产品的一致性。

6.配色方案和排版

核心的品牌色彩通常是一个配色方案(color palette),可以有效地向外界传递品牌识别。通常,更亮或更醒目的颜色可以用于前景色,更暗淡的色彩用于那些不需要跳出页面的背景元素中。

排版(typography)(包括字体等)对品牌识别也很重要。注意不要使用非常相似又不完全一样的风格,只有在你需要传达不同的信息时才使用不同的风格。风格之间要有足够的对比才能在你需要的时候吸引到用户的注意,但不要使用过于广泛和多样的风格。

7.设计合成品和风格指南

在视觉设计领域中对线框图最直接的模拟是视觉模型(visual mock-up)或设计合成品(design comp)。合成的意思是综合的。设计合成品就是从已定的组件中建立起来的、一个最终的可视化产品。这种合成物显示了各个独立的组件是如何结合到一起形成一个有机的整体的;或者,如果它们没有组成一个整体,就说明某个地方破坏了它,同时表明这是一个任何解决办法都必须要考虑到的约束条件。

线框图的组件与设计合成品的组件之间一般是简单的一对一的相互关系。不过视觉设计也不一定要精确地按照线框图来做,只要它考虑了相关的重要级别以及线框图中各元素的组合关系。

相关工作都需要以文档形式记录下来,承载这些设计决策的权威性文档是风格指南(style guide)。这个汇总文档确定了视觉设计的每个方面,从最大到最小的范围内的所有元素。影响到产品的每一个局部的全局标准(比如设计栅格、配色方案、字体标准、标志应用指南等)通常是风格指南中的第一部分。风格指南还要包括某一个模块或网站功能的具体标准。风格指南的总体目标是提供足够的细节来帮助人们将来做出明智的决策。

——著作权归原作者所有——

上一篇下一篇

猜你喜欢

热点阅读