赵梦琪:浅谈“扁平化设计”在交互设计中的应用

摘要：“扁平化”的设计却是在短短的时间内迅速崛起，从本质上看，这不仅仅是一种视觉风格的改变，而是一种设计语言和思维方式的演化。它预示着界面设计开始回归到如何理解功能内容和应用本身。

关键词：扁平化拟物化ios 交互设计UI

三年前，当windows phone开始扁平化时，面对的是世人嘲笑的眼光。两年前，当安卓4.0开始扁平化时，世人只当是与苹果区别的挣扎。一年前，扁平化通过iso7.0逆袭成功，成为如今交互设计主流。“扁平化”通过三年时间在我们生活中扎根，我们可以看到质感厚重，图层样式繁多的网站越来越少，反之各种轻质感、布局大胆、创意新颖的网站越来越多地进入了人们的视野。那么将这一趋势带来的扁平化到底意味着什么，扁平化的设计理念又将会带领交互设计带往何方？

在交互设计中什么是扁平化设计

首先说说什么是扁平化设计。“扁平化设计”一词所指的是抛弃多年来流行的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更“平”的界面。扁平化设计正是通过这种放弃任何附加效果的方式，创建了一个完全不带3D属性的设计方案。在这里，没有阴影效果、斜角、浮雕、渐变等其他方法来帮助元素产生相对于屏幕的凹凸效果。完全没有任何效果的图标和UI元素通过色块的搭配也都是看起来非常鲜明。

交互工具的界面设计为什么会选择扁平化设计？我们先来看看web UI的发展史，在互联网制作的初期，由于技术的局限，网页只是作为呈现信息的一个平台而已，毫无设计可言，随着科技的发展，CSS的广泛运用、才开始有了网页设计的概念，在这个阶段已经有大量个人网站出现了'许多网页使用Ps切图制作个性的UI效果，拟物化设计登上UI设计舞台。在javascript网页特效以及Flash流行起来后，静态的高光立体拟物效果已经满足不了大家的视觉需求了，于是开始使用简单的静态交互（javascript或flash本地交互）来产生更仿真的效果，设计师想让webUl更像是一件实物，可以带来一种更为生动的感觉。希望能消除科技产品与生活的距离感，在无论是网页，或是各种获取资讯的软件所提供的信息量相对较少的情况下，网页更倾向于UI带来的视觉冲击，软件的UI设计也更为大胆。

2005年后，web2.0的出现使得设计师更专注于内容呈现和交互，同时开始去掉了各种不必要的视觉效果。web2.0概念伴随着几何次方增长的信息而生，带来了更大的信息量和更复杂的交互，使webUI回归了它应该做的，就是以更好的体验呈现更大量的信息，让内容展现自己的生命力，而不是靠UI设计喧宾夺主。

这使我们想到在说到扁平化的同时，我们必不可少的会说到另一种设计分格――拟物化（skeuomorphism），拟物化作为与扁平化设计极度相反的设计风格，从web UI诞生起就一直占领UI设计的主流。拟物化设计的特点是界面模拟真实物体的材质、质感、细节、光亮等；人机交互也拟物化，模拟现实中的交互方式。拟物设计会让任何人都知道这个图标是用来干什么的，同时这也是拟物化最大的好处，它能让上至八十岁的老人，下至几岁的孩童都能看懂IOS里面几乎所有自带应有的图标。在ISO系统中各种按钮的视觉质感和点开之后的交互效果，有力的与现实所结合，养成用户对这类应用有统一认知和使用习惯。让用户在使用此类应有的同时感受到来自应有本身的人性化体贴。但是拟物化本身同时也是个约束，它限制功能本身的设计。在电子设计领域使用拟物原理直接导致了在苹果控制面板中的模拟时钟比电子时钟更难读，点击计算器的按键要比用键盘输入花费更多的时间。坚持使用拟物设计产生了不少的问题：由于一直使用与电子形式无关的设计标准，拟物化设计限制了创造力和功能性。将拟物化元素与少维的元素相融合时，拟物元素看起来有些不一致，而且这些模仿并没多少逻辑。比如，苹果的找朋友应用就有一个看起来像缝合皮革的背景。但该元素与现实世界没有任何关联。拟物化元素以无功能的装饰占用了宝贵的屏幕空间和载入时间，当与其他无拟物效果的元素组合时，拟物元素看起来有问题，这样就限制了整体设计和其他的元素的效果。我们可以看到现在的UI设计，也开始像当初webUI一样，回归内容的本质，开始走上由繁至简的道路。

扁平化设计成为交互设计主流风格的几大原因

扁平化对于互联网巨头直接意味这两个词：快速，突出。

快速高效是扁平化设计的一个很重要的基因，时间就是金钱，如何在信息更新如此之快的互联网即时的跟上它的脚步呢-那就是快速， 快速同时也意味着更低成本的运作，采用扁平化设计，可以再最短的时间内更新所需的页面，只需要给制作提供相应的色值就行，大大的节省了项目时间，也方便下次再更新。这也是很多互联网巨头们为什么选择扁平化设计的原因之一。

