一、图标的定义

图标是图纸标题栏的简称。图标的作用是表示本张图纸的类别、图名、项目名称、图纸编号等，以便从图纸目录中能迅速查找到所需要的图纸。但是我们今天说的图标，我想是大家很熟悉的，也称为 icon 或 picto，是指有明确含义的图形视觉语言。

icon 是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为.icon、.ico。常见的软件或 windows 桌面上的那些图标一般都是 ICON 格式的。icon 元素包括两个可选的子元素：small-icon 子元素和 large-icon 子元素。文件名是 Web 应用归档文件 (WAR) 的根的相对路径。部署描述符并没有使用 icon 元素。但是，如果使用 XML 工具编辑部署描述符，XML 编辑器可以使用 icon 元素。图标是特殊类型的小位图，最大尺寸为 32×32 像素。

那么当我们一提起图标设计，您的脑中会想起哪个图标来呢？有可能您想起的是微信 APP ，由两个白色气泡组成的启动图标，或者是我们每天使用的 APP 中的那些返回、关闭等系统图标，也可能是商场导视里的卫生间图标等。没错，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富：有线的、有面的、也有拟物的等等。图标的历史可以追溯到象形文字（Pictogram），我们的祖先在发明文字之前就使用图标记录一天的生活了。听着是不是不可思议呢？从亘古时代的象形文字开始，我们的祖先就偏爱使用这种抽象的图形来表达意思了。在平面设计领域的商标其实也是一种图标，平面设计里的视觉导视（例如卫生间的图标）也有图标的应用，所以图标在我们的生活中应用非常广泛。

△ 生活中随处可见的图标

随着计算机的出现，图标被赋予了新的含义，又有了新的用武之地。在这里图标成了具有明确指代含义的计算机图形。桌面图标是软件标识，界面中的图标是功能标识，在计算机软件中，它是程序标识、数据标识、命令选择、模式信号或切换开关、状态指示。图标在计算机可视操作系统中扮演着极为重要的角色，它不仅可以代表一个文档，一段程序，一张网页，或是一段命令。我们还可以通过图标执行一段命令或打开某种类型的文档，你所要做的只是在图标上单击或双击一下。

△ 不同的图标设计风格

现如今我们界面中的图标已经是非常丰富了，如果根据 Material Design 对图标的分类，UI 设计中的图标可以分为带有品牌属性和特性的产品图标、有功能指示作用的系统图标两种图标，下面我们将针对于这两种图标进行研究。

二、产品图标

产品图标是我们在设计界面的时候体现品牌特性的图标。通过产品图标，用户就可以大概感知这个产品主要是做什么的。比如微信的产品图标是两个对话气泡，暗示了这是一款社交 APP；再比如 QQ 音乐的音符的图标，暗示了这是一个音乐 APP。

同时有些产品生活中必备 APP，自身已经在用户心中产生的品牌来，所以直接设计产品图标，比如淘宝 APP 的产品图标就是一个「淘」字；支付宝的产品图标就是一个「支」字。知乎的产品图标一个 [知] 字。今日头条 APP 图标中的 [头条] 两字，所以优秀的产品图标都会在我们心中打上一个烙印，当我们看到这些图形、配色时，脑中会立即想起来它们的功能和特点。产品图标除了在手机屏幕中作为启动图标，也会出现 APP 内部，「关于我们」界面等场景中，所以也要有一定的灵活性，在设计上要以简单、大胆、友好，圆润的方式，让人能够很好地接触和触碰，来传达产品的核心理念和意图。产品图标简单的来说就跟公司的 LOGO 一样 ，需要让用户一眼看到它就能够与脑中的产品相关联。所以设计一个优秀的产品图标对于任何产品来说都是非常重要的。

1.风格

图标设计的基本原则就是要尽可能的发挥图标的优点：比文字直观，比文字漂亮，减少图标的缺点：不如文字表达的准确。因此图标设计的基本原则可以简单的归纳一下几点。

第一：可识别性原则

可识别性原则，意思是说，图标的图形，要能准确表达相应的操作。换言之，就是我看到一个图标，就要明白他所代表的含义，这是图标设计的灵魂。可以当之无愧称之为图标设计的第一原则。

