ui图标设计要点（UI设计中扁平化图标绘制技法）

ui图标设计要点（UI设计中扁平化图标绘制技法）保持简练的结构，将一些不必要的元素全部去处掉，最后只剩下外框、表盘和指针，已逐渐出现的图标的雏形。Step 3. 去除多余元素找一张实物图片观察它主要是由哪些部分构成的，以下图时钟为例，主要有外框、表盘、刻度、数字和指针等。Step 2. 重新描绘图形在实物图的基础上重新绘制，并去除一切质感、渐变、阴影、高光等，图形最终呈现扁平化，但这并不是图标。

自从苹果推出扁平化设计以来，整个行业似乎都扁平了。扁平化虽然相对于拟物简单许多，但我们可不要把画一个扁平化图标想的那么简单，今天我们来学习下扁平化图标绘制技法。

一、通过现实物品绘制

在现实世界里存在许许多多真实的物品，例如相机、电脑、文件、日历、地图、时钟、沙发等，设计师通过抽象的手法将它们绘制成扁平化图标，通常分为以下绘制步骤。

Step 1. 观察现实参照物

找一张实物图片观察它主要是由哪些部分构成的，以下图时钟为例，主要有外框、表盘、刻度、数字和指针等。

Step 2. 重新描绘图形

在实物图的基础上重新绘制，并去除一切质感、渐变、阴影、高光等，图形最终呈现扁平化，但这并不是图标。

Step 3. 去除多余元素

保持简练的结构，将一些不必要的元素全部去处掉，最后只剩下外框、表盘和指针，已逐渐出现的图标的雏形。

Step 4. 将图形抽象化

图标是对现实参照物的抽象化，重新刻画过于具象的指针，使用简洁的圆柱形状替代指针，并调整结构让图标保持平衡。

Step 5. 使用鲜艳色彩

图标的作用是指引用户，而鲜艳的色彩更能吸引用户的注意力，给每个元素重新搭配明亮干净的颜色。

Step 6. 增添一些细节

一点点的细节能让呆板的图标更加具有生命力，模仿现实参照物给表盘添加内阴影、指针添加投影，绘制完成。

二、通过拟物化图标绘制

拟物化图标是模拟现实参照物绘制的图标，具有强烈的质感、纹理、立体、高光、投影等效果，将拟物化图标转为扁平化图标则必须将这些效果统统去掉，并进行适当的调整和简化，通过色彩的明暗叠加来构建立体感。

Step 1. 观察拟物化图标

找一张拟物化图标观察它主要是由哪些部分构成的，以下图Instagram图标（作者：Artua）为例，主要有机身、镜头、闪光灯、相片和按钮等。

Step 2. 绘制机身

将图标拆解成各个部件然后逐个绘制，首先在图标基础上绘制出机身的基础图形，去掉机身的立体厚度以及机身凸起的纹理。

Step 3. 绘制相片

使用笔直的矩形形状绘制相片，去除鼓起、弯曲、折角、投影等现实效果，高光部分使用白色矩形调整不透明度叠加在相片上。

Step 4. 绘制镜头

镜头由多个圆形绘制而成，去除所有的渐变、高光等效果，给镜头添加向下的平面投影能让镜头有凸起的效果。

Step 5. 绘制按钮

按钮的厚度可以使用两个明暗不同的颜色叠加完成，然后给按钮添加向下的平面投影使它们有立体感。

Step 6. 绘制闪光灯

观察闪光灯会发现是一块凸起的灯片内嵌在机身上，所以内嵌部分使用深色、凸起部分使用浅色并添加高光效果，绘制完成。

三、通过剪影图标绘制

如果把通过拟物化图标绘制看成是做减法的话，那么通过剪影图标绘制就是做加法。扁平化图标原本也就是在剪影图标的基础上添加简单的图层效果，从而使简单的图标变得细节丰富又精致。

Step 1. 收集剪影图标

在网上搜索邮件的剪影图标，大概就是下面这两种，左边是面形剪影图标，右边是线形剪影图标。现在我们要以这个邮件的图标为基础，来绘制成扁平化图标。

Step 2. 绘制基础形状

在现实生活中，这种欧式的信封，它其实是由一张菱形四边形的纸将4个角向中心折叠而成的。先绘制一个圆角矩形，再绘制一个三角形与圆角矩形底部居中对齐，复制这个三角形垂直翻转与圆角矩形顶部居中对齐。

Step 3. 给形状填充颜色

信封是现实生活中既有的真实物品，通常它是白色的纸张。我们知道折叠最上面的角最亮，最下面的纸最暗，中间的角其次。所以，给这三个图层分别填充深浅不一的颜色。如果想要绘制极简风，那么你看，它就是了。

Step 4. 添加细节

给每一层都加上浅浅的投影，特别为上面的折角添加一个大的长投影，绘制成信封被打开翘起的效果，为下面的折角添加白色的内阴影，使它有纸张厚度的感觉，绘制完成。

Step 5. 另一种方案

我们还可以把它绘制成打开的信封，所以上面的角向上摊开。考虑到展开的信封高度增加了，所以将角度重新调整了一下。同时，为了使图标的内容更加丰富，重新填充颜色，依次给每一层填充深浅不一的红色。

Step 6. 绘制信纸

仅仅一个打开的信封略微有些单调，我们再绘制一张信纸塞在信封里。信纸上有红蓝相间的装饰边，它们传递给用户一种信件的暗示。信纸上还绘制了由文字内容简化后的图形，使图标的细节更饱满。

Step 7. 调整优化

最后审视图标发现信封可以再简化一些，去掉折角，将左边或右边的折进拖拽至最上层，并填充折角的颜色，绘制完成。

扁平化图标欣赏

一加手机氢OS遵循Google的Material Design设计理念，通过简单的几何形状、轻微的颜色过度、微弱的不透明度以及丰富的色彩创造了一套极简小清新的扁平化图标，这种低调的北欧风格调让人眼前一亮。

早期的谷歌被称为有技术、没设计的公司，催生了一个空白如纸、视野开阔的搜索首页。从2011年开始，优秀设计师Chris Bettig加盟谷歌担任艺术总监后，建立了跨产品的统一的视觉设计风格和原则。下图是谷歌系列产品的扁平风格图标展示，在设计上，谷歌要求必须高度简化，呈现几何形状，并具备笔直的长投影。

本文摘录自人气网红设计师田海老师著作《零基础学UI》

本书由浅入深，全面详细规范的讲解了iOS系统移动应用UI设计的相关知识，包括移动应用UI基础知识、布尔运算和形状工具的使用技法、系统图标和扁平化图标的绘制教程、iOS人机界面交互指南、iOS系统界面知识和界面设计等等。无论是零基础的设计爱好者或转型设计师，还是初入门或半路自学的UI设计师，都适合认真阅读这本书，它是作者在多年的UI设计工作中实战经验和理论知识的系统总结。

关于作者：

田海，大家尊称他B哥。从事移动应用UI设计六年，先后在迅雷、腾讯和阿里巴巴任职，UI设计师，拥有丰富的UI设计实战经验和理论知识，并常常在国内最专业的设计网站发表设计文章和原创作品，拥有数百万人气和近两万名设计师粉丝，还曾多次获得全国UI设计大奖。

本文章来源【学UI设计网】http://www.xueuisheji.com/?p=4433