Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题

娱乐新闻 419浏览 14评论 来源:申博官网备用网址_金沙6119
Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
源起

扁平化设计 Flat Design 虽已是老生常谈,然想写这篇文章,使因于笔者常为了如何设计出适当的扁平化风格链结而苦恼。

纠结点不知各位 UI/UX 设计师是否也曾遇过?

传统以来,介面链结都被设计成具材质触感、立体化且具光泽的形状,除了能有效暗示这是个「能被点击」的物件外,还可突显其「作用範围」避免误触。

然扁平化设计去材质、去立体化的特性虽为介面设计开创更多可能性,但过度的简化与使用习惯的改变,致使我们无法依赖过去的惯例来判断元件是否可被点击;而移动装置的触碰式萤幕,也无法出现手型来暗示可点物件…这些都间接导致使用者点击的不确定性,学习成本提高,以及误触的问题。

在阅读 Nielsen / Norman 的相关研究后虽然有点豁然开朗,但此为 2015 年的全英文文章,故笔者除了原文翻译外又综合近年趋势与工作心得,重点整理出实用的设计小笔记,希望能让有相同困扰的你/妳釐清盲点,使用扁平化设计不再只是跟随趋势而已,还能理解其背后的影响与演进。当然也欢迎大家能多多交流工作上的使用经验!

在解析过度扁平化设计造成的 UX 问题前,我们需要先理解介面设计历年的风格演进~

3 分钟理解介面设计风格的演化

扁平化常被认为是 3D 风格、拟真隐喻风格和情境写实风格的反向。

1.3D 风格

图形用户介面初期,常採用 伪 3D 效果来帮助用户解读视觉层次结构,并藉此了解元素间的互动关係。我们所熟知的 3D 效果按钮,看起来像是可被按下;而搜寻栏位则被设计成凹陷或空洞状以引发用户填入文字的慾望。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
This Windows 95 dialog box

2. 拟真隐喻风格

此风格是透过模仿现实世界的物件外观及特性,来帮助用户了解如何使用介面。这种介面往往具有非必要的装饰且善用「隐喻」,以协助使用者应用该物件的先前知识来操作。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
Amazon Kindle Fire 平板电脑的早期型号就採用具有木质纹理的拟真书架设计。书架隐喻能够帮助用户将以前关于书架的知识转移到数位环境中。书架和木质纹理与系统的功能无关,但可以加强联想与视觉效果。
3. 情境式写实风格

写实主义是设计风格的一种,本着于美学因素而模仿实际物件的物理特性或纹理,并不特别强调任何形式的隐喻来帮助用户理解如何使用介面。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
像早期的 Kindle Fire 平板电脑,Sprouts 杂货店网站使用 3D 木质纹理,但是这种设计只是单纯为了美感的一致性。

看到这儿你可能会觉得拟真隐喻风格与情境式写实风格好难分辨,两者主要的区别在于:

拟真隐喻风格善用物件的物理特性与隐喻,透过习惯的知识认知来帮助用户理解介面。而情境式写实风格则基于纯粹的美学目的,使用模仿物理世界的视觉元素和纹理来让使用者沉浸于介面情境。因此也可说这两种风格一个是为了让用户易于理解而设计,一个则是为了设计而设计。

4. 扁平化风格

2011 年,微软 Metro 设计风格和 Windows 8 的发布为扁平化设计开启先端。微软称此种新风格为“真正的数位化”。

与前述的设计风格不同,扁平化风格为了能让用户更关注内容的本质,因此大量移除可能使其分心的装饰性设计转而追求视觉上的简约,用简单的形状以及色彩来替代以往的纹理和光影效果。它被认为是探索数位的可能性,而不尝试重现物理世界的外观及隐喻的新的设计方式。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
为了让用户可以更专注在内容上,Metro Style 删除拟真的纹理和光影效果,只留下 简单的图片文字与色块。

谈到这儿,我们还可以更进一步透过苹果官网来理解以上几种风格的差异。

2007 年的苹果官方首页 ,可以明显看出导航栏的样式被设计为带有光泽质感的 3D 标籤,给予用户的可点击暗示非常明显。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题