第二：差异性原则

差异性原则，什么意思呢？意思是如果一个界面上有六个图标，我一眼看上去，要能第一时间感觉到他们之间的差异性，否则我怎么辨认呢？这是图标设计中很重要的一条原则，但也是在设计中最容易被忽略的一条，图标和文字相比, 它的优越性在于它更直观一些，但是如果图标设计失去了这一点。

第三：合适的精细度，元素个数

首先我们要明确一个点，图标的主要作用是用的，代替文字，第二才是美观。但现在的图标设计者往往陷入了一个误区，片面的追求精细，高光和质感。其实，图标的可用性随着精细度的变化，是一个类似于波峰的曲线。在初始阶段，图标可用性会随着精细度的变化而上升，但是达到一定精细度以后，图标的可用性往往会随着图标的精细度而下降。

第四：风格统一性原则

我们经常会看到很多界面上，往往会堆砌着各种不同风格的图标，显然，这些图标都是从互联网上收集起来，由于没有完全配套的图标，只能东拼西凑，导致界面粗制滥造，业余。

文字风格

文字是最直白的信息，而且不容易被曲解。所以很多国内的产品都会使用文字来作为自己的产品图标。比如：支付宝、淘宝、今日头条、OFO、爱奇艺、知乎、网易新闻、闲鱼等。这么做也有它的问题，比如文字给人美的感受不如图形，因为文字需要阅读而不是观察。并且移动端设备都会在启动图标之下加上一行辅助文字，如果图标上的文字和下面的辅助文字完全重合，会显得像介绍了自己两遍一样。如果您决意要使用文字作为产品图标，且是中文的话，那么一定要记得文字最好为 1-2 个，并且不应该是产品的全称。如果是英文的话，最好是首字母而不是产品全称。当然不管是中文还是英文都需要选择合适气质的字体并做一定的变化。

今日头条：今日头条是一款优秀的新闻 APP。它的图标非常直白，一张报纸上有红色的头条标题，头条使用了非常粗的黑体字，非常显眼。

淘宝：淘宝采用了一个俏皮的「淘」字作为 icon 的主要元素，并且背景颜色是令人兴奋和刺激的橘黄色，凸显了电商属性。并且这个字使用了很久，用户对此有一定的品牌认知。

爱奇艺：爱奇艺的 icon 采用了英文字母 iQIYI 和上下边框相组合的形式。整体看来像是一个电视机，强调了品牌属性和功能，并且使用了在视频领域非常有识别性的绿色，让人一看便知这是爱奇艺了。

△ 今日头条、淘宝、爱奇艺的产品图标

填充图标风格

ps 绘图过程中经常需要将自己绘制的图案填充到图形中，这时我们就需要进行自定义图案并填充图行。图案填充是 CAD 软件中的一种剖面线填充说法，还有几种叫法参考自定义图案填充、图案填充。

填充图标风格具有简洁和识别性强的特点。这种 ICON 的可扩展性更高，比如在一些特殊节日时可以用手绘、拼贴等形式来做辅助图形。所以很多公司都钟爱填充图标风格。

线性风格

由于目前设计流行趋势，很多产品图标都会采用扁平的设计风格。扁平除了填充的图标之外，还有一种非常流行的形式——线性风格。线性风格一定要注意不要太细，因为手机和电脑设计环境显示尺寸不同，如果我们做得太细，那么在手机上看会非常尖锐，显得不太好点击。

微渐变风格

微渐变也是非常常见的表现手法。在拟物被扁平替代以后，我们会发现无法表达空间上的 Z 轴。所以用轻微的渐变表现图片的深度非常流行。我认为微渐变可能是众多图标设计风格中最有竞争力的一种。

卡通风格

卡通风格的产品图标会让用户更有好感，所以我们可以为产品设计一个可爱的卡通角色。好多决策者会认为卡通是一种低龄的审美，其实是错误的。卡通可以说是一种通吃的风格，比如腾讯就是以一个企鹅作为品牌形象开始拓展自己的版图。而卡通本身有不同的风格，比如拟物类的卡通、扁平类的卡通等，也会给人不同的感受。所以如果我们的产品要使用卡通作为产品图标，最好以目标用户群的喜好作为标尺。

