新浪博客

#海空设计#|扁平化设计的优点、缺点和未来

2022-04-18 14:52阅读：

http://blog.sina.cn/dpool/blog/u/1241880347

书籍鉴赏文章来源于“海空设计”微信公众号【海平面】扁平化设计的优点、缺点和未来

#海空设计#|扁平化设计的优点、缺点和未来




什么是扁平化设计？



“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


由于设计师在过去几年中对扁平化设计进行了试验，许多人已经注意到我们在这里介绍的一些优点和缺点，并决定相应地调整风格。
虽然扁平化设计的早期迭代以严格的视觉简洁为特征，但最近的发展已经看到了阴影和纹理等品质的微妙重新引入——出于美学和功能的原因。

我的更多文章

下载客户端阅读体验更佳

APP专享