2012 年的苹果官方首页 。标籤隐喻已经消失了,但导航栏仍然显得光滑圆润。搜索栏位内嵌阴影,暗示可在其上填入文字。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题

2015 年的苹果官方首页 。可以看出整个导航栏,包括标誌已删除可辨识的阴影或光泽纹理,呈现扁平化风格。然使用者依然可以倚赖惯例来操作。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题

由上述我们可以发现在 2013 年之前,苹果官网的主流一直是 3D 风格和拟真隐喻风格。而当近年苹果主页改採扁平化风格后,则又更加速了扁平化设计的普及。

接下来将融合 NN/g 的研究与自身工作心得,归纳出在扁平化风格下链结元件的设计建议。共有 6 个主项目与其个别细项。

1. 静态文字和链结文字应使用不同的视觉设计

文字常成为链结元件之一,因此文字形态的链结应注意:

1.1 色彩 静态文字的颜色不应与超链接颜色一样,不可点击项目请避免使用蓝色。由于近年设计的多样化,你也可以使用其他颜色,但必须确保两者有清楚的区隔;若没有特别的理由需要使用其他颜色,蓝色仍然是链结色的最佳选择。

1.2 底线 不可点击项目请勿使用底线。文字链结是否需要底线可藉由所在位置决定,例如使用者已习惯将导航栏和侧边列表位置视为链接区域,其上的文字就不需要底线。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
Patient Safety and Quality Healthcare:一个失败的例子: 标题不可点击但却使用蓝色;图像可被点击,但它们看起来又像静态图像。
Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
星巴克网站:很显然为了与企业标识一致,网站上的超链结是绿色的。而页面右侧的项目列表虽没有底线,但可透过它们的位置和格式让用户知道他们是可被点击的。
2. 始终在可点击的元件上使用适量的视觉暗示

2.1 按钮 至少将按钮设计得接近物理按钮,可保留矩形以看起来类似传统按钮。在扁平化设计中若不使用较重的效果,按钮也可透过使用阴影和渐变使之看起来能被点击。

Google 的 Material Design 是 flat 2.0 的经典範例之一。设计师巧妙使用微妙的阴影和图层以突显元件深度,这种设计方式也被称为“semi flat”,或“flat 2.0”。透过图层概念暗示元件的前后顺序,并借用物理学的隐喻和原理,来帮助使用者理解介面,并解释内容中的视觉层次结构。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
Material Design 对按钮物件添加视觉效果,模拟点下时的物理现象,让用户感觉好像 真的「点下」。

设计师设计按钮时还须注意勿使不可点击的项目看起来像按钮,引起用户不必要的点击慾望。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
Menagerie Climb:那个橙色的方型封闭区域是一个按钮吗?不是。形状和标籤使它看起来像一个按钮。避免在页面上有许多不同大小的彩色框。当相似的项目相互竞争时,人类视觉会被干扰而难以挑出可点击的元素。
Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
TaskRabbit:这四个按钮无须拟真化就能够轻易被辨识– 原因在于这四个按钮的边界清晰,视觉设计与行为一致,且没有其他元素与之竞争。

2.2 图片 点击时图片应有变化或反馈 。图片範围内的相关元素应都能被点击。换句话说就是可以增加点击範围,并提高被点击的可能性。除非图片中的选项被明确呈现,应避免一个图片却有多个操作行为。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
Loftwork: 大区块状的按钮包含了图片与文字被视为同一个感应区,感应区被设计 为滑鼠移过去时增加一层不透明白色,颜色的变化让用户清楚知道这边是可点击区,能连结至目标页面。

2.3 符号和图标使用图标链接时,图标应能被立即识别。除非单一图标够直觉 ,图标最好能与文字链结组合,以指示其可点击性。当没有其他可点击线索存在时,箭头图标可能有助于暗示点击性,但必须谨慎使用,因为它们有时会破坏介面的简单一致。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
CNN: 此页面上的箭头为黑色标题发出可点击线索。若没有箭头,用户可能不知道黑框可以点击。
Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
Rader Joe’s: 如预期,Announcement 下的列表是被可点击的。蓝色为其提供强烈的提示。但图像下方的列表也列出的同样花俏的图标却不可点击,这种设计不一致性往往导致混乱。
3. 提供反馈