2.图标的网格和参考线

如果我们想设计一个小图标，那么我们可以把画布放大到 400％来设计。同时可以使用网格和参考线来作为我们设计的辅助。网格在很多软件里都有，比如在 Illustrator 中点击视图 > 网格，即可开启网格了。参考线模板则需要下载第三方设计的模板，比如 Material Design 的参考线模板就有正方形、圆形、圆形和长方形结合等不同形式。如果对齐模板中的形状，即可得到面积相等的长方形、正方形、圆形。这对我们构建视觉上面积相等的图标很有益处。

△ 网格和参考线

△ 不同形状的网格布局

△ 在网格的辅助下可以设计出大小均衡的图标

3.尺寸

苹果启动图标尺寸

1. 桌面图标 (app icon)

iPhonex/8/7/6 plus(@3x) : 180 x 180

iPhone8/7/6s/6/5s/5/4s/4(@2x) : 120 x 120

2. 启动图片 (launch image)

iPhoen5s/5(@2x) : 640 x 1136

iPhoen4s/4(@2x) : 640 x 960

iPhone7/6/iPhonex/8/7/6 plus 建议使用 launch file 或 storyboard ；

如果依然想使用图片，尺寸数值为：

iPhone 8/7/6(@2x) : 750 x 1334

iPhone 8/7/6 plus (@3x) : 1242 x 2208

iPhone x (@3x) : 1125 x 2436

3. 系统搜索框图标 (Spotlight search results icon)

iPhonex/8/7/6plus(@3x) : 120 x 120

iPhone8/7/6s/6/5s/5/4s/4(@2x) : 80 x 80

4. 系统设置图标 (Settings icon)

iPhonex/8/7/6 plus(@3x) : 87 x 87

iPhone8/7/6s/6/5s/5/4s/4(@2x) : 58 x 58

5. 比较特殊的是 App Store:1024x1024

图:

△ Template-AppIcons-iOS

安卓启动图标尺寸

1. 程序启动图标：

LDPI (Low Density Screen，120 DPI)，其图标大小为 36 x 36 px。

MDPI (Medium Density Screen, 160 DPI)，其图标大小为 48 x 48 px。

HDPI (High Density Screen, 240 DPI)，其图标大小为 72 x 72 px。

xhdpi (Extra-high density screen, 320 DPI)，其图标大小为 96 x 96 px。

xxhdpi（xx-high density screen, 480 DPI）, 其图标大小为 144 x 144 px。

2.底部菜单图标

1. 大屏:
   1. 完整图片（红色）: 72 x 72 px
   2. 图标（蓝色）: 48 x 48 px
   3. 图标外边框（粉色）: 44 x 44 px

2. 中屏:
   1. 完整图片: 48 x 48 px
   2. 图标: 32 x 32 px

3. 图标外边框: 30 x 30 px

4. 小屏:
   1. 完整图片: 36 x 36 px
   2. 图标: 24 x 24 px
   3. 图标外边框: 22 x 22 px

3. 弹出对话框顶部图标

小屏 24 x 24 px Low density screen (ldpi)
中屏 32 x 32 px Medium density screen (mdpi)
大屏 48 x 48 px High density screen (hdpi)

4. 长列表内部列表项图标

小屏 24 x 24 px Low density screen (ldpi)
中屏 32 x 32 px Medium density screen (mdpi)
大屏 48 x 48 px High density screen (hdpi)

5. 底部或顶部 tab 标签图标

1. 大屏 (hdpi) screens:
   1. 完整图片（红色）: 48 x 48 px
   2. 图标（蓝色）: 42 x 42 px

2. 中屏 (mdpi) screens:
   1. 完整图片: 32 x 32 px
   2. 图标: 28 x 28 px

3. 小屏 (ldpi) screens:
   1. 完整图片: 24 x 24 px
   2. 图标: 22 x 22 px

6. 底部状态栏图标

