编辑导读：作为一个设计师，有时候在工作中会过度重视美感和创意，辨识度是有了，但是缺失了品牌感。没有了品牌感，这个图标就可以放在任意一个产品上使用，无法与品牌产生强联系。那么，如何设计一个有品牌感的图标呢？本文将从三个方面展开分析，希望对你有帮助。
我们在画图标的时候，往往会忽略掉一个重要的问题：缺失品牌感。也就是说，这个图标和我们的实际品牌、业务并没有什么联系，它仅仅满足了可辨识这个温饱需求。
图标缺失品牌感，就会导致同质化的问题，这些图标放在任意一个产品上都可以通用。
对于产品，记忆点的缺失导致用户看完后对于我们的业务、品牌不会产生任何深刻的印象。对于我们设计师，图标和业务的断层则很容易让我们陷入反复改稿的被动局面，并且设计话语权也越来越小。
那么，有没有什么系统、易于理解的方法来让我们的图标具备品牌感？
当然有。
接下来的这个图标三步品牌化是我一直在用的办法，而且屡试不爽，基本用了这个方法，需求方基本一稿过～
文章案例选用了对接京东物流的国际物流项目。当时有一个着陆页的需求，需要在首屏下的优势板块中绘制六个图标，分别对应平台的六大优势。接下来，我将详细讲解如何运用这个图标三步品牌化方法绘制与品牌息息相关的图标。
品牌符号从广义上来讲也就是形状。
比如天猫最近的双十一购物节，便是用一个猫头来作为这次大促的品牌符号，通过每年固定时间节点的品牌形象建立心智。
再比如之前大热的腾讯综艺《演员请就位》，它的品牌符号就是不同矩形色块的叠加组合形态。
通过承载的不同信息可以扩展为不同的类型，比如下面的固态层、图片层和文字层就分别承载了内容、图片和文字。
Google在18年于material design中新增了一整块章节来阐述图形语言。
google原话是：形状可以引导注意力，让用户易于识别组件，识别状态和品牌语言传达。
也就是说，形状并非我们以往认知中的作用，品牌同样可以借助形状来加强效应。
最典型的就是谷歌自家出品的google play。你可以看到google play被提炼出的三角形符号被作为外轮廓延展到来所有相关的业务icon，显著加强了品牌记忆点。
再比如国内的蚂蚁财富，便是通过提炼logo中的箭头符号，将其延展到三个优势图标当中，一样得传达了蚂蚁财富的品牌表达。
所以，基于业务目标以及行业特征，我们将倒三角这个符号作为我们这次项目的品牌符号。
至于为什么选择这个形状，主要考虑到了稳定性（三角形自身的稳定性、象征专线的稳定可靠）、保障性（倒三角常被用于保障承诺类的徽章标志）、隐喻物流（由飞机和定位的图标变形而来）和三者的战略合作（开锣、中国制造网和京东）。
第二步相对而言就比较简单了，不过考虑到颜色在各个场景及状态到通用性，这里需要基于原本的品牌色额外不同明度的颜色。
这里我简单扩展出淡色和深色，为了避免页面过冷加入了暖色作为点缀色以提升温度。
将图标与业务紧密结合，能够与其他竞品拉开差异化，这是个相对简单但是很容易出效果的品牌化的方法。
具体的操作办法就是：首先根据所给文案脑爆出图标所对应的关键词，然后根据所在行业的特征筛选关键词，或者进行二次联想及转化。
下面我通过此项目中的三个图标案例来简单讲述下设计过程，仅为大家提供下思路：
运营所给文案如下：
这段文案意思就是，由于我们平台和清关行合作，因此让我们的业务更具有保障性，货物可以按时送到客户手中。
这里我一开始脑爆出了雨伞、锁和盾牌这三个形象，并且传统得用了盾牌符号传达保障性。
这种任何行业平台都可通用的形象，并不能关联我们这个物流类的平台。
后面联想到到我们跨境、外贸的行业特征，将“雨伞”这个形象变形转化为降落伞，来代替盾牌符号。
一来，降落伞外形似伞，相当于是货物的保护伞一样体现”保障“的感受， 另外，这种”空运“式的表达也额外传递出按时递交的概念，很好得体现出典型的”跨境物流“的行业特征。
运营所给文案如下：
同样，一开始我着眼于”跟踪“”实时“”轨迹“这些关键词，脑暴出定位、雷达之类的事物。
但是结合我们行业特征的话，其实有空间去更贴切到业务本身。
我们平台的业务线包含了两个站点——美国（主站）和马来西亚。供应商发货后，货物的轨迹必然是反映在世界地图中，从起点至终点得分布。
因此我用了地球仪映射全球，以定位来映射包裹收货地，以延展到定位icon中的虚线映射轨迹。这样产出的图标，不仅仅是指代了文案意思，同时表达出对应的行业特征，和业务紧密贴合。
文案如下：
一开始，我传统得想到了一个时钟图标来代表。但是仔细想想，这个时钟图标仅能代表”时效“的特征，而不能传达”快“的感受。如何更好得传达“快”？
发散思维，我联想到交通运输工具，飞机、轮船、火箭等等，最终我选取了飞机这类跨境物流专线主要使用的运输工具，它所带来的快捷相比轮船更加深入人心，又不像火箭那样脱离现实。
当然并非所有的图标一定需要去结合行业特征，其余的三个图标暂未想到更适合的元素，所以依然选用了常见的形象来传达概念。我们不需要完全硬坳这个方法，但是身为设计师，我们依然需要掌控我们的项目，充分发挥自己的创造力来赋予产品更多的power。
最后，我为所有图标加入了非线性动画。一方面为着陆页注入了活力，增加用户愉悦度，另一方面通过动态的表达引导用户更好理解平台优势，比如地球仪通过加入轨迹的修剪动画以及定位的弹跳动画，来更生动得传达物流轨迹全程跟踪的这个概念。相比原本的静态图标是不是更好理解了？
更重要的是，动画的加入也贴合了我们物流行业“运动”的特征~
篇幅原因，动画的制作今天先略过，后面可能另抽时间单独出个教程出来。当然，动力来自于你们的在看或转发啊～～（手动斜眼）
我们每次接手一个需求时，都要想想，这个设计可以在哪些地方和我们的业务、品牌进行关联？而不是每次都好像在做一个完全独立于业务外的项目，这很容易让你陷入反复改稿的被动局面，而且话语权也越来越小。
总之，品牌思维是需要设计师格外关注的！
最后，我们再来回顾一下这个图标三步品牌化这个方法！
第一步，融入品牌符号；第二步，注入品牌颜色；第三步，结合行业特征。
但愿今日份的分享对你有所帮助！
文章来源：人人都是产品经理 作者：Andrewchen
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。
本文将对图标进行系统的介绍，篇幅所限，本文只针对图标设计中最重要的设计概念和设计思路为主。大家如果对图标的其他方面感兴趣，欢迎给留言，后续出相关系列内容。过程中也有针对几种典型的图标进行实操代练。想要把图标设计的更好，这就需要我们在平时勤加练习外，还要进行深度的思考，希望我的这篇梳理可以给大家带来帮助。
图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及操作。
图标做为国际通用性语言，生活中随处可见，例如商场导视中收银台图标、出口图标、卫生间图标等，又或者是日常手机里使用的那些App图标，如微信、电话、短信等。的确，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富，有线的、有面的、还有拟物的等。
粗浅划分的话，UI设计中常见的图标大致分为两大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于 App 或网站中，用于功能性指示引导或操作。
2. 图标的重要性
对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性。它有以下几点好处：
3. 起源
图标的发展历程其实有些类似中文、英文等语言的发展，大体也分为两个阶段：
实物 → 符号；符号 → 新符号
来看一个小例子：
左边这个东西叫软盘，可能很多小伙伴没见过（事实上我也没有），「保存」图标就是将「软盘」符号化之后形成的图形，「软盘」是「保存」图标的实体。但随着时间的推移，人们逐渐将长期接触的符号本身作为一种新的实体，在大家的眼里，它不再是一个具象事物的抽象符号，而是直接当成一个实体来使用，甚至这个符号的实体已经淡出历史，但人们还在习惯性使用这个符号。
如你所知，图标、标识都不是界面设计师所创造的概念，它的存在可以追溯到人类文明诞生之初，在漫长的历史长河当中，早期用来传达信息的图标演变为系统的文字，而在地图、图书、壁画和建筑等各种各样的地方，还存在着用来代表和传达特定概念的图标和标识。
随着技术的发展，计算机诞生了，而显示器的出现，也为图形化界面的诞生，铺平了道路。20世纪70年代，施乐在位于帕罗奥托的研究所当中，诞生了最早的拥有图形化界面的电脑，著名的「 Xerox Alto」。这款昂贵的概念机最终并没有走进大众的视野，但是它的后续机型施乐之星在1981年问世，并且成为了计算机史上的重要里程碑，而 Xerox Alto 对于乔布斯和比尔盖茨的启发，更是引发了计算机历史上最著名的一场战争：苹果VS微软，Windows 对抗 Macintosh。当然这都是后话。
4. 拟物图标
80年代，想做的具象（拟物），却因为像素和机能的限制无法实现，所以对好的标准是越具象越好 。到了1995年计算机显卡的显示能力得到革命性的改变，Photoshop 5.0的发布，恰好让憋屈了这么多年的图形和UI设计师们巴不得立马上天（终于可以施展拳脚了）。从win95开始，到osx/win7的这十来年正是UI拟物化发展壮大并大行其道的阶段。同时也是显示技术飞速发展的十年，从640×480，到800×600，到1024×768，到1920×1080 / 1920×1200，再到4k，再到retina屏，平面显示技术能达到的水准基本已经是人眼能感受到的。
当人们对计算机尚不熟悉的时候，用户的需求是“弄懂这玩意到底是干嘛的”，是用户体验的核心。拟物化的图标和界面会给予用户具象化的引导，比如回收站，音乐，电脑，文件夹的图标，用户可以直接联想到现实中的物品并更快的理解这些程序或者文件的作用。包括立体的按钮引导用户点击，用户都可以通过联想，更快的理解操作/互动的方式。这样可以降低用户的学习成本，缩短学习周期，让用户更快的适应计算机的使用，弄懂这玩意到底是干嘛的。
来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年，苹果借由Macintosh，首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大，全新的样式使得它在信息传达的功能性上有了明显的提升。
但是随着 ICON 的发展，拟物图标也带来了一些问题，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。如今人们对各种常规交互模式人们也早已了然于胸，用户的需求也从“弄懂这玩意这么用”变成了“快捷更舒心的使用”。用户用的方便变成了用户体验的重心。
再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被扁平化取代。
5. 扁平化
从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦——拟物图标的质感、光影会分散用户的注意力，形成「视觉噪声」。于是UI设计师开始探索更新的表现形式来设计界面中的图标。如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计。 不管你喜欢与否，当年的微软让 Metro 和扁平化赚足了眼球，甚至让人一看到扁平化就想到Metro。
区别于拟物化更加接近于真实的实物，扁平化则是简化真实的物体，转而通过抽象、简化、符号化的设计元素来表现。
2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。在iOS7中对整个界面的图标、按钮、字体、信息层级等各方面都进行扁平化设计。苹果的这一系列动作打破了人们对扁平化风格的芥蒂，并最终推动了整个移动端扁平化设计的进程。
那么，苹果公司在坚持了多年的拟物化设计风格之后，曾经作为该风格的引领者和受益者，为何会突然转向，热情地拥抱起扁平化设计来了呢？难道是因为我们视觉疲劳了吗？答案很简单，
总之，扁平化这种二维设计已经成为一种更加流行的设计风格。所有元素的边界都很干净利落，较多使用色块和符号化的图形以及无衬线修饰的字体，界面更加整齐简洁。使用这种设计风格的优点是可以更加简单直接的将信息和事物的工作方式展示出来，将一切干扰信息弱化，减少认知障碍的产生。
虽然扁平化的优点有很多，也适合当下技术发展需要的，但是缺点也是显而易见的。譬如表现形式太过于抽象、缺乏情感的传递，而事实上发展到今天的扁平化设计确实也在不断的优化自己~使得自己更加的适应时代的发展。另外还有一个点就是所谓的 “审美疲劳”。当你一直看着简单的东西，久而久之就会越来越烦，你就会越来越想要看那些丰富多彩的东西。反之亦然。这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。也许当满世界都是扁平化后，拟物化的设计却又变得更显眼了呢？最近流行的“新拟物”风格就是最好的证明。
6. 微扁平、轻拟物
由于扁平风格表现形式单一，同质化严重，缺乏个性，图标慢慢开始发展到微扁平轻拟物的方向。相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。
7.「新拟物」风格图标
苹果在 WWDC2020 搞了个大新闻：macOS 将与 iOS 统一步调，从X86 平台迁移至ARM 平台，并从macOS 10迭代为macOS 11。这 20 年一遇的 Mac 大版本更新被称为Big Sur。
macOS Big Sur是第一个将「新拟物」设计投入大规模商用的操作系统，这可视为「新拟物」在实用化道路上的首次胜利。值得一提的是，在 Big Sur 的 ” 外观 ” 设置里，多了一项名为” 自适应强调色 “的选项。苹果将主题色的指定权留给开发者，这是否暗示新一代 App 在光影上会有更丰富的效果？
「新拟物」设计的精髓在于对光线的绝妙运用。它把光效拿捏在 ” 扁平 ” 与 ” 拟物 ” 之间，进而打造一种全新的视觉体验。
不同于传统的拟物，「新拟物」虽然将符合物理规律的光影效果引入界面，但它所模拟的材质是自然界不存在的。换句话说，「新拟物」是将真实光线用于虚拟对象，而 ” 拟物 ” 是还原实际物品在特定光照下的效果；
由于整个设计界将不得不考虑新拟物风格，围绕该风格的可能性将会有爆炸性的发展，并且这种新的数字空间设计理念如何能够合理地适用于用户界面设计和功能性将取得更大的突破。与以往一样，第三方应用将比苹果更大胆、更快速地推动这一风格——这也是我们将会真正开始解锁新拟物优势的时候。
产品应用图标（也叫启动图标），是指产品「品牌标识」中独立的图形，也是产品品牌的核心组成元素。作为产品所有视觉通信中必不可少的元素，其使用率非常高，所以该独立图形在设计中应做到最简化。
一个小问题：为什么iOS系统中图标形状是统一的圆角矩形？
苹果官方给出的解释是在空间有限的的区域，太多形状显得杂乱，如果形状不规则，就无法控制统一间距，设计师水平也不一样，这样统一规范能保证标准。推荐一个iOS启动图标资源网站，设计时可以找找灵感。
△ iOSIcon gallery
而安卓应用图标就没那么规范，处于百花齐放的状态，各家厂商都在设计独属于自己的视觉语言。大家都不一样，也就导致没有个性之美。
安卓应用图标设计规范网站
应用图标的类型
应用图标有不同的风格，这些风格有可能偏拟物，也有可能很扁平，有可能很抽象，也可能很具象。通过不同的设计风格可以更加标新立异，从而被用户记住。因此能在第一时间赢得用户的好感和记忆非常重要，将产品图标设计的好看且容易被人记住就成了非常重要的任务。应用图标的风格主要有以下几种。
中文是我们的母语，每一个汉字都令人记忆深刻，文字也是最直白的信息，而且不容易被曲解，所以很多国内的产品都会使用文字作为自己的产品图标。中文设计模式即字体设计，提取应用名称中的一个或多个汉字，进行设计变形，变形后的字体图形具有产品属性的外貌特征。常见中文图标又分为单字、多字和字加图形的几种类型。
单字
提取产品名称中最具代表性的文字，通过对笔画及整体骨架进行字体设计，以达到符合产品特性和视觉差异化的目的。其优点是可以直截了当的传递产品信息，识别性强。
多字
多字图标设计要注意的是整体的协调性和可读性，一般为2-3个字，最多两行（四个字）排列。
其优点是更加直接的告诉用户产品名称，达到品牌推广的目的，减轻用户记忆成本。其缺点是如果图标上的文字和下面的辅助文字完全一样，会显得重复啰嗦，像介绍了两遍自己一样。
字加图形组合
文字加辅助图形的组合，也是常见的产品图标设计方法，相比纯文字图标，显得更加丰富有独特的产品的气质和属性。需要注意的是做好文字和辅助图形间的平衡。
英文设计与中文设计的设计模式相似，通常是提取应用名称的首字母融合产品的功能卖点或行业属性进行创意加工，新的字母图形依旧保持本身的识别性。
单字母
通常提取英文首字母进行设计，由于英文字母本身结构简洁，稍加改动就很容易达到设计感于识别性兼备的产品图标。需要注意的是英文字母本来就少，都用字母很容易创意雷同，难以形成差异化。
多字母
提取产品全称或几个单词的首字母组合而成，形成独有的产品简称，方便用户记忆。
字母加图形组合
字母加图形组合的设计形式比较广泛，图形分为几何图形和通过提炼的图形。通过字母与图形进行创意加工，可以使应用图标视觉表现更加饱满。
直接用数字做应用图标的相对较少，但是数字识别性强，易于传播的特点。利用数字进行设计能给人亲和力。难点是怎样与品牌形成强关联性。
由于符号本身的含义会对产品属性有一定限制，所以特殊符号在应用图标的设计案例中相对较少。如“$”符号可代表与金钱有关联性的产品，无法运用在与此属性无关的产品上。不过也正是由于自身属性强的特点，可以很好的诠释关联的产品属性。
除了中英文图标，还有图形类图标比较常见。这种类型的设计模式的优点就是直观醒目和简洁大方，视觉冲击力强。常见的有以下几种：
几何图形的设计模式给人简约、现代、个性等视觉感受，从单个具象图形到复杂的空间感营造，几何图形的表现形式非常丰富。不同的形状给人的情感表达不同，如三角形给人传达个性、稳定、现代、时尚等，添加圆角后又会更加亲民、可爱。我们可以结合产品特征，合理的选择适合的形状图形进行创意。此类型较考验设计师的图形创意能力。
单双形是指应用图标只展示单个或两个的剪影图形。通常有两种设计方式，在深色背板上使图形反白，背景可以是单色也可以是渐变色；在浅色的背板上让图形填充颜色，图形可以是单色也可以是渐变色。这种设计模式的优点是简洁明确，易于用户在众多的应用图标阵列中快速找到目标。
线形的设计模式分为两种设计方式，在深色的背板上让图标反白，背景可以是单色也可以是渐变色；在浅色的背板上让图标填充颜色，图标可以是单色也可以是渐变色，或是其他视觉效果。纤细的线框图形传递出简洁轻快的气质，适合于文艺、清新的应用，在界面设计时保持这种干净明快的风格，才能与应用图标设计表里如一。线性风格一定注意不可太细，如果做得太细，在手机上看会非常尖锐，显得不易点击。例如airbnb，它的背景是一个微渐变，线性风格曲线组成“A”，同时是一个小蜜蜂。
动物作为图标设计元素是比较常见的方式之一，通过提取动物整体形象或者局部特征部位作为设计元素，背景填充单色或渐变色，简洁明了。动物给人的印象比较可爱，有助于加深用户对产品的印象。常见的表现形式有剪影、线性描边风格、面性风格等。
卡通风格的产品图标会让用户更有好感，一个可爱的卡通形象有助于加深用户对产品的印象。很多决策者会认为卡通是一种低龄的审美，这种想法其实是错误的。卡通可以说是一种各年龄层都能接受的风格，例如Bear，它的卡通形象是一头洁白的北极熊，简洁的形象设计与产品的阅读体验一致。
以正形为底突出负形特征，以负形表达产品属性，传递产品信息。例如NPR One，图标中的负形图形是对话气泡，告诉我们这是一个媒体或社交的应用，而正形图形强调产品气质。
白色渐变的设计模式与透明白色相似，都是通过白色不透明度来构建出图形的立体控件感，它比单纯的剪影图形更加具有质感，这种质感带给了我们视觉上的享受。例如印象笔记·圈点，它是一只白色的鹅毛形象，垂直的线型渐变使鹅毛富有了生命力一般，显得更加轻柔。
色彩比任何图形都更能抓住用户的注意力，同时色彩更加具有情绪，能传递出应用的产品气质。比起白色渐变图形，彩色渐变图形的色彩表现更加丰富。多种颜色进行渐变衔接的时候要注意色相的对比，营造空间感。应用图标的背景和图形的色彩要拉开对比，一般为白色或浅色背景。
无，即没有设计。除了背板什么也没有。虽然这类设计模式比较独特，但我们并不鼓励，因为用户很难从一个颜色上得到有用的信息。例如“黄油相机”的图标设计成一块黄油的样子已深入人心了。
打开率是一款移动应用的重要数据，应用只有被打开才有它的运营价值。在我们手机里安装了许许多多的应用，除了一些我们每天必须使用的应用如微信，其他大多数的应用在没有使用场景时很难想到去打开他们。因此，这些应用如何在手机屏幕上吸引用户的注意，鼓励用户打开显得非常重要。于是在应用图标上做文章就显得很有必要，常见的设计手法有：
在设计模板还没有如今这么发达时，设计师需要设计启动图标（1024x1024px）之后按照程序员的要求切出几十个不同尺寸的图标。比如，在手机中@3x情况下桌面图标尺寸为180x180px，在@2x情况下为120x120px；在应用商店图标需要使用的尺寸是1024x1024px；这个工作太烦人了，好在现在我们只需要专注在启动图标设计本身上了。在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。打开这个文件，用我们自己设计的启动图标替换掉智能对象里的内容，你会发现所有尺寸的图标都变成了我们的图标。iOS的圆角图标并不是标准的圆角矩形，而是某种连续曲线。
我们把两个圆角曲线放大重叠后进行对比，其中灰色线框为标准圆角矩形绘制的圆角，红色为iOS平滑圆角，它与圆角矩形拥有相同的对角线锚点，区别在于其曲线稍微向中心收紧。
事实上，我们很难在Retina屏幕上区分这么细微的差别，因此设计师在绘制iOS应用图标时不必过分纠结它的圆角，直接绘制成直角矩形交给开发同学即可，如果应用图标需用于展示，可以绘制120*120px圆角矩形、27px圆角半径代替。
安卓应用图标同样需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形，然后程序员通过代码进行切割使其变成圆角图标。
在我之前的设计作品中，有个“影记”的摄影社区APP，本篇我们就以此为产品案例抛砖引玉来学习一个iOS应用图标的绘制过程。
寻找隐喻
隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为，即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。例如说到摄影，马上就能想到相机、快门、闪光灯、暗房等。然后通过这些联想词，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩作为产品图标的主要造型。
竞品分析
应用市场各类产品不胜其数，在同类应用中存在大量相似的应用图标设计，如何保持应用图标的唯一识别性非常重要。唯一识别性不单单指图形与其他应用有所差异，避免创意撞车，让用户在脑中形成思维模式，它还指图形表意是否清晰，是否符合用户的心里预期。
提取关键词
根据收集的图片，创建情绪版，结合自己的产品提取关键词，然后就知道在接下来的设计中应该突出什么。我们从“影记”中可提取首字母“Y”，相机中的“快门”“信号灯”“开关机”，并依次将关键词描绘成下列图形。
抽象图形
确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形，接下来将绘制好的3个图形相结合，即完成初步设想。
图标栅格线
使用iOS应用图标栅格线作为设计依据有助于建立和谐的图标绘制比例，并与iOS系统保持统一，下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。
丰富细节
通过上面图形组合已基本完成应用图标的设计，接下来我们还应从颜色、质感、背板等着手丰富图形的细节，建立起应用的产品气质。“影记”作为摄影师分享佳作平台，摄影师们用的器材颜色大多以黑色为主，因此酷酷的黑色更适合作为应用的主色。白色的信号灯过于普通，使用相机本身发出的橘红色灯光作为信号灯的颜色，使其更加具有动感和活力。整体像「消息气泡」的造型暗示可以在这里进行摄影交流。
多场景测试
将应用图标设计稿交付开发提交至App Store上架，正确的图标设计稿应是直角矩形，iOS会自动应用一个圆角遮罩将图标的4个角遮住，假如图标设计稿自带圆角，就有可能露出图标透明区域。
△ 注：上图非实际大小，仅表明不同分辨率下的比例关系
此外，应用图标还会以不同的分辨率出现在不同场景中，例如在iPhone 8plus上需@3x(120px)的图，而在iPhone7的设置页需要58px的图，就需要将120px的图缩小。将大图缩小成小图时，一些细节就会丢失，使画面变得模糊，因此设计师应对小尺寸图标进行细微调整，去除不必要的装饰元素，以确保应用图标在小分辨率应用场景下也能保持清晰的识别度。
除了产品图标，还有一种图标被称为功能（或系统）图标，功能图标指的是担负一定功能和含义的图形，一般来说需要像文字一般地被人迅速理解，所以表达方式上不适合特别复杂，如微信底部四个系统图标就使用了比较简洁的线性风格。
功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，其作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时设计精致、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来了良好一致的使用体验。
图标是良好设计系统的基本组成部分，对营销材料非常有帮助。他们是插画内容的基础构建块，但他们也具有很高的技术性。因此科学严谨的设计规范能帮助我们设计精致、风格统一的图标。
一致性是设计图标的关键，在绘制时，一定要确保所有的图标都相同大小。在UI界面设计中，网格的大小必须要是4或12的倍数（安卓是8的倍数，iOS是4的是倍数）。@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕，界面中通常使用的图标尺寸24*24px、48*48px。这里建议用48px做为常规图标设计尺寸。
通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。
不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的系统图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。
知识点：
这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能的保留图标原始状态。
图标绘制基于48x48px画布绘制的线性图标，线宽默认为4px，不同场景缩放比例使用：
如果你要绘制描边图标，那么需要保证所有的笔画都是相同的粗细，并且笔画之间的间距不要比笔画本身更细。
图标网格为图形元素的一致但灵活的定位建立了明确的规则，keyline是网格的基础-。通过使用这些核心形状作为知道，你可以跨系统保持一致的视觉比例。
图标栅格用于图标元素绘制的参考并帮助建立清晰的内容轮廓边界，关键线有助于促进图标统一性，简化设计过程中比例调整成本，绘制小图形需要参照小正方形的keyline。
直角拐角：当基础图形为满容器正方形时，建议使用3X圆角，当基础图形为满高（宽）矩形时，建议使用2X圆角。当基础图形为较小（小于1/2宽高）矩形时，建议使用1X圆角。
非直角拐角：根据图标场景，通常情况下无论角度，默认均为1X圆角；特殊弧度的曲线“拐角”情况除外，根据图标设计需要单独考虑。
封闭区域，有闭合曲线构成的为封闭区域，可以进行独立颜色填充；
非封闭区域，由非闭合曲线构成的非封闭区域，原则上是不能进行独立的颜色填充；
封闭区域为曲线形状且有相交线段时，原则上是不能进行独立的颜色填充；
当线段与曲线相交或者与直线非垂直相交时，线段末端用圆头端点；
当线段与直线垂直相交时，线段末端用方头端点；
当圆点的直径与线宽一样时，圆点用图形绘制，不用线段；
当圆形和方形在小于16px时建议用图形绘制，不要用线；
倾斜角度
根据像素的网格线来设置一条线的起点和终点，会让你的图标看起来更清晰。图标中的倾斜角度应为45的倍数，保持与keyline中的对角线或十字垂直相交线保持平行关系，若是矩形外框，倾斜角度也可以与矩形的对角线或十字垂直相交线保持平行关系。应避免用13.7°，81°等这些奇怪的数值。
线段和端点
为保证风格的整体一致性，图标所有线段端点默认均应为与线段同宽的圆角端点，通常情况下线段端点和可编辑节点坐标以整数坐标为佳。默认基于48px画布绘制的线性图标，线宽默认为4px，无论直线和曲线在任何时候线宽都应均保持一致。
图标断口与间距
内部结构与外框的间距不得不小于线宽，内部元素之间的间距不得不小于线宽的1/2px。
外形框的端口尺寸关系：4px、8px、12px，建议尺寸为4的倍数。
图标风格变换
图标在特定规律下允许不同风格之间的变换，分别为线性风格（默认）、填充风格、混合风格、多色混合风格。
单双像素描边
如果为图标设置1像素的边框，边框应该使用外部或内部的描边样式，但是不建议居中描边样式，居中描边的1px边框，虽然在放大它们的时候，它们看起来很清晰。但在100%比例大小显示的时候，它们会模糊。双数用居中描边，单数用外描边，所有锚点要与网格对齐不能出现偏移。
线段闭合
所有线段结合处应为闭合状态，避免错位出现。
统一透视
如果图标有透视需求的话，就要统一透视角度，例如图标透视方向朝左，那就统一所有图标的透视角度都朝左边。
除了像素栅格，还有视觉栅格。视觉栅格可以帮助我们找出图标的中心在哪里，以及人眼能感知到它有多大。圆形和弧形物体看起来会比正方形更小。因此我们应该在绘制图标时设定一个固定大小的容器，这样它们在导出时就都是相同的尺寸了。添加内边距可以让图标在视觉上看起来更加平衡，避免以后开发时还需要重新调整。
绘制图标不光要满足物理上大小统一，还要实现视觉上大小统一。设计师要懂得调节图标大小以避开视觉上的觉错。
UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。 如果把它们做成高斯模糊效果，你就会发现它们具有相同的视觉重量，因为它们变成或多或少相同的斑点效果。
根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。
清晰是图标的基本要素，在sketch中，参数不要有小数点，让图标占满像素网格。因为计算机不能识别小数点，导出图标时计算机会把不能识别参数的部分拉伸填满像素网格，导致图标出现虚边。
通常从一套图标中最复杂的那个开始，因为它会帮助我们定义相同的视觉重量，让所有的图标视觉重量保持一致。因为当图标具有不同的细节层次时，更复杂的图标会吸引用户更多的注意力，而且视觉上看上去更重。
默认颜色：如果是功能图标，那么最好只使用一种颜色:黑色。否则你的组件可能变得过于复杂，不利于和其他设计师协作。而对于营销图标，出于品牌宣传的目的，你可能会想要使用两种颜色，个人认为图标最好是单一颜色的，3种或3种以上颜色的东西都是插图，而不是图标。
选择状态颜色：未选择图标颜色为#000000，透明度为87%；未激活图标颜色为#000000，透明度为54%；禁用图标颜色为#000000，透明度为38%。
功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页、或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，起作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时，设计精美、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来良好一致的使用体验。
常见的功能性图标风格大致有三种：线性图标、面形图标和扁平化图标。但其实我们可以将「扁平化图标」可以看作是「线性图标」和「面型图标」的一种组合形式，所以归根到底，基础的图标风格有两大类：「线性图标」和「面型图标」；
线性图标
线性图标是通过线条来表现物体的轮廓，它比面形图标更能塑造优美的外观，且作为贯穿图标绘制的线条本身就是一种设计语言，因此绘制整套线性图标会更加统一，具有整体感。例如twitter和微信底部的tab图标等。在一个场景下的几个同等重要的图标，如果线条粗细不一致，会给人一种权重上存在差异的感觉。所以，在绘制线型图标时，通常会使用统一粗细的线条。
线性图标具有辨识度高，清晰，简约易识别等优点，线性图标不会对页面造成太多的视觉干扰。缺点是：线性图标的创作空间较少，太复杂的线性图标对识别性产生较大的困扰。
常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。
线性图标根据样式还可以分为：双色线性图标、线面填充图标、线性渐变图标。
线性图标使用场景
在iOS所有原生应用的导航栏和工具栏都采用了2px线框的图标设计，很多APP产品的标签栏都选择用线性风格的图标设计。无疑，线性图标可以减少视觉干扰，让用户集中在产品核心功能上，同时轻量化的视觉语言也与扁平化的设计风格更为融合。它比面形图标更能塑造优美的外观，且线条本身就是一种设计语言，因此绘制整套线性图标会更加统一，具有整体感。
通常，在UI设计中，线性图标很少和背板同时存在，因为线条的图形视觉表现力较弱，容易埋没在背景色中，但也不是必须的，如果掌握好一定的规则，一些简单的线性图标和背板的组合也会很协调。
面形图标
面形图标是以面为主要表现形式的图标，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。在「微信」底部标签栏中，未选中的图标是线性图标，而选中的图标则是面形图标，同时颜色会变成微信的品牌绿色再次暗示用户选中状态。面形图标占用的面积要比线性图标多，所以更加显眼。实际上，苹果在新的设计规范中也建议开发者在APP底部标签栏中全部使用面形图标，是否处于点击态通过改变填充图标的颜色进行区别。这是因为填充图标看上去像可点击的。
面形图标具有表意能力强，细节丰富，情绪感强，视觉突出，创作空间大等优点。面性图标可以让用户迅速定位图标位置，预知点击后的状态。但是面性图标在页面中不可过多出现，否则会造成页面臃肿，难分主次，用户视觉疲劳。
面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。
基于最基本的「线性图标」和「面型图标」，通过不同的形态和风格的组合，再结合丰富的 表现手法，就可以设计出形形色色的图标风格了。比如：不同粗细线条线性图标的组合，或者面面组合，或者线面组合。大家在设计图标的时候，需要根据自己的产品特征、受众和使用场景，去选择适合自己的表现形式。
面形图标使用场景
面形图标具有广泛适用性，通常在运动、时尚类应用的标签栏出现。由于面形图标的视觉占比最大化，具有强烈的视觉表现力。
功能入口的面形图标通常分为反白和正形两种类型。反白即在彩色背板上显示白色的图标，正形即图标直接填充色彩且无背板。在带有背板的图标设计时要注意图标与背板的尺寸比例，虽没有严格的绘制标准，但从整体视觉效果上考虑，图标尺寸最好不低于背板直径但1/2，最大不超过背板直径的0.618(黄金比例)，同时还要考虑所有图标的视差一致。
扁平化图标实际上是线性图标和面形图标的一种组合形式，这种类似插画感觉的图形一开始多用于引导页、空状态也的情感化设计，后来逐渐在标签栏、首页主要功能入口也出现了扁平化图标的身影。精致的扁平化图标令人赏心悦目，拉近了与用户之间的距离，从而建立起良好的用户印象。
品类区图标的卫视通常是位于搜索框、banner之下（也俗称“金刚区”），而且品类区区域通常会占屏幕22%-25%不等，且位于屏幕头部，从用户阅读屏幕内容的视觉流来说位置至关重要，而且是聚合各类子版块的入口，为各个子版块分发内容引导流量。所以其重要性不言而喻，产品要让用户通过不同类型展示方式的组件找到相应的功能，而图标具备精炼高度概括内容的特性，识别度也大于文字，所以「金刚区」的图标设计通常以图标+说明文字为主。
常见的设计手法有：圆形底板+45度渐变+白色面形+微投影；45度渐变+扁平图标+微投影；简单线性；45度渐变+不透明度+面形图标。
文字图标是指用文字直接表示特定含义的图标符号。由于文字本身就是一种演化而来的符号，英文的首字母或者词语关键字本身也具备很强的信息浓缩性，因此在某些场景下，采用文字或字符作为图标，是一种很不错的表现手法。
比如「提示」图标，使用一个圆圈包裹一个英文字母「i」，意为 information，表示「注释信息」的含义；比如停车场直接使用「Parking」中的首字母 「P」，这些都是比较约定俗称的使用方式。还有一些场景，很难用象形或者表意的方式进行表达，那么就很适合使用文字符号，例如京东/天猫某些商品具备「正品保证」的标识，这个概念太抽象了，很难用象形去概括，创造新的表意符号又很难被大众接受，这时「正」字就很适合作为这个场景特定的图标符号，作为针对中国用户群体的产品图标，简单粗暴且有效。
知识点：
如果可能的话，尽量避免在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字图标(例如货币符号等等)，那么请你自己绘制，而不是直接使用字体。
这几年动效设计的热度稳定增长，只有静态排版的时代正在过去。动效的出现，也让图标拥有了更多的可能性。动态图标可以让你的app或网站生动有趣，在我们所常见的各种数字产品当中，UI组件和各色元素都已经动画化了。
运动中的物体比静态的物体更能快速引起人们的注意，在UI设计中尝试添加一些动画及动画图标，不仅能在视觉上快速吸引用户，还能使产品更具交互性，提升产品的趣味性。分享几个动态图标资源网站：
useAnimations：支持所有设备、网站、Android和iOS，可以免费用于个人和商业用途。
Lordicon：每一个图标都提供线性轮廓和面形剪影两种风格样式，并且图标是基于Lottie动画引擎的矢量动画图标，大小完全可扩展，兼容所有主流浏览器。
Icons8 Animated icons 2.0：提供的动态图标格式包括 Lottie 适用的 JSON、GIF 和 After Effects 格式，透过网页可以搜寻、预览动态图标效果。
△ https://icons8.com/animated-icons
Feather：设计师Cole Bemis制作的一个开源图标库，可自行调节图标大小和线条粗细。
科学和的命名规则能够帮助我们快速定位到自己制作的图标，并且帮助开发缩短命名时间，加强团队写作效率。切图可按照“业务_类型_功能_大小_状态”的格式进行命名。
切图命名的格式建议为全英文，可在切图之前对图层进行命名，常用切图命名对照表如下所示。
图标的绘制方式主要有两种：布尔运算 和 贝塞尔曲线。
布尔运算
布尔指的是乔治·布尔，19世纪的一位数学家，为了纪念布尔在符号逻辑运算中的杰出贡献，所以将这种运算称为布尔运算。
布尔运算听起来比较难，但其实非常简单，布尔运算采用的数字逻辑推演法，主要有数字逻辑的联合、相交、相减。设计师在使用软件过程中引用了这种逻辑运算方法，对应到设计软件中，就有：合并形状、减去顶层形状、与形状区域交叉、排除重叠形状。例如两个圆形相减可以得到一个月亮的造型，这就是布尔运算。
基本上通过布尔运算，我们能绘制出常见的大部分图标了，但有时我们需要针对某些线条进行单独的调整，又或者我们需要打造一套手绘风的矢量图标，这个时候就需要用到贝塞尔曲线了。
贝塞尔曲线
贝塞尔曲线适用于二维图形绘制的数学曲线。1962年法国工程师皮埃尔·贝塞尔（Pierre Bézier）所发表。他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线是绘制矢量图形时的重要工具，使用钢笔工具画出的所有图形一般来说都是贝塞尔曲线组成的。
贝塞尔曲线包括：节点、控制点、控制线、曲线这几个基本概念。
矢量图形便是由这几个基本概念构成的。图形由基础节点作为支撑构成，控制点和节点之间的线段称为控制线，控制线就像皮筋一样，调整控制点的位置，可以改变曲线的形状，就像被皮筋（控制线）拉扯一样。
节点包括 4 种基础属性类型，一种是没有控制点和控制线的「直线节点」；另一种是「镜像关联节点」，这种节点控制其中一侧的控制点，另一侧的控制点会发生镜像变化，适合绘制对称结构的曲线；再有一种是「无关联节点」，即节点两侧的控制点可以各自自由控制它们那一侧的曲线而不互相影响；最后一种是「不对称关联节点」，这种类型下，节点两侧的控制点和节点会永远保持在同一条直线上，但是却不会对称控制线的长度。
知识点：
在 Sketch 中，我们可以在选中节点后通过快捷键 1 / 2 / 3 / 4 来快速切换当前节点的类型，加快绘制效率。
钢笔工具
绘制自由贝塞尔曲线常用的工具便是钢笔工具，钢笔工具也是所有矢量软件的核心工具。它的使用对于新手可能稍微薇有点复杂，但是一但上手，会非常方便。The Bézier Game 这个是一个非常不错的练习钢笔工具的网站，以游戏的形式练习钢笔工具，通关的时候你对钢笔工具就已经轻车熟路了。
绘制实战
这里选择了几个比较典型的图标，简单演示下绘制方法和各自的绘制思路：
面性
眼睛：布尔运算相交 / 相减 / 合并形状
绘制一个正圆，然后复制这个正圆形，通过布尔运算「与形状区域相交」得到眼睛外轮廓，再绘制两个圆通过「相减」与合并形状得到眼睛造型。
位置定位：旋转 / 相减
这个图标由两个大小圆形相减，得到环形，再绘制一个和大圆半径相等的正方形，和圆环左、下对齐，最后逆时针旋转45度完成。
WIFI：相加 / 相减 / 旋转
绘制多个圆通过布尔运算的相加减得出三个圆圈嵌套“靶子造型，再绘制一个正三角形，和靶子图形相交得到Wi-Fi图标。
齿轮：旋转 / 相减
通过两个图形的布尔运算得到环形，然后绘制一个梯形，复制一个镜像，将其对齐环形两端，复制梯形编组并旋转复制三次（45度），最后合并全部形状完成。
铃铛：相加 / 相减
由3个矩形组成铃铛主体，铃铛顶部圆顶结构通过设置全圆角所得，铃铛底部的半圆使用圆形和矩形进行布尔运算，完成。
线性
放大镜：旋转 / 相加
绘制一个正圆和一条线，用对齐工具将其居中对齐，编组后逆时针旋转45度即可。
时钟：钢笔 / 剪刀工具
绘制一个正圆和一个矩形，使圆形的左下角对齐圆形中心，用钢笔工具在矩形左边和下边增加两个锚点，再用剪刀工具减去多余的线条即可。
雨伞：相减 / 剪刀工具
绘制一个正圆，再绘制一个矩形与其相减得到伞顶，然后绘制一个矩形，通过剪刀工具减去多余部分，得到伞架，伞把手圆角化处理，完成。
相机：合并
绘制一个矩形和一个梯形，通过合并得到相机主体，再绘制一个正圆完成相机镜头部分，完成。
爱心：相加 / 旋转
绘制两个正圆和一个直径与圆形等宽的正方形，然后逆时针旋转45度所得。
无规矩不成方圆，规矩的出现可以让一切杂乱的东西变得合理，统一起来。在设计上也是如此，规范具有统一输出，指引细节、便于查看的好处，规范就是一组图标中的规矩，所有图标的绘制都按照规矩来，最终的成品就会显得井然有序。
小小的图标是由很多图形元素组成的，在这些图标中，元素的一致性是建立一个共同视觉于洋的关键。熟悉这些元素可以更容易地理解每个图标和他们之间细微的差异，也将帮助我们学会图标设计的底层结构，依次是笔画末端、圆角、留白、笔触、内部角、禁绘区。
在制定规范时，我们通常先绘制出一个符合业务风格的图标，然后根据这一个图标定制后续的图标规范，依次按照上述图标元素进行规范。如果是渐变填充图标还要规定它的渐变角度，光影角度等。在一组中的图标需要在这些图形属性中进行统一，这样的图标虽然形状不一样但是在视觉上看起来是属于同一系列的。
制定规范的三个过程：
△ 图标设计规范
设计中，我们应该是用「线性图标」还是「面性图标」呢？
其实二者没有太明显的选择优劣，很多场景下已经越来越模糊，但总的来说，还是有一些法则可以作为参考：
常用的手法：在App的底部导航栏，选中状态使用面型图标，而非选中状态使用线性图标；
16px左右的小图标慎用线性图标，线性图标在16px下，可排布像素的区域较小，这个时候线性图标不容易设计；
面型图标比起线性图标，除装饰性外具备更强的视觉信息层次感，更具引导性，比如金刚区功能图标、IOS设置界面，使用面型图标；
车载等系统界面，更适合用面型图标，面型图标的视觉面积较大，短时间内更加容易识别；
线性图标看起来通常会更加细腻精致，适合比较精致简洁的设计或者女性化产品设计；
文件格式是导出图标的关键。不同的人需要的文件格式也不同，如果你为外部合伙人提供图标，那么可能会提供1x、2x和3x.的png文件，以适应多种设备。而对于开发和其他设计人员，则通常需要导出.svg文件，这些文件可以在设计程序中编辑，并且可以通过代码在应用程序或浏览器中绘制。导出的svg可以用sketch的官方插件「sketch-SVGO」进行代码优化，压缩svg的体积，精简svg代码。
△ sketch-SVGO 插件官方下载页
svg格式仅支持居中描边的图标，并且不支持投影，因此对于复杂丰富的图标还是切img图为好。
完成图标后需要进行视觉检视，避免任何多余的线条或形状，保证尽可能整洁。检查所有线条是否都在标准框架内，让其他人帮忙来检查你的图标是否整洁是非常有必要的。对图标精心设计评审，合格后再加入资源库，这样避免多人同时修改而造成混乱，同时提升团队协作效率。推荐一个免费的图标管理工具：Nucleo，团队协作需要付费。
△ 图标资源管理工具：Nucleo
我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。
我们可以从以下五个方面来检验，分别是：识别性，规范性、统一性、呼吸感与品牌感。
1. 识别性
图标就是帮助用户理解信息，所以识别性（也可以说是可访问性）是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑。我们检测图标的可读性通常要将图标的背景色底板在黑色和白色之间进行切换对比，不论是黑色还是白色的背景都可以看清图标的全部细节，还需要确保图标中的每一种颜色都是可见的。
图标识别性可以分为两类，分别是含义识别和视觉识别。
灵活的设计思路，在保证识别度的前提下灵活发挥，尝试各种不同风格的表现形式。
当然，脑洞也不要太大，失去了原本的含义，造成误解。
2. 规范性
规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。
视觉大小的一致性：在相同尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如一样尺寸大小的圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中适当调整，使得视觉大小达到统一；
3. 统一性
在绘制多个类型相同的图标时，我们需要注意这一套图标合集需要在视觉上保持统一性。在一整套产品中，会有很多种图标，但是图标的功能不一样，所表达的内容也不同。这时，图标一致性的意义就体现出来了，根据格式塔原理中的相似性原则：人们会将如元素彼此相似的东西感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素，则应在视觉上保持统一匹配。
图标内容的统一会让用户明白相似的图标所代表的的功能也相同，而且在视觉上也更加和谐美观。因此我们在绘标后还需检查线条的粗细比重，边角的大小，配色方案，细节层次和设计元素在整个合集中是否是不变且一致的。
图标的统一性可以从：线条粗细、设计语言、复杂程度、颜色规范四个大的方向去着手。
线条粗细：相同功能类型的图标线宽粗细统一，有背板的图标线条不易过细；
设计语言：可拆分为透明度（拉开层次）、圆角（圆角还是直角）、断线开口（开口位置）、设计特征四个纬度去规范；
复杂程度：如果不能简化图标，就保持同一组图标的墨水重量一致，简化太复杂的图标，增强辨识度；
颜色规范：对于线面结合的扁平图标建议最多用两种颜色，活动入口图标如果需要的色彩数量多，那就需要保持敏感，从一种色彩的周围小幅度提取另一种色彩或多种色彩，调整其色相、饱和度、明度就能搭配出许多和谐的颜色。
4. 呼吸感
呼吸感的意思就是适当留白。不管是图标还是界面，适当的留白可以突出主体内容，让内容具备易看性。在图标的绘制过程中，我们应该注意图标元素之间的间距不宜过近，元素也不宜过多。图标是一个物体的简略缩影，目的是为了表达内容，让用户快速理解，太过复杂的细节会影响图标的识别速度。因此在图标的绘制过程中应该删除所有无法传达图标意义的元素，避免使图标变得太过复杂难以识别。
5. 品牌感
品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。
那么，该如何提升品牌感，打造属于自己App的独特风格呢？品牌基因为我们提供了一些线索，这是近年来非常流行的一种趋势。
我们都知道图标在APP设计中的重要性，但是打开许多APP你会发现他们的图标设计都非常普通，似乎是在图标网站上下载的素材。虽然一些优秀的设计师在进行图标设计师加入一些诸如圆角、断线等设计语言，但是仍逃脱不了与其他APP设计雷同、毫无个性的通病，使得UI看上去普通、不精致，缺少产品气质。
那么，该如何打造属于自己APP的独特风格呢？品牌基因为我们提供了一些线索。它是由平面设计中的VIS（视觉识别系统）引入的一种设计策略，通过对品牌形象进行延生设计形成一套完整的视觉符号。每一个APP都有其品牌形象，代表了与众不同的气质。接下来，我们就来学习如何利用品牌基因进行图标设计。
1. 提取品牌图形
通常一个App的第一个tab是首页，是用户进入App后看到的第一个页面，最常见的图标设计是一个小房子的图形。首页是App中最重要的页面，承载了整个产品的核心功能，是用户浏览最多的地方，因此使用一个让人印象深刻的品牌图形作为“首页”图标是必要的，不但使App内外形成了视觉联系，同时也二次传递了品牌形象，加强了用户对App的良好印象。例如网易云音乐的首页标签就直接使用了它的品牌图形，其优点不言而喻。
但是请注意，这种设计策略并不适合于所有的App，当第一个tab被赋予特定功能，就不可使用品牌图形，否则用户会难以理解。例如微信第一个tab是聊天列表，此时使用气泡就比品牌图形更加合适。
还有另外一种情况。通常一个App的最后一个tab是个人中心，即“我的”。如果App的品牌图形是动物图形，也可以使用其整体或局部图形来作为「个人中心」的入口图标。
2. 提取品牌色彩
色彩也是图标设计中重要的构成元素之一，合理协调的色彩搭配让用户在浏览页面时感觉舒服。从品牌形象中提取色彩作为图标设计的依据，可以给用户带来由内而外一致的视觉体验。在设计时提取品牌色彩可适当调整色彩的饱和度，明度，既可以将图形整体填充色彩（例如微信），也可以局部填充色彩，还可以填充为图标背景色，使图标之间形成色彩上的关联。直播应用Bigo Live的品牌色是青蓝色，在标签栏的图标设计上（选中态）将图形局部元素填充青蓝渐变色，活泼清爽的搭配带给用户轻快的感觉，与整体品牌调性高度一致。
3. 提取设计语言
在VI设计中通常提取辅助图形作为设计元素，这在图标设计中同样适用，当所有的图标都具备了相同的设计元素，他们就构成了一套完整的视觉符号。例如飞猪的品牌图形就很特别，猪的头部轮廓是由大写字母F演变成的翅膀造型，因此可以看到“我的”小人图标的也使用了类似的轮廓，这样他们就形成了某种视觉联系。
4. 提取产品气质
品牌形象决定了产品的气质，而产品的气质决定了吸引什么样的用户。就如当我们第一次看到一个人的时候，往往会根据他的外貌形象特征，产生一个大致的印象，这就是一个人的气质。APP也同样，例如传递传统手工艺人社交的「东家」，其产品流淌着古朴、温润、精致的人文气息，它将宋体汉字的笔画进行拆解组合，创造出具有东方韵味且极具形式感的图标设计。
5. 拆分品牌名称
App标签栏图标最常见的形式是图形加文字的组合，由于文字本身就能传达最直接的含义，因此图形的识别性并不那么重要了，我们就可以在其视觉表现形式上赋予更多创意和个性。MONO是一款阅读类App，它的标签栏图标直接将品牌名称中的4个字母拆分成4个图形。虽然每个字母与其对应的功能模块本身并没有直接联系，但加上标签文字的辅助也不会造成阅读困难，而且产品本身的用户人群就是比较能接受新鲜事物的年轻人，因此这样的创意反而给App设计加分了。
6. 展开形象联想
我们日常使用的众多App大多数都有着相同的功能模块：首页、发现、动态、我的等，因此也就出现了很多雷同的图标设计。比如“首页”是尖顶房子，“发现”是眼睛，“动态”是气泡，如果有差别也只是设计风格的差异，有的直角有的圆角，有的线性有的面形。这样的设计没有品牌归属感，试一下将这些图标单独拿出来就无法判断它是谁，它从哪儿来？
优秀的设计师不仅要具备将图标绘制精美的能力，还要具备丰富的设计想象力，不拘泥于设计规范的条条框框，有时候打破规则才能设计出优秀的图标。“首页”除了小房子我们还可以想到什么？马蜂窝的做法就很巧妙，“首页”图标是“蜂巢”，而蜂巢是马蜂的房子，这样的设计与品牌形象紧密相连，简直完美！不过的改版好像已经改没了。
知识点：
总之，要想在绘制整套图标时建立统一风格，就要从外观和颜色上确立主风格，在局部寻求个性特征，将两者结合，并融合产品属性和符合用户定位，先在脑海中构思出清晰的概念，然后在稿纸上绘制草图，最后确立一个最佳方案上机完成，只有不断地思考和打磨才能创作出最佳的设计方案。
图标设计是UI设计中非常重要的环节，在尺寸有限的界面上，小小的 icon 可以更加简单的表达含义，传递给用户正确和友好的指引。建议每位UI设计师在平时做大量的练习尝试各种不同的风格，以满足不同的业务需求。另外，关于如何绘制keyline线，还有的iphone12样机，有需要的同学可以出门右转私信我。
图标概述及发展历程
1. 图标的定义
应用图标的类型及作用
1. 中文文字图标
2. 英文字母图标
3. 数字图标
4. 特殊符号图标
5. 几何图形
6. 单双形/剪影
7. 线形
8. 动物图形/剪影
9. 卡通形象
10. 正负形
11. 白色渐变
12. 彩色渐变
13. 无
14. 应用图标的作用
应用图标绘制方法及流程
1. iOS应用图标
2. 安卓应用图标
3. iOS应用图标设计流程
功能图标的设计规范
1. 图标的规范
2. 图标尺寸
3. 图标的keyline
4. 图标关键图形
5. 图标的拐角
6. 图标区域 封闭和非封闭
7. 图标绘制规则
8. 视觉栅格
9. 视觉重量
10. 图标绘制细节
11. 图标的颜色
12. 功能图标的风格
13. 扁平图标的使用场景
14. 品类区图标
15. 文字图标
16. 动态图标
17. 图标命名规则
如何绘制功能图标
1. 图标绘制方法
2. 制定规范
3. 线性or面性
4. 图标导出
5. 图标管理和交付
图标设计的评判标准
图标的品牌感
写在最后
文章来源：优设 作者：印迹时光
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
轻拟物本身也是拟物，所以它的核心基础和拟物设计师一致的，只是省略了更多复杂的细节。而对于整个拟物的体系来讲，最重要的东西实际上只有2个，形体、光影。
1. 形体表现
形体的表现，就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中，有写过面性图标进阶的设计中，可以包含更多的细节、内部元素，而不是仅仅只有外轮廓。
轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上，即你要把这个图形的内容有明确的示意并画出来，而不是用抽象的图形做填充而已。
比如大众点评的快速入口图标，虽然看起来很复杂，但是那是配色上的复杂，而不是形体轮廓上的具象化。
换句话说，拟物插画的图形基底，类似扁平插画风格图标，不能表现得太抽象，也不能增加过多的细节，需要一种恰到好处的平衡（玄学），这就非常考验设计师的判断和经验了。
并且，在描绘轮廓的时候，新手尽可能的采取正视图来进行绘制，而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面，这样难度会大幅度上升，比如下面这种情况。
2. 光影表现
除了形体外，光影就是整个拟物的灵魂了。
当一个完整的图形完成填充色时，它是扁平图案，如果完成光影呈现的时候，它就是三维空间的立体图形，比如下面这个圆的案例：
在拟物的设计中，我们对光影的定义是至关重要的，所以首先就是针对该图形确定光源的方向，是上方、前方、左上还右上，这对后续的设计有一连串的影响。
如果对光影没有正确的解释，那么在制作细节的渐变角度、投影的使用上，就会产生错误的设计，造成光影视觉冲突和矛盾。
在创建了光源以后，物体受到光线的影响就会产生明暗面和投影，可以简单划分成4个部分，高光、亮部、暗部、投影。
这和我们学习的素描有一定的差异，美术中对光影的表现还会包含明暗交界、反光面，这对于轻拟物的来说负担太重，所以我们要去掉它们，接下来重点讲讲高光和暗部。
高光是物体作为受光物对光源的直接反映，比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现，再或者一拳超人中男主光头上长期存在的高光配饰（多数动画的光头角色都有）……
高光可以非常有效的增加画面的层次和对比性，让物体看上去更有冲击力和观赏性。
而暗部，则完全是为了正常表现物体结构和弧度增加的示意，因为不在受光面，所以颜色会变暗。在实际操作过程中，我们可以通过渐变的方式开控制明暗的表达，但尽量不要直接手动设置一个渐变色出来，而是为它叠加暗部或亮部的黑白透明度渐变。
了解这几个特性以后，下面，我们就通过一个实例来讲解一下轻拟物设计的过程吧。
作为轻拟物的演示，直接画个图标讲一遍怎么操作是没什么用的，我们要从实际场景出发，用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页：
总结它的问题，不难发现首页顶部业务功能太多了，顶部图标就包含30个（加滑动的），虽然每个模块图标单看都没有硬伤，但堆积到一起，就使得顶部缺乏足够的信息层级和对比性。
我们要做的，就是通过轻拟物的方式，调整快速入口最大的三个图标，凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始，讲解一下如何完成轻拟物化设计的升级。
第一步：确认轮廓造型
第一个操作，即确定图标本身的轮廓。根据原有图标的样式我做了一些改动，包括加粗车头，减少高度，增加车灯等。并对每一个模块进行纯色的填充，定义它们的色彩和做出区分。
形体的重要性在于要对图形本身有比较合理的呈现，不要让比例失调和图不达意。
第二步：完善图形细节
这一步，就要在原有基础上，进行下一步的深入。包括对一些细节交代得更清楚一点，增加一些有趣的小元素等等，完善它的具体样式。
第三步：增加基础的暗部表现
在这里，我们就要开始为图标增加高光了，高光从右上角打下来，那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现，让整体的立体感稍强。
这一步在软件中主要使用蒙版功能，通过蒙版在背景上方创建一个图层，然后添加深色的透明度渐变，就可以表现出对暗部和投影的效果。
第四步：增加高光效果
接着，就是最后一步，将高光添加到画面中来，将整个图标的质感进行拉升。
通过上面的演示，我们可以将整个拟物设计流程精简成：
然后，通过这样的步骤，再来完成后续的两个图形，拆解完的效果如下。
然后，再用这三个修改后图标套用进原来的页面，并做出对应的修改，再来看看前后对比：
通过这个对比，我们就可以看出在这个复杂的首页头部中，轻拟物风格可以从一众平面中被凸显出来，且不会显得太突兀和复杂。
而这就是轻拟物在项目设计中的实际作用，当画面元素已经开始超负荷，且容易导致同质化的审美疲劳和主次不清时，就是轻拟物登场的时候了。
最后的总结，学习轻拟物就是增加我们完成界面视觉输出的可能性，为视觉创意增加一些储备弹药，以应对越来越复杂的互联网产品和职业要求。
我们只在这篇罗列了制作的顺序和思路，并没有把软件的操作完全放出来，一方面是因为时间上来不及，另一方面是希望大家不会被软件的使用框住。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 还是 Affinity 等软件都可以做出来。
文章来源：站酷 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一套 UI 界面当中，核心的 APP 图标是用户每天都要接触、经常使用的视觉组件和交互对象。设计图标的时候，要用到大家最熟悉的元素才能贴合用户认知，要醒目、统一，也要足够「隐形」，避免喧宾夺主。今天这篇文章，来自著名的 Tubik Studio 团队，他们为华为旗下的 EMUI 10 系统设计了核心的图标系统，来看看他们的设计过程吧。
我们总不会低估一个操作系统基础图标，对于产品的可用性和合意性的影响。基础图标虽然小巧，但是对于整个操作系统而言，总是极具影响力的，因为他们是用户界面的核心元素，帮助用户快速直观地在系统中定位、浏览、导航。但是，对于设计师而言，图标的设计始终是挑战，它看起来最为简单，但实则为最为艰难的工作。
图标需要，让人一目了然，但是也要具备良好的可识别性，在传统和创新之间达到平衡。这一次，Tubik Studio 设计团队将要给华为的 EMUI 10 来设计图标，而这篇文章将会为你揭示背后的设计过程。
这次的项目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 来负责。这次的设计项目从最初的探索构思入手，逐渐开始绘制草图，探索样式，一直到最后打磨，完成设计。
为华为 EMUI 10 系统的用户界面设计基础的图标
我们在 2019 年夏季，收到了来自华为的邀约，这次的项目要重新设计 EMUI 这套基于 Android 系统的用户界面基础图标，这套图标会用来适配华为旗下的旗舰手机，这些图标将会随着新版的系统部署到这些手机产品当中。我们的任务，是创建总计 54 款符合当下潮流趋势的图标，这些图标要能够贴合品牌和已有用户的偏好，并且能够吸引新的用户。
这个图标设计项目如今已经在当下的华为旗下手机产品中应用且部署好了，最早使用这套图标的智能手机型号为 Mate 30 ，紧接其后的是 P40。
在整个操作系统中，这些图标是始终位于用户视野以内、最基础的最核心的交互元素，通常用户每天都会同这些核心的基础 APP 进行交互，有时候一天多达几十次，因此它们应当具备良好的功能性，还应该足够美观，给用户带来满足感。同时，这套图标的设计，也应当足够统一，以协调的体验切入到整个 EMUI 的设计系统当中，贴合整体的样式特征。
所以，我们使用了一整套图标网格系统，应对不同需求，在设计的过程中，这套网格有助于确保所有图标外部尺寸的一致性，也保证了内部元素的统一性。
为了发掘全新的视角，我们决定从传统的手绘图标开始，寻找重新塑造图标设计的方法。这些图标所涉及到的元素，早已为全球数百万用户所熟知，要重新设计图标外观，并且还要成套且统一，这本身就是一个巨大的挑战。
比如「电话」图标所对应的听筒元素、「信息」图标所对应的气泡对话框这样的元素，是不可能完全抛弃重新创造的，所以我们的真正的切入点是在形态和色彩上寻求解决方案。
越是简单的东西，重塑起来就越难。
在实际的设计过程中，我们尝试了数以百计的造型变体，从完全放飞、非常规的的外部造型，到极其常规，大家熟知的造型解决方案，我们都逐一试过。而在色彩上的尝试相对会显得更加具有实验性：我们尝试使用明亮的紫罗兰色、栗色和浅绿色来进行混搭。
当然，我们很清楚，这样的实验性的工作是探索过程中的一小步，但是它是必须的，是创造新设计的种子，是寻求正确答案的必经之路。
在设计过程在，有一件有趣的事情发生在设计「相机」图标的过程中。我们尝试过很多不同的图标造型，不同的元素，不同的样式，但是其中始终有一个细节是不变的，那就是右上角的小红点。这是为了暗示用户，华为的摄像头模组来自徕卡，这个红色的小点就是向其致敬的标识。
而下面的概念设计，则是强化了图标之间的几何轮廓的差异，从而提升图标在智能手机屏幕上的对比度和识别度。
下一步，我们基于几何图形外观差异性，设计了多种造型不同但同样优雅的图标。在基于这种风格概念进行延伸的过程中，我们会优先考虑圆形的元素。而「天气」图标明显既不适合圆形也不适合方形来呈现，所以我们使用的是云和太阳两种元素的组合。「钱包」图标使用的是矩形，然后搭配卡片的组合。尽管造型整体上是相对自由的，但是所有的图标都是遵循图标网格，并且在视觉权重上尽可能统一。
在色彩和样式上，我们则更加倾向于渐变。没有色彩渐变，纯扁平的图标显得过于幼稚和「古早」，没有足够的品质感，所以，我们在新的图标设计上，开始加入渐变色彩，提升质感。
不过，在最终版本当中，我们还是保留了图标外部的圆角矩形的外轮廓，然后将图标元素的内径进行了适当地缩减，渐变和核心的简约几何特征依然是整套设计的最高优先级。
这套设计方案展现了在整套 UI 界面中，图标这个小元素的设计上所需要投入的精力和潜在的难度。想要图标足够协调、美观、易用还要贴合品牌特征、还要区别于以往，是一件相当不容易的事情。
细节里藏着魔鬼，任何细小的元素、线条轮廓、色彩的变化都可能会在屏幕上放大、被感知到。
文章来源：优设 作者：Tubik Studio蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
和大家分享一下，杨杨在年前做的一套新年主题图标，整个过程成长很大，也希望能给大家一些启发。
其实一套主题图标对于一个刚毕业的大学生来说，难度不小，但只要愿意学习，还是可以攻克重重困难，最后把需求做好的。
新年嘛，关键词的发散就不多说了，无非就是鞭炮、对联、福、灯笼等等。
我们直说重点：
对于风格，应该如何选择呢，比如有描边扁平风格：
△ Martin David作品
有轻质感的拟物风格：
△ Man King作品
这里可以给大家一个参考维度：
界面常驻功能性图标一般会使用描边、扁平风格的图标，而对于节日主题图标，图标如果太平会显得比较冷静，所以加一些质感的渲染会更有气氛。
而且增加质感一定程度上可以弥补造型上的不足，而且很出效果，对于时间有限的需求，是个不错的选择。
所以这次新年主题图标的需求，我们选择了轻质感的风格。
由于没有做图标的经验，所以第一版的样式犯了一些基础型的问题：
有不足不可怕，可怕的是不知道不足在哪里，所以清晰有条理的找到问题也是我们设计必须具备的能力。
我们从以下三个维度进行问题拆解，供大家参考
灯笼是五个图标中做的相对比较稳的一个。
问题和优化方向都有了，接下来就是调整了！
首先我们来优化造型方面的。
既然我们要做立体化质感的图标，那图标就不能太平，原有的鞭炮角度太正，所以在角度上进行了优化。
并且因为一个鞭炮有些太单调，所以把数量增多，优化如下：
除了鞭炮以外，我们认为那个鼓的造型本身不够饱满，短时间内比较难出效果，所以及时更换了元素——锦鲤（锦鲤和推荐貌似还点关系）：
多次调整后，图标在立体化方面有了很重要的突破。
之前的颜色有些偏暗，有些发黄，所以我们定了一个颜色规范，在主色上都使用统一的颜色，这样在延展的时候，就不容易跑偏：
只要严格保持颜色规范的使用，不停的对比调整，一定可以让一套图标的颜色不跑偏。
咱不说一组图标，每个都有亮点，但至少有一个是相对比较特别的，这是非常有必要的，否则整体看起来就会非常平庸。
产生亮点的方法有很多，比如风格、透视、颜色、品牌基因等等。
由于我们在风格、颜色等方面都已经固定，所以选择在品牌基因的维度出发进行优化。
一说到品牌基因，我们就可以联想到吉祥物，由于又是鼠年的新年主题，所以我们将自己的吉祥物黑子与老鼠的元素结合，让「吉祥物黑字」穿上了「老鼠外衣」，并且手举春联：
可谓是整组图标最大的亮点，这个生产创意的方法其实很常用，大家一定要多多练习。
最后我们看一下优化前后的效果：
优化前：
优化后：
文章来源：优设 作者：菜心设计铺
QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级，其中也包括重要的图标图形。
1. 延展思考
因此基于目前较为完整的图标图形，希望可以拓展出更多不一样的设计内容，并且可以应用在不同的位置，例如空白页、运营内容、背景等等。
2. 问题分析
基于目前的图形可以很明显的得到 2 个问题：
3. 设计启发
3D作为 2020 的主流设计趋势之一，可以很好地表达设计氛围。因此想尝试跨次元的设计方式，从 3D 图形的角度去思考，尝试更多可能性。
下面主要是分享我在制作 3D 图标中的一些方法和流程，以及 2D 与 3D 图形设计中思考的差异性，希望可以跟大家互相学习，一起探讨这方面的设计。
虽然是 3D 的图标，但实际上使用到的软件包括有：Cinema 4D（C4D）、Sketch、Photoshop（PS）、illustrator（AI）。
整体的大概流程：
3D 与 2D 最大的差别在于多一个维度来表达图形，因此我们在 2D 向 3D 转化的过程中，需要思考一些基本的原则，并且结合这些规则，降低 3D 图标与 2D 图标违和感。在这次的 3D 图标中我总结了以下几条基本规则。
1. 圆变球
在 3D 软件中表达圆有 2 种方式：球体、圆柱体。在实际的设计中，我们需要根据实际情况判断是否变成球体或者圆柱体，这里建议单体呈现的圆形设计成球体，在这种情况下球体相比圆柱体更能表达圆形的视觉感受。
例如下面气泡的例子，球体化的表现比圆柱体化的表现更加饱满，光影效果更加丰富。
2. 方变块
与上面的规则比较接近。当我们在 2D 图标中使用矩形之类的图形，建议使用立方体来表达。优点：立方体可以增加图标上的细节表现；增加厚度更有利于光影的表达。
例如下面礼物的图标，我们在实际的 3D 场景下应该更贴合现实生活中的认知，设计成礼物盒子的效果。
3. 结合实际认知
除以上的 2 种建议之外，我们在实际建模的时候还需要结合实际认知而定。例如金币、游戏卡的设计应该是带有厚度的片形；钱包设计成折叠的效果。
4. 适当简化图形
2D 图标向 3D 图标的转换过程中，需要适当进行简化，一些不必要的内容可以适当进行删减。主要的目的是：
5. 增强空间思维
2D 的图标只有一个平面，因此大部分情况下是一种「纸片性」的思维，常规的 2D 向 3D 的转换思维是增加厚度，但实际上出来的效果并不理想。因此在转换的过程中，需要使用空间的思维去思考，在 3 维的空间中应该是怎么样的。例如下载和收件箱的图标，常规的思维可能是在 2D 的图标上增加厚度，但转换成空间思维就是让其具有立体感和空间感的形体。
6. 图标状态补充
在实际建模的中会发现，很多模型在静态下是可以进行简单处理的，但结合动态或实际认知，就需要相关细节状态补充。例如礼物和宝箱图标的开盖效果，因此把实际的盖子和盒子/箱子的模型做出来，以便于动画的实际表达。
在进入 C4D 之前，需要清楚不同图形可以使用什么方式建模，因此我们可以进行一个简单的分类，分为：常规图形和异形。两种图形在建模中的方式会有一些小差异，当然一个图标也可能包含这两种类型，因此实际操作中可以灵活处理。
1. 常规形：使用基础物体建模
部分简单的有规则的图形，可以直接使用 C4D 的基础物体（例如：立方体、球体、柱状体、锥体等），通过对基础物体的调整后得到模型，例如下面的图形。
案例展示
2. 异形：AI路径+挤出
在实际操作的过程中发现部分模型较难通过基础形调整得到，或是直接建模会比较耗时。因此我们可以导入 AI 路径再挤出的方式来得到我们的模型。例如下面的图形
案例展示
基于以上的以上 2 种类型的图形，这里分享一下制作的过程和心得。可能不够全面，但希望大家可以一起来补充互相学习。
1. 对齐中心点
基础建模对齐中心轴点是一切开始的重中之重，这里会涉及到很多后续的调整和其他命令的应用（例如挤出、对称等命令）。例如一些中高阶的人物建模也是非常依赖中心点对齐来实现对称命令的。
2. 结合图像
在 C4D 视图本身具有多视图，可以结合不同视图导入不同视角的平面结构进行制作，常见情况下的建模可以导入三视图（例如角色、人物之类的）。而图标相对来说是很简单的，所以这里只应用正面视图即可，其他的视角可以自行脑补后制作。
结合图像的好处：
操作流程：正视图下快捷键 shift+V 调出视图背景——选择背景——添加图像。或在视图选项中调出，然后配置即可。
3. 结合路径
如上图标类型中的描述，部分异形的图标如果直接在 C4D 中绘制会相对耗时，因此我们可以结合路径的方式，再使用挤出的命令来实现我们想要的模型，这样可以大大提升异形物体建模的效率。
C4D 中对 AI 的图层只会读取颜色的边缘，然后生成路径。因此在 AI 中编辑的路径，依据实际的情况选择填充或者描边，然后再拖拽进 C4D。如下产生的效果对比，左边为填充图形，右边为描边图形。
操作流程：使用 AI 导出 8.0 版本的路径——拖拽进 C4D——添加挤出命令——设置挤出高度及封顶样式。
4. 使用变形器
一些简单的形变可以通过变形器的应用，得到我们想要的造型。例如下面的案例，外星人脸是在圆形的基础上使用 FFD 进行调整，而宝箱则在方形的基础上使用锥化来达到圆弧的效果。
C4D 的渲染效果主要是依赖于材质和灯光的配合，熟练者往往可以依靠经验有效率的制作，但我们也可以通过锻炼总结出一些常用的材质参数或者布光的位置来提率。因此我也从这次的 3D 图标制作中总结了一套关于材质和布光的方法。
C4D 场景的主光源我们可以通过全局光照+天空的方式来营造整体的氛围，这组光的特点在于具有比较柔和的效果，并且模拟自然的环境光效。
全局光照开启后，需要依赖灯光、天空光来对物体进行照射，如果设定后未增加灯光或者天空，在渲染时只能渲染出一片黑色。（全局光照——主要是模拟真实的光照效果，通过光源投射到物体上再经过无数次的反射和折射出来的效果，因此也能解释为什么只加全局光照渲染不出来内容。）
操作流程：渲染设置——效果——全局光照
添加天空增加天空作为基础光照补充
操作流程：地面快捷入口——选择天空——添加材质球——勾选发光——添加 HDR 贴图。
下面通过一些案例对比来看看全局光照及天空的对比效果
全局光照-开和关的差异
从下面的案例我们可以明显看到差别，全局光照关闭后的图标相对暗淡一些，整体图标的光反射也相对减弱了许多。
有无天空的差异
天空有助于增强图标的光感，添加天空后整体图标的细节和质感也相对更加丰富。相对，无天空整体图标质感则有所下降。
天空是否增加HDR贴图的差异
添加 HDR 贴图可以增强场景内物体的环境反射，让物体材质更加丰富增强细节质感。在一些强反射的场景下非常依赖 HDR 贴图的使用。从以下案例对比，可以明显看到差异性。
整体添加三盏灯光来营造整体的场景氛围。主要分为：主光（最强）、补光（增强阴影面的亮度）、背光（补充背面环境的光源，增强环境光氛围，勾勒轮廓）。在实际的场景中可以根据实际的反射效果和氛围，调整灯光的位置、与物体的间距、明暗度。
灯光对于物体的作用会随着颜色的差异，产生的光亮度也会有所差异，因此在实际的使用过程中，对于灯光的位置、反射的细节都可以进行微调来达到最优的效果。
色相的对比：不同色相在同样的灯光作用下产生的效果具有稍微较小。
明暗的对比：深色和浅色在同样的灯光作用下产生的效果差别较大。
实际案例对比：从下面的实际案例对比可以明显看出同样灯光下不同色相的明显差别，绿色的两部产生过度曝光。因此可以通过调整灯光的距离或者亮度来解决这一问题（如上面灯光分布建议）。
3D 图标由于相对简单，材质上主要使用颜色和反射的配合就可以得到不错的质感。当然如果希望在质感表现上更加丰富，亦可考虑增加其他的内容项来进行补充
颜色的设定
图标的颜色基本上与原图标的颜色保持一致，但部分颜色但实际渲染效果会存在些许差异，因此我们在材质上也可以根据视觉效果进行微调，视觉上保持统一的颜色感受。例如礼物的图标，如果按原来的颜色，亮部会过渡曝光，因此适当提高了亮部颜色的饱和度。
颜色偏差
在 3D 的场景内是通过各种光与颜色的反射而成的，因此即便同样的颜色，在实际渲染出来的 3D 图标和 2D 图标也会存在一定颜色偏差。
反射是本次 3D 图标中材质非常重要的一环，基本的效果都是来源于对反射的设定。整体主要设定了反射的类型、粗糙度、反射强度、高光强度、层遮罩的颜色。由于图标的颜色并不完全一致，因此在粗糙度、反射强度、高光强度是一组动态的参数。
参数变化的对比
如下面的案例，针对不同颜色的图标在粗糙度、反射强度、高光强度上都有差异性，因此不是说设定好一组参数之后就那个完全适用所有的颜色，因此这里会根据实际情况调整，但整体的视觉效果保持一致。
层遮罩的设定差异
除了基础的反射类型及参数，还需要在层遮罩中添加菲涅耳来增强反射的丰富度。默认的菲涅尔是一组黑白的颜色材质，我们可以通过调整暗部的颜色来增强图标的颜色饱和度和丰富度，如下案例对比。
静态的 3D 图标显得精致，增加动效之后的 3D 图标则除精致外，还更加富有趣味性和新鲜感。3D 的动效与 2D 有着明显的差别，可以更多维度地思考物体的运动轨迹、变化方式。
首先我们需要根据不同造型对需要制作动效的图标进行简单的分类，这个分类的主要作用在于明确不同图标的动效设计方式，为动效的设计方式进行铺垫。根据已有的图标划分为：单体形、组合型、拼装形。
单体形
图标以单个或单组形体呈现，或者整体造型属于某个已存在的事物或者形体，整体图形内容具有不可切割性。
组合型
图标通过两组或两组以上的图形内容组合而成，图标由主形（图标实际的外轮廓造型）和点缀图形（用于图标表意或者提升图形内涵）组合而成的图标，图标可进行拆分或者重组后形成动效。
拼装形
图标本身可能在现实中不存在的事物或物体，通过创意思考而得到的图形，图标的动效更具有可发散性和可重塑性。
结合上面的类型差，在设计动效的时候也会稍稍不同。重点在于表达不同的图标具有的特性，因此我们可以根据这些特性去设计图标的动画方式。
自体运动
对应单体图形，图标动效通过自身的位移、旋转、形变而产生，这类图标的动效比较靠近现实生活中接触的感知或图形动效本身具有普适性认知。例如火箭升空、UFO 飞碟、放礼炮、开宝箱等。
组合运动
对应组合图形和拼装图形，多图形运动组合而成，图标的多个部件可从不同轴向开始进行不同的轨迹运动，最终进行完整的图标融合。各个部件本身可能也存在位移、旋转、形变等动效，可以更大程度丰富图标的动效表现。
部件运动
整体动效相比前面两种类型较为简单，通过某个图标上的部件运动来表达动效的内容，因此这个部件需要是图标上较为明显的图标特征，这样更能让人具有记忆点。
音效是这次 3D 图标设计的点睛之笔，结合音效可以更加丰富地表达图标动效的趣味性。不同的图标动画反馈出来的音效是不一样的，因此赋予对应的音效反馈才是更合理的表达。
1. 选择音效
在实际的配置音效的过程中发现，部分图标比较难找到相关联的音效。但我们可以通过较为类似或者可以表达出该图标动画过程中的声音反馈的音效。例如活动小礼炮用的是开葡萄酒塞的声音，开宝箱用的是开门的声音，飞碟（UFO）用的是一组电子音效等等，并且从相关声音中窃取其中一段需要的。
2. 组合音效
部分图标的动画效果很难通过一条音效进行表达，因此需要叠加 2 组或者 2 组以上的音效来丰富整体的感受。例如手柄人图标叠加了三组不同的音效来表达，游戏卡叠加 2 种不同的音效。
3D 的图标或 3D 类型的内容如何与 UI 结合？相信大家也时有思考这方面的内容。基于这次的 3D 图标设计，我也进行了初步的尝试，从几个方面来简单聊聊这方面的内容。
1. 3D图标对于UI设计的作用
在尝试之前，我们需要明确 3D 内容对于 UI 设计作用是什么？我简单总结了几个关键点：
2. 3D ICON X Tab bar
当我们设计 Tabbar 的时候，首先想到的表现方式往往是有趣的图标图形设计、结合动效之类的方式。但我们或许也可以考虑使用 3D 的图标+动画的方式来表达我们的设计。
3. 3D ICON X 运营内容
一些相对简单的运营内容，我们可以考虑将元素进行 3D 化设计，这样可以一定程度增强整体运营的视觉表现力。
4. 3D ICON X 空白页插图
3D 插图是 2020 的设计趋势之一，结合 3D 的插图让整体的设计更加具有氛围感。
5. 3D ICON X COVER
将背景中的某些元素结合 3D 图形进行设计，让整体的氛围更加具有空间感和立体感。
本次结合实际项目中的内容进行不同维度的设计尝试，并且希望，可以从中去寻找到更多设计的可能性和突破点。当然这只是系统化设计思考中的一步，但可以启发后续更加深入的 3D 设计探索。
文章来源：优设 作者：ID设计站
知名的免费图标网站 Iconfinder 要和大家一起对抗新冠病毒，和图标设计师联手推出一系列「防疫免费图标集」（Coronavirus awareness icons），超过 200 个与公共卫生、病毒传播相关图标，这些图案包括常见的 PNG 和 SVG 格式，可以将它们加入标志、海报、传单或类似的内容使用。
如果你想要制作广告牌，提醒在这个区域要洗手或戴口罩，这里有免费图标可让信息更容易被阅读。
依照 Iconfinder 网站说明，这些图标可用于洗手说明、卫生建议或是其他预防病毒传染散播的提醒信息，所有图标采用 Creative Commons BY-SA 3.0 授权释出，使用时需要标示出处，并以相同方式分享。
网站链接：https://www.iconfinder.com/p/coronavirus-awareness-icons
值得一试的三个理由：
前往 Iconfider 的「Coronavirus awareness icons」网站，就能看到这套专为对抗新冠病毒提供的免费图标集，点选 Download all icons 下载打包好的完整图标。
在网站中展示一些收录在这套图标集的防疫相关图案，每套图案都有不同风格，例如以单纯线条为主的设计，或是采用平面化设计的彩色图标，可以依照自己的需求选择。当然你也可以按下右上角的按钮前往 Iconfinder 找到这套图标的完整版本。
下载后就能取得完整的图标集，依照不同名称分类，有些是 SVG 格式，有些则包括 SVG 和不同大小的 PNG 文件，其中有个 iconfider_freebies.zip 在解压缩后还能取得一些和防疫相关的图标。
值得一试的三个理由：
文章来源：优设 作者：Pseric
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
图标是 UI 设计中极为重要的一个环节，我们在做每个界面的设计几乎都会涉及到图标的表达，出色的图标设计可以让界面表达更加精致、有趣。图标的设计往往也体现着设计师的基本功，因此除了日常多画提升对图标造型的把控力外，我们也更需要了解和学习图标设计的趋势类型，从而帮助我们提高在设计中的效率。
基于自我学习的目的，平时在浏览一些设计网站时也会做相对应的收集。因此本文主要对于图标设计的 「类型、风格」 进行了整理，以及自己对于每种图标类型的思考。
设计网站上的图标可以说是多种多样，不同类型的图标都有着独特的魅力。例如，线性图标简洁轻量、面性图标厚重直接，当然同一种类型的图标也具有很多不同的表现形式。
因此基于本人对图标的理解，大致划分为三类：线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。
使用轻量的线条勾勒的图标，整体感受也趋向于精致、细致而具有锐度感。不同的线条表现具有不同的视觉感受，细线轻量、直线硬朗、曲线柔美。
粗细对比
粗细不同，图标的力度和重量感就会有差异。粗线的图标，视觉关注力来说会更加突出，但较于细线的图标也会显得粗壮、厚重。细线的图标，精致、透气、秀美。
但在设计时需要依据 「整体的 UI 风格」 来决定线的粗细，而并非单纯的考虑图标的关注度，反而更需要考虑图标与界面整体的平衡感。
柔度对比
直角与圆角决定了外形的感知和风格的走向，如下图对比中看出，圆角越大图形越趋向于可爱柔美（如下右图），圆角越小则越直接、硬朗和阳刚（如下左图）。因此刚或柔或中间值完全取决于早期对于整体风格的定调。
繁简对比
除了轻量化和简洁之外，图标的识别性也是极为重要。如下左图，「过度简洁」 导致图标失去该有的识别度而出现歧义，而下右图的元素叠加使得图标稍显复杂。在繁与简的平衡中，应该保持在不影响图标识别度的情况下，最大限度的提升图标的简洁程度。
特征的识别度
除了简洁程度，也需要考虑图标该有的特征。例如下图 「评论」 图标的案例，当我把图标中的「三个点」 去掉时，图标依旧具有 「对话/评论」 的表意，而当我把下面的 「箭头」 去掉保留 「三个点」 时，则会出现歧义，它可以被表意为 「更多」 的意思，因此在设计图标时需要对于表意做精准把握，避免歧义出现。
保持图标的特征美感
如下面的 「心形」 图标，下左图是我们具有普识性的图标，与圆形组合之后依然保持着原有的形态美感。但我们不时也会看到第三种设计，整体外形虽然保持着爱心，但为了与整体风格「一致」 强行对外轮廓进行切割，与原图形在美感上则稍微有些出入，这也是我们需要思考的关键点。
组合型比例
组合型的比例会影响到图标的精致程度，准确的 「比例值」 能让整体的造型趋向平衡，更具有美感。如下图案例尝试了两组不同比例的效果，这里以图标窄边作为 「基准值」 进行尝试。当内形为外形的 1 : 2 时（下图2），图标的整体视觉效果较为平衡；当大于 1 : 2 并接近 4 : 3 时，图标内部结构会显得过于饱满。而小于 1 : 2 并接近 4 : 1 时（下图3）则会产生稀疏不紧凑的效果。（这里的比例只是案例需要，实际设计以最终的视觉感知为准）
基础的理论，结合延展的应用，可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例，可以看看线型图标设计类型的多样性。
极简风格
整体风格极为简约，没有多余的线条，通过线条还原图形的本质，外形 「简单」 却具有很强的识别性，在视觉感知上轻松、干净。
极简的风格图标在于对图形的把控，多一笔可能显得复杂，少一笔可能影响识别程度。以上图为例，图标的组合元素保持在 2 个左右，整体较为干净。
实际应用：Instagram、Airbnb、Facebook、Twitte
双色
相较于 「纯色的图标」 更具表现力，细节上也会更加丰富，形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。
同色系：同为冷色系、暖色系或同一色系的表达形式。如下图案例，以暗色为主色，亮色点缀提亮，使得图标具有一种高光提亮的感觉。
另一组案例是亮色主色结合暗色，整体图标效果还算可以，但较亮的颜色没有应用在图标的关键特征上，使得图标第一眼的感知稍有减弱。
对比互补色：颜色跨度更大，层次更加分明。如下图案例，红色与蓝色的撞色之后相比单色的图标更加出彩和具有记忆点。
实际案例：腾讯动漫我的页面
透明度变化
本质上与上面一种为一个类型的设计，通过透明度的叠加和变化，提升图标的层次感和空间感，降低图标的压迫性。
实际案例：爱奇艺9宫格图标
渐变层次叠加
渐变带出了图标的质感，结合「不同深度」或「不同饱和度」的变化，让图标更具有细节和层次。
黑白+品牌色
黑白色作为主色调，结合品牌色作为点缀色。与常规的黑白图标相比，既产生了变化，同时兼顾了品牌色的透出。
实际案例：大众点评攻略页面图标
线性渐变
结合渐变的颜色，丰富了整个图标的视觉表达，并提升了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试，白底：粗线比细线的视觉效果相对较好，渐变也能较为清晰地被表达；黑底：细线比粗线的视觉效果显示得更加精致和具有锐度感。
实际案例：网易考拉、NAVER
一笔成形
此类图标在视觉表达上具有较高的线性流畅度和设计感，关注点在于整组图标的 「开口起始点」 设定上需保持一致。例如，「从左到右」或「从右到左」形成一体化的连贯线条，开口起始点不一致会影响整组图标的一致性，应用在页面时也会显得杂乱。
断点图标
与上一种较为类似，但没有连贯度的要求。在线形图标基础上面，寻找一个缺口来打破 「全包边图标」 的沉闷感，使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小，另外需要控制开口个数避免过多导致图标外形过于零碎。
实际案例：腾讯体育、京东
面性图标比线性图标更能表达出图标的力量感和重量感，比线性图标会更加容易吸引用户目光。在识别度上，面性图标更加依赖于外轮廓的清晰度，因此在设计时对于外形的打磨是重中之重，清晰的外轮廓可以帮助提高识别度。
轮廓对比
轮廓的差异会体现出不同的气质，如下图的左边和右边的区别，一个气质较为直接硬朗，另一个则较为柔美可爱。流畅的外形可以让面形图标的整体更加简洁、规整，如下图中间的图标在轮廓的处理上则显得比较碎，整体外轮廓造型的连贯度有所欠缺。
镂空对比
适当的镂空除了补充了图形的识别度之外，还提升了面性图标的设计细节。另外需要控制好镂空部分与整体的外形比例，过小或过大都可能影响图标的平衡感。如下图的中间和右边，镂空过小对图标的辨识度并没有多大作用，没有镂空则少了一些透气感。
形体对比
形态上的差异也会具有不一样的视觉感知。以「星」和「心」为案例，单独形体与组合之后的形体相比视觉感知更直观些，而组合形的图标相对会精致一些，多了一些层次。在日常设计中的经验是：越小的图标形体应该越简单，因此建议单体出现较好；若图标的尺寸足够大时可采用组合型的设计，补充图标的细节。
繁简对比
设计面性图标时，对于多余细节的管理也很重要。随着细节的增加，块面切割过多，会使得整体图标变得过于零碎（如下右图）。保持简约的设计提高图标的识别度，在关键的特征细节上做补充（如下中间图的相机闪光灯）。
面性图标在设计时也可以结合各种不同的表达方式，来提升图标的质感和创意，而非只是简单的填充颜色。
单色面+点缀色
整体的外形使用统一的颜色，结合图标的属性感知使用不同的颜色进行点缀，通过点缀色提亮了图标的视觉效果，达到既统一又具有差异化。
多彩双色
通过对比色、邻近色的搭配来营造整体的图标氛围，提升了图标的层次和丰富度，双色的表达也增添了图形的趣味性。在日常使用的 APP 中极为常见，简单且容易出效果。
微质感渐变
微弱的渐变提升了图标的质感。渐变的方向会影响整体图标的视觉效果，因此可以根据不同设计的需要进行调整。如下图案例：
实际案例：全民K歌
透明度/灰度变化
透明度/灰度的变化，让原来单色的图标变得更加具有层次感和空间感，设计细节更加丰富，降低了单色面性图标的厚重感。
实际案例：企鹅FM我的页面
透明度变化+渐变
渐变的设计提升了面性图标的质感，从颜色上具有一定的丰富度。在渐变的基础上对组合型做透明度差异化，使得图标具有了层次感。
透明叠加的图标+渐变的背景
此类图标常常被应用在 UI 界面中的列表或者顶部入口的位置。
实际案例：全民K歌点歌页面
颜色叠加穿透
图标透明叠加之后产生了交错的负形，叠加出第三个面。虽然整体设计依然保持着扁平化，但却多了一份层次感，并且增加了图标的细节。
实际案例：百度网盘
渐变层次叠加
整体的效果与透明度变化的图标较为接近，通过渐变的深浅变化，使得形状的衔接处出现了明暗对比，因此图标也具有了厚度感和层次感。
实际案例：NAVER、掌上生活
高斯模糊
此类图标基本没有在 APP 中看到，与「透明度变化」或「颜色叠加」相比都更具层次感和空间感，同时图标也具有较强的设计感。
结合了线性和面性的优点，既保持了面性的重量感，同时具有线性的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控，不同比例可以呈现出不同的视觉感知。
线面比例
线面比例的差异，图形呈现出来的张力也会有不同的感受。基于中间填充的图标形态尝试了三种不同的比例，从下图中可以看出，当填充与外形窄边比为 1 : 3 时（左图）图标呈现往内收的感觉；填充与外形窄边比为 1 : 2 时（中间）图标整体较为平衡；当填充与外形窄边比为 2 : 3（大于1:2）时（右图）整体具有外扩趋势。
组合形式
线面可以通过不同的组合形式进行绘制。基于不同的组合形态可以设计出多种多样的线面图标，不同的组合形式会体现出不同的设计风格，因此在设计时尽量多发散思考，寻找出适合你的组合方式。
繁简对比
线面结合本身就由两种形式组合，因此在设计的时候更需要对整体造型进行把控，单体（线和面）造型必须保持较高的简洁程度，这样最终组合形成的图标才不会过于复杂（左图），若本身形态过于复杂，则会降低图标的辨识度和视觉美观度。
线面结合的图标集合了线性和面性的优点，在设计方式上也继承了两者的优点。设计方式也是基于以上两种的结合，因此可以结合出更多设计的可能性。
黑白线+面性品牌色
与「线性+品牌色」的做法较为接近，统一的线性颜色叠加品牌色的透出。
实际案例：好好住、soul
线面双色
基于线面的基础上，在线和面的颜色上做差异。具体做法与线性或面性的双色接近。
线面结合-阴阳
线和面的结合按 50% 的比例进行设计，依据上下、左右、居中等基础方式的结构化设计，整体图标的视觉效果较为跳跃，非常规。
线面双色+错位
在双色图标的基础上，线和面按照统一的 「百分比」 进行缩放，并进行透视和位移的设计，整体呈现出来的是一种交错叠加的视觉效果，相比普通的线面双色更加丰富。
实际案例：闲鱼底部tab、脸球底部tab
线面错位+渐变
基于上一种风格，对面或者线的颜色进行渐变设计，丰富了图标的质感和颜色更加细腻。
线面透明度变化
与「线面透明度变化」的设计方式大致一样。如下图案例，「弱线强面」的第一识别度较弱，而「弱面强线」 的外形识别度较高，也更符合图标的表达。
实际案例：新浪微博、腾讯新闻
基于三种基础的类型表达，可以拓展出多种多样的设计形式。除了以上的案例之外，还收集了一些其他的设计。
线面结合 – 插画
整体比较偏向插图的感觉，细节和元素较多，常见于一些 APP 的空白页设计。
线面结合 – 卡通插画
整体感觉比较可爱、卡通、二次元，常见于一些二次元或漫画类的 APP。
面性 – 渐变强质感
整体风格的光影质感会比较强烈，常在一些活动运营或小游戏的界面出现。
面性 – 扁平写实
整体感觉比较扁平，细节的丰富度与现实感知接近。
线面+渐变插画
整体风格比较偏向绚丽多彩的颜色风格，质感和细节较为丰富。
写实风格
3D质感图标
由于 C4D 的制作成本相对较高，目前较少在常规的 APP 中看到。但 3D 作为一个主流的设计趋势，在时间和能力允许的情况下需要多做这方面的尝试。
等距的线面结合
等距的设计，让原本线面的图标丰富了层次，并具有立体透视的感觉。
除了以上这些之外，我们在实际场景中也会发现一些较为特别的图标设计。
Facebook 更多页面的列表图标
整体风格偏向插画风+渐变质感。由于更多的页面为纯列表的设计，因此整个页面在图标的设计上做了很大胆的尝试，与常规的单色图标相比更具有吸引力。为了区别不同的业务，系统性质的功能图标做了色调的区分。
APP Store 游戏和新APP界面下的类别列表图标
整体为具象化扁平风格的设计表达，图标的颜色还原了最基本的现实感知。
iOS 系统办公类软件的起始页面图标
整体风格比较偏商务简约，具象的图形表达+轻微的渐变质感。
QQ手机版中延展的功能图标
整体风格偏向轻写实+微弱渐变。每个图标都具有丰富的细节表达，色调方面基于业务属性结合品牌色进行了区分，整体既统一又具有差异化。
大众点评顶部入口的图标
整体风格偏向写实+强渐变+炫光感，每个图标都具有丰富的细节表达。
旅法师营地
游戏、二次元类的 APP，因此在图标的设计上也偏向细节较为丰富的插画风格。
哔哩哔哩动漫
图标风格偏向卡通插画，选中态与默认态的设计较为巧妙。
本文的重点在于透过这些设计类型或者技法的了解，帮助我们在日常设计中提升输出效率。图标虽然作为 UI 设计的基础，却有很深的学问，精致的图标更是可以起到点睛的作用，提升界面的质感和氛围。
图标的种类远远不止本文所提到的这些内容，但是万变不离其宗，都是「线性、面性、线面结合」 再结合 「透明度、渐变、颜色叠加、质感、多维空间」等等的表达方式而设计出来的。
我们除了需要掌握这些内容之外，还需要提升图标设计的造型能力，更需要日积月累的练习和思考，从量到质的变化。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
