当前位置：首页 >教程首页 > U I 设计 > AI+UX设计大师班 >打造扁平化设计的5大原则

打造扁平化设计的5大原则

发布时间：2018-11-17 19:57:24

如今设计界最炙手可热的明星大概就是扁平化设计了吧，关于它的讨论至今都没有冷却的迹象。诸多设计师分成了泾渭分明的两个阵营，一边努力把扁平化做到极致，一面对其不屑一顾。

我是个骑墙派，不支持也不反对，在我看来，优秀的设计的定义就是好用，只要能设计出优秀的产品，我可以采用任何方式，扁平化也是其中之一。但是必须意识到，没有哪种风格是包打天下的，不能强行将一种风格应用到不该用的地方。

那么，扁平化究竟该怎么实现怎么应用呢？下文将要做的就是分析扁平化的五个最典型的特征，同时也介绍一下伪扁平化（不含贬义，只是一种折衷的设计方式）。

一、拒绝特效

扁平化这个词来自于这种设计所使用的样式和形状，它完全属于二次元世界，一个简单的形状加没有景深的平面，不叫扁平化都浪费这个词了。

这个概念最核心的地方就是放弃一切装饰效果，诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落，没有任何羽化、渐变或者阴影。

这一设计趋势极力避免任何拟物化的元素，这导致这一设计风格在其它平台有时候显得突兀，前景图片、按钮、文本和导航栏与背景图片格格不入，各成一派。

那么，扁平化的效果如何呢？

因为这种设计有着鲜明的视觉效果，它所使用的元素之间有这清晰的层次和布局，这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格，尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。

二、界面元素

扁平化设计通常采用许多简单的用户界面元素，诸如按钮或者图标之类。设计师们通常坚持使用简单的外形（矩形或者圆形），并且尽量突出外形，这些元素一律为直角（极少的一些为圆角）。

这些用户界面元素可以方便用户点击，这能极大的减少用户学习新交互方式的成本，因为用户凭经验就能大概知道每个按钮的作用。

此外，扁平化除了简单的形状之外，还包括大胆的配色。但是需要注意的是，扁平化设计不是说就简单的搞些形状和颜色搭配起来就行，它和其他设计风格一样，是由许多的概念与方法组成的，想要学习具体设计方法的朋友可以看看 Designmodo，这里有许多现成的设计实例可以让大家分享（免费矩形UI、免费扁平化UI，这两个地方是一些简单的 PSD/HTML UI kit 和一些最基本的组件；专业矩形UI、专业扁平化UI，这两个地方是一些完整的网页／APP PSD/HTML UI 包）。

三、优化排版

由于扁平化设计的使用特别简单的元素，排版就成了很重要的一环，排版好坏直接影响视觉效果，甚至可能间接影响用户体验。

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

如何使用字体也是一门学问，要学会让不同的字体表达不同的概念，通过字体告诉用户这某一设计／功能的含义，努力使字体成为你简化设计的有力武器。

四、如何配色

扁平化设计中，配色貌似是最重要的一环，扁平化设计通常采用比其他风格更明亮更炫丽的颜色。同时，扁平化设计中的配色还意味着更多的色调。比如，其他设计最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到八种颜色。

而且扁平化设计中，往往倾向于使用单色调，尤其是纯色，并且不做任何淡化或柔化处理（最受欢迎的颜色是纯色和二次色）。另外还有一些颜色也挺受欢迎，如复古色（浅橙、紫色、绿色、蓝色等）。

五、最简方案

设计师要尽量简化自己的设计方案，避免不必要的元素出现在设计中。简单的颜色和字体就足够了，如果你还想添加点什么，尽量选择简单的图案。

扁平化设计尤其对一些做零售的网站帮助巨大，它能很有效的把商品组织起来，以简单但合理方式排列。（编者注：有兴趣的读者可以自行寻找一些例子，原文作者推荐看 Svpply，但是网站与作者的描述略有不符，故略过不提。）

另：伪扁平化设计

最近还有一种趋势值得关注，一些设计师把某一项特效融入整体的扁平化之中，是其成为一种独特的效果。比如说，在简单的按钮加一点点渐变或阴影，从而使这种风格成为其特色，产生出一种扁平化设计的变种。这种设计要比单纯的扁平化更具有适用性和灵活性。

许多设计师比较喜欢这种设计，因为这意味着他们可以加点阴影或透视在某些元素上。用户可能也会喜欢这种稍微圆滑一点的设计方式，这能引导他们进行一些适当的交互。

上一篇 2011年网页设计趋势全面分析

下一篇在Sketch中制作一款质感铅笔

返回列表

学员作品赏析

2101期学员李思庭作品
2104期学员林雪茹作品
2107期学员赵凌作品
2107期学员赵燃作品
2106期学员徐正浩作品
2106期学员弓莉作品
2105期学员白羽新作品
2107期学员王佳蕊作品

热门课程

专业讲师指导快速摆脱技能困惑

多种教程总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

迪士尼如何使用Maya制作《海洋奇缘2》

今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！

增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
短视频怎么剪能上推荐？这10个概念请记牢！

在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
探秘皮克斯！《头脑特工队》的幕后制作

今天，我们聊聊皮克斯的《头脑特工队》系列
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？

中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......
2025年春晚吉祥物和新Logo出炉，设计师出来领鸡腿

近日，中央广播电视总台《2025年春节联欢晚会》发布官方吉祥物形象“巳（sì）升升”，祝福全球华人在新的一年如意康宁、好事连连。