ldpi (120 dpi) 18 x 18 px 小屏
mdpi (160 dpi) 24 x 24 px 中屏
hdpi (240 dpi) 36 x 36 px 大屏
xhdpi (320 dpi) 48 x 48 px 特大屏

△ 安卓图标模板

4.设计流程

设计产品图标前，首先我们需要找一些和产品气质相符的图片制作情绪板。通过情绪板我们可以感受到产品的调性，然后我们从中提取一些形状和色彩作为我们产品图标的主要造型。这里我举我的产品每日名画的例子，每日名画是一个美术方面的 APP，所以我找了一些和美术相关的图片。

△ 关于美术的情绪板

下面我开始在 AI 设计产品图标了。我建立了一个 1024x1024px 的画布，然后根据卢浮宫前的金字塔建筑设计了一枚抽象的产品图标，它内在的符号是：带领大家走进艺术的殿堂。同时我也增加了一些自己对美术的含义，如艺术来源于生活高于生活等。这些都写在了设计说明中。

△ 在 Illustrator 中设计产品图标

然后我给这枚图标加入了蒙德里安的配色，增加产品的艺术感，并最终完成产品图标的设计。这个图标也可以作为该产品的企业形象（VIS），将来产品周边都可以使用这个图形。

△ 最终定稿的图标

由于产品会首先上线到苹果设备上，所以我下面把 AI 绘制的产品图标全选复制，然后打开图标模板中的智能对象（双击图标模板中智能对象图层的缩略图），粘贴过来。粘贴的时候系统会提示选择粘贴过来的方式，这里我们选择：智能对象。然后保存并关闭智能对象，这时回到模板 PSD 中，就看到了这个效果。

△ 替换了模板中智能对象的效果

接下来隐藏背景图层，然后按下键盘上的 ctrl+Shift+Alt+S，调出存储为 Web 所用模式，选择保存到桌面上，格式选择仅图片。关闭 PS，打开桌面上的文件夹，就看到图标被我们工整地切好了。

△ 产品图标的切图文件

三、系统图标

第二种图标被称为系统图标。系统图标指的是担负着一定功能和含义的图形，一般来说需要像文字一般地被人迅速理解，所以表达方式上不适合特别复杂。比如微信底部四个系统图标：「微信」、「通讯录」、「发现」、「我」就使用了比较简洁的线性风格。

当然系统图标也不一定要做的非常无趣，比如我们常用的 58 同城 APP 中就有大量的系统图标，在保证识别性的前提下使用了多彩的颜色和不同的造型，显得非常活泼。所以系统图标同样可以做得有趣和多样，前提是保证图标的可识别性。

1.风格

填充图标（Filled icon）

填充图标是以面为主要表现形式的图标。在微信 APP 底部的 tab 栏中，未选中的图标是线性图标，而选中态则是填充图标，并且会变成较为鲜亮的颜色暗示用户该功能被选中了。填充态图标占用的面积要比线性图标多，所以更加显眼。实际上，在最新的苹果设计规范中，苹果也建议开发者在 APP 底部 Tab 栏中全部使用填充图标，点击态通过改变填充图标的颜色进行区别。这是因为填充图标看上去像可点击的。

△ 图为填充图标

线性图标（Outlined icon）

线性图标的表现形式是线条，在系统图标里通常是由统一粗细的线条组成。这里可能很多新朋友不明白为什么要使用统一的粗细，这是因为通常系统图标并非单一出现，而是成组使用。比如微信底部的四个 tab 图标、网易云音乐顶部导航栏的图标等。在一个场景下的几个同等重要的图标，如果线条粗细不一致，很容易造成它们存在权重上差异的感觉。所以我们在绘制线性图标时，线条通常都会使用统一的粗细。

△ 图为线性图标

圆角图标（Rounded icon）

无论是线性还是填充的图标，在图标的边角处使用圆角都是圆角图标风格。圆角图标的好处就是让人觉得很温柔，可以非常舒适地点击它。所以很多产品的图标都会使用圆角图标。

△ 图为圆角图标

尖角图标（Sharp icon）

无论是线性还是填充的图标，在图标的边角处使用尖角都是尖角图标风格。尖角图标的好处是让人感觉到有棱角，视觉上会多凝视几秒。并且给人以正式的感觉，所以像银行、办公等 APP 中都较多地使用尖角图标风格。

