最近发现一些能提高图标细节和高级感的小技巧，今天与大家分享下这几种风格的设计思路，以及需要注意的点。
分享大纲：
顾名思义图标之间有纵深前后关系，通过这样去处理，可以让图标层次丰富，增加设计细节，打破枯燥无味的单色扁平图标。
通常大部分人设计一个图标就直接将图形画出来后，这样就完事了，没有继续深入下去。这样图标看着枯燥乏味，普通了一些。
如上图，将图标在接口处进行细节弱透明度处理，那么效果就完全不一样了。
这里需要注意，一般都是在图标的接口处进行层叠处理，从A到B的一个线性渐变。
下面来看看案例：
△ Atlassian的品牌图标系统
使用建议：运用在面形图标效果会更好些，或者线条粗一些的图标，一般运用在TabBar上面居多。
这种比较好用，将图标进行抽象放大化处理，变成一种图形方式。一般运用在卡片设计上面居多。
左侧卡片上面，图标直接使用描边效果。卡片里面虽然加了一些底纹图形，但是整体效果略显平庸了一些 。
重新将图标进行图形化处理，既能够表达当前含义，同时设计上细节和品质感有所提升。
其他思路延展示例：
当然还有一种类似的思路，可以将图标进行放大化，并进行色彩分割处理为背景，前景放图标和文案等。
如图，我将前面两个思路综合运用，图形化背景和层叠图标。这里的图形希望大家不要乱用，尽量使用图标的图形来演变。
图标通过弱渐变透明处理，其思路有点类似第一个。但是这个方法图标整体带透明度的范围更大。
先来直接看个案例：
这种图标给人比较新颖的时尚感，层次也丰富。
如何处理这种图标？
非常重要的一点，需要注意不识别度问题。如左侧图，图标和背景之间几乎融为一体，看不清主体元素。右侧处理刚好，能够识别出图标含义。
处理时候一定要注意透明度的关系，当然也与卡片背景色有关系。
关于图标设计三个小技巧，可多看几遍，思路比较简单直接。当然最重要的是灵活运用，也可以将三个思路都融合起来去设计图标。
本文只是抛砖引玉，这些图标处理的技法，并不是能适用所有场景。大家还是需要根据自己产品特征，找到合适的突破点去设计。
文章来源：优设网 作者：功夫UX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标是 UI 设计中最基础也是很重要的部分，辅助人们更好的理解功能内容。随着扁平化设计风格的普及，图标的风格越来越简约，看似简单的图形，实际要准确的表达含义，也是需要注意一些方法的。以下是图标设计技巧的分享内容：
设计图标是一个艺术创作的过程，里面也有很多需要被关注而不可忽视技巧。要知道如何设计好图标，是对于 UI 设计师来说是不可或缺的重要技能。
在我设计图标的时候，我个人认为有以下7个规则：
一个图标一个非写实的表现。不需要担心图标不够真实，消除不必要的细节，用基本的形状只保留最基础的部分，让这个图标更容易被理解。
有时候图标会因为有更多细节而传达了更复杂的意思，这反而是样式问题！
在整个图标系统中，你的图标要保持同一种样式来确保图标完美协调。比如同样的形状，填充，描边粗细，尺寸等。要制定好可以被复用的栅格，规范和样式。
如果可以的话，尽可能重新设计这些图标，而不要混入其他不同风格的图标来使用。
设计「完美像素」的图标，特别是在图标非常小的时候。这样图标的描边就可以保持锐利，不会有模糊。注意半像素的情况出现，尽量避免小数点参数。
这也可以帮你保持图标的辨识度，在你等比缩放他们的时候保持清晰。
确保你的图标的所有形状有足够的空间。笔画和空间过于狭小会使图标更难被理解。
最少给2px的负空间
确保你的图标看起来是正确的，适当的调整元素的对齐来达到视觉上的平衡。
不要只关注参数，如果有需要就用上你的眼睛来衡量，轻微移动这些元素。
所有图标保持同样的尺寸，在图标周围定义一个可调整的内边距范围，尽量让元素设计在这个范围内。不要挤满所有元素。
当图标需要额外控件时可以超出这个内边距范围。
在设计阶段，你的图标可能看起来是完美的，但还是需要将图标放到实际的界面环境中，测试他们是不是完美，有没有可以调整的细节问题。
确保每个新增的图标和其他图标显示一致。
你在设计图标过程中，有用到以上的这些技巧吗？可以在评论区告诉我，你是怎么怎么设计图标的。
文章来源：优设网 作者：布莱恩臣
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天还是一篇非常干货的原创文章。
内容分为两点：
图标的基础特征
动手设计之前，咱们先对完整的图标集进行分析。
弄明白在画整体的系统图标集合时，各个图标得具备哪些特征，有哪些切入点，可以作为我们在实际绘制时候的依据。
先来看几组 iconfont 的案例，看不太清的同学可以戳图片放大。
围绕上面这些案例，咱们可以归纳出图标的几点设计原则。比如：
1. 设计图标需要考虑延续性，图标之间互相牵连影响
图标几乎不会以单个的形式出现，大多数都是以组归类。符号整体性与统一性，都是依靠单个 icon 的共性特征建立起来的。
比如 iconfont 中的这组icon，图标圆形的外轮廓，就保持了一致。其次用户头像的代表符号，也很好保持了延续性。
正是这种小特征，共同组成了图标库的整体特征。
2. 设计手法趋同、图形内容差异
第二点好理解，设计风格、手法要素需要统一，但是内容传达的差异必须要拉开，避免图形趋同导致功能混淆。
比如下面两个案例，由于过于相近，导致用户很难理解图标含义，是天气，还是设置按钮，这种情况我们在设计时需要极力避免。
总结来说，就是图标的共性往往体现在设计手法上，比如颜色、形状粗细、细节的一致性，这些都是设计风格的统一。
而图标的特性，往往体现在形状内容差异，形状会决定图标的信息传递含义。所以共性要趋同，特性要拉开，这个是设计图标集的基本原则。
3. 功能大于形式，图形能理解的情况下样式越简洁越好
不知道大家是否关注，曾经在设计圈风靡一时的MEB图标风格，产品圈却非常冷门，几乎没有产品在继续用这种风格作为功能性质图标。
△ 该作品来自于网络图片，仅作交流使用
因为虽然图标增加了小装饰后，显得有趣精致，但其实也增加了图标的识别难度以及识别效率，反而背离了图标的设计初衷。
所以对于系统功能图标而言，必要的简洁性，高效的识别率，才是关键。
图标的设计约束性
聊完了设计主张及基本的特征。接下来咱们开始剖析图标的设计细节，包括分析制定图标的系统设计规范，应该从哪些方面入手。
规范的第一点，就是图标的基础形状比例。这个比例，主要是约束长与宽，共包含了四个关系，分别为「正方形 : 横矩形 ：竖矩形 ：圆形」
这四个关系的约束，会让图标集里的所有图标大小，看起来是一致的、统一的。横矩形、竖矩形这两个比例，会决定整套图标的饱满程度，横竖比例越一致，图标整体越饱满。
这点大家可以自己斟酌，如果是泛娱乐型的产品，icon可以更饱满一些。如果是偏工具化产品，那么还是可以优先保障图标的识别度，饱满程度倒是其次。
圆润饱满型：
刚正工具型：
定了比例后，接下里就是对图标的细节刻画。对于线性图标而言，最重要的细节就是线条粗细；对于面性图标而言，最重要的就是正负形之间的间距。
所以这些核心元素，在图标的核心线条、核心区域部分，间距样式都应当保持统一。
通常在移动端@2x内，主流icon的粗细为3px，而4px大多数都是为功能性导航icon，细一点的图标通常看起来会更精致一些。
当然也有部分产品使用的是2px，比如新版的YouTube，其次还有些较为复杂的icon，单根粗细的线段不一定能满足其需求，所以还需要制定一条副线的粗细。
细节可以根据产品的调性来定，统一即可。
大比例跟基本元素确定后，也可以制定一些图标的个性化元素规范，比如图标的圆角大小、角度位置，等一些特殊的样式。
像这些个性化的规范，颗粒度可以Case By Case来定义，圆润还是方正，可以根据产品的视觉风格来定义就好。
这些规范样式定好，就可以充分的让图标集内的图标，从设计上是保持一致的，且具有特色感。
上面讲了关于图标的分析及规范。为了方便大家掌握，接下来咱们就来讲讲，具体动手做，流程是什么样的。这里我给个我的步骤作为参考：
第一步：绘制好图标基本网格
第一步，当然是确定好图标icon的大小，以及上面我提到的基本尺寸比例，四个关系「正方形 : 横矩形 ：竖矩形 ：圆形」的约束，构建好基本骨骼。
我这里以图标容器大小为 56×56，预留8px安全间距，图标最大大小为 48×48。
由于视差关系，圆形在图标里面的尺寸是最大的，所以圆形的大小为48×48。因为我想图标饱满一些，所以正方形的大小我两边各减去2，为42×42。
然后再绘制出横矩形（48×36）与竖矩形（36×48），各线段之间的间距保持一致。
然后各个形状居中对齐，这样四个关系「正方形 : 横矩形 ：竖矩形 ：圆形」定好后，基本的容器就制定好啦。
第二步：设定图标基本规范
接着制定好图标的基本规范，为了方便大家看得清，我这里设定图标的线条粗细为3px，圆角为6px，干净简洁一些，让它看起来更饱满。
角度、断点啥的，我这里就不定义了，因为只是示例给大家看，讲一下流程，所以尽可能简单一些。大家在做练习的时候，也可以尝试自己去定义一下。
第三步：绘制图标
好了后就可以开始绘制图标啦。我这里分别绘制十五个，作为示例
然后就是使用路径工具，根据创意去绘制完善图标了。绘制的过程中，也可以不断调整，让图标看起来更协调，更饱满，更容易识别。
花了十五分钟左右，简单的十五个图标草稿就画好了，接下来咱们开始调整细节。
第四步：整体性调整
所有的图标绘制好了后，咱们就可以整体性的开始打磨细节，把图标形状的一些折角处、大小样式调整一致，让图标的节奏更清晰，整体样式更统一。
这样一组精致的系统icon就绘制好啦。
接着咱们也可以加点特色风格进行尝试，比如填充一个颜色。
当然细看的话，图标部分细节还是有点糙，其实还可以再调调，但这个主要做示例用，大家自己在做练习的时候，可别像我一样偷懒嗷
上面讲了很多方法经验，文末给大家来点实际的。
我珍藏了很多较为不错的大厂图标集合库，日常在画图标没灵感的时候，就会打开看看这些，参考一下。
文件都是矢量格式的，编辑方便，还很全面。今天拿出来送大家白嫖了
文章来源：优设网 作者：UX小学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近遇到一个同学，说做了很多稿图标的方案最终还是没有确定下来，但眼看着产品马上就要上线了，该怎么办。经过一轮沟通，发现他陷入几个新手设计师在画图标比较容易犯的问题：
从以上这几个问题，我们进行深入思考，会发现其实这些只是表面上的问题，实际上是在说什么呢？
基于以上这个案例，分享下我在日常设计中常用的一些方法，希望可以帮助遇到相同问题的小伙伴们进行一些答疑，从而帮助你们打破壁垒，高效成长。
下面发改分成 3 个部分来进行阐述：思考维度的锻炼；图形的设计方法；系统化方案呈现
当我们要设计一个图标的时候最容易入手的就是图标的表意，从表意延伸到图形的设计，然后再加以不同的设计手法（线、面、线面等等）。
1. 图标的表意
图标的表意方式，大概可以拆分为以下几种：具有普识性的图标、可进行表意延伸的图标、通过组合的图标、抽象的需要关联的图标。
2. 普识型图标
即我们在现实生活中常见且具有常识性性的图标，例如：删除、添加、放大、搜索、笔记本、手机、眼睛、礼物等等。这类的图标重点在于形体的打磨上需要多花一些时间，从不同的角度进行尝试，比如以删除为例子，同样的造型但可以有不同的设计表现。
3. 表意延伸的图标
即一个事物可以被延伸为一个或者多个图形表现的图标，例如：点赞、浏览、设置、收藏、评论、事件等等。例如点赞-延伸为你很棒用大拇指来表达，游戏延伸为游戏手柄、设置-延伸为机械操作用齿轮来表达，评论延伸为对话使用对话框来表达，浏览-延伸为用眼睛的图标表达。
除此之外延伸表意的图标可以有多种设计方式，例如以事件为案例。
4. 组合型图标
主要是指该类图标的表意需要通过 2 个以上的图形进行组合才能更加准确进行表现，例如：群、群聊、好友、添加联系人、情侣、转账、红包。
5. 创造类图标
特指认识中没有，因为产品需要被二次创造出来的图标，一般在一些新生业务中会常出现，这类图标初期往往需要伴随文字一同出现。例如：微信的朋友圈、视频号、小程序、手机系统的 Wi-Fi、蓝牙等类型等图标。
常规的图标表现方法（线形、线面、面形、插图、叠色等等）我们基本都了解，但作为设计师更应该知道潮流趋势，清楚现在流行什么类型的设计，这样才能让你作出更加出彩的设计。
这里分享几种目前最流行的图标设计类型：
1. 磨砂质感图标
磨砂质感图标作为 2020 年底最流行的图标，已经在不少 APP 中看得了相关的设计，从设计方法上并不难，重点还是在于是否有需要和应用场景。
2. 插图+磨砂质感
图标使用小插图的方式进行绘制，然后再结合高斯模糊的视觉表现手法，整体让图标更具有层次感和通透感。
3. 3D 质感图标
3D 作为这 2 年最流行的设计趋势，自然也牵动着设计师的心。但 3D 的打磨相对会比较耗费时间，不过仍然是值得一试的设计方式之一，目前在 APP 的设计中比较少见到应用，或许会成为 2021 的趋势之一。
4. 3D 磨砂质感图标
基于 3D 与毛玻璃图标的结合，整体的表现结合了这 2 种风格的特点，既保留了毛玻璃图标的通透，同时也具有 3D 的空间感。
5. 流光溢彩的图标
算是属于渐变类型的一种，但颜色和细节的跨度相比常规的渐变图标更加丰富，整体让人感觉具有流光的效果，更加具有未来感。不过从目前来说，更适合作为独立的应用 APP 设计，作为常规的图标设计需要一定的接受度。
想要了解设计的方法之前，我们得了解有哪些类型的图标，具体大家可以查看我之前撰写过的文章，里面有详细的分析了图标的设计类型。除此之外，这里还可以分享下我日常中设计图标使用的方法。
这个专题也有超详细的分类和教程 → https://www.uisdc.com/zt/icon-drawing-guide
1. 表意+基础形
基础形体使用普适性较高的图标造型，在图标的亮点或者点缀处通过表意关联进行创意设计，从而让图标获得新的感受，但又具有较高的识别性。案例：例如我们以日历图标为案例，可以比较直观的使用日历的普识图形，然后通过日期的方式来进行强调赋予图标生命力，然后再叠加上颜色和质感，并且增加一点小趣味的折角设计。
2. 关联延展
基于实际场景的认识来进行图形关联延展，并且进行一定的美感升级及图形的优化，延展出最终的图标设计，这种方法可以大大提高大家对于图标的识别度。案例：设计一个快速聊天表意的图标，聊天我们常规使用气泡，快速我们可以关联为闪电，然后把气泡和闪电进行结合。
3. 组合升级创意
利用一些正负形的创意方法，使用 A、B 图形的进行有机融合或剪切，使其获得新的图标造型，让整体的图标感受更具有创意点。案例：例如我们尝试画一个具有宇宙感受的游戏图标，可以通过手柄和星球的有机结合让整体的图标带有游戏和星球的意思，整体提升了表达的创意。
方案的呈现属于设计的一部分，虽然不能起到决定性的作用，但好的呈现效果往往可以帮助我们得到更好的印象分，这里分享一下我在设计过程中尝试的一些方法。方案的大小或者输出的类型也决定着我们呈现方案的类型，下面根据不同的类型分享不同的呈现案例。
1. 纵横对比法
适用于需要大量尝试的时候，以穷举输出为典型案例，我们可以用最基础的图形为中心点，结合图形的表意和图形风格进行纵横的发散性扩展，例如横向为表意、纵向为图形风格，中间部分属于交叉部分。
案例模版
2. 单个图标创意思考
对于一些标志类或重要的图标，我们需要阐述我们的设计想法或者来源，这种呈现的方式就可以很直观且简洁的表现我们的思考。
案例模版
3. 整套输出
对于一整套的图标，我们需要在案例上呈现图形的设计规则，包括但不限于有：圆角、角度、组合规范、斜度等等。除了呈现图形之外，请补充上颜色的应用规则、颜色的表意等等。
案例模版
图标设计虽然是一个小内容但却很重要，反映着着整个页面的精致度，在 UI 界面来说是除界面排版之外最重要的一环，因此是很值得我们去研究的设计之一，建议在日常工作中多练习多看。
文章来源：优设网 作者：ID设计站
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标风格汇总
图标设计流程
案例讲解
图标资源输出
线性
面型
线面
单色
双色
渐变
不透明度
一笔成形
断点
该风格设计感和个性都极强，很考验设计师对造型绘制的把控，功底不够就很容易导致设计后出现识别问题。所以设计难度较大，且延展性较弱，难以表达复杂语义，使用需谨慎。
单色
双色
不透明度
晶白
磨砂玻璃
等轴侧（2.5d）
渐变
新拟态
轻质感
明暗质感
写实
抽象
卡通插画
像素风格
面型不透明度风格，通过调节前后不透明度可以带来较强的空间感，使用场景较广泛。
晶白严格来说也算质感图标（白色质感）的一种，常见于品类图标设计，通过透明度、投影、渐变等参数调节，使整体立体感和空间感都很强。
又叫毛玻璃风格，是通过背景模糊，或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受，但由于容易与浅色背景相融，造成对比度不足难以识别的问题，所以在使用中需要注意无障设计。
也叫2.5d，有很强的趣味性，及识别度，适合重要入口或运营设计。但这类风格较为卡通，且表现花哨。使用需要注意应用场景及目标人群年龄段，避免干扰信息阅读和不符和产品风格。
这类风格可以很好的吸引用户注意力，在电商、美食类产品中较常见，主要注意配色干净协调。
新拟态图标色彩相对单一，与背景融合度较高，通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大，再有这类风格与背景对比较弱，无障设计问题较大。
通过大量渐变、投影来表现立体感，整体风格偏年轻化，常见在教育类产品中，使用注意配色干净和谐。
通过调节同一色相不同明度、饱和度来营造前后空间感，整体风格统一。
这类图标特点很明显，有极高的识别度，目前美团外卖品类区入口就是该风格，整体偏年轻化。主要考验设计师造型绘制、技法表现能力。
通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术（装饰）价值更大，不追求识别度，美观即可。
这类风格既可以做图标又可以做空状态插图，设计美观有特色即可。
这类移动端界面较少见，目前只在一个海外电商产品（Jollychic）中看过，还有就是一些像素游戏中，比如「泰拉瑞亚」、「我的世界」。
线面
描边插画
粗线
细线
圆角
直角
力量感、稳重、男性等感受
安全、亲和、年轻
由于图标风格繁多，所以以上列举并不包含所有图标风格。
明确语义
关键词详解发散
确定风格
提取造型
创意输出
图标存在的目的是起引导作用，在丰富页面视觉的同时，帮助用户更快的获取信息（当然图标的使用意义还有很多）。设计师在将文字翻译成图标前，必须先理解其文字含义。因为最终呈现的图标，需要用户一眼能准确反翻译其中含义（艺术抽象、装饰类图标除外）。
在C端设计中，以Tab为例，一些常见文案：首页、分类、发现、我的，这类语义还算比较清晰的。但在B端设计或工具类APP中就会遇到一些复杂语义。以我的工作来说，目前在做一款网站搭建工具，后台常会需要设计组件及对应的图标，比如：滑动商品、多图列表、上拉图文列表这些语义比较复杂的图标，在一定程度上会比较难精准传达文案。
这一步有点类似情绪版使用，但不同的是：我们需要将确定的词（A)进行详细解释，再将解释文案中关键的词语进行发散，得出一系列相关联的词（A1、A2、A3…）。有时间还可以根据这些词找到对应的图片，再看在这些相关联的图片中，有哪些细节可以传递最开始我们确定的那个词（A）的意思。
我们可以借助情绪版，根据产品定位和目标用户描述，再结合应用场景，在目前已有的风格中找到符合产品气质，符合当前模块视觉层级的图标风格。
前面我们已经了解了目前常见的图标风格有三大类：线性、面型、线面，其中还有很多细分，比如在线性中又分粗线（沉稳、力量）、细线（品质）、曲线（女性化），还有圆角、直角，每种类型所传递的感受都不同。在创意前期，我们将每个点合理进行随机组合（如下图）即可创造一种更新颖的风格。
经过关键词详解发散，其实我们已经获得了很细节点，接下来将这些细节点进行合理融合后，就可以得到代表同一语义但形式各异的基础图标样式（此时还只是想法阶段，可以通过手绘方式记录组合形式，不用特别精细化）。
图标设计规范
图标设计注意点
常见图标尺寸
图标盒子使用
在界面图标设计中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）
图标盒子即图标约束网格，来源于Material design。使用图标盒子有利于使我们创造的系列图标保持规范与统一。
简洁美观
易于识别
细节统一
像素对齐
视觉大小一致
饱满透气
融入品牌基因
图标是否美观，会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。在UI界面功能图标设计中，通常会尽量减少不必要的细节，降低图标复杂度，来帮助用户快速识别。当然图标也有丰富细节的做法，常见在一些重要运营入口上。
识别度的问题，在最前面明确语义中就有提到过，这里就不赘述。
在细节中包含：表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等（不同风格图标的细节不同，这里只是列举部分），上述细节在系列图标中都应保持一致。
在图标绘制中，需尽量避免坐标位置xy或宽高参数出现小数点，以此保证最终导出的图标是清晰的。
由于不同图标外轮廓不同，就会导致哪怕在物理大小上相同的图标（假设都是24x24），但视觉上可能还是会给人大小不一致的感受，因此我们需要借助前面提到的图标盒子进行约束调整。
图标的饱满透气，不一定需要加入很多笔画（描边、装饰等）细节。而是尽可能在形成风格的同时，简化能影响识别度的关键笔画，通过调节笔画大小、长短、位置使图标达到一个最平衡状态。
以如下途牛_我的页面_功能区图标为例：
图中标红图标就存在饱满度不足，及内部较拥挤的情况，第一感受是看起来不舒适，品质感比较低。除此外，还存在如下问题：
图标大小很明显不一致
设计语言不统一，有圆角有直角
图标风格不一致，有透明度+分割形式（我的保单）、有纯透明度形式（专属顾问、我的收藏）、还有其余单色实心形式
在图标中融入品牌基因可以有效的提升产品品牌感，作为高阶设计师必备技能之一，常见提取维度：
颜色
设计语言
以我之前的豆果美食项目为例，提取到如下细节：
根据提取到的基因，最终得到如下两套风格不同，但语言相同且都具备品牌感的图标。
Logo轮廓：在图标中融入品牌logo外轮廓（Google Play），或根据logo轮廓结合应用特性进行延展（Microsoft）。
根据文案进行详细翻译，帮助我们充分理解文案。
释义：有专门的知识或经验，受聘为机关团体或单独个人提供专门咨询的人。
提取释义中关键信息，生成关键词：专业、专人，再根据关键形容词发散一系列具象名词。
根据产品调性和模块视觉层级以及考虑延展性，初步确定如下风格组合起来是比较适合：
在实际查看中，发现Tab的风格为单色+不透明度+断点风格。
为了和Tab拉开差异，最终确定以如下风格进行组合表现比较符合产品调性：
线性：双色
面性：单色、双色、不透明度、轻质感、明暗质感
线面：线面
通过手绘或大脑想象进行造型构思，这里我就不展示手绘过程（行吧，我承认就是画的太丑了不敢放）。
由于不同风格对图标造型构思有所影响，且图标类型很多，不同特点组合起来样式更多。案例精力有限，所以只以线性双色风格做演示，希望大家灵活使用。
这一步就是将手绘图形矢量化，在矢量化创意过程中，我们可能会对手绘的图形进一步简化细节或新增造型，这都很正常。只需注意在整个绘制过程中遵循图标设计规范，以及注意图标设计注意事项即可。
图标盒子使用
创意输出
Tips：
1or2？
最后对专属客服进行多风格尝试，最终效果如下：
附上部分绘制过程中的淘汰稿：
SVG：缩放无损、体积小、支持前端样式修改参数、单色情况下方便前端修改颜色来表达图标状态，减少重复上传。
PNG：支持透明格式
JPG：兼容性强，适合大尺寸高饱和度图像
GIF：动态图标使用，缺点是透明情况下边缘容易出现锯齿。
这里主要介绍静态图标中，svg格式在工作中如何输出给前端同学使用（借助iconfont）。
1、图标资源优化
在iconfont官方绘制指南中有描述，在导出前需要按如下规则优化图标资源：
2、选中图标导出svg格式
以Figma为例，优化图标资源后，选中图标将输出格式选择为导出svg。
3、上传iconfont
在资源管理下，选择需要上传的位置。
去除颜色并提交：适合单色图标，去除颜色提交可以方便前端使用代码修改参数，减少不同状态图标重复上传。
保存颜色并提交：适合多色图标（注意：在单色情况下，选择保留颜色提交，前端则无法通过代码修改图标颜色）。
最后当我们把图标都上传好后，就可以将前端同学拉入团队项目中开心进行玩耍。
文章来源：站酷 作者：幺零三
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每天努力的用心的去做设计，挺开心的，其中最开心的细节就是“思考自己的设计如何与别人的不一样”，让你的差异化产出得到认可后，这将是一件非常非常幸福的事情。
今天和大家分享一个前一阵子做的小案例，做的一个直播货币，名字叫星币。
思考过程如下：
其实“星币”可发散的空间很小，因为已经非常具象了，无非就是星星、和钱币。
我们可以看下大概的感觉：
但是如果按照上面的感觉做，那最后出来的效果一定很常规，这也就有了我接下来的思考。
我们仔细观察，一般参考中的星星都是非常规矩的，无非就是尖角圆角的区别：
要么就是胖瘦的区别：
所以这次我打算做一个不那么规矩的，有点跳远的感觉、又有点星火的感觉，所以我把星星的一个脚拉长：
然后再把两个胳膊往上抬一抬：
这样就好像是一个跳跃的小人一样，会相对来说活泼一些。
接下来为了让整体更加和谐，我在钱币周边挖了一个小口：
目的就是配合那只伸出来的脚，让整体感觉更加巧妙一点。
其实星币很容易联想到金黄色，如果按照这个设想来做，那就会比较普通，所以我选择让他和直播、社区的配色一致：
这样在颜色方面也就有点自己的调性了。
刚才不是说让这个星星看起来像个跳跃的小人嘛，那一般人都有表情的，所以我们完全可以再加上一个可爱的表情：
让整体更加生动形象。
当然，如果星币在面积小的场景下是看不清表情的，所以需要做成两种，一种是有表情的， 一种是没有表情的。最后，还可以再做个有质感的：
后来发现质感做的有点脏，于是又优化了一下质感，效果如下：
整个构思和执行的过程还是可以的的，也得到了大家的认可，不过很可惜的是，后来名字改了，改成了能量币，哈哈哈哈，通过能量，我又联想到了太阳，太阳能嘛，执行原理都是一样的，大概效果如下：
文章来源：优设网 作者：菜心设计铺
蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。带着这个想法，我开始逛“避寒寺”和“追波”，找可以参考的作品。这套作品我挺喜欢的，作者还做出了 3D 视角的。
先分析一下图标的结构。图标有三层：底部几何色块、毛玻璃主造型，带有含义的白色图形。
再分析俯视角度时图标的表现，方便用工具表现。
最后是颜色的归纳。作者用了饱和度非常高的颜色，基本都在右上角最尖尖的位置。
分析完以后可以开始临摹了…因为造型比较简单，我没有临摹，直接创意发散做了另一套。选主题的时候我随便开了个 APP（当时打开的是微博），觉得个人中心的快捷入口图标主题可以拿来试试。我选了深色作为背景，所以这套图标用到界面会比较难适配，和原 APP 风格也不符合。在这里单纯利用主题来做练习。
做底部的几何色块时，形状可以尽量跟主图形相关性大一些，加强它们之间的关联性，如果实在没法关联的也不必勉强。
我降低了几何色块的面积，增加了多一层毛玻璃形状层，并且让白色的图形更灵活，而不是雕刻在毛玻璃层上。这是我理解了原作者图标的结构之后，自己进行的改变，效果还行。
做的过程中，发现草稿箱如果里面放一张白色的卡纸，视觉效果还不错，所以我又做了另一种效果。最终呈现出来的效果只有草稿箱比较出彩，其它很牵强。
拿「照片」这个图标来进行拆分，参数分别如下：
这是最后呈现的效果：
封面图参考了小米的屏保。我用 sketch 做的，效果一般，可能用 ps 做会更逼真吧。
临摹一套图标的时候，要带着目的去临摹，分析原作者每一步的处理。然后把图标拆分成不同的变量，修改这些变量的时候或许会得到不错的想法。
文章来源：优设网 作者：牙线y2x
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com