即时、明显的反馈对于使用者经验始终是重要的,在扁平化设计下的使用者更依赖它来确认该元素是否可被点击。大部分即时反馈应在 0.1 秒内回应,若有任何延迟使用者将开始怀疑刚才是否误点,并可能放弃搜寻其他的潜在链结线索。常见的反馈包括:

3.1 视觉变化 透过显眼的视觉变化凸显反馈。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
Listener’s Playlist / Designer: Anzi : UI 设计貌似稍微漂浮起来了一点,加入了一些小的变化,使视觉效果显得更加立体,扁平还是那个扁平,视觉上却给观者不一样的体验。

3.2 进度指标 点击后给予使用者明显的进度回馈,能帮助其理解系统的各种状态 。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
Wix: 点击储存 ICON 出现的进度条回馈,能让使用者理解正在储存资料,并更有耐心等待其储存完毕再进行其他使用行为。

3.3 状态更新 例如用户网购的购物车数量变化,或确认操作完成后的立即反馈。

3.4 微互动 微互动在 2016 年于网路间引起广泛的关注,而它亦将会是 2017 年的趋势。微互动通常以细微的动画形式出现,在用户体验设计中发挥着至关重要的作用,特别是在行动装置上,我们每次使用应用程式都会接触到数以千计的微互动。微互动透过传达状态和变化、引导注意力到某些区域,以及为动作提供反馈来协助创造难忘的体验。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
4. 元素位置与上下文线索

有时使用者也透过元素所在位置,与周围上下文来确认可点击性。在缺少可点击暗示的环境中,他们会寻找其他线索来协助识别可能的交互元素,这些线索包括:

4.1 元件放置的位置,例如页面顶部或导航栏

4.2 元件中使用的语言,例如「立即购买」或「查询」

4.3 周围元素 元素本身可能不建议点击,但通常会被放在 Link to 类似样式的单词前,或是其他例子如: 联络我们 Contact us 或所在地 Location。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
teavana.com:由于 Teavana 使用简单的视觉设计和相对传统的电子商务布局,因此儘管介面设计非常平坦,但用户无需导航,顶部导航栏和预期位置都可帮助用户快速识别其目的。
5. 所在位置的前后对比

大幅形象图片搭配简约文字的排版,在近年各大官网首页设计频频出现,这种趋势下更须确保图片、文字和元素间需能清晰易读,且能被辨识。

Oops!能不能点傻傻分不清,设计师必须留意的扁平化设计问题
sabemasson.com :主要动作按钮设计为深灰色色块,底下衬着黑白照片已导致按钮近乎消失在照片中。若能使用差异较大的颜色便可轻鬆改善这种不良设计,例如如 UI 中已经使用的浅蓝色。

笔记到此,若一时之间还无法记住, NN/g Group 也贴心提供了清单帮助设计师快速检视自己的设计有没有问题:

  1. 可点击线索的设计在整个网站上是一致的。
  2. 链接元素是显着的,且具有适当的对比度。
  3. 链接元素位于用户期望的位置。
  4. 没有虚构的目标,看起来可点击,但实际上无法点击的物件。
  5. 与同一内容相关联的所有元素都指向同一页面。
  6. 当点击和结果动作之间出现时间停滞时,提供足够强烈的反馈。
结论

与任何设计趋势一样,平衡和适度才是最佳解。

扁平化设计能够成为强大的设计美学,但运用不好也可能成为压垮骆驼的最后一根稻草。设计师们得记住,点击的不确定性不仅仅只是用户正面临的问题,也意味着他们很有可能放弃原本来这儿的目的而转往他处。

请勿因为追求趋势,或认为年轻用户可以更快适应设计不良的介面,而忽略这些易用性设计的细节。除了大方向的视觉一致性外,「微互动」也将会愈来愈流行。虽然它们是应用程式的小功能,甚至有时候还不被列为功能,但善用微互动,它们往往能为扁平化设计提供优秀的用户体验。

正如 Jakob Nielsen 所说,“生命太短,我们没有时间浪费在尝试错误上。 “Life is too short to click on things you don’t understand.”

与本文相关的文章