信息突出，是在信息大爆炸时代，网站取胜的关键，扁平化设计通过颜色的对比，大小不同的字号，让重要的信息放在首要位置，不重要的元素弱化，除了几个主要的动作按钮当中使用了轻微的斜面效果以外，其他界面元素全部采用扁平风格，这样的设计让访问者可以很容易的将注意力聚焦在品和信息上，而不会被网站界面上的视觉元素所干扰。从而突出核心信息和操作。这些都增强了网站的易读性和可读性。

对于用户，扁平化则是简洁明了的，简洁的东西总是让人喜爱的，在一个设计简洁逻辑清晰的网站你能很快找到自己所要的东西，从而提高用户体验。

目前大多数对于界面风格扁平化的讨论，主要在于界面与图标中材质、阴影、立体感的消失等等。实际上对于界面设计来说，正如人们对于视觉感官的新鲜需求和疲劳度是与生俱来的，各种视觉风格的流行和更迭―直在持续进行着。然而过去的很长一段时间内，界面设计的风格都处在循序渐进的改变，“扁平化”的设计却是在短短十几个月的时间内迅速流行起来。从本质上看，这不仅仅是一种视觉风格的改变，而是一种设计语言和思维方式的演化。

对于打造交互设计中扁平化设计风格的几点建议

形式遵循功能，少点再少点

一些伟大的设计中所运用的“形式跟随功能（form followfunction）”和“少即是多（1ess is more）”的理念依然是我们今天还在谈论和学习的。简单的说，在用户界面设计，常常去掉真正将界面带入生活的那些东西。在扁平化设计的世界中设计师必须专注于产品的本质，它是用来干嘛的，而不是它们要看起来像什么。

细节永远是追求的方向

设计中所谓细节决定成败，有时候一点点行距一点点色值的不相同也会对整体视觉效果照成很大的影响，细节的调整是很有必要的。字体作为扁平化设计中的重要元素。你可以使用字体帮你创建你期望的风格和基调并且使界面更加简洁。

色彩一定要酷点再酷点

由于少了些质感，所以颜色也变得尤为重要了，运用搭配合理的颜色能起到决定作用。设计界面的基础之一是定义调色板。扁平化界面设计所采用的色彩的模式与其他调色板相比倾向于更加醒目和更加明亮。当你选择好调色板后，确保给主要交互动作指定色彩：比如“提交”、“发送”、“更多”等按钮都应当是同一个色彩。理想情况下鲜明的色彩与背景形成了鲜明的对比。如果你的徽标或者商标采用主色的话，那么它应当是主要控制所使用的哪个色彩。不要自始至终过分的使用它，否则你将冒着在用户眼里这个色彩不太重要的风险。

在扁平化设计里色彩的选择尤其重要，因为当你使用扁平化按钮的时候，色彩将是帮助用户识别彼此的主要手段之一。

最关键的是创新

优秀的设计是创新。我个人比较喜欢苹果首席设计Jony Ive的方法：先打破以前的框架。比如说设计一个饭盒，那他先要把“盒”这个概念抹去，不要被这个“盒”所困住思维，只想这个器皿最佳的使用方式和设计形式。比如时间，不只是想到钟表，还可以想想有没有其他更好方式来呈现。

结论

目前大多数对于界面风格扁平化的讨论，主要在于其艺术表现形式的变化。实际上对于界面设计来说，人们对于各种视觉风格追求―直在持续进行着。然而过去的很长一段时间内，界面设计的风格都处在循序渐进的改变。“扁平化”的设计却是在短短的时间内迅速崛起，从本质上看，这不仅仅是一种视觉风格的改变，而是一种设计语言和思维方式的演化。扁平化设计风格最大的优势就是它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生，这不仅是设计视觉风格的突破，更是功能性在交互设计风格中的重要体现。

如今各种不同尺寸和配置的产品出现，填补了不同级别间的空缺，同时要求更高的界面适应性，这些都要求我们将界面设计回归到如何理解功能内容和应用本身，但是否“扁平”并不应当成为交互界面的评价标准，良好的交互易用性、理解识别度、情感传达、操作反馈、图形隐喻、视觉舒适度、动态表现和音效设计等等方面，才能构成一个优秀的交互设计产品。

参考文献

[1]范圣玺行为与认知的设计设计的人性化[M].中国电力出版社.2009-3-1

[2][美]维克多・帕帕奈克（VictorPapanek）著，周博译为真实的世界设计[M].中信出版社.2013-1-1

[3][英]科制白恩著李松峰，秦绪文译简约至上：交互式设计四策略[M].人民邮电出版社.2011-01-01

[美]加瑞特著范晓燕译用户体验要素：以用户为中心的产品设计[M].机械工业出版社.2011-07-01

[5][美]Jeff Johnson著 张一宁译认知与设计：理解UI设计准则[M].人民邮电出版社.2011-09-01

[6]杨响亮扬君顺，崔延琳.UI设计在望造产品形象中的应用研究[A].第十一届全国包装工程学术会议论文集（二）[C].2007

[7]李若辉.浅析全球化趋势的设计对文化发展的推动[J].今日科苑2011年20期