△ 图为尖角图标

断线图标（Breaking Lines）

如果我们的线性图标显得太死板，我们可以使用断线这种方式来让它变得俏皮。断线图标就是线性图标的一种风格变化，它的特点就是在线条中出现断口。但是这个断口并不是看起来那么简单，它得遵循几个规则：第一，断线开口只有一个，否则图标会无法识别；第二，断线开口位置不应该在中心线上；第三，断线开口尽量在转折处；第四，断线不应该太过于琐碎。

△ 土豆 APP 的标签栏使用了断线的风格

双调图标（Two-Tone icon）

如果我们把图标简单地分为线性图标和填充图标，是不是太无聊了？比如我们要设计一个 iOS 平台的 APP，它的底部 Tab 栏就一定是未选中态是线性的，选中就是填充的吗（或者全部是填充态，仅仅改变颜色）？这也太无聊了吧！所以又出现了双调图标的设计风格。即：双调图标的外形还是线性图标，但是用透明度很高的同类色填充到线性图标内部空间里。这样的图标显得俏皮可爱，并且感觉非常透气。

△ 图为双调图标

动态图标（Motion）

动态图标是非常有趣的，如果静态图标不足以让用户感受到新鲜，那我们不妨给图标增加动效。比如 QQ 应用中底部 Tab 栏的图标点击其中一个的时候，其他图标会「偷看」选中态图标的方向。除了底部标签栏之外，很多 APP 点击能触发导航的「汉堡包图标」，点击时也会有一个从导航图标变成返回图标的动画。这都是非常能够调动用户好奇心的。

△ Material Design 中的动态图标

四、图标的设计方法

1.矢量图形（Vetctor）

我们在使用 Photoshop 工具的时候会感叹，画笔比钢笔好用，橡皮比布尔运算好用。那么我们在画图标的时候能不能使用画笔这样的工具来绘制图标呢？在 Photoshop 里使用画笔工具和橡皮工具、涂抹工具、选区工具的填充、油漆桶工具制作的图形，以及从网络上复制过来的 jpg 图片文件，这些都是像素图形。它们是计算机记录每一个点的颜色来呈现图像的。这也是为什么我们把一张照片放得特别大它就虚了的原因。而我们通过 Photoshop 中的钢笔工具、布尔运算、贝塞尔曲线、形状图层制作的图形，以及 Illustrator 复制过来的图形、Sktech 绘制的图形等，都是矢量图形。它们是计算机记录一个锚点到另一个锚点的方向、位置、色彩来呈现图像的。所以像素图形变化多端、颜色变换丰富、细节更多；矢量图形则文件较小，并且具有随意放大缩小都不虚的能力。因为每个锚点之间的方向、位置都是相对的，放大和缩小不受影响，而像素图形记录每个点的色彩，比如一张 2000px x 2000px 的图片，缩小到 1000px x 1000px 就会损失一千个像素信息。我们绘制图标比较适合用矢量图形来设计，因为我们可能需要随时调整图标的大小，并且在不同分辨率的适配中也更加方便。

2.布尔运算（Boolean）

布尔运算听着很可怕，其实非常简单，布尔运算是数字逻辑推演法，主要有数字逻辑的联合、相交、相减。在我们使用的平面软件中引用了这种逻辑运算方法来使基本图形通过联合、相交、相减等数学计算变成新的造型。布尔运算在 Photoshop、Illustrator、Sketch、Adobe XD、After Effects 等我们熟悉的软件中都有，并且操作基本一致。

布尔运算的核心就是两个形状的关系：即 Union（并集）、Intersection（交集）和 Subtraction（差集，包括 A-B 和 B-A 两种）。这些关系有点像我们初中学过的数学，应该比较好理解。但是很多软件中对于布尔运算的关系翻译不同，所以可能大家会有些不适应。比如在 Photoshop 中布尔运算被翻译成：合并形状、减去顶层形状、与形状区域相交、排除重叠形状。而在 Adobe XD 中则翻译成：添加、减去、交叉、排除重叠。虽然名字不同，但是功能是相同的，所以大家在学习新的软件时不妨先找一下布尔运算。

