金刚区作为产品功能架构重要的组成部分，是设计师重点发挥的区域，也是风格切换最为活跃的。而金刚区图标是最重要的表现对象，设计师在图标设计上面耗费心力，出现了丰富多样的视觉表现风格。
体验了众多产品之后，黑马哥为大家精选了金刚区图标设计最突出的 10 个风格，通过这些案例带给大家感官体验层面的更多灵感启发。
晶白风格是通过白色质感来实现的，通过对图标元素进行透明度变化、投影、内阴影、外发光等进行设计，使得更有层次感。
相较于扁平化的图标设计来说，晶白风格更有层次感和质感，作为金刚区图标设计运用非常普遍。除了通过白色不透明度渐变来实现以外，也会随着背景或者环境色的变化融入色彩渲染，呈现出更丰富的设计细节。
晶白风格图标就是通过两端白色渐变，配合两端颜色不透明度来进行深浅控制，也可以通过内阴影和外发光等来增强质感。众多设计软件都可以实现，灵活性非常高。
磨砂玻璃质感的设计表现是近些年较为流行的设计趋势，被广泛运用到视觉设计的众多领域。在 UI 场景中作为视觉感强化被普遍应用，其中在图标设计上的表现尤为突出，呈现出了众多的优秀案例。
金刚区作为产品架构中的重要组成部分，也是更新较为活跃的部分，对于视觉感的要求非常重要。磨砂玻璃质感的图标很多产品都会阶段性使用，也是因为这一类风格具有典型的特点和视觉张力，能够形成比较大的视觉差异，带给用户不错的感官体验。
磨砂玻璃质感图标可以通过 Sketch、Figma 等软件的背景模糊功能实现；如果是 PS 和 AI 等没有背景模糊功能的软件，则可以通过模糊度结合剪切蒙版来实现。实现的方法很多，大家可以多多尝试，这是一类比较容易掌握的图标风格。
图标设计从写实到扁平，再到微质感，都在不同的时期进行改变，通过风格的优化避免用户的视觉疲劳。写实类图标视觉疲劳度较大，在年轻化的趋势中显得过于繁琐，而介于写实和扁平之间的微质感被深入探索。
微质感的深入可以使得图标风格突出，质感和层次感强化了图标的立体空间感，在整个界面中可以形成视觉差异。可以体现出模块的重要性，也是图标设计感体现的一种方向。
通过渐变色、不透明度渐变、投影、内阴影等形成层次变化和光影效果，多图层刻画来强化图标质感和层次感。
2.5D 也称之为伪三维，在前两年非常流行，作为插画风格延伸出来的，当时 2.5D 插画被普遍运用到众多领域。把一个独立元素作为原子，通过原子的数量分布形成 2.5D 场景。
将 2.5D 风格结合到图标设计中，可以使得图标更容易形成立体感，设计师不会受制于透视基础的薄弱。无论是 C 端还是 B 端场景中的金刚区图标都比较适合，很容易基于简单的立体造型上设计出丰富的变化。比如结合玻璃质感、微动效或者其他设计趋势均可，设计的驾驭度很高。
2.5D 风格的图标很容易掌握，只要绘制好基础原子部分，就可以演变形成各式各样的 2.5D 造型。可以通过 AI 软件的 3D 功能轻松绘制，大部分场景都是基于立方体、圆柱体等基础造型进行变形。
三维类的图标设计相较于 2.5D 风格来说，空间感和透视角度更加深入，光影的变化更加丰富。图标设计中的三维立体感强化，对于设计师的要求更高，掌握一个三维软件需要一定的学习成本。
随着 C4D 等三维软件的走热，掀起了一股学习热潮，被运用到金刚区图标设计中，带来的视觉效果也是非常不错的。较强的空间立体感和光影效果，在界面中的视觉呈现尤为突出，也能带给用户更好的感官体验。
随着用户对于感官体验的升级，风格特征的差异化体验至关重要，而插画风格的融入可以提升图标设计的特征感。
插画风格运用到图标设计中，需要做简化处理，可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中，不仅可以使得图标具备差异化的视觉效果，也能烘托出整体设计的质量。
通常矢量风格的插画类图标比较常用，由于图标占比限制，不合适表现特别繁琐的插画风格。可以是微场景的插画表现，或者是局部元素的插画表达，这一类图标风格将会在未来被广泛运用，以此来提高图标设计的视觉差异化表达。
立足于品牌做设计，这是设计师需要深入探索的方向，而金刚区图标设计亦是如此。品牌基因融入到图标设计中，可以辅助突出产品的品牌感，也能形成设计表达的差异化。
品牌基因化的图标设计具备一定的特征性，也是视觉差异化的一种形式。通常的做法有将品牌色全部融入图标中，或者品牌色作为图标配色点缀；也可以提取品牌 LOGO 辅助图形形成基因图形，融入到图标造型设计中；也有结合吉祥物来突出品牌感的，融入吉祥物造型、局部图形、轮廓图形等；如果图形角度无法提炼，也有提取品牌文化、服务特征、用户群体特征、行业特征等，从中提炼关联性的图形融入图标设计中，以此来强化品牌感。
品牌作为设计的思考起点，不仅可以输出差异化的设计作品，也能串联起整个项目设计的规范。
如果觉得质感一类图标表现力比较繁琐，但是又不想只是简单的线性或者面性图标，造型叠加和配色叠加形成的图标风格算是介于两者之间的存在。
通过图形之间叠加丰富图标造型，叠加部分配色的调节丰富图标色彩搭配，形成的图标风格比较年轻化。视觉效果也是深受年轻用户的喜欢，带来不错的感官体验。
这一类风格的图标可以通过布尔运算设计图形部分，颜色的叠加效果可以通过图层样式实现，也有一些是图形分割之后进行分别着色的。通常叠加部分的颜色会往更深的方向延伸，大家可以尝试不同的形式去进行配色，选择符合主题的图标配色效果。
微动效运用到图标设计中尤为普及，特别是在金刚区模块，可以作为突出功能的强化。动效图标已经成为一种独特的表现力，相较于静态来说更有吸引力，也能带给用户更加趣味性的感官体验。
在金刚区模块中，动效图标通常是用于区别特殊功能，或者需要重点突出的服务或者主题活动等。不改变整体图标的风格，只是动态和静态的区分，需要个别做动效，形成表现力的差异才能达到重点突出的目的。
作为设计师来说，动效也是需要掌握的基础技能，可以提高我们的设计表现力，也能将交互动作表达得更清楚。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
大家好，这里是设计夹，今天为大家分享的是「图标设计细节」。图标在页面中的尺寸很小，却包含着很多细节。作为通用的视觉化语言，把握住其中的设计细节至关重要。
这次总结一下图标设计的属性以及在图标设计中，很重要但容易被忽略的知识点。
在 UI 设计中，图标主要有两大类：一类是 APP 启动图标，每个 APP 独一份；另一类是系统 icon，搭配文字，方便用户快速理解信息，也是这篇文章重点讲解的内容。
常见的图标风格有线性、面性、彩色、写实、3D 等，图标的选用因页面的设计风格、图标的位置等原因会有所差异，主要的作用是反馈动作和吸引用户更多注意力。
Tips: 现在字节、百度新推出的一些年轻化产品中，有很多精致的 3D 写实图标，极具个性，很好地迎合了年轻用户的喜好。在扁平风格流行的当下，这样的尝试也是一种突破。
简单的线性图标重量轻，看起来更简约，不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容，那么更适合选用简约的、重量轻的线性/面形图标，防止页面过于杂乱。
相反，如果当前的页面中只有文字，信息量很少，那么更适合利用重量大的彩色甚至 3D 图标来增加页面的丰富性，让页面看起来更有设计感，给用户带来视觉上的愉悦，简约而不简单。
构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等，表达式规则是统一的，以便只给观看者识别图标所需的最小更改。
图标的外形有圆形、方形、三角形甚至不规则形状的，所以我们很难将不同形状的图标尺寸完全统一。
这个时候网格就起到很关键的作用，有了网格相当于提前将图标限定范围，在网格范围内根据图标的重量和重心灵活调整大小，这样会让不同形状的图标看起来更统一。
由于设计软件的局限性，虽然有些图形已经居中对齐，但有时候还需要进行视觉校正。
最典型的图标案例是“播放”图标，利用设计软件对齐中间的三角形后，会发现三角形的位置看起来偏左。
利用软件对齐后，我们还需要再用眼睛确认一遍，我们可以将三角形向右移动，保证三角形的重心与圆形的重心一致，这样整个播放图标看起来会更舒服。
设计图标时，我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视，所以大多数的图标都没有透视，看起来会更简洁。
带透视的图标会给用户营造一种空间感，可能会感到认知失调。虽然这种带透视的图标能引发用户关注，但不建议这么设计。
图标比例通常使用 8 的倍数作为基准，例如 8px、16px、24px 和 32px，以便在各种环境中进行流畅地切换。除此之外，在移动端等屏幕尺寸较小的页面中，还会使用 4px 的倍数，来实现多功能性。
图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小，要尽可能做到对用户友好，可以使用一些简单的隐喻设计，但含义不能过于复杂。
一个图形能说明的问题，没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义，这样反而会影响用户的操作。
这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息，特别是对于尺寸很小的系统图标，最好只保留最基本的内容，移除多余的装饰元素。
这里说得一致性，并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面，线性、面性等多种图标风格可以一起使用。
但在同一个页面场景中，执行相同功能的图标应该保持相同的样式。
面对不同的操作系统，例如 iOS 和 Android，同一功能对应的图标也会有差异。针对不同的系统，我们可以选用大多数用户熟悉的图标，这样用户能更快地理解图标的含义
以上就是常用却容易忽略的图标设计细节，希望通过这些内容能帮助你对图标设计有更深的认识。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
图标定制设计之一：6大章节！图标设计基础知识全方位入门指南
图标定制设计之二：超全总结！金刚区图标设计的 10 大风格
图标定制设计之三：想让图标更精致？先掌握这11个容易忽略的设计细节！
图标定制设计之四：学会SVG图标的高级用法，界面适配效率翻一倍！
图标定制设计之五：研究微软 Fluent 图标规范后，我总结了这9个知识点！
图标定制设计之六：为什么别人的图标设计又快又好？来看腾讯高手总结的知识点！
图标定制设计之七：客户说B端图标太普通没新意，该怎么解决？
图标定制设计之八：从6个方面帮你快速掌握图标设计规范
图标定制设计之九：不止画图标！5 个金刚区的交互设计思考
很多人知道品牌设计中有辅助图形的概念，辅助图形对于品牌识别体系非常重要，但其实在图标设计时，也会经常用到辅助图形。图标中的辅助图形，简单理解就是图标的装饰元素，它能让图标设计有更多的细节和特点，强化图标识别性，同时还能让图标更具视觉表现力。
举个例子，像下面这套图标中的浅色部分和噪点就是图标中的辅助图形，去掉这些辅助图形不大会影响图标的识别性，但增加这些辅助图形后，图标变得更有特点，更容易被记住。
https://dribbble.com/shots/14490441-Feature-Icons
善用辅助图形为图标增强表现力是图标设计中的一个秘密武器，彩云在工作中总结了一些经验，大概有以下5点：
《简约至上》这本书中提到过一个删除原则：删除是将不必要的元素都剔除掉，直到不能再删除为止。那么在图标设计中，这一点尤为重要，因为图标本身就浓缩了大量的信息，所以要让用到的辅助图形有它存在的价值，不加多余的元素。
比如下面这个案例，容易看出其中的辅助图形是绿色部分。在图标中它们代表的是行动或者结果，作为事物主体的补充，可以理解为主语和宾语的关系。因为有了这样的辅助图形存在，强化了图标的识别性，这就能让图标增色不少。
https://dribbble.com/shots/14374503-Covid-19-Back-to-Work
下面这个案例是星球中一位同学的练习，整体来说还是不错的，但就辅助图形的使用上看就有些小问题了。淡黄色的辅助图形圆形跟主体图形没有太大的关联，也没有太多实际意义，可以理解为强行为了统一而统一。图标主体已经做了双色设计，增加这些圆形后让图标变得比较复杂且删除对图标意义的表达也没影响，所以这里的辅助图形的使用稍显多余。
在配色上，辅助图形还可以结合品牌色彩。用品牌色的主色作为主体颜色，辅助色作为辅助图形的颜色，或者直接用品牌主色调作为辅助图形的配色都可以作为图标设计的亮点。
品牌色的加入，能够让图标配色的使用找到立足的理由，马上就能加分。
比如大家经常在画图标的时候，图标主体通常以单色为主，但此时可以尝试加入以品牌色装饰元素作为点缀，立马就能提升图标细节。下面这个案例是爱奇艺的首页图标设计，能看出来它的辅助图形设计配色上是按品牌绿色来设计的。
在使用辅助图形的时候，尤其是对于多图标体系来说，完全一致的辅助图形就显得比较呆板，缺乏细节。再拿上面那个星球同学的练习来看，不看辅助图形的具体含义和复杂度，在整体上看起来也缺乏变化，圆形都在同一个位置，保持着同一个大小和颜色。
辅助图形的使用想要有更好的效果，尽量在一定的范围能多一些变化。
比如下面这个例子，虽然图形的位置和大小都一样，但在颜色上做了不同的变化，整体看来细节度还是不错的。
https://dribbble.com/shots/14728145-Project-icon
再比如下面这个案例，辅助图形的使用有丰富的变化，使得图标的细节满满。
https://dribbble.com/shots/3861669-Australia-Post-Iconography
另外值得注意的是，变化应该在一定的范围，不可以变化太大。
比如星球中另一位同学的练习，她在图标的底部用了浅色的蓝色填充作为辅助图形，但这3个之间的辅助图形差异太大，前面2个还能理解是一套，但对于第三个图标来说，辅助图形的比例明显大于前2个图标，显得不够统一。
而对于下面这组图标来说，蓝色的辅助图形的面积变化相对一致，显得更为统一。
https://dribbble.com/shots/3817782-Gretchen-Rubin-Icons
虽然使用图标辅助图形会让图标显得更加有特点，但也要分清主次，不应该超过图标本身的核心意义，不能太抢用户的注意力而影响识别性。
比如下面的案例，图标主体特征一眼就能识别出来，辅助图形的加入并不会影响主次关系。
https://dribbble.com/shots/3235311-Clearly-Eyewear-Iconography
星球中的一位同学做的练习，这里的辅助图形有些太过于抢眼，且盖在图标上面影响了一定的图标识别性。修改方向是如果能把辅助图形的玻璃质感做一个强化，增加一些透明度，把主体元素凸显出来就会好很多。
这是另一位同学的练习，也是同样的问题，辅助图形抢了主体元素的风头。修改方向是把辅助图形改小一些就会好很多。
她画这个图标是临摹了原作的效果，能看到原作中的星星辅助图形小一些会好很多。
图标辅助图形也是图标的一部分，从整体上也需要遵循图标本身的风格体系。
这是星球中一位同学的练习，辅助图形用星星是没问题的，但这里星星的尖角相对于主图形的圆角来说就显得风格不够统一，把星星的尖角改为圆角就会好很多。
这位同学的作品也是临摹了原作的效果，能看到在原作中辅助图形都是以同样的圆润图形为主的，这里就体现了风格的一致性。
比如对照看看MBE的图标风格，他的辅助图形跟主图形一样，都是比较圆润可爱的，这样看起来整体的风格更加统一和谐。
作者：彩云Sky 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
图标是任何设计系统不可或缺的一部分。使用图标的主要原因是帮助用户快速理解想法，实现快速导航，解决语言障碍，最终提升用户体验。
图标作为一种设计工具，在UI/UX和平面设计师中最受欢迎。这些微小的设计元素对每个人来说都是简单易懂的，这些特征赋予了它们通用数字语言的地位。
在这篇文章中，我整理了10个简单又重要的技巧帮你设计出更专业的图标。
最小的图标大小通常是12 x 12px。以这个尺寸为基础，行业标准中大多数其他尺寸只是通过将之前的尺寸翻倍而产生的。
重要提示：当你设计图标时，重要的是要按100%显示的比例去设计，使图标完美像素并放大像素块查看准确性。
完美像素图标在屏幕上能呈现尖锐和清晰的线条和形状。如今，高分辨率显示器和视网膜显示器正变得越来越好，所以在不久的将来，对像素完美图标的需求可能会减少。但就目前而言，让你的图标具有可伸缩性、响应性和适配更多设备是非常重要的。
1) 像素网格对齐.
使直线部分完全清晰，并增加曲线和边角的清晰度。
2)完美角度
有角度的线更模糊。创建图标的最佳角度是45°，因为形成一个角的像素彼此对称。
3)边缘清晰
直线必须占据其边缘上最暗的4个像素。这样线的边缘看起来更清晰。
为了让图标看起来整洁一致，重要的是要记住线条宽度和间隙大小。这条规则我认为是必须遵循的:所有线条的宽度都是相同的。
理想情况下，线宽和间隙大小也应该相等。
然而，有时候你必须打破这个规则。当你需要解释我们在日常生活中面对的一个具有非对称模式的物体时，它就会发生。比如条形码这个例子来说，我故意使图标内的线宽和间隙大小不均匀，以表示条码的特征。
在UI设计中，对象(包括图标)的角半径定义了项目的外观和感觉。当我们说到一个集合中的多个对象时，规则很简单：在正方形和圆角之间进行选择，并对所有的图标应用相同的属性。
为什么它如此重要?一致性是UI/UX设计的关键原则。一个可用和用户友好的设计总是提供一致的体验。在下面的例子中，你可以看到打破这个原则是如何影响视觉感知的。
在电脑上看起来完美对齐和平衡的东西，在你的眼睛看来可能并不一样。
当我们把大小相等的正方形和圆放在一起时，我们会有一种不对劲的感觉，圆似乎比正方形小。为了使我们的形状在尺寸上看起来相同，我们应该使圆更大(或减少正方形的尺寸)。
这个原则也适用于图标的设计和使用。有些图标的一侧可能较重。试着调整它们一两个点，直到整体对齐看起来正确。在下面的例子中，你可以看到突出显示的图标看起来很大，尽管它与其他部分的大小相同。为了平衡这个集合，我们需要通过缩小图标的大小来调整突出显示的图标。
（彩云注：这个原则很多人应该都知道，但我发现也是在整套图标的设计中最容易出现的问题，当把图标汇总在一起的时候，这个问题尤其需要重视。）
我们经常在设计软件中使用中心对齐，这种方法没有错。但当涉及到细节时，比如图标设计，我们需要相信自己的眼睛，打破数学法则，以增强元素的平衡。
让我们以播放按钮作为展示。这个例子很简单，但非常能说明问题，因为形状越不对称，需要改进的缺陷就越明显。
我打赌你已经猜到我们指的是KISS原则。这一原则背后的思想是，大多数系统在保持简单的情况下工作得最好。用户越容易理解某样东西并与之互动，它就越具有通用性。
（彩云注：KISS原则是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的缩写。篇幅有限，彩云帮大家找了一篇参考文献https://www.jianshu.com/p/7d58b96d0185#comments ，感兴趣的可以去学习下。）
它如何适用于图标设计?
1）别使用文字
文本和图标的绑定减少了图标的通用性。此外，小尺寸的文本是可读性很差。如果一定要文本作为支持元素，使用工具提示和图标旁边的标签。
2）不要过度设计
不必要的复杂性阻碍了合理的表达，应该避免。过载的设计会将用户体验变成一场噩梦。
3）避免不必要的元素
只要确保每个图标在整体环境中是可理解和清晰的就行。（彩云注：比如已经是在邮件客户端中，就不需要再额外增加表示邮件的图标部分）
重要提示：在图标设计中合理地使用KISS原则，也不要把事情做得太简单，否则会影响功能。一个优秀的图标应清晰易懂。
图标规范框架通常是指组合在一起的圆形、正方形、纵向和横向矩形。它们创建了一个框架来设计图标。但是，这个规则非常灵活，只是作为参考，方便图标的设计在视觉上平衡。所以，如果你觉得你的图标不完全匹配这个框框，但看起来完全正确——相信你的眼睛！
框架是设计的“容器”。框架规范了一个统一的范围来设计图标，这背后有一些原因：
1) 大小
由于其几何形状，所有图标都具有不同的高度和宽度。为了在我们的设计中统一图标尺寸，我们应该将它们放置在大小始终相同的框架中。
2)输出
框架内的图标与视觉中心对齐，这经常被开发人员忽略，因为他们经常根据实际的中心来调整图标，而没有注意到差异。这就是为什么用框架输出图标是至关重要的，当你按这个框架输出图标时，能保证视觉设计时想要的视觉中心。
3)效率
如果使用Figma，可以通过创建组件来节省时间。可以使用实例快速地将一个图标替换为另一个图标。
如果你要打算做图标资源库的话。要想到当设计师在库中搜索图标时，会遇到哪些挑战?他们的痛点是什么?他们的需求是什么?要回答这些问题，请设身处地为用户着想。
1）不要让用户思考
例如，如果他们不知道自己想要找到哪种花卉图标，那么就让他们看到一系列选择:鲜花项链，室内花卉，植物商店等。
2）展示关联图标
例如，如果用户想在相同的主题或类别中找到图标，他们可以快速地检查包含这个特定图标的完整集合。
3）使用标签
用户可能很难找到合适的词进行搜索，或者可能希望看到所有类似的补充选项，从中选择最合适的。例如，当一个图标的实际名称是“兰花花瓣”，你仍然可以找到它与以下关键词: #兰花#花瓣#花瓣#花#装饰#花#植物#花园#开花#植物#自然#热带#树枝#美丽#植物#美丽#自然#叶子#优雅#浪漫
最终应该导出SVG或PNG格式？这是一个关键问题。让我们来比较一下格式:
我个人的选择是使用SVG图标，因为它可以节省很多时间。但是，一定要小心缩小复杂的形状，并记住旧的浏览器可能不支持SVG格式。
作者：彩云Sky 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
前言
图标是用户界面中重要的组成部分之一。它是一种表示命令、内容并揭示功能背后含义的视觉语言。
你设计的图标应该可以被用户立即理解和识别。
如何在你的产品中设计和使用图标？怎样给品牌带来独特的感觉？我的以下几点建议建议可以来帮助你设计更棒的图标。
技巧1 -设置网格
你永远不会创建单独一个的图标，因为图标总是一套的。为了让你的图标具备统一性，你需要一个网格。
定义安全区域并设置边框。使用生成的网格作为模板，以固化所有图标的比例和大小。
技巧2 -保持一致
在设计一组图标时，使用相同的线宽、角半径和填充样式。这将确保你的图标看起来品牌统一和更容易识别。
例如：线宽 - 2px，角半径 - 3px;
Icon set from Super Basic Icons.
技巧3：表达清楚
在图标设计中，少即是多。使用清晰的隐喻和点到为止的细节，使每个图标易于识别和理解。
技巧4 -使用相等的间距
在你的图标元素之间使用相等的间距，使你的一整套图标看起来和谐。
你可以通过按住 Figma、Sketch 或 XD 中的 ALT 键来计算向量线之间的距离。
技巧5 -视觉矫正
基于视觉中心对齐图标元素，平衡视觉重量。
技巧6 -填充空间
旋转局促的图标，充分利用空间来获得更好的可读性。
技巧7 -组合样式
使用填充和轮廓样式来描述界面状态，帮助用户找到正确的图标或按钮。
技巧8-便捷的工具
工具
Icons8.com
iconfinder.com
flaticon.com
thenouproject.com
资源
最近几年以来，大家能看到B端设计趋势已经越来越火热，在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计，让设计出来的图表高大上，符合业务需求，让业务方和总监对你赞不绝口，本文就必须看完和收藏了，因为实在是太实用！
应用设计越来越依赖数据驱动，对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表，但我们其实可以通过遵循一些简单的规则来改变这个情况。
选择错误的图表类型，或默认为最常见的数据可视化类型，可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容，可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。
当使用水平条时，在基线的左侧绘制负值，在右侧绘制正值。不要在基线的同一侧绘制负值和正值。
删数据起点会导致曲解。在下面的例子中，看左边的图表可以很快的得出结论，值B比D大3倍多，而实际上，两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。
对于折线图，总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势，因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。
折线图是由线连接的“标记”组成，通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的，并且对于较短的时间间隔非常有效，但当数据更新不频繁时，这可能会导致混淆。
例如: 使用折线图来代表年度收入，如果数据是每月更新的，则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值，而在特定时间实际的收入数字是未知的，所以可能会产生误会。在这种情况下，使用垂直条形图可能是一个更好的选择。
平滑的折线图可能在视觉上很好看，但它们错误地反映了背后的实际数据，而且过粗的线会模糊真正的“标记”位置。
通常，为了节省可视化空间，当有两个具有相同度量但大小不同的数据系列时，可能倾向于使用双轴图。但这些图表不仅难以阅读，而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例，只是浏览图表，然后就得出了错误的结论。
饼状图是最流行的也是经常被误用的图表之一。在大多数情况下，条形图是更好的选择。但如果你决定做一个饼状图，有2个比较好的建议:
1）不要超过5-7片，保持简单
2）可以将额外的最小段分组到“其他”切片
如果没有适当的标签，无论你的图表有多好，它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。
将数据放在切片上可能会导致多个问题，在可读性问题上和窄切片上都会有挑战。相反，添加黑色标签能清晰的链接到每个部分。
在确定饼片秩序时，有几种常用的方法:
1）将最大的切片放在12点的位置，然后将下一片切片顺时针降序排列
2）把最大的切片放在12点的位置，第二大的放在顺时针相邻位置，第三大的放在11点的位置，其余的切片按顺时针降序排列
同样的建议也适用于其他许多图表。不要默认采用字母排序，将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图)，以确保最重要的数值占据最突出的空间，减少眼球运动和阅读图表所需的时间。
饼图通常不是最容易阅读的图，因为比较相似的值非常困难。当我们把中间部分去掉，创建一个圆圈图表时，我们腾出了空间来显示额外的信息，但这样牺牲了清晰度，极端情况下，图表就会变得毫无用处。
不必要的造型不仅会分散注意力，还可能导致对数据的误解和用户的错误印象。你应该避免:
1）3D元素，明暗面
2）阴影、渐变和其他扭曲的多彩色
3）斑马图案，过多的网格线
4）过度装饰，斜体，粗体或衬线字体
颜色是有效的数据可视化的组成部分，在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性，所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合，可以创建一个连续的颜色集。
发散调色板是两个连续调色板的组合，中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。
看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以帮助你生成各种调色板。
根据美国国家眼科研究所(National Eye Institute)的数据，大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。
1）在调色板中使用不同的饱和度和亮度
2）把现有配色去色然后检查对比度和可读性。
确保排版能够准确传达信息，帮助用户专注于数据，而不是分散用户的注意力。
1）选择易读的字体，避免衬线和装饰过度的字体
2）避免使用斜体、粗体和全部大写
3）确保与背景有高对比度
4）不要旋转文字
这个简单的技巧将确保用户能够更有效地阅读图表，而不会扭伤他们的脖子。
如果你的任务是在web和移动项目中添加交互式图表，你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现，并能提供大量交互想法。
帮助用户通过改变参数，可视化数据进行探索。然后得出结论，最大化价值和洞察力。在下面的示例中，你可以看到IOS Health应用使用了各种数据表示的组合。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Duoton icon
渐变色已经流行了段时间,双色渐变设计依然持续是一个大趋势，因为单一的色调无法满足产品所需，双色调图标的特点就是色彩对比鲜明，青春活力，这种相比单色调图标，更适合应用于一些主流偏年轻化产品，因此设计师还可以通过设计色彩打动用户，提升产品竞争力，工具化产品也可以使用这样有层次的图标，不过使用时，需要对色彩进行克制使用。因此，如果您希望自己的设计界面脱颖而出，可以去大胆的使用双色调色彩。
1. 双色调多层质感(弥散渐变，直投影，混合模式)
2. 双色调混合模式叠加
Alpha icon 图标风格最大特点就是单色带透明渐变，通过弱透明度来制造视觉层次，如果是纯白色，就会显得图标平庸了一些，这种图标运用范围可以是界面中空场景或者一些关键模块的主功能图标。
如下图左侧大卡片上面图标应用思路。
层叠式图标，相比于纯白色线条图标，它带来一种更舒适的质感，其设计方法是通过穿插层叠的手法，将日常我们所见到的单一的线条图标，变得更具有视觉层次感，当然这种图标使用场景一般会是在功能说明性页面，功能介绍等。
品牌植入一直是非常大趋势，包括今年我们所看到两大厂的品牌更新IBM和UBER等，都是将品牌核心符号植入设计中，我想这样的思路在2020年将持续会是一个重要表达产品气质和记忆点手法打造思路之一，因为用户已经很熟悉目前图标模式，如何能创新区别其他产品，那么融入品牌将是一个不错的选择~品牌的融入技巧有高低之分，需要设计师去巧妙设计
同样多邻国在前段时间更新品牌，并将其LOGO特征符号植入字体中。
同样多邻国在前段时间更新品牌，并将其特征元素植入字体中
动态图标是一个能提升产品体验的方法之一，也是微交互中的一种，它可以增加产品趣味性，Facebook在评论入口的表情动画就运用了动态图标， 包括苹果Apple Pay支付成功图标动画，Google Assistant智能助手，Messenger中的打招呼动画等等我们可以逐渐发现动态图标比静态图标的表达性更强，更受到青睐，随着硬件升级，这种动态图标运用逐渐在越来越多场景可见到。
备注（因为视频比较麻烦，因此省略了）
文章来源：优波设计 作者：设计TNT
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
很多产品经理和设计师在设计 B 端产品界面的时候不知道该怎么办，今天笔者给大家汇总了一些 B 端典型界面及其设计原则，帮助大家从容应对界面设计，不再不知所措。
Dashboard 页通常作为产品的首页出现，产品内各种重要的数据和信息都会展现在 Dashboard 上。用户可以通过点击 Dashboard 上的卡片或卡片上某条数据，快速链接到详情，这大大缩短了用户获取信息的路径。产品团队也可以通过 Dashboard 页，向用户传递产品迭代、运营活动等内容。
模块独立
Dashboard 是由承载不同内容的卡片组成的，每块卡片的内容都要独立，不该交叉。
有效统计
Dashboard 上所呈现的数据最重要的就是该数据是否为用户真实所需，如果统计数据不对用户产生任何价值，那还不如不统计，否则会干扰用户。
短路径导航
了解用户需要使用 Dashboard 的核心目标，为用户通过 Dashboard 达到数据详情页提供最短的路径导航。
使用场景
将用户需要待办的事项、事项处理的进度等都完整的展示出来，方便用户随时查看，提升用户的工作效率。
核心功能
核心统计数据、待办任务、快捷入口、通知公告等。
设计建议
使用场景
当新用户第一次使用产品时，为了减少用户的困难和快速完成用户的任务，新手引导页可以将核心操作链路展现给用户。
核心功能
产品介绍、核心功能使用手册、相关内容指引。
设计建议
使用场景
监控页是数据可视化页面中的一种，它通过一系列对数据高度概括的图表来展现系统的核心指标。指标监控页的使用者通常是管理者（即决策者），他们需要看到系统整体的运行状态，监控全局数据，从而调整自己的决策。
核心功能
关键指标统计。
设计建议
使用场景
分析页也是数据可视化页面中的一种，它通过对系统多维度的详细分析来展示系统的情况，从而使使用者可以发现问题，并尽早找出解决办法。监控页重在总览，而分析页重在明细，因此，分析页的使用者通常是执行者。
核心功能
关键指标明细分析。
设计建议
表格页可以处理大量的数据条目，同时可以导航至对应数据的详情页。在表格页中，用户可以查询自己所需要的数据条目，以及对比数据条目、新增数据条目、删除数据条目等。
模块清晰
表格页通常由查询区、按钮区、表格区、分页器等模块组成，要保证模块间层次合理与清晰。
数据格式
表格页中最大的模块为表格区，该区域由列组成，列由数据构成，列中的数据格式展现要符合业务及用户的需求，例如“星期三”不能表现成“星期 3”。
数据对齐
对齐方式合理的数据，有利于用户定位数据、分析数据。通常数据对齐方式为数值右对齐，文本左对齐，特殊情况居中对齐。
全表格页是最常见的产品界面，全表格页主要由筛选条件、按钮区、表格区、分页器组成。表格区是表格页中的主角，当界面数据只需要一张表呈现的时候，使用全表格页。
核心功能
多字段筛选、操作区、表格区、分页器。
设计建议
使用场景
左树右表页的界面布局基本与全表格页差不多，只不过其多了一颗左侧的树来帮助用户导航。
核心功能
导航树、多字段筛选、操作区、表格区、分页器。
设计建议
使用场景
上下表格页是表格嵌套表格幻化过来的，通常上表格为主表，下表格为子表，子表展示了主表中某条数据的详情。
核心功能
多字段筛选、操作区、表格区、分页器。
设计建议
使用场景
左右表格页与上下表格页有异曲同工之妙，左右表格页通常左表为主表，右表为子表。
核心功能
多字段筛选、操作区、表格区、分页器。
设计建议
使用场景
折叠表格页的出现通常是页面上表格的信息需要分组，每一张表格展现一类信息。
核心功能
分组、操作区、表格区、分页器。
设计建议
表单页是用于信息添加和录入的页面类型，用户根据系统的要求将必填字段信息填写完成，从而提交给系统，由系统接收并输出信息。
控件合理
通过选择合理的数据录入控件，及通过合理的信息组织形式，帮助用户可以快速完成数据录入的任务。
明确好用
表单页面中，每个表单项都要做到自身体验的明确与好用，例如针对一些有通用值的表单项建议设置默认值，针对必填项要明确标明，针对表单项标题、错误提示要明确传达含义。
清晰反馈
表单录入完后，允许用户进行返回、取消、清空、保存等操作，并且操作后提供明确的反馈，例如保存成功、保存失败等。
使用场景
表单项较少，表单信息直接平展即可，表单录入任务简单且快速。
核心功能
表单项、填写说明、操作按钮区。
设计建议
使用场景
高级表单页通常需要用户填写大量的信息，这样大型而复杂的数据录入任务需要被拆解为多个部分进行。
核心功能
分组/卡片分组、表单项、操作按钮区。
设计建议
使用场景
当表单填写有相应的步骤顺序时，采用分步骤表单较为合适。
核心功能
步骤条、表单项、操作按钮区。
设计建议
使用场景
当表单块归属不同的分类时，需要使用带树表单页去处理。
核心功能
导航树、表单项、操作按钮区。
设计建议
详情页的作用是向用户展示一个对象的完整信息，它的主要作用是帮助用户信息浏览，同时允许对详情页整体的数据或某部分数据发起编辑等操作。
层次分明
针对信息较少的详情，平铺展示即可；针对信息量大的详情，需进行合理组织，保证层级分明。
结构相近
针对详情信息的模块化组织，要求尽量模块的结构相似，减少复杂性，降低用户的理解成本。
使用场景
基础详情页信息量较少，信息复杂度低，直接平铺展示即可。
核心功能
详情信息。
设计建议
使用场景
高级详情页需要展示的内容量较大，且复杂度高，需要拆分为多组来帮助用户浏览信息。
核心功能
卡片、分组、详情信息。
设计建议
图
使用场景
详情页中有部分字段由于业务需要，会进行修改。
核心功能
详情信息、可编辑信息。
设计建议
我们如果能做到对 B 端通用型界面了然于胸，那么在面对用户需求时才能从容应对，举一反三。不断总结和抽象，是我们应对各种需求的不二法宝。
文章来源：优设网 作者：知果日记
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
理解图标，首先关注的是图标本身的类型，在整个 UI 体系中，图标基本就分成3个大类：
工具图标：包含一定产品功能隐喻的简化抽象图形，代替文字节省界面空间，方便用户理解
装饰图标：主要目的是用来装饰界面的视觉元素，样式大于功能，常用于节日活动中
启动图标：产品的启动图标，即用来在系统中打开该产品的图形按钮，基本以自身 LOGO 为主
在 B 端项目中，应用最广泛的必然是工具图标，而装饰、启动图标却鲜有露面机会。但出现的少，不代表没有，解释工具图标前，我们先优先讲解下装饰和启动图标在什么情况下会出现。
其中，SAAS 类服务就有很多会重点强调品牌、情感化设计的案例，例如大家比较熟悉的阿里云和腾讯云。项目中就大量启用 3D 化的装饰图标提升界面的质感。
启动图标则会应用在一些比较大型的项目里，当项目出现了很多下级功能模块或类似插件的体系时，就会采取使用应用图标的方式作为入口。
比如 Figma 也是一个 B 端工具，它的插件列表中就可以看见不同的启动图标。还有类似 Slack、Invision、Teambition 等产品，一个庞大的产品生态就必然会衍生出强化不同子产品身份的需求，就自然而然会用到启动图标了。
最后，就是我们熟知的工具图标了，前两种图标，在前期画不好不要紧，毕竟这类规格的产品会有经验更丰富的设计或总监坐镇，新手当个切图仔即可……
但是工具图标，重要性就不言而喻了，B 端项目对工具图标的需求非常大，几乎每个组件中都会包含图标。
虽然今天网上有非常丰富的图标素材库，但在形式各异的 B 端项目里依旧是供不应求的，各种行业特有的功能、实物、隐喻，只能设计师自己完成。
B 端设计师在图标设计领域的主要工作，就是确定图标样式、设计图标、导出切图。下面的分享我们也会主要围绕工具图标展开。
工具图标的应用主要包含两个部分，线性图标和面性图标。
这里再提图标风格，不是把以前的知识点重新讲一遍，而是要强调 B 端图标的特殊性。和 C 端相比，B 端图标的实用属性更高，并不需要过多凸显本身的视觉风格。
所以，工具图标中，使用大量渐变、插画、投影的类型都要排除掉，它们对 99.9% 的项目都只会造成体验的负影响，不要被网上的追波风飞机稿给带偏。
适合 B 端项目的工具图标只要应用最基础的线性和面形风格即可，一定要划分出差异，应该只包含圆润、纤细、尖锐这几种。
很多人好奇线性和面形图标在 B 端设计中有什么使用上的差异呢？答案是没有差异。
线性和面形的使用，纯粹看设计师在当前场景判断哪个合适用哪个，只要保证对应图标风格统一即可。
不过如果遇到一些比较特殊的情况，比如要表现各类设备的复杂图标，那用线性的做法还是相对合适和简单一点。
对 B 端设计来讲，独立设计图标的步骤是必不可少的，应该掌握的图标规范还是必须要懂的。
我们虽然没有 C 端那么多风格和技法的拖累，但想画好 B 端图标却多出了其它难点，那就是一个页面中出现的图标实在是太多了。
这就引发了我们要讲的第一个规范要点 —— “统一性”，所有同规格类型图标具有一致性的特征，这些特征包含了：
粗细一致：首先使用统一的描边、线段粗细参数
圆角一致：使用一致的圆角数值，不要一下尖角一下圆角
透视一致：使用接近的透视角度，不要有的侧视有的正视图
大小一致：视觉的大小保持一致，有均衡的大小感受
如果不能保证统一性的基本要求，那么整个页面看起来就会非常的廉价、业余。很多新手处理 B 端项目就是应用了多套素材库图标，它们的细节完全不一样，统一性当然无从谈起。
而让整套图标保持统一性，是相当有难度的，其中最难的一点，就是如何让一套图标的大小均衡。虽然我们要对每套图标确定一个固定的尺寸，但不代表图标实际图形的长宽数值是完全一致的。
几何图形对视觉有一定的欺骗性，有不同的大小体验，比如下方案例（鱿鱼游戏乱入？）：
所以，基于这样的特性，每个图标本身都包含了两层属性，图标的占位尺寸和视觉尺寸。占位尺寸指它在界面中的实际占地大小，是透明白的，排版的时候以这个尺寸作为实际的边缘来测量。
而视觉尺寸，则是在占位尺寸下图标图形的实际大小，这个大小是带给我们实际视觉感受的部分。一套图标的不同图形必然视觉尺寸是各不相同的，我们用占位尺寸包裹它们来方便我们进行统一的应用。
所以，使用成熟的图标素材必然会发现图形周边还会有透明的空白区域。当然，不同的素材，这个留白也是有区别的，下一个小节就会解释。
最后要声明一点，一套项目中可以包含多个规格（2-5个）的工具图标，比如导航用的图标比普通工具图标更复杂一点，设计师只要保证每种规格保持的统一性即可。
图标越多，大小的控制越困难，所以专业的图标库绘制就必然会应用图标的栅格系统进行辅助。
在 Ant 的体系中，一个基于栅格的图标实际包含3层，背景层、格线层、图形层。
背景层，即图标展位尺寸，需要先确定出这个元素的大小，然后才是里面的绘制区域。通常，栅格系统会为边缘预留 1-4 像素的内边距（出血位），正所谓四周留一线，日后好相见。
格线层，则是使用的栅格线段，也是最重要的部分。格线层通常由 4 个基本图形构成，包含正方形、圆形、水平长方形、垂直长方形。
这四个图形的长宽大小不一，原因是为了对应几何图形视觉尺寸不同的特征。把它们并列排列，就可以发现它们的视觉大小非常接近。
这些格线的作用，就是提前帮我们确定好视觉比例，帮助我们快速绘制相同图形类型的图标。
但是，不是完美符合这四个图形要求的图标该怎么办，总不能格线把所有轮廓都给你实现出来吧？
格线的另一层作用，也就是最重要的作用，其实是一个用来做测量的工具，而不是轮廓依据。在几何视觉差中，最基础的大小原理是占用面积越大的图形，尺寸感受越大。所以，长宽一致的正方形大于圆形，圆大于三角形。
所以当我们绘制的非常规图形，和类似格线进行对比时，长宽缺少的一侧，就要由另一侧增加数值来填补它的面积。
比如下图 Ant 官方的电脑图标，它的宽是横向矩形，但是中间区域面积较小，所以增加了高度进行平衡。
再看一些其它的案例
这一步没有固定的参数使用技巧，设计师需要将完成的图标置入到其它图标旁边进行调试，确保尺寸是合适的。
格线只是一个图标大小设置的参考工具，一切以最终效果为标准。
理解完图标的基本规范，就到图标的使用逻辑了，解决一些常见的设置误区。
图标该做多大的，这是目前被问到最多的问题。本来应该是非常简单的一件事，但很多工作多年的设计师也搞不清楚。
仔细捋了捋，罪魁祸首就是 AntDesign 这套规范中对图标画布的解释了。
要重点强调，Ant 设计图标的意图，和一般项目的是完全不同的。Ant 作为一套庞大的开源项目，它的图标核心特征之一就是 —— 适应性。
这些图标要被应用到各种不同的设备、显示器、系统中，图标尺寸会用多大，在几倍图环境显示全都是不确定的。所以图标一开始按越大的规格完成，后续实际应用中的缩放、匹配也就越容易，适应性越高。
但是，在我们自己的项目中，这种做法是完全没有必要的，1024 图标的负面影响包含：
像素数过多使得数值的制定难度大大提升，不管是元素尺寸还是描边粗细
矢量图形源文件进行缩放很容易发生错位，提前轮廓化会破坏源文件
缩放图标后描边的数值往往会出现非整数和 0.5 的状态，虚边问题严重
在常规项目里，一套项目是可以包含不同尺寸和规格的图标的，而不是我们做一套相同风格的图标在整个应用中无差别使用。
这也意味着，每个图标在产品中的使用场景通常只有一个尺寸，不需要去面临缩放的情况。即使需要缩放，也只是这套图标中的少数几个需要，或者相对特殊的项目。
所以，图标尺寸设定，就是根据当前位置合适的尺寸来制定。可以使用素材在已经设计好的布局中尝试多大的数值合适，然后创建同样的数值即可（尽量以4的倍数为标准）。
我们知道图标的素材非常丰富，不管是 Iconfont、IconPark 还是 Iconsearch 等网站，都提供了海量的素材。但是只要稍微专业点的项目，往往素材库都满足不了，部分规格的图标还是需要我们自己重新绘制。
所以说图标素材就完全没用了吗？当然不是。
图标的正确用法是作为一种快速试错的参照物，它可以帮助我们实现：
参考图标的具体尺寸在哪个数值最合理
参考当前场景使用面性还是线性的风格更合理
参考图标的设计风格是圆还是尖锐更合理
参考相关隐喻的图形样式哪种更合理
在项目的界面设计阶段，我们一向建议优先使用外部的素材，尤其是 IconPark 这种比较统一，还可以快速调节图标样式的工具网站。
这个过程即使素材找不到和寓意一致的也没关系，用相近的图标替代就可以。等到页面布局基本完成以后，最后再集中精力对需要绘制的图标重画一遍（甚至是在开发阶段绘制）。
通过别人的图标来快速匹配尺寸、风格、样式，会帮助我们节省非常多的时间，也有助于我们设计出更专业、美观的图标。
另外，就是针对项目一些偏小尺寸的通用图标，就可以比较放心的应用素材，例如翻页的左右、更多、下拉、搜索等等。
图标的尺寸、样式都确定了，最后就是关于图标的色彩和不同状态的制定了。
前面讲过，B 端项目对图标的装饰属性没有那么迫切，所以正常情况下，太花哨的图标是要尽量避免的。彩色、渐变色、投影，都不应该在这个情况下胡乱使用。
常规的图标只要使用中性色即可，而需要特别对待的图标，色彩可以从主色或者辅助色中选取。比如需要高亮显示的打勾或者打岔。
当然，如果项目涉及到一些特殊的工具图标，类似工厂、工业领域表达实体设备的拟物图标，可以打破这个原则。但是，同样避免这套拟物图标的每个图标用色不同，尽量只使用 3 种以内的颜色完成拟物的填色。
同时色彩的使用还有一个重要的意义就是对图标不同状态的呈现，部分图标会承担按钮的功能，包含默认、选中两个基本状态。
普通权重的图标，未选中状态可以在默认色彩基础上使用透明度来实现。
高权重的图标，则可以在选中的状态替换色彩，或者更改图标的类型，将原本的线性更改成面形并填充色彩制造反差。
完成所有图标的设计以后，最后一步就是切图和导出了，这决定你的图标能不能被正确运用到线上项目中。
在一套专业的 B 端项目中，已经设计好的图标是设计规范的 “资产” 内容之一。图标的文件不能散落在项目的各个界面里，而是在规范页面中有统一的整理和收纳。
这种做法的流程是，先在软件的规范库中创建对应的图标组件（ Symbol / Compoent ），然后再在具体页面中应用，方便后续的统一管理和修改。
而在这个过程中，我们也需要对图标有正确的命名方法，来确保团队调用、检索图标的效率。通常，我的图标命名规范如下：
尺寸 / 类型 / 图标名-状态
示例：
48px/导航图标/表盘页-默认
24px/一般图标/搜索-默认
“/” 号的引用主要是方便软件中对组件层级进行划分，而我调用图标的规则势必是先从尺寸开始，再选择对应规格，最后类型和状态。
提前命名也是方便后续我们切图和导出，但要提及一点，图标的命名不要追求英文化，因为我们的词汇量不可能实现正式的英文命名规则，只会写一堆大家都看不懂的单词。
而开发在使用我们的图标切图时，也不会用我们之前取的命名，会根据自己的命名习惯重新命一遍，写个让他能看懂的名字远比用乱七八糟的英文强。
接下来，就要解释切图的规则了。很多没有经验的设计师切图就只是随手加个切片，然后上传蓝湖发给开发自生自灭了，这是一个非常不合理的操作。
再或者，强行使用 Fonticon 格式，而不管实际情况如何，造成最后实现效果完全不同步或实现不了。
切图是通过前端调用并在浏览器中进行显示的图形，而要被浏览器正常显示，就有必要了解适合使用的切图格式。
图片的格式包含位图和矢量两种，位图是通过记录像素色值的图形格式，假设一张图是 100*100 像素，那么记录 1W 个像素点的色彩，所以无法支持无损缩放。而矢量则是通过记录点线面的坐标绘制出显示图形的格式，可以支持自由缩放。
理论上，矢量格式是最佳的图标切图格式，但是它的限制同样有很多，例如：
无法记录渐变色
导出轮廓容易有错误
无法记录拟物图形
无法记录投影元素
前面说过，普通项目中同一图标是很少出现一会儿大一会儿小的需求，所以矢量最大的特征无损缩放，往往就不需要我们去考虑。矢量格式切图的主要出发点是用来应对移动端显示器 1x、2x、3x、4x 等不同倍率缩放的问题，而不是网页端的基本使用。
当一套项目中出现了矢量格式无法覆盖的图标时，那么即用矢量切图，又用位图，就会显得非常的混乱。只有类似 LOGO 等图形元素，才需要考虑 SVG 格式，而不是一看到图标就上。
所以，最适合切图的格式就是位图的 PNG 格式，一方面它是无损的，另一方面它支持透明背景，在切图应用上可以完美和设计稿结合，而这是其它大多数位图格式不具备的特征。
当每次项目完成以后，并不需要通过蓝湖来实现切图的导出，如果切图文件分散在各个项目页面里，那么一定会有很多图标被遗漏，尤其是图标的不同状态切图。
所以，最理想的切图形式，就是将所有图标完成整理和命名以后，一起框选，然后导出成 PNG 格式，再同步给程序员即可。
以上就是关于 B 端图标应用的所有知识点了。后续会将这些内容进行分拆，更新到原子核系列课程中去，会有更细节的案例说明。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com