共享三种特别简单的方式,很容易使你一直在5分钟之内绘制满意的

无需加好友免费技术支持

什么是扁平化设计？

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

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

鉴于多家大品牌对扁平化的应用，你可能早就听过对它的赞美之词。这种视觉上的简单风格源于极简主义，可以采用多种形式，但最好通过它不是什么来定义。它不是 3D。这种风格的名字来源于它的二维特性，同时在设计元素上强调抽象、极简和符号化。

扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。

它不是拟物化的(skeuomorphic)。扁平化设计与拟物化设计对比鲜明，拟物化是一种旨在暗示或模仿现实世界对象或过程的装饰风格。拟物化大量使用了阴影/投影、逼真的纹理、反射、斜面和浮雕等效果。

扁平化设计技巧

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

简单的设计元素

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

强调字体的使用

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

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

简化的交互设计

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

伪扁平化设计

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

扁平化设计的流行高峰期

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

扁平设计在2012年和2013年真正开始成为一种可识别的风格。由于Windows 8和 iOS 7的发布，这一趋势变得非常明显（也更容易效仿）。

Windows 8.1

iOS 7(左)vs. iOS 6(右)

从Windows使用生动色块的模块化布局，到苹果使用干净的形状和简化的图标，你可以看到一些影响扁平化设计发展的因素，以及随之而来的趋势的演变。

UXPin的工作人员在为Fast Co. Design撰写的文章中指出：“扁平化设计演变中的‘甜蜜点’介于最初的趋势和被抛弃的拟物化理想之间。”

但是由于扁平化设计已经存在且流行好几年，现在仍然很强劲，所以它可能不仅仅是一个过去的趋势。所以让我们来看看它的优点和缺点，以及未来可能的发展方向。

优点

与响应式设计的兼容性

自从微软和苹果应用扁平化设计以来，这种风格很快作为一种全新的用户体验方式就被采用。它在网页和移动设计领域一直都很受欢迎——这是有充分理由的。

扁平化设计的原则可以应用于其他设计类别，但其基于网格的布局和简单的图形特别适合网页和移动设计，因为它们可以轻松调整大小或重新排列以显示在不同的设备和屏幕尺寸上。

扁平化设计更简约，条理清晰，最重要的一点是，更好的适应性。

来自Sergey Valiukh的例子展示了一个简化和重新安排设计的例子，以在电脑端和移动端提供一致的体验：

Sergey Valiukh另一例子，拟物化具有大量阴影和纹理的高度细节化风格，以及固定大小的图像，在缩小或放大以适应各种观看方法时通常不能很好地转换。

正如设计机构Dapper Gentlemen的Ryan Allen在他题为Flat 2.0的文章中所说的那样，“扁平化可以动态伸缩到适合内容的大小，这比像素完美的设计要简单得多。”

灵活的构架

随便你怎么称呼它——网格、卡片、模块或方块——许多平面外观的设计往往由统一的几何形状组成。这种类型的布局，每个设计元素都有其位置，易于浏览和快速导航。

网格也是一种灵活的框架，可以形成多种配置。这使得设计师能够创造一种最适合和展示内容的布局，而不是将内容压缩到预先确定的有限布局中。

例如，下图这个由Betterment Bureau设计的基于网格的宣传册具有不同大小的正方形和矩形，以突出各种设计元素，如排版和图标。均匀的颜色块和简单的插图增加了平面的效果。

另一个例子，这家网站以多种方式使用网格，从菜单到员工照片再到服务列表：

团队极客

干净，可读的字体

扁平化的品质也延伸到设计师的字体排版方法，这通常会导致更大、更流线型的排版。没有阴影和其他效果，可以更加简单直接地将信息和事物的工作方式展示出来，使文本更易于阅读，减少认知障碍的产生。

镭实验室

无衬线字体是一种流行的选择，并且非常适合这种风格，但是设计中不太复杂的衬线和显示字体也可以作为标题或特色文本做出重要声明。

真数字

缺点

易用性受损

为了强调平面设计的简洁、流畅性，一些设计师陷入了过分注重美学的陷阱——以至于它对设计的可用性产生了负面影响。对于网页和手机设计来说，这是一个特别的风险。

很难判断什么是可点击的，什么是不可点击的（因为在同一个视觉平面上，一切都是平的）。重要的功能和操作可以隐藏在视图中，或者用户已经习惯的视觉提示可能会丢失——这一切都是为了追求简单。

以下面的网站为例。所有的方框都是可点击的吗？只有一部分吗？只是看着就很难判断。

缺乏独特性

每个企业、品牌或个人的设计项目都希望得到能代表他们独特风格的宣传效果——无论是在网站、应用程序、名片、活动海报还是其他方面。

扁平化设计的缺点之一，是坚持简单化、狭义的视觉风格，通常会导致设计看起来非常相似或有些相似。以纯扁平风格工作的设计师在他们的项目中可选择的原则是有限的。

