从零开始学！B 端产品图标绘制指南（细节篇）

前篇文章《从零开始学！B 端品图标绘制指南（创篇）》跟大家享了图标设计的创意阶段，今天继续二篇，总结营造高级感有哪技巧，以及设计整套图标库需要在哪方面统一规范。

营造高级感，B端也可以精致又耐看

1. 描边

依据图标的使场景和格定位，为描边择合适的粗细：

• 按钮图标的表简洁力，描一般偏粗，也可以使用面性图标或线面结合，增加存感召唤力；
• 展示图标描边粗细的自由大一些，但看起来要像按钮，免误导户点击。

简言之，描过粗会显得突兀，细节混沌不清；描过细会缺少重，感觉太飘，把握好平衡。

△ 按钮图标一般描较粗，也可以使用线面结合、面性图标的方式表。作者 Niclas Ernst 发表于 Dribbble

△ 展示图标的描可以很纤细，利用背景色块强化存感。作者 Peter Deltondo 发表于 Dribbble

一个图标可有两到种描边粗细。

△ 外框使粗描边，细节使细描边。作者 Gloria Qiu 发表于 Dribbble

统一规范时要注意，除粗细统一（包括种粗细），描边端点（平头、圆头、方头）和边角（斜接、圆角、斜切）的属也要持统一。

△ Adobe Illustrator 描边面板

2. 圆角

适度的圆角以赋予图标亲切柔和的气质，但要避免圆角太大，显得软萌，不符合 B 端产品中立、冷静的气质。

为保证规范统一，简图形最好只有一种圆角半径，复杂图形尽量控制在种以内。

△ 圆角适中，风格中立。作者 Guicon 发表于 Dribbble

△ 圆角较大，风格倾向于软萌。作者 Rizki Kurniawan Darsono 发表于 Dribbble

3. 混搭

如果把图标抽象成基础何形，可以有方形、矩形、圆形、三角形、星形等形状。不同基本形混搭（例如方形+圆形，矩形+三角形），对比相同类型重复（例如方形+方形，圆形+圆形），可以让图标更有活力不沉闷，但要注构图均衡，避免头重脚轻或者重心偏向一边。

组合形有嵌套（里），拼接（上下左右），堆叠（前后）几。

△ 不几何形嵌套、拼接、堆叠。作者 Eddie Lobanovskiy 发表于 Dribbble

其实相同类型也可以通过短、高低、三角倒三角组合，形错落致的搭配。

△ 相同几何形的搭配。作者 Eddie Lobanovskiy 发表于 Dribbble

4. 倾斜

倾斜可以打破中规中矩的保守感，还可以平衡细图标方图标的视觉重。

注意要破坏构图的稳定性，采相同角或镜像对称来保证视觉统一。

△ 倾斜可平衡视觉重量，注意倾斜角的规律。作者 CMARIX TechnoLabs 发表于 Dribbble

5. 色彩

一旦有了颜色，设计师够施展的空间可说非大了。可是纯色、渐变色、透明叠、同混合模式的叠。颜色可在填充、描边，可仅点缀。颜色可是封闭的、溢的、缩的、偏移的……

注意在时要有品牌意识，不与 VI 手册彩规范相冲突。

为了表现高，不要使用多高饱和度的颜色，否则会有吵闹和冲撞的觉。

△ 多色描边，注观察外框、细节、征点别如何用色。作者 Kyle Anthony Miller 发表于 Dribbble

△ 描边和背景的种颜色采用正片叠底的混模式。作者 Ted Kulakevich 发表于 Dribbble

△ 部填充，背景局部点缀，用色透气灵动。作者 Dmitri Litvinov 发表于 Dribbble

6. 层次

计渐渐厌倦了纯粹的扁效果，开始加入各种轻质，例如运用光和增加立体和深度，使用线条勾勒出等轴测图的透视效果等。

要注意层和细节多了，统规范内容也随增加。

阴影投影：假设光源固角度照射（例如方、斜方、侧方），由此产的阴影投影应致中对称的置，即致围图标中旋转 180°。

透视：透视角一致，见的角例如正视图、俯视图、侧视图、现在流行的等轴测图等。一般情况首先考虑正视图，除非正视图表现对象特征，需要从他角补充细节。注意细节增，图标可辨识未必升。

