什么是扁平化设计?

扁平化设计是相对于拟物化设计(Skeuomorphic Design)而提出的 。拟物化的用户界面设计看起来就像是真实的物体 , 如图1-1所示 , 在用户界面中能反映出真实世界中音频压缩器的外观和功能 。在初期 , 这样的设计可以让人们更快地接受和明白设计的用途 。

什么是扁平化设计?

文章插图
图1-1
拟物化设计起始于20世纪80年代 , 其初衷是帮助用户从真实世界向计算机界面平滑过渡 。直到最近 , 作为拟物化设计忠实的拥护者,苹果公司把这种设计理念运用在了公司所有用户界面和界面设计指南中 。从IOS 7开始全部换成扁平化设计 , 尽管当时有很多人批评 。苹果公司的拟物化设计与扁平化设计的对比如图1-2所示 。
什么是扁平化设计?

文章插图
图1-2
其实笔者认为扁平化设计是设计发展的必然规律 , 就如几千年来文字的发展 。最初人们用图画文字(象形字)来记录 , 这是一种最原始的造字方法 , 把想要表达的物体的外形特征描绘出来 , 慢慢地演化到繁体 , 再到现在的简体 。现在的扁平化设计也正在遵循这样一个从繁到简的发展规律 , 从写实拟物到抽象扁平 。
1.扁平化设计的三大特点
》做减法
同样是镜头的设计 , 在扁平化中去除了渐变、阴影、质感等修饰手法 , 仅用简单的形体来表达 , 显得干净利落 。做减法这一步应该是最容易的 , 如图1-3所示 。
什么是扁平化设计?

文章插图
【什么是扁平化设计?】图1-3
因为扁平化设计有着鲜明的视觉效果,它所使用的元素之间有清晰的层次和布局 , 这使得用户能直观地了解每个元素的作用及交互方式 。如今从网页到手机应用无不在使用扁平化的设计风格 , 尤其在手机上 , 因为屏幕尺寸的限制 , 使得这一风格在用户体验上更有优势 , 更少的按钮和选项使得界面干净、整齐 , 使用起来格外简单 。
》精致的颜色
扁平化设计中 , 配色貌似是最重要的一环 , 扁平化设计通常采用比其他风格更明亮、炫丽的颜色 。同时 , 扁平化设计中的配色还意味着更多的色调 , 例如 , 其他设计最多只包含两三种主要颜色 , 但是扁平化设计中平均会使用6~8种 。而且扁平化设计中 , 往往倾向于使用单色调 , 尤其是纯色 , 并且不做任何淡化或柔化处理(最受欢迎的颜色是纯色和二次色) , 另外还有一些颜色也比较受欢迎 , 如复古色(浅橙、紫色、绿色、蓝色等) , 如图1-4至1-6所示 。
什么是扁平化设计?

文章插图
图1-4

什么是扁平化设计?

文章插图
图1-5

什么是扁平化设计?

文章插图
图1-6
》极简的排版
由于扁平化设计使用的是特别简单的元素 , 排版就成了很重要的一环 , 排版的好坏直接影响视觉效果 , 甚至可能间接影响用户体验 。
字体是排版中很重要的一部分 , 它和其他元素相辅相成 。想想看,一款花体字在扁平化的界面中是非常突兀的 。图1-7至1-9所示是一些扁平化网站使用无衬线字体的例子 。无衬线字体家族庞大 , 分支众多 , 其中有些字体会在特殊的情景下产生意想不到的效果,但注意,过犹不及 , 不要使用那些极为生僻的字体 , 不能因为字体的新奇而影响了信息的传达 。
什么是扁平化设计?

文章插图
图1-7

什么是扁平化设计?

文章插图
图1-8

什么是扁平化设计?

文章插图
图1-9
2.扁平化设计的未来
作为一名普通的设计师 , 可能不能去预测乃至引导设计的趋势和方向 , 但可以从设计的发展史中找到一些答案 。建筑设计和平面设计作为设计的分支 , 都经历过类似从拟物化设计到扁平化设计的发展 , 也许可以为我们提供一些参考 。


推荐阅读