例如，由Marco La Mantia和Simone Lippolis（下图第一张）和Luis Vaz（下图第二张）设计的这些不相关的移动界面，都以基本几何形状覆盖白色无衬线文本为特征。他们甚至使用了类似的配色方案：

过分注重形式上的美学

扁平化设计经常出现在设计趋势列表中，因为对于希望作品具有现代感或反映当前技术的设计师来说，它仍然是一个热门选择。

但趋势的问题之一是，一些设计师会应用它们只是为了跟风，而没有真正考虑它们的用处。这可能会导致无目的的设计选择——例如，早期扁平化设计对长阴影的喜爱。

Alexander Lototsky 和 Erik Malmsk?ld 这两个例子是长阴影趋势的典型例子，长阴影最常用于字体和图标。这两款设计都是在 2013 年创建的，当时扁平化设计作为一种新的视觉风格的早期兴奋。

如前所述，那些对可用性产生负面影响的选择，比仅仅为了创造一种流行美学而进行设计更糟糕。一个例子是使用非常细或轻的字体，这些字体可能看起来干净简约，但牺牲了易读性。

在为较小的尺寸（例如名片或移动应用程序和网站）进行设计时，忽略将轻量级字体缩放到最佳尺寸，这可能会产生特别大的问题，如下所示：

未来

扁平化 2.0

由于设计师在过去几年中对扁平化设计进行了试验，许多人已经注意到我们在这里介绍的一些优点和缺点，并决定相应地调整风格。

虽然扁平化设计的早期迭代以严格的视觉简洁为特征，但最近的发展已经看到了阴影和纹理等品质的微妙重新引入——出于美学和功能的原因。

这些对纯粹扁平化设计方法的调整，导致了一种通常被称为“扁平化 2.0”或“几乎扁平化”设计的风格。

这种风格更像是一种折衷：仍然可以获得扁平化设计的简洁，但添加了一些微妙的拟物化特性，以实现视觉多样性和改进的可用性。

一些技巧包括通过分层元素或添加一些颜色变化或阴影来为平面增加一些深度和维度。另一种常用的混合方法是添加照片，而不仅仅是平面插图或图标。

在下面的示例中，平面设计的网格布局和易于阅读的字体仍然存在，但分层元素和平面但纹理化的插图将其提升了一个档次——这是扁平化2.0 方法的一个很好的例子。

材料设计语言

材料设计（Material Design）是一种由谷歌开发的视觉语言，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。至于它本身，是一个足以媲美苹果设计的一套设计框架。

Material Design不再让像素处于同一个平面，而是让它们按照规则处于空间当中，具备不同的维度。

Material Design 与扁平化设计有很多共同点，但又不能简单地归纳为扁平化设计。它不反对高光、阴影、纹理，换言之它并不反对立体感。不过，它也不能归类为拟物化设计，毕竟它所使用的图案、形状并非是对现实实体的模拟，而是按照自己对数字世界的理解，以色彩、图案、形状进行视觉信息上的划分。

它强调基于网格的布局，并具有“精心选择颜色，边到边图像，大尺寸字体，和有意的白色空间”的特点，以获得醒目的图形外观。它崇尚多彩，但它并不使用那种很艳丽的颜色，反而似乎是为了让图案变得沉稳，而有意令原本很晃眼的色彩混入一点点的灰色，让图案变得活泼之余，又不会因为过于艳丽而让人感觉到俗套和嬉皮。它也没有抛弃阴影。

这种风格是一种受纸卡片启发的方法，“基于现实的视觉线索”和“熟悉的触觉属性”来帮助用户快速理解和导航设计——这听起来像是对拟物化的认可。

例如，请注意 Tubik Studio 的这个 UI 概念中按钮上微妙的阴影和颜色如何使导航选项瞬间变得清晰的。背景中的大字体和纸张状的表面分层可以归因于材料设计。

谷歌免费提供了非常详细的材料设计指南，这让设计师可以轻松地将这种风格应用到他们自己的工作中，无论是严格遵循这些指南，还是挑选他们喜欢的元素和技术。

这也鼓励设计师尝试自己对平面和材料设计的诠释和修改，创造新的趋势。

因此，当谈到普及设计风格时，像微软、苹果和谷歌这样的大品牌肯定有影响力，是设计师引领潮流并与之一起创造新东西——是设计师帮助引领下一个“大事件”。

思考几个问题：

“当你考虑扁平化设计（视觉简洁）和拟物化（视觉熟悉度）背后的精神时，你会发现这两个概念当然可以共存。正如当前和未来肯定会证明的那样，棘手的问题是在两者之间找到完美的平衡。”

你认为扁平化设计朝着更平衡的方向发展吗？它会一直存在下去，还是你已经准备好改变方向？

如果你想了解扁平化设计背后的一些概念——从瑞士设计和极简主义的影响，到响应性和基于网格的布局等关键功能找到一些相关的阅读材料和资源吧！

本文由海空设计翻译并编辑，

如需转载，请标明出处，谢谢。

#平面设计##设计##创意##画册设计#