每天努力的用心的去做设计，挺开心的，其中最开心的细节就是“思考自己的设计如何与别人的不一样”，让你的差异化产出得到认可后，这将是一件非常非常幸福的事情。
今天和大家分享一个前一阵子做的小案例，做的一个直播货币，名字叫星币。
思考过程如下：
其实“星币”可发散的空间很小，因为已经非常具象了，无非就是星星、和钱币。
我们可以看下大概的感觉：
但是如果按照上面的感觉做，那最后出来的效果一定很常规，这也就有了我接下来的思考。
我们仔细观察，一般参考中的星星都是非常规矩的，无非就是尖角圆角的区别：
要么就是胖瘦的区别：
所以这次我打算做一个不那么规矩的，有点跳远的感觉、又有点星火的感觉，所以我把星星的一个脚拉长：
然后再把两个胳膊往上抬一抬：
这样就好像是一个跳跃的小人一样，会相对来说活泼一些。
接下来为了让整体更加和谐，我在钱币周边挖了一个小口：
目的就是配合那只伸出来的脚，让整体感觉更加巧妙一点。
其实星币很容易联想到金黄色，如果按照这个设想来做，那就会比较普通，所以我选择让他和直播、社区的配色一致：
这样在颜色方面也就有点自己的调性了。
刚才不是说让这个星星看起来像个跳跃的小人嘛，那一般人都有表情的，所以我们完全可以再加上一个可爱的表情：
让整体更加生动形象。
当然，如果星币在面积小的场景下是看不清表情的，所以需要做成两种，一种是有表情的， 一种是没有表情的。最后，还可以再做个有质感的：
后来发现质感做的有点脏，于是又优化了一下质感，效果如下：
整个构思和执行的过程还是可以的的，也得到了大家的认可，不过很可惜的是，后来名字改了，改成了能量币，哈哈哈哈，通过能量，我又联想到了太阳，太阳能嘛，执行原理都是一样的，大概效果如下：
文章来源：优设网 作者：菜心设计铺
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天这个需求是直播间 pk 后，主播胜利与失败的两个状态设计，过程经历了很多次修改，现在来分享一下自己的感受。
其实最开始我有点天真了，以为这种状态直接画个圈圈，写个胜、败两个字，然后做下颜色区分就完事了：
但这根本行不通，看起来像是未完成的交互稿，一点设计感都没有。
于是我开始思考如何增加设计感了。
如何增加设计感？
其实无非就是给这个状态增加细节呗，尤其是这个胜利的状态，我想到麦穗、翅膀等元素，最后选用了翅膀的元素，绘制了一个样例如下：
但被说到这个结构是乱画的，哈哈，一下戳到了我的痛点，确实是胡乱画的，各种圆圈没什么逻辑。
于是后来仔细思考了一下，把圆圈分为三层：
效果如下：
然后最中间放主形象，两边放翅膀，顶部放皇冠，最终效果如下：
这样整体看起来结构就是清晰的。
我们可以看下结构清晰和不清晰的对比：
后面因为整体调性需要可爱一点，所以把翅膀改成了比较圆润的造型：
效果还算不错。
其实这个点是我经常和大家强调的，但有时候确实是当局者迷，自己也容易犯这样的错，比如最开始的那个效果，很明显中间暗部和周边亮部没有拉开层次：
所以在后面的取色上，会把中间暗部做的很深，形成鲜明对比：
这样层次才会更加明显，不然就会糊在一起。
最开始本来想用圆形来做失败的状态，但是后来发现有点太惨淡了，于是想着还是加点细节吧，怎么加呢？
这时候是需求方那边给的一点灵感，说失败不就是很颓的样子，就拿把翅膀下沉和胜利形成反差不就可以了，我感觉说的挺有道理，于是就尝试做了下：
确实还可以。
本来想着胜利用紫色、失败用蓝绿色：
但是发现蓝绿色多少还是会有点分散“胜利”的注意力，于是就在思考，失败是表达一种负向的情绪，那是不是可以用灰一点的颜色？
于是尝试了几个不一样的灰度：
最后选择最后最后那个几乎接近灰色的版本，干脆一点，对比强烈一点。
我们看下最终效果：
再看下过程稿吧：
调整了很对次，过程还是挺值得记录的，回头一看，很有成就感！
以上就是这个小需求过程中总结的一些知识点，后面还会加入一些微动效，增加氛围感。
希望可以给大家一点灵感和启发。
文章来源：优设网 作者：菜心设计铺
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天和大家聊一聊设计细节，每个提到的细节你们都能直接拿走，并且在项目中使用。
这个页面相信大家平时工作中都会做到，有很多图标放在一起，里面可能是一些常用菜单，这个设计有什么问题呢？相信看在这里的小伙伴，脑海里有无数答案？不统一，还是什么？我们来分析下。
首先从大家关心的统一性来说，没有任何问题，图形都是在规范的图标栅格里面，也非常的统一，那么问题出在哪里？
仔细观察，我们会发现「联系人」和「历史消息」的图标过于饱满，虽然他们尺寸一样，但是比「最近使用」这个图标要大很多，原因是什么呢？因为后面这两个图标从视觉来说他们的重量太重了，所以看起来会比较大。
所以今天我们在做设计时候，如遇图标瘦长或者圆形等不够饱满的情况，请酌情将图标撑满像素，来保证整体一致的视觉体量感。
如果图标较饱满的情况下，可使用微缩，来保证整体一致的视觉体量感。我们文中案例之所以出现这种情况，是因为没有定义出图形体量大小具体的绘制规则，所以导致图形过于饱满，看起来会显得视觉重量不一致。
所以我们第一步，对图形绘制规则进行优化，保证图形在页面中体感一致，我提供了 4 个基础图形绘制技巧和对应的辅助线参考图。
所以在实际应用时，可略微在可变范围内微调，对于过于饱满的图形，高度变低时，需要增加宽度来保证视觉重量相等。
这样调整后，整体的图标视觉重量就会更加均衡，也会更加规则。所以，今天如果你发现你们产品页面中图标大小体量不一样，或许是因为你忘记对图标体量进行规范。
图标我们在界面中使用场景很多，很多时候用大图标，有时候用小图标，我们该如何去定义小图标大小，大图标大小，这是很多同学非常纠结的。有时候就乱定，导致页面没有秩序感。
第一步，我们要先去梳理页面场景，看看哪些地方会用到图标，把全部场景列出来。
列出来后，我们根据你 APP 设计的最小单元的倍数来定义图标风格，比如支付宝最小单元是 4，所有间距都是 4 的倍数，那么在图标这里，也是同样的原则，全部的图标尺寸，我们根据 4 的倍数去定义几种大小，比如 24X24，32X32，44X44，56X56，72X72 等等，如果页面中不够用，同样的在 4 的倍数基础上进行新增。
我相信大家都有这种情况，一组图标在使用时候，会出现在各个场景，这个时候需要放大，甚至缩小，但是不知道放大后图标粗细该如何确定，直接放大，直接缩小会出现图标的细节粗细有问题，那么这种时候该如何处理？
直接放大缩小，图标粗细没有任何说法，而且会显得比例非常奇怪，如何去解决这个问题？
第一步：我们需要确定图标大小和线条比例，以支付宝为例，首先要确定图标大小和线条粗细比例为 14：1。当然每个比例是不一样的，你可以根据你们产品的调性去决定，如果你图标比较细，你可以设定为 10：1，这些都没有固定标准。
这样的话，假如你图标需要设计一个 140X140 的大小，那么你的图标粗细就应该是 10px。
如果你图标是 112 尺寸大小，那么按照 14：1 的比例，那么你图标线条粗细就应该是 8px，以此推动，通过这样的方式来保证图形的一致性和稳定性。
以上三个小点，是绝大多设计师忽略掉的，也是设计中不太注意的细节，但是设计的专业程度往往就是由这些细节组成，今天这 3 个技巧，看会了之后，你就可以直接在项目中去运用。
文章来源：优设网 作者：我们的设计日记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
不知道大家有没有被说过，设计做的不精致？拿图标举例，其实不精致的原因就是统一性没做好。我们总说做图标要统一，但是到底要统一哪些要素？有没有一个完整的自检表呢？以前我总结了 5 到 6 个要统一的要素，最近观察大家的练习之后，直接扩增到 9 个了，今天就以线形图标为例，看看我们需要统一哪 9 个要素。
大纲如下：
这个很容易理解，就是一组图标看起来大小是一致的。但是最近发现了一个比较重要的点，就是很多同学做一组练习，相邻的图标都差不太多，但是隔的比较远的图标放在一起就差很多了，比如下面这几个图标，就是逐渐变大的：
所以对于大小统一，我们必须要做到，一组图标里，任意两个图标拿出来都是大小统一的，否则就是不及格。
保持大小统一的方法见这篇 – 图标设计规范。
圆角统一也是比较好理解的点，无非就是圆角大小，像下面这两个图标：
如果圆角差很多，你很容易发现，因为都是差不多大小的矩形，但是我们很容易忽略一些细节，比如下面第一个图标的三角形，和旁边的日历相比，就过于尖锐：
这是图标里面很细的细节，所以容易被忽视，大家一定要重视。
语言统一你可以理解为设计风格统一，如果一组图标里面出现了多种风格，那会显得非常不专业。
比如下面这组练习：
大体看好像是一种语言，但仔细观察其实还是有很多细节不统一的，比如外轮廓上面有的有白色，有的没有，白色还分带描边和不带描边：
这就是在语言上不统一的案例，大家在做练习的时候，一定要想清楚你的语言是什么。
粗细统一就不用说了吧，基本就是用在线性图标线条粗的，比如像这种比较明显的粗细不一致，就不应该出现了：
这都是最最基础的问题。
疏密统一其实是很多新人朋友容易犯的错，比如下面这一组图标：
大部分地方是比较透气疏松的，但是只有第二个比较密集，这样就会让人感觉比较突兀，整体不够和谐。这就是疏密程度的统一性，一定要把握住节奏感，否则就会不舒服。
这个点一般用在断线图标上，也就是你开口大小的统一性，比如一个开很大，一个开很小：
那就证明细节没有做到位。
比例可以分很多种，比如颜色比例，像下面这个原作的颜色比例就没有太统一：
在小 y 优化临摹之后，达到了颜色比例的平衡：
再比如之前说的一个案例，粗细线条的比例：
在这样不统一的情况下，图标是一定不会精致的。这些都是比例统一问题出现的实际场景。
正负形也是没那么容易看出来的，举个例子，下面这组周楠做的图标，乍一看没什么问题，但是仔细一观察，其实我们会发现，白色面积的重量其实是不统一的，那个消息上面的“#”会偏重一点：
当优化之后，我们再看：
整体就会比之前统一精致很多。
角度，也是增加图标统一感的因素之一，最常见的角度统一方式就是按照一定的倍数来制定规范，比如 30 度的倍数：
再举一个角度其他方面的例子，在做下面这组图标的时候，最初没有考虑断线的规律：
所以看久了会觉得有些凌乱，于是我将断线处定为右下角 45 度，如遇到圆角拐角处，可挪动靠近拐角处进行断线：
这样我们就会看到所有的图标断线位置都大致出现在右下角的地方，最终效果如下：
很大程度上提高了图标的统一性，并且在延展执行的时候节省了大量的思考时间（思考在哪里断）。
但是对于断线的位置是否一定要规定其出现的角度，我觉得不一定，也可以从其他角度考虑，但最终的目的还是让整体统一和谐，且延展性高。
以上就是目前总结的 9 个需要统一的点，只要能把所有的统一性做好，精致一定是没问题的。
文章来源：优设网 作者：菜心设计铺
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
看到好的图标我们会习惯性地截图保存，但随着收集的图标越来越多，会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题！
图标是基本但重要的表达元素，在 UI 设计中有着不可替代的作用。
常见的分类是简单的线性分类，缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。
对图标进行分类时，普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标，样式很简单，但可以划分到多个类别中。
面对这样的问题，推荐使用系统性的结构来划分图标类别：
利用这种结构层级，可以明确定义图标类别。
图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷，但把它缩小到 16px，这些酷炫的效果都无法呈现出来。
在对图标归类时，首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类：
确定图标尺寸后，进一步细分图标类型：
每个类型对应的图标绘制方法看 → https://www.uisdc.com/zt/icon-drawing-guide
利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中，所以在小图标分类中没有展示。
图标尺寸越小，展示的细节越有限。相比于大图标，小图标的尺寸有一定局限性，图标组成包括标准和容器两种。
大图标利用尺寸上的优势能展示更多内容，分为多种组成形式。
简单的图像可以更具包容性。图标的尺寸越小，越考验设计师传达信息的能力。
标准面性图标
面性图标易识别，适合应用在小尺寸图标中。
关键点：
带有背景色的面性图标
彩色背景为简约设计带来了更多可能。通过这个技巧使面性图标更友好，更具吸引力。
关键点：
标准线性图标
线性图标因为简洁性和现代性而受到用户的欢迎。随着屏显越来越清晰，我们可以更加大胆地使用线性图标。
关键点：
双色线性图标
设计小尺寸图标时，必须放弃细节并强调简单的形状。但当使用一种颜色效果不太理想时，可以考虑添加一些颜色。
关键点：
线面结合拥有更多细节，提升用户的愉悦感。
关键点：
扁平化图标既简单又巧妙，表达品牌形象的同时具有丰富的内涵。
关键点：
大尺寸图标在界面中使用较少，更多用于产品标识或品牌宣传。
标准线性图标
在设计任何图标前，都可以先创建一个线性轮廓，确保形状看起来足够美观后再添加颜色。
关键点：
渐变线性图标
添加一些渐变能让原本单一的线性图标赋予更多的个性。
关键点：
等距线性图标
2.5D 图标做起来会花费很多时间，但效果往往会很好。在设计汽车、房屋、家具等实体产品时，建议优先使用 2.5D 图标。
关键点：
手绘线性图标
随着设计趋势向简约化、扁平化发展，很多设计师丧失了手绘图标的能力。实际上手绘图标让品牌更真实甚至更有趣。
关键点：
断线图标
标准的线性图标看起来可能会很单调，而简单灵活的断线处理能为图标增加更多个性。
关键点：
双色线性图标
关键点：
确保两种颜色具有相同的对比度，否则可能会导致用户看不清其中一种颜色，因此无法识别完整的图标。例如左下角的浅绿色对于视力弱的用户来说就很不友好。
线面结合图标可以看作是添加颜色后的线性图标。线面结合具有很强的轮廓，让图标能够清晰可见。
标准线面结合图标
关键点：
带有背景色的线面结合图标
关键点：
错位线面结合图标
当填充色与描边错位时，颜色移到右边图标左上角留出高光，带来一种清新的感觉。
关键点：
色块图标
这种风格的图标的特点在于并不依赖于颜色，仅将其用于装饰。
关键点：
单色线面结合图标
关键点：
扁平化图标通常没有描边，主要使用形状和颜色来完成组合搭配。简洁、友好和适当的细节，让这类图标非常具有吸引力。
标准扁平化图标
关键点：
带有容器的扁平化图标
尝试让图形打破容器，带来动态的感觉。
关键点：
等距图标
关键点：
半阴影扁平图标
半阴影图标是在扁平图标的基础上添加半色调阴影，得到更具个性的图标。
关键点：
长阴影扁平图标
当图标位于容器中时，可以考虑添加长阴影，主要包括纯色阴影和渐变阴影两种类型。
关键点：
拟物化图标实际上已经包含了大部分的样式，例如它们是立体的，有丰富的渐变和阴影。
这种风格的图标看起来与现实生活中的图标尽可能类似，让用户感到更舒适。
关键点：
目前绝大多数界面不再有这种风格的图标，可以考虑使用 3D 建模来实现这种效果。
希望大家能对图标的分类及设计有更全面深入的认识，从而构建一套完整的图标思维体系。
文章来源：优设网 作者：Clip设计夹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
下面来分享几个扁平化风格图标。
扁平化的概念最核心的地方就是去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素。让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化。
例如，Windows、Mac OS、iOS、Android系统的设计已经往扁平化设计发展。其设计语言有Material Design、Metro UI等。
扁平化尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。
扁平化不仅界面美观、简洁，而且达到降低功耗，延长待机时间和提高运算速度。
文章来源：优设网 作者：牙线y2x
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。带着这个想法，我开始逛“避寒寺”和“追波”，找可以参考的作品。这套作品我挺喜欢的，作者还做出了 3D 视角的。
先分析一下图标的结构。图标有三层：底部几何色块、毛玻璃主造型，带有含义的白色图形。
再分析俯视角度时图标的表现，方便用工具表现。
最后是颜色的归纳。作者用了饱和度非常高的颜色，基本都在右上角最尖尖的位置。
分析完以后可以开始临摹了…因为造型比较简单，我没有临摹，直接创意发散做了另一套。选主题的时候我随便开了个 APP（当时打开的是微博），觉得个人中心的快捷入口图标主题可以拿来试试。我选了深色作为背景，所以这套图标用到界面会比较难适配，和原 APP 风格也不符合。在这里单纯利用主题来做练习。
做底部的几何色块时，形状可以尽量跟主图形相关性大一些，加强它们之间的关联性，如果实在没法关联的也不必勉强。
我降低了几何色块的面积，增加了多一层毛玻璃形状层，并且让白色的图形更灵活，而不是雕刻在毛玻璃层上。这是我理解了原作者图标的结构之后，自己进行的改变，效果还行。
做的过程中，发现草稿箱如果里面放一张白色的卡纸，视觉效果还不错，所以我又做了另一种效果。最终呈现出来的效果只有草稿箱比较出彩，其它很牵强。
拿「照片」这个图标来进行拆分，参数分别如下：
这是最后呈现的效果：
封面图参考了小米的屏保。我用 sketch 做的，效果一般，可能用 ps 做会更逼真吧。
临摹一套图标的时候，要带着目的去临摹，分析原作者每一步的处理。然后把图标拆分成不同的变量，修改这些变量的时候或许会得到不错的想法。
文章来源：优设网 作者：牙线y2x
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章主路径如下：
这组图标非常有活力和创意，色彩很活泼，原作者是菜心。我也常用微渐变来做图标，但是没有尝试过加上描边，并且这种强烈的对比色也在我习惯用色外。临摹这组图标可以突破我的用色习惯。
我们先逐步拆分，再进行总结。
第一步，分析原作品的结构。
图标可以拆分为线、面和小元素。我在 sketch 做的，形状的线面转换比较简单。线跟面的图层要分开，因为面图层带有反光，而线图层没有。
第二步，确定光源的方向。
从作者的表现来看，光源在左上角，因此所有的图标应该遵循同一光源方向的原则。光源的表现会因为材质的不同而不同。比如「LIKE 灯牌」带有自发光、「铃铛」带有高光。所有物体的反光比受光面要亮一点，让人感觉很通透。
第三步，分析原作的颜色。
不要吸色，先自己调色。刚开始会有点难，但是这种练习会帮助我们提高眼睛辨色的能力，提高色感。对比自己和原作的颜色，发现我调色不够准确，没有做到不同颜色饱和度一致，渐变色跳跃比较大。这表示我还没有理解原作的用色，后续临摹的时候需要修正。
第四步，总结作者的设计语言。
分析完以后开始临摹。
先说一下体量感的问题，因为有很多设计师在做图标的时候会忽略这一点。常见的方法是拿图标框来限定，但是问题又来了，有的人限定得太死板，不会根据实际情况来微调。针对这种情况，可以拿别人的整套图标作品做反推，在临摹的时候，留意别人对体量感的把握。
定义了大概的体量之后，我会观察图标大致的形状和角度，凭印象先把造型做出来。过程中没有把原作品放在旁边，最多在忘记的时候去看一眼。这样做的好处是，可以发现自己观察的时候漏了什么（这个方法是跟菜心学的）。下图就是第一次临摹的草稿，orz…铃铛最不好画了。
拿着草稿来对比原图，把自己错漏的地方找出来。
统计错漏的地方，重新调整图标，达到 90%以上的相似度后，给图标上色。
做完这一步后，大概理解了作者做这套图标时的逻辑以及方法。我们可以开始做半原创的设计，在原作的基础上延展几个图标。我选择电商主题的「充值、签到 、赚钱、砍价」这四个图标来做。
我们先找参考素材。不管画图标、做界面，还是画插画，学会找参考非常重要。参考不是照抄，而是给我们提供灵感来源，切记不要凭空想象。有一天，团队的设计师跟我说她不会画衣服的褶皱，画起来总是怪怪的。我叫她上网找相似衣服的图片，看一下别人的褶皱和光影，她就茅塞顿开了。因为她总是用“原创”局限自己，没有找实物参考。
原创绝不是凭空想象，而是有源设计的融合。
结合作者的设计语言做延展图标，放在原作里面也不违和的话，就成功一大半啦。
接下来是原创时间～我们将作者的设计语言其中一些变量改变，会得出不同的结果。
文章来源：优设网 作者：牙线y2x
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。
网上现存不少关于图标绘制的文章和教学，但不是太笼统，就是太片面。即使看了很多这种碎片化的知识，也很难在我们的认知中对它有比较全面、系统的认识，所以大多数初级的 UI设计师，始终画不好图标。
针对这个问题，我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法，让所有设计新人更快地上手图标设计。
本文共分为5个部分：
图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号，有非常大的覆盖范围。
对于 UI设计师而言，我们主要针对的就是狭义的概念，它是 UI 界面视觉组成的关键元素之一。
在当下最常见的扁平化设计风格中，界面的实际视觉组成只有4种元素，图片、文字、几何图形、图标。
△ 由图片、文字、几何、图标组成的界面
可以说，图片、文字、几何图形的运用，都只用到排版的技巧，而图标，是 UI设计中除了插画元素以外唯一需要我们「绘制」、「创作」的元素，一涉及到这两件事，难度就直线上升了。
本来往界面里丢一些方方圆圆、贴几张图、填一些字，就可以把界面做出来了，比如 Clear APP，不仅工作量少，而且还符合极简原则，为什么还要吃力不讨好的设计图标？
△ Clear APP 的截图
这就涉及图标作用的探讨了，为了节约篇幅，更快进入大家最想看的重点干货，我就不长篇大论从上古时期人类与图形符号的纠葛开始写了，就谈对于图形界面本身，为什么图标有这么重要的地位，没它不行？
有两个原因，第一文字虽然也是一种图形符号，但相对于图标而言，文字实在太复杂了，在识别效率上有先天的劣势。再者，不同的语言，文字的长度也不同，如果换成阿拉伯语或者俄罗斯语，或许一行还装不下所有文字。图标可以以一种更高效的方式，将我们想要传递的信息进行浓缩，不仅易于识别，也能让界面更简洁，利于排版，比如下方案例。
△ 应用文字替换了图标的对比
第二点，就是关于视觉的观赏性。有些页面中，如果把图标去掉了，也丝毫不会影响我们的操作效率，以及对内容的理解。但没有图标，缺少这些点缀，我们就会觉得这个页面看起来太枯燥了，不得劲，最好的例子就是应用的设置页了，见下方案例。
△ 设置页有图标和没有图标的对比
既然知道了图标的作用和重要性，那么接下来，就要进一步了解在工作中我们要设计哪些图标。
可以先划分成三种大类：
下面，我们将对它们分别进行介绍，以及展示相关的设计类型，方便读者在开始学习具体设计前，对 UI设计会创作的图标有更全面的认识。
首先，我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型，即应用内有明确功能、提示含义的标识。作为最常见的图标类型，我们就不需要做太多的说明了。
△ 常见的工具图标
虽然理解起来容易，但是它所包含的设计样式却并不少，可以把它们归纳成线性、面性两个大类，再分别进行细分。
1. 风格1：线性风格
线性图标，即图形是通过线条的描边轮廓勾勒出来的。多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓，比如上图案例，线性图标的创作空间看似不多，但实际上有非常多的调整空间。
下面我们把它们罗列出来。
△ 线性风格的工具图标
2. 风格2：面性风格
面性图标，即使用对内容区域进行色彩填充的图标样式。同样，在这类图标中，也不是只能应用纯色的方式进行填充，还有非常多的视觉表现类型。
△ 面性风格的工具图标
3. 风格3：混合风格
当然，在设计图标类型的时候，也不一定非线性和面性不可，有一些热衷创造和尝试的设计师，还创作出了混合型的图标，既有线性描边的轮廓，又有色彩填充的区域。常见的样式类型如下：
△ 混合风格的工具图标
和工具图标比起来，装饰图标的视觉性作用更多。对于一些比较复杂的应用来说，过分的简约并不能弥补信息过多的信噪问题，我们要通过丰富视觉体验的方法来增加内容的观赏性，减少一屏内显示内容的数量。
比如在分类列表里，是可以只使用线框和文字把大量内容浓缩到一屏以内，但实际浏览效率并不会增加，而且并不美观。
△ 装饰图标在识别性上的作用
还有就是国内的界面设计环境，会根据运营需求设计进行特殊化处理，尤其在电商领域，首屏的图标都会改成首页风格的样式，增加活动氛围。
△ 节日活动中的装饰图标
装饰性的图标设计，虽然没有明确的规范该怎么做，效果怎么好怎么来，但最常见的类型有四种，下面分别进行介绍。
1. 扁平风格
扁平风格的装饰图标，通常可以理解成是用扁平插画的方式画出来的图标，除了继承扁平的纯色填充特性以外，也比普通图标有更丰富的细节与趣味性。
△ 扁平风格的装饰图标
2. 拟物风格
拟物风格的图标现在出现的频率越来越高，集中在大型的运营活动中，通常这些活动会通过拟物的方式将头部设计成有故事性的场景，所以自然顶部的相关图标使用拟物的设计形式会更贴合。
△ 拟物风格的装饰图标
3. 2.5D风格
2.5D是一种偏卡通、像素画风格的扁平设计类型，在一些非必要的设计环境中，使用2.5D会比较容易搭配主流的界面设计风格，有更强的趣味性和层次感。
△ 2.5D风格的装饰图标
4. 炫彩渐变
这是一个拗口的原创名词，找不到更合适的形容，还是觉得浮夸点符合它的气质。这种图标，就是通过一系列非常激进的渐变和撞色实现，通常还会使用彩色的阴影。
使用这样图标的区域，通常都会呈现出一副五彩斑斓的景象，只有在内容非常丰富且用户偏向年轻化的产品中可以使用，是一种非常难驾驭的设计风格。
△ 炫彩渐变风格的装饰图标
5. 实物贴图
最后一种，就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的，但想想还是放进来合适。因为这种图标的出现频率非常高，有必要在后面掌握它的做法。
△ 应用摄影实物的装饰图标
最后，就要说说启动图标了。启动图标的设计比前面两种类型的图标说起来更难，因为它实际上就是把「LOGO嵌套进系统图标模版」的图标。
除了掌握必要的规范以外，启动图标的主体物设计就是 LOGO 的设计，已经超出了图标绘制本身的知识点。所以，在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习，这里我们先来了解一下它有哪几种设计形式。
1. 文字形式
使用了文字作为图标主体物的类型，通常是这类应用本身的品牌 LOGO 就使用了文字，所以这里就把字体照搬过来。
△ 文字类的启动图标
2. 图标形式
对于一些偏工具，适合用简单图形传达应用功能的启动图标，就会采取使用工具图标的方式设计。
△ 图标类的启动图标
3. 图形图标
图形形式看起来和图标形式很接近，但实际上完全不属于同一类型，之所以它不是图标，是因为这类图标的主体图形是一种经过高度抽象化的标识，传达的是品牌性，而不是图形的含义。
△ 图形类的启动图标
4. 插画形式
对于一些比较纯粹的应用，如读本、漫画、幼儿类应用，就热衷于采用卡通形象作为图标的主体进行设计。
△ 插画类的启动图标
5. 拟物形式
虽然现在扁平化的设计占据主导地位，但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说，拟物设计所传递的信息往往更直观和准确。
△ 拟物类的启动图标
当然，还有其它的数之不尽的启动图标设计方式，比如明星大头照、摄影图、游戏原画等，但理解上面这些类型就够了。
前面介绍的三种图标，就是今后在进入 UI 行业设计的内容。虽然图标看起来简单，但可以玩出的花样不少。除了正确设计出图标以外，高低阶的 UI设计师之间的区别也包含图标设计类型掌握的多寡。
所以，在开始学习前，不要将设计图标的目标局限在最简单的图形绘制上，还有很多有趣的设计形式等待你们去尝试。
了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了。通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这4款软件那么画图标就一点难度都没有了，这是非常不负责任的，所以为了对新人更友好一点（如果已经全部精通了，就直接略过），我会分析一遍这四款软件对于图标设计的优劣，以及需要掌握的部分。
1. Sketch / XD
这两款软件是我们设计 UI 界面的主力。但大家一定要记得，它们主要的功能是用来完成 UI 界面元素的排版，而不是创作和绘图。
虽然它们都包含路径、钢笔、布尔运算等功能（Sketch 相对 XD 更完善一点），想要绘制一些非常基础的线性或面性图标时没有问题，但只要涉及到比较复杂的图形，往往就束手无策。
所以，我建议所有学习 UI 的新人，都不要从这两个软件中入手，而是先掌握 PS 和 AI，后面想要快速实现一些简单的图标时，自然懂得如何使用 Sketch 和 XD。
可以说，PS 和 AI 的应用决定了我们图标设计的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
2. Photoshop
PS 是一款无论什么东西都设计得出来的设计软件，但是，它本质上是一款「位图软件」。后续的文章中会提及，在界面中采用矢量格式的图标是最理想的，而 PS 针对矢量的操作并不便捷，比如将矢量图层复制到其它软件中。
实际项目中，我们会用 PS 设计一些视觉表现相对复杂的图标，例如启动图标、拟物图标、实物图标等等。
绘制图标需要用到的 PS 功能并不太多，需要在前期学习这个软件的过程中加以筛选，重点是以下知识点：
虽然 PS 在实际项目中是用来画复杂的图标，但并不妨碍我们使用 PS 从最基础的图标开始画起，因为想要熟练掌握上方的知识点，简易的工具图标是最好的磨刀石，之后再学习 AI 的操作，就可以更快的上手。
3. Illastrator
AI 也是 UI 设计必学的一款软件，它的功能异常丰富，主要用来设计矢量图形。对比 PS，它有更好的矢量操作支持，对于路径细节的调整上，是最全面最细腻的软件，并且 AI 中的图形还可以直接复制粘贴到其它应用的画布中。
如果掌握了上方提及的 PS 基础，那么学习 AI 也就轻松了不少，其中，AI 设计图标中有三个特殊的功能是需要重点掌握和学习的：
花几个晚上，掌握了 PS 和 AI 的相关知识点以后，就为我们后续的学习提供了技术支持，可以进入下一阶段了。
这是图标系列文章的第一篇，信息量不算少。所以我们在结尾再总结一次，方便大家记忆。
文章来源：优设网 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大家是不是很好奇别人的图形怎么都这么有创意，而自己想设计图形的时候却无从下手。可能是还没有掌握方法。今天就分享一个图形创意的方法。希望大家了解后，在设计图形的时候有一个清晰的思路。
△ 插图来自日本插画师 Yu Nagaba
我们先来看这个图形，大家能认出这是谁吗？
没错，是爱因斯坦。为什么仅仅几条简单的线条，就能把一个真实的人物刻画出来呢？这就是我们今天讲的内容，如何去简化并且衍生成完整的图形。
简化的图形一直是趋势。它不仅仅利于快速传播、具有非常强的延展性，也经常作为海报的主体。
标志上也大部分以图形为主。所以作为设计师，简化图形的能力是必不可少的。
但是很多人对于图形简化还没有一个清晰的理解，更多的只会在图片的基础上进行简单的描摹。
这样描摹出来的图像很可能缺乏识别度，就像这个例子，描摹出来后它到底是狗呢，还是狼呢？
简化的第一步是确定基本元素。总的来说，就是什么元素能够确定这个物体的种类。比如玫瑰是确定它是“花”这一种类。什么元素能让我们辨别它是花而不是其他东西呢？
枝茎加上花苞，以及红绿配色就可以让我们辨别它是“花”的种类了。至于叶子就属于补充元素。这都是让我们辨别它的种类的基本元素。
玫瑰花苞和枝茎的常态关系是：花苞在枝茎的末端。如果随意变换关系，会影响最简形态下的识别度，所以前期简化最好不要做变化。
虽然这两个步骤能确定它的种类是“花”。但是它是什么花呢？我们还分辨不出来。就需要到第三步，找到图形的重要特征。
这个时候玫瑰花就需要以种类内的事物做参考。也是和其他花做对比。找出玫瑰花区别于其他花卉的重要特征。
红绿配色是我们对玫瑰的印象。玫瑰的枝茎带刺。玫瑰花的花瓣开得比较紧密，花瓣层层包裹像漩涡一样。这些都是玫瑰比较明显的特征。
分析完这些特点，我们只需要在原有的元素关系上加上这些特点，就能分辨出它是玫瑰花了。而这些特点可以在保证识别度的情况下任意删减组合。
比如说去掉刺也能通过其他特征辨别玫瑰。或者保留刺，去掉花瓣的细节，如果对于玫瑰有刺这一点比较熟悉的人来说也可以辨别它是玫瑰。又或者保留所有的图形细节，把颜色变成黑白，都是可以的。
我们刚刚说的玫瑰是本身自带的特征，其实在现实生活中还存在其他因素影响的特征。
比如附加特征，这个图形我们都能分辨它是鸟，但是具体是什么鸟却看不出来。
一旦加入橄榄枝，啊，我们就知道，它是鸽子。鸽子本身是没有橄榄枝的，它代表和平也是人类赋予它的象征。所以这些属于附加特征。
还有状态特征，比如壁虎，哪种壁虎的状态和角度更容易让你辨别它们的身份呢？我相信应该是能看到壁虎紧紧抓在墙上的状态。所以它的状态是否能体现它的身份，也是很重要的一点。
现在的示意图它只是随便画出来的，如果用在设计中，这个图形是不合格的，所以需要对它进行改造。
衍生图形主要从两个角度入手，风格化和陌生化。
比如花的漩涡状可以用同心圆表现。花苞用半圆形、枝茎和叶子同样用最基本的形状概括。
这个风格的图形非常简单，会显得它的完成度不高。所以这时就需要陌生化的处理，让它在创意想法上有亮点。
比如我们把同心圆的颜色改变，虽然辨识度少了。但是这种创意图形加上文案与画面氛围，可以判断出它的身份。
那么漩涡一定要圆形的吗？
带着这种疑问，我们就可以开始第二个衍生。以四变形为基本形，通过旋转不同角度，再加上渐变风格。第二个图形就衍生出来了。可能这两个会偏抽象一点，那也可以选择保留更多的特征。
就像这个图形的外形和线条刻画上更大地保留了玫瑰形态，所以在颜色上就可以不用完全遵循现实。
很容易，三个不同的图形就完成了。
因为图形衍生的过程对于想法、造型能力、不同风格的掌握有所要求，没办法通过简单的理论来分析，接下来会通过分析四个不同的案例的衍生方式，给大家提供一些衍生的思路。
螃蟹它的颜色是橙红色。蟹钳是螃蟹比较明显的特征。蟹的八条腿可以作为辅助元素。它的躯壳偏圆形。这些特点的组合就能呈现一个非常清晰的螃蟹的形象。但是别忘了图形的衍生是需要对特征有所取舍和变化的。
为了让螃蟹看起来更加的陌生化，我们可以考虑改变印象中螃蟹的常见形态，让它以一种更加有趣的动态呈现，比如让这个多爪动物以一种太阳一样的放射状呈现，变身元气螃蟹。
第二个方案保留圆形的身体，加上尖锐的蟹钳特征，就完成了一个新的螃蟹图形。虽然颜色的变化和少了八条腿的特征，但是在保留其他特征时作出的变化却也能让我们清晰辨别它是螃蟹。
那传统的螃蟹都是圆形的身子，我们能不能尝试把螃蟹的身体变方呢？带着这种思考，保留其他特征的同时作相应的风格化处理。又一个新的图形产生。
这些就是螃蟹部分的衍生图形。
火龙果的配色是很明显的特点。表皮会带有绿色的鳞片。相对椭圆的身体。火龙果是白色的果肉和黑籽的组合。
第一个衍生很简单的，就是简化火龙果的外形，最后变化颜色。
这一次同样保留火龙果的外皮特征，因白色果肉和黑籽的结合让我联想到骰子，我们可以把这个想法和火龙果结合一下，让它变得更加有创意。
使用不寻常的切块方式，也能产生另一个图形。
这些就是火龙果部分的衍生图形。
颜色同样是我们辨别它的一个很重要的特征。除了颜色，我们还可以看到西瓜的表面有条纹的覆盖。像是西瓜这种简单的圆形水果，切块之后的造型，可能会更有辨识性。是一个很好的附加特征。最后，黑色的瓜籽同样是我们辨别西瓜时的一个显著特性。接下来就需要对它们进行风格化的处理。
西瓜的条纹部分，这一次我们用几何图形来做一些尝试。错位再压缩，让条纹的比例感更强。加入半圆形的西瓜切块之后，感觉有点像是人脸对吧？那我们就顺势添加一个眼睛，让它拟人化。
符合了这么多特征之后，造型上就不用那么写实了，我们完全可以抽象一些来绘制它。加入之前的眼睛和切块之后，它就完成了。
西瓜切开后的这个形状特征让我们很容易辨别它的身份，所以就可以保留这个形状特征，做一些大胆的变化。
比如颜色上可以完全脱离西瓜原有的颜色。用几何色块的方式去填充造型，让风格化的更强烈。到这里，这个图形也就完成了。按照这种思路，能不能保留配色，但是在切块的形状上进行改变呢？
那就到了第三个衍生，我们把它分成三块去表现西瓜的层次。因为造型已经足够抽象了，所以这里我们用颜色去尽量还原西瓜的印象。组合到一块，是不是就有西瓜切块的感觉了呢？
我们把这个数量增加一些，就更有辨识度了，再调整里面的一点变化。那么到这里，这个图形也就完成了。
这是西瓜部分的衍生。
青蛙是绿色的，由于身体和四肢的对比，会感觉四肢很细长。另外后爪很长，并且有蹼。弯曲的后腿是青蛙比较特别的地方。
这一次，我们可以从造型上做变化。比如切断连接四肢的关节部分，不过这样的造型在美感上还不是很理想。
那么尝试到这里，觉得下面的这个脚的直线结构很有趣，是一个很有变化性的特点。所以我们可以按照这个方向再去尝试一下。
把手臂的部分也修改成直线的样式，那么这里这个图形就完成了。
这一次，我们把目光聚焦到青蛙细长的四肢上，为了让造型看起来更生动，这个图形我决定打破对称的方式。将四肢和身体的比例做一些夸张的处理，让身体更小，四肢更大。爪尖用来划水的蹼也同样做了夸张的处理。那么在这个过程中，我们会继续摆放四肢的位置，让每个部分的空间看起来更均衡一些。
强调了四肢之后，我们还可以反着来，尝试强调身体的部分。为了让四肢看上去更细小，这一次我们用线条来绘制。
这是青蛙部分的效果。
来回顾一下我们这篇教程所有的图形。
我们从极简化的元素开始，通过不同特征的组合与变化，再为它添加陌生化和风格化的处理，就能能衍生出非常多形态各异、各种风格的图形。
文章来源：优设网 作者：研习社
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com