那么我们使用什么软件来绘制图标呢？这里我建议使用 Illustrator，因为 Illustrator 为矢量图形软件，做出来的图形不会虚。首先，UI 设计师使用不同的软件来设计页面，目前主流是 Photoshop 和 Sketch，也有很多设计师选择 Adobe XD。而这些软件都是兼容 Illustrator 的，所以使用它来绘制图标非常有灵活性。可能您对 Illustrator 并不熟悉，不过没关系，我们在这里只需要了解它与图标绘制功能相关的功能即可，比如钢笔、布尔运算、属性面板、描边、填充、混合工具等，并不需要学习非常深入。所以大家不必紧张。

笑脸图标

笑脸图标的设计步骤：画出一个正圆；接着画一个小圆，然后 ctrl+F 复制平行移动到旁边，然后右键编组。接着，同时选中大圆和编组的小圆进行水平居中对齐。我们绘制一个圆形，然后通过布尔运算减去一个矩形得到半圆形组成嘴，完成。

△ 笑脸图标

对号图标

对号图标的设计步骤：使用矩形工具画出一个长方形，然后复制，将复制后的长方形向右上移动相同的距离，使用布尔运算剪切，旋转 45° 后变成一个对号。绘制一个正方形，使用路径选择工具选中，拖动圆角的圆点拉出圆角得到圆角矩形。对号和圆角矩形进行布尔运算，完成。

△ 对号图标

WIFI 图标

WIFI 图标的设计步骤：绘制多个圆形并且通过布尔运算相加减得出三个圆圈嵌套的靶子造型。通过旋转过的 45° 矩形和之前图形布尔运算得到 Wifi 图标，完成。

△ WIFI 图标

地理位置图标

地理位置图标的设计步骤：选择矩形工具单击画面输入数值，建立一个 100px 的圆形。然后选择这个圆形复制它，然后等比例缩小它，和之前的大圆进行布尔运算相减，得到环形。绘制 50px 的矩形，用对齐工具放在环形的左下方。旋转 45° 得到地理图标，完成。

△ 地理位置图标

云彩图标

云彩图标的设计步骤：绘制两个大小不同的圆形，使用对齐工具进行底部对齐。绘制一个矩形，同样底部对齐。合并形状，完成。

△ 云彩图标

眼睛图标

眼睛图标的设计步骤：绘制出一个正圆。复制这个正圆形，然后按着 Shift + 方向键下键，并通过布尔运算得到眼睛外轮廓。绘制两个圆形，通过对齐工具和布尔运算工具得到最终眼睛造型，完成。

△ 眼睛图标

铃铛图标

铃铛图标的设计步骤：首先用圆形和矩形合并组成主体；使用矩形和圆形进行布尔运算绘制铃铛底部和铃铛顶部的零件，然后进行合并形状；铃铛底部的半圆使用圆形和矩形布尔运算，完成。

△ 铃铛图标

简易齿轮图标

简易齿轮图标的设计步骤：通过两个圆形进行布尔运算得到环形。绘制一个矩形，上下复制在圆形上，然后把它们俩编组和环形使用对齐工具进行水平垂直对齐。复制矩形编组并旋转 90°，得到一个十字形。复制这个十字形并最终全部合并形状，完成。

△ 简易图标

齿轮图标

齿轮图标的设计步骤：用 AI 的爆炸图形和圆形进行布尔运算画出齿轮；用两个圆形进行布尔运算做出里面的零件，完成。

△ 齿轮图标

螺丝刀图标

螺丝刀图标的画法：用圆形和矩形做出螺丝刀主体；用矩形旋转并复制再布尔运算做出凹槽；使用矩形做出前面的造型，完成。

△ 螺丝刀图标

苹果图标

苹果图标的画法：绘制一个六边形。将水平中间两个点向上移动。在中心线上下建立两个锚点，并且向下移动。将下面两个点向内分别移动。使用圆角工具将每两个相同的点一组一组拉成圆角。绘制一个矩形并且旋转 45°，然后将左右两个点向内拉得到菱形。用圆角工具使菱形变成叶子造型并且旋转 45°。使用一个圆形和苹果造型相切，完成。

