扁平化设计

Posted 2020-10-17 lclc

扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。^[1] 

例如：Windows、Mac OS、iOS、Android等操作系统的设计已经往“扁平化设计”发展。其设计语言主要有Material Design、Modern UI等。

扁平化的设计，尤其是手机的系统直接体现在：更少的按钮和选项，这样使得UI界面变得更加干净整齐，使用起来格外简洁，从而带给用户更加良好的操作体验。因为可以更加简单直接地将信息和事物的工作方式展示出来，所以可以有效减少认知障碍的产生。

扁平化的设计，在移动系统上不仅界面美观、简洁，而且还能达到降低功耗、延长待机时间和提高运算速度的效果。例如，Android 5.0就采用了扁平化的效果，因此被称为“最绚丽的安卓系统”。^[1] 

“Flat Design”为“扁平化设计”的英文名，这个概念在2008年由Google提出。但围绕“Flat Design”这个名字则存在着诸多争议，现在你所看到的这个名称“Flat Design”也并未被大家所完全认可。

不同的公司团体都尝试用过其他名称，例如Minimal Design, Honest Design，而微软公司甚至称它作 “Athentically Digital”。

 

中文名

扁平化设计

外文名

Flat Design

核    心

去掉冗余的装饰效果

提出者

Google（谷歌）

首个实践者

Microsoft（微软）

目录

1. 1 优缺点
2. ? 优点
3. ? 缺点

1. 2 设计案例
2. 3 设计界线
3. 4 设计趋势

1. 5 设计技巧

优缺点

编辑

优点

1. 降低移动设备的硬件需求，延长待机时间；
2. 可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生；
3. 随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸，创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计，你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约，条理清晰，最重要的一点是，更好的适应性。

缺点

扁平化反对者认为：

1. 降低用户体验，在非移动设备上令人反感；
2. 缺乏直观，需要一定的学习成本；
3. 传达的感情不丰富，甚至过于冰冷。

设计案例

编辑

扁平化设计案例(5张)

生活中处处可见扁平化设计作品，比如苹果手机，采用棱角分明的线条，加上苹果的部分应用设计界面，单色鲜明的对比，非常漂亮。

扁平化设计与当下最为觉的拟物化设计形成鲜明对比，android系统界面曾经均采用拟物化，苹果ios系统曾经也采用拟物化，但作为手机领域的风向标的苹果手机最新推出的iOS使用了扁平化设计，是拟物化基础上进行的扁平化改造，都有可取之处与诟病，总之都是非常棒的设计美学。而Android的扁平化设计能使得总体视觉与交互变得”温暖“。

在扁平化设计目前最有力的典范是微软的Windows以及Windows Phone和Windows RT的Metro界面，不得不说Microsoft不愧为扁平化用户体验开拓者，如此大胆的尝试与实现，不得不让人佩服。与扁平化设计相比，在目前也可以说之前最为流行的是skeuomorphic设计，最为典型的就是苹果iOS系统中拟物化的设计，让我们感觉到虚拟物与实物的接近程度，iOS、安卓也已在向扁平化改变。

设计界线

编辑

我们发现在Win8 Metro界面中，使用了完全的扁平化设计；在苹果产品及iOS系统中，看到了部分扁平化设计影子，在Google中，我们也同样看到了准扁平化设计模式，并且在Google中我们体验良好，而在Win8 metro中受到的评论并非这么乐观，所以不管是属于什么设计，设计的美在于是否适合，我不敢说扁平化设计就比谁好，这种非黑即白的理论并不适合。

设计趋势

编辑

越来越多的网站设计已在UI上走扁平式设计的路线。谈到设计，无论是一个网站还是一个应用程序，扁平化和极简的设计正在成为新的趋势。人们正在原来一直很受欢迎的skeuomorphism设计（模仿实物纹理），苹果推出iOS时许多设计师都采用它。

但随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸，网站设计正朝着更加扁平化的设计，你可以一次保证在所有的屏幕尺寸上它会很好看。

设计技巧

编辑

对于设计师来说，如果你观察微软的Windows Phone的平台，你可能会发现一个特别的现象：那就是难看的应用不多，但令人印象深刻的应用也不多。应用很有统一感，但是很难张扬个性，以至于有的开发者感叹，它们看起来都是一个样子。设计师Johnny Holland将Metro语言比作是包豪斯风格，并且指出，“因为去除了装饰，使得个性化的空间很小”，这可能给人以“缺乏生命力”的感觉，所以要想设计做出好的扁平化设计，也是非常需要技巧的。

简单的设计元素

扁平化完全属于二次元世界，一个简单的形状加没有景深的平面，不叫扁平化都浪费这个词了。这个概念最核心的地方就是放弃一切装饰效果，诸如阴影、透视、纹理、渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净俐落，没有任何羽化、渐变或者阴影。尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。

强调字体的使用

字体是排版中很重要的一部分，它需要和其他元素相辅相成，想想看，一款花体字在扁平化的界面里得有多突兀。上图是一些扁平化网站使用无衬线字体的例子，无衬线字体家族庞大分支众多，其中有些字体会在特殊得情景下会有意想不到得效果。但注意，过犹不及，不要使用那些极为生僻的字体，因为保不齐它就把你带进坑里了。

关注色彩

扁平化设计中，配色貌似是最重要的一环，扁平化设计通常采用比其他风格更明亮更炫丽的颜色。同时，扁平化设计中的配色还意味着更多的色调。比如，其他设计最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到八种颜色。另外还有一些颜色也挺受欢迎，如复古色浅橙、紫色、绿色、蓝色等。

简化的交互设计

设计师要尽量简化自己的设计方案，避免不必要的元素出现在设计中。简单的颜色和字体就足够了，如果你还想添加点什么，尽量选择简单的图案。扁平化设计尤其对一些做零售的网站帮助巨大，它能很有效的把商品组织起来，以简单但合理方式排列。

伪扁平化设计

不要以为扁平化只是把立体的设计效果压扁，事实上，扁平化设计更是功能上的简化与重组。比如，有些天气方面的应用会使用温度计的形式来展示气温，或者计算应用仍用计算器的二维形态表现。在应用软件当中，温度计的形象则纯粹是装饰性的，而计算器的计算方式也并不是最简单直接的。相比于拟物化而言，扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来。