用户体验的要素:表现层

七、表现层:感知设计

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

1.表现层定义

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

2.合理设计感知

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


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

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

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

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

3.忠于眼睛

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

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


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

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

4.对比和一致性

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

对比

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

一致性

5.内部和外部的一致性

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

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

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

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

6.配色方案和排版

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

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

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

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

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

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


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容