△ 苹果图标设计过程

放大镜线性图标

放大镜线性图标的画法：绘制正圆。绘制一条直线。用属性面板里的对齐工具把它们俩对齐。用描边面板里的属性将描边改成圆头，然后旋转 45° 即可。

△ 放大镜线性图标

时钟线性图标

时钟线性图标的画法：绘制正圆。绘制一个矩形，对齐圆形中心。用增加锚点工具在矩形左和下边上增加两个锚点。用直接选择工具框选没用的线条，删除即可。

△ 时钟线性图标

点赞线性图标

点赞线性图标的画法：绘制两个矩形，并用直接选择工具选择重合的四个锚点，在属性面板里使用对齐工具让它们完全对齐。将大的矩形底部锚点向左移动。绘制一个矩形并和大的矩形左对齐。用直接选择工具选中直角，拖动圆角小圆点让它们变成圆角，完成。

△ 点赞线性图标

3.线性图标的处理

如果您掌握了以上填充态图标的设计方法，相信其他图标的设计只要以此及彼的思考，就可以完成。比如线性图标，在绘制线性图标时，我们首先会建立一个半透明的矩形来固定图标应该绘制的范围，比如「40px」。然后我们把填充关闭，只使用描边来绘制线性图标即可。绘制完以后我们无需保存文件，仅通过 Ctrl+C 的复制快捷键，然后打开 Sketch 或者 Adobe XD 就可以使用 Ctrl+V 将图标粘贴过去了。但是，如果您使用 Photoshop 做界面设计，可能会多两道手续，首先就是线性图标需要扩展才可以复制到 Photoshop 中。将图标复制一份（扩展之后的图标不方便修改，所以要留着可修改版本），然后点击对象菜单 > 扩展，点确定，就可以把原本是没有闭合的路径改为完整的形状。

△ 在 Illustrator 中的扩展

4 应用

标签栏图标

底部标签栏看似永远都是几个按钮一层不变，但是随着极简风格的流行，底部标签栏图标风格很大一部分决定了界面的风格。因此可以有很多琢磨的地方。

在苹果和安卓 APP 的底部，一般都会有一个放置重要功能的常驻栏，在 iOS 中被称为标签栏（也叫做 Tab 栏）。一般，Tab 栏的图标是 2-5 个。每个图标的区域平分整个 Tab 栏宽度，底部会有一个 22px（11pt）的文字注释。当然如果图标释义较为清晰，也可以为了保持设计感去掉文字注释。如果我们是以 iPhone6/7/8 尺寸设计界面，那么我们的标签栏图标尺寸应该是 60px（30pt）左右，可以基于这个范围来设计我们的图标。

每个 Tab 栏的图标都应该设计一个选中状态，可以做样式的变换也可以做颜色的改变，总之要让人知道当前所在的页面是哪个。如果您的 Tab 栏由五个 icon 组成，那么可以在中间放置比较重要的功能，并做出突显的样式，比如使用一个圆球当作背景。还要额外注意，图标的选中态样式要和中间突出状态的图标保持区别，以免发生误会。

导航栏图标

导航栏是指位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用。

在苹果 APP 的顶部区域，我们称之为 Navigation Bar，就是导航栏。导航栏左右一般都会有图标，如果是二级页面，左侧一般是返回图标。安卓也有类似的设计。那么我们在设计这种图标的时候一定要保证所有导航栏上的图标大小和风格都是一致的。如果以 iPhone6/7/8 尺寸设计界面，那么导航栏图标的尺寸大概是 44px（22pt）左右。

总结

图标设计是 UI 设计中非常重要的一环，因为除了文字和图片的排版之外，在扁平时代我们能够传递给用户情绪和设计感的通道就是页面中的各种图形和图标了，如果做不好图标，用户就将在使用界面时失去乐趣。所以，我建议每位 UI 设计师都需要在平时做大量的图标练习。在不同的图标风格中，学会使用各式各样的武器。

文章转载自：那个村品牌设计