基于交互界面的扁平化设计研究

中图分类号：TB47 文献标识码：A

摘要：关于目前引起激烈争论的扁平化与拟物化界面设计风格，本文从扁平化与拟物化的含义谈起，讨论扁平化设计流行的必然性以及界面扁平化的局限性，分析扁平化界面风格对设计师提出的新要求。无论何种视觉风格，精准的信息表达，良好的交互体验才是界面设计的根本。

关键词：扁平化；拟物化；界面设计

将“扁平化”一词用于数字终端界面設计的时间并不长，却以不可阻挡之势迅速蔓延开，从做系统的大公司到做软件的开发者，纷纷卷入这股潮流中。但关于“扁平化设计”的激烈争论不但没有停止，反而愈演愈烈。在笔者看来，“扁平化”与“拟物化”本身并不存在本质上的冲突，Flat Design的出现及迅猛发展有其必然性，而且必将会有更多精彩呈现。视觉上扁平一些更简洁，信息层级扁平一些更便捷，但无论是视觉效果还是交互体验都不能因此而乏味，只有全面考虑用户的操作体验才能做出优秀的界面设计。

在用户界面设计，常常去掉真正将界面带入生活的那些东西。37signals的团队因为应用这个理念到它们的产品中——比如BaseCamp——而臭名昭著（但也很成功）。在扁平化设计的世界中，少，真的是多。为了实现扁平化设计美学，我们设计师必须专注于产品是干嘛的，而不是它们要看起来像什么。这是关键，也是线框对设计流程至关重要的原因。美学是看法的问题在我关于这篇文章的研究中，几乎没发现任何科学研究关于屏幕上的按钮看起来更像按钮实际上会更可点击。倒是有大量的证据支持对比度、色彩、层级，但是我愿意打赌在一个适当的上下文中，一个橙色的扁平化按钮会像一个立体的橙色按钮一样有效。

一、扁平化风格流行的必然性

首先，界面拟物化的初衷是降低用户的学习成本、理解难度，使得无论年龄大小、是否有操作经验都可以在拿到设备后的短时间内轻松快速掌握它的用法。但在数码设备普及度极高的今天，尤其对于很多年轻用户而言，拟物化设计原本的功能性优势已经无法凸显。大家早已熟悉各种数码产品的基本特点，适应了各类界面的操作方法，当一些界面中常用的图形抽象化、符号化之后，完全不会因此而产生识别上的困难，反而会因为去除了各种复杂视觉效果、冗余的装饰元素而更容易更直接的得到他们想要的信息。

其次，扁平化界面有助于提高用户体验——效率。其一，是视觉效果方面，例如：Andriod手机有很多种分辨率，要想使同一个App在各种分辨率中都能清晰显示，就需要准备多套资源以对应，ROM资源里就存在hdpi、ldpi、mdpi等资源以对应各种不同分辨率，这样一来，调用的资源越多，程序运行的速度就越慢。扁平化设计倾向于矢量风格图形，在一定程度上减弱对像素精度的依赖，从而创建出适应性更高的用户界面。类似的问题在Win7系统中也很突出，虽说Win7视觉效果比起XP而言要炫得多，但同等配置下的Win7运行速度却远远低于XP系统。扁平化设计可以很好的解决此问题，让系统运行更流畅，从而提高用户操作体验。其二，是信息层级方面：每点击一次进入下一层级，层级越多，操作体验性越差。当图标不仅是应用程序的入口，同时又是信息的载体能够直接展示关键信息时，效率就提高了。正如Win8系统的磁贴，不用进行任何点击操作便可以看到很多常用应用的最新信息状态。

此外，虽不是最主要原因，但数字产品审美趋势的变化也是不可忽略的因素之一。具有丰富细节、逼真质感的界面令人感到真实、熟悉、亲切，但最终打动用户的还是信息本身。更何况iOS6之前的版本，视觉上每一处的纹理、质感和细节都经过精雕细琢，几乎已经把拟物化做到了完美，要想有更惊人的突破已经很难，也没有必要了。当满眼充斥各种炫酷拟物效果操作界面时，简洁朴素的设计反而让人耳目一新，而且这种设计可以更直接更清晰的呈现关键信息，自然容易受到青睐。

二、界面设计扁平化的局限性

彻底扁平化的界面设计在表现力上有很大局限性。例如，完全抛弃所有投影、肌理、浮雕效果，仅仅依赖极简风格的线条、色块来准确表现越来越多样化、新品层出不穷的App，是难以实现的。

拟真效果的界面设计之所以大受追捧是因为它通过尽可能多的隐喻降低学习成本。虽说扁平化界面通过抛弃大量装饰元素、突出关键信息内容来让用户快速找到他们所关心的信息，但高度抽象化后的简洁图形符号却不是每个人都可以立即看明白的。从事视觉设计工作的人员很熟悉这种视觉语言，对于有丰富数码产品操作经验的人来说也更容易识别一些常用的图形符号，但对于没有多少数码产品操作经验的用户以及很多儿童、中老年人、甚至包括一些对于抽象图像符号敏感度不高的用户来说，这无疑是提高了认知成本，降低了用户体验。

三、扁平化设计的技巧

那么，如果立体、渐变、阴影只是看法的问题，那么如何实现一个好的设计？无论你是否要使用扁平化设计，用户界面和规划相关。我相信扁平化设计使得识别一个伟大的设计更加简单，因为在设计和它如何工作之间少了很多干扰。这里是一些关于伟大的界面设计的一些技巧：

（1）一致性：通过使用通用的UI元素和样式，你可以帮助用户了解什么是可以期待的，然后使得更容易使用你的应用。

（2）对比：可点击元素和非可点击元素之间要有适当的对比。这可以通过颜色、大小、位置以及样式来实现。

（3）布局：使用一个网格布局，比如960gs，是为你的设计建立一些可视的指南的好的方法。视线会自然的准从由内容创建的线条和比例，所以理解和使用一个网格是一个强化视觉平衡的好办法。

（4）层级：我更倾向于将此理解为“用户行为”，我会写一篇关于这个话题的文章，但是实现最通用的用户行为（有时被称为用例）容易发现，而去掉不太通用的行为是简化用户界面从而使它更好用的好方法。作为通用准则，最重要的要比不太重要的更醒目。我的经验是，扁平的或者逼真的没什么关系，重要的是，层级在快速浏览以及用户方便的找到下一个操作中很重要。

四、扁平化风格对设计师提出了更高要求

扁平化并不是简单的去除复杂的饰效果而已。更何况，用简洁的线条和色块来准确表达信息，并不具备相对于精雕细琢的实物再现效果的天然优势。简洁而精准的图形设计要求设计师具备极强的视觉传达设计能力，并运用缜密的逻辑思维加以抽象和总结才能表现出来。

其一，要保证图形在高度抽象、符号化以后仍能被准确识别，用尽可能简化的线条尽可能准确的表现对象，不是凭借耐心与细心便可以达到的，做减法往往比加法更难。其二，扁平化对设计师运用色彩的能力提出了高要求。在没有肌理、浮雕等效果的情况下，要准确把握色彩心理特性、熟练运用色彩层次，通过平面色块营造美观的界面、合理引导视觉流程的同时，还要准确传递给用户有用的操作信息，即“我可以做什么”。所以说，扁平化设计若能做好，可以给人简约、清新、高效的感觉，但如果处理不到位，不但容易显得乏味无趣，甚至会让用户无所适从。扁平化设计对设计师抽象构思能力、图形与色彩细节处理能力提出了极高的要求。

此外，图形视觉效果引起的审美感受以及界面操作交互过程中所产生的情感性需求也是设计师不应忽视的一个重要方面。信息化时代数码终端碎片化趋势下，界面设计在视觉效果上尽量减少非功能性的多余装饰，保证关键信息的突出和清晰，在信息层级上尽量简化，让交互操作更加简易，才能快速适应用户越来越高的要求。

参考文献：

[1]夏颖翀：“数字产品界面中朴素的设计和冗余的设计”，《装饰》，2013.05

作者简介：宁汇，武汉纺织大学，视觉传达。