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

源起

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

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

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

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

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

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

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

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

1.3D 风格

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

2. 拟真隐喻风格

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

3. 情境式写实风格

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

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

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

4. 扁平化风格

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

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

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

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

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

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

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

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

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

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

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

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

2. 始终在可点击的元件上使用适量的视觉暗示

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

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

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

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

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

3. 提供反馈

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

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

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

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

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

4. 元素位置与上下文线索

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

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

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

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

5. 所在位置的前后对比

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

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

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

结论

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

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

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

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