△ 轻薄透气的阴影使线性图标有了立体感。作者 Bipin Balan 发表于 Dribbble

△ 投影使图标有了深，注意投影的模糊程和位移距离，交代了元素之间的距离。作者 415Agency 发表于 Dribbble

△ 渐变色填充。作者 Daniel Bograd 发表于 Dribbble

△ 虽然是线性图标，但通过线条颜色的变表现阴影和层次。作者 Eddie Lobanovskiy 发表于 Dribbble

△ 注意光源方向和阴影位置一致性。作者Ted Kulakevich 发表于 Dribbble

△ 透视角一致。作者 Andrey Kopyrin 发表于 Dribbble

7. 透气

如果大摄影或者中国画，应该从中感受到精妙留白营的灵之感。透气，就是层次之间留有空间。构图时注意画面要太实，细节要太满。

△ 虚线实线透气。作者 Marina Fedoseenko 发表于 Dribbble

△ 线条采断点、故意封闭，且衔接之处留有空隙，及填充色缩。作者 HarikaDeng 发表于 iconfont

△ 填充偏移。作者 Anthony Gribben 发表于 Dribbble

△ 注意色和黑色描边留有空隙，且空隙间距一致。作者 Kyle Anthony Miller 发表于 Dribbble

8. 注意

在设计中表现级感，设计师首先要做的是升自己审美味，平时多观察，多总结，多积累。

对着品不要按部就班的临摹，样很难深刻理细节之间是怎样互相影响和牵的。我的建议是仔细观察原，自己不看稿画一遍，和原对比，研究差距在哪里。

这个过程不仅要研究表现巧，更要琢磨面的「道」，这才能真正内化所学并为所用，而不是浅层次的山寨和抄袭。

设计师们也可以从其他领域寻找灵感，比如筑、摄影、绘画、雕塑、空设计等等，这里不展开说了。

另外，设高级感但也接气，冷静克制但也亲力，严谨中立但也包贴。一切以用户中，形式服从功能，不本末倒置。

统一规范，脑袋里始终有品牌意识

除了面提到的描粗细、圆角半径、倾斜角度、色彩、光源阴影细节需统一，以下几方面常被忽略，但对图标统一性的表较影响。

1. 节奏感协调

线性图标的节奏由线条其间距构，单图标的线条可以疏密相间，但一整套图标库应该致规律，不某些图标线条都很紧凑，其他图标的线条都很疏离。面性图标的疏密节奏由色块其间距构，也类似的规律。

△ 单图标线条节奏疏密相间，但整体节奏规律的。作者 Dmitri Litvinov 发表于 Dribbble

2. 视觉重均衡

视觉重均衡不单尺寸统一，形状、面积、颜色、细节复杂度都会影响一图标的体轻重。比如规则形状比不规则形状（尤其非对称形状）稳，视觉重；相同高度宽度的方形、圆形、三角形面积递减，视觉重也随之递减；深色比浅色感觉沉重（深色背景相反）；细节越多，留白越少，画面越满，视觉感觉重。因此视觉重多种因素叠加产的结果，画图标时也从多角度审视灵活调整。

△ 高度宽度相，但面积递减，视觉重递减。

△ 通过调整细节复杂度平衡不同图标的视觉重。作者 Jaya Prakash 发表于Dribbble。作者

3. 景背景

当图标由两图案组合时，一一后的图案分别景图、背景图。不景图还背景图，重复出的时候小统一置固，不时时后，时时下。

需要注意的是，前景图会遮挡背景图分细节，要遮挡键细节。另外组合而成的两个图案要适当降低细节复杂，避免合在一起的时候太过复杂，跟单个图案的图标对视觉重量太重，破坏视觉平衡。

△ 前景和背景，大小统一位置固定。作者 Afshin Mhmdi 发表于Dribbble

4. 注意

虽然图标设计需要遵循统一规范，但「整齐划一」来要求图标设计是合的，刻遵守规范可会产生死僵硬的感觉。遇到一些特殊情况全可灵处，只要整体效果协调突兀即可。

△ 表现禁状态时，红色分有时在右上，有时在左，整体上依旧协调。作者 Martin David 发表于Dribbble

总结

今天容的案例并都是 B 端产的应，都是美的设计，希望大取精华糟粕，吸收有值有营养的分，而是刻意模仿。

欢迎关注者的微信众号：「能呆书房一整天」