图标|一次客户沟通后，我悟出了「B端图标」若干设计点( 二 )

二、图标设计规则虽然示意类图标和半装饰类图标视觉形式不同，但在绘制上的规则是互通的。我们团队输出了一套企业级B端图标设计规范，不仅可以帮助新人设计师快速上手，并且可以使团队内设计师高效协作，保证设计结果的一致性。接下来和大家分享下思路，这是一套可复用的方法。
2.1 约定图标绘制区域我们需要给一整套图标约定合适的绘制区域，保证不论哪位设计师输出的图标，均符合设计标准。并且原始图标大小一致，可以保证前端使用也非常友好。
假如都是48px*48px区域绘制的图标，它们均缩放到16px*16px即可；如果一个是在48px*48px画板上绘制的，一个是在88px*88px画板上绘制的，它们都缩小到16px*16px，会导致图标看起来视觉不一致。若期望它们看起来一致，就需要专门为不同画板的图标设计绘制规则。

文章插图
这里在和大家分享一个小心得：我们团队在约定图标绘制区域时，发现了一个问题。Antd的图标是绘制在1024px*1024px画板上的，但又有一些团队是绘制在16px*16px，到底应该选取哪种画板呢？经过实际操作后我们发现，画板越大，设计细节可以越丰富。但缩小到小尺寸时，会有小数点的虚边（不过不妨碍前端应用，用户也看不到虚边）。而小尺寸画板绘制图标，画板全在视线范围内，设计师绘制图标时更有安全感。所以，不论用什么尺寸的画板，只要团队成员一致认同即可，不用过于纠结。
2.2 设置出血位除了要让图标绘制到统一的画板中，我们还约定了出血位，要求所有图标均保留出血位（出血位默认使用固定值），出血位起到的作用是：防止设计师图标绘制不小心贴边后，图标在实际应用场景中会出现缺失现象。当然，出血位的默认数值并不是一成不变的，允许设计师在绘制一些特殊形状的图标时，有调整空间，保证视觉平衡。

文章插图
2.3 约定元素调整规则针对示意类图标：
线条：我们会要求设计师在绘制图标的线条/圆点时默认使用某个数值，然后设定线条粗细/圆点大小的递增或递减规律，例如以2的倍数为主基调绘制，默认为6px粗细/6px大小。但允许设计师在绘制图标时，不合适用默认数值的，就按照增减规律去指导设计，如下所示。

文章插图
圆角：图标采用何种内外圆角设计会影响图标给人的感觉，数值大的圆角会让用户感觉亲切；数值小的圆角会让用户感觉硬朗、专业。采用哪种圆角方式，设计师可以参考产品调性去规定。

文章插图
针对半装饰类图标：
半装饰类图标在设计上也不是随意为之，除了要可以表达文案内涵外，假如是一整套的图标系列也需要约定元素调整的规则。
例如约定在「几何图形+业务图形」的设计基础上进行发挥，保证图标放到一起具有很强的一致性。并且半装饰类图标还要设定色彩范围（主色、辅色），如此可以让界面色彩不杂乱，严谨有序。可以看到腾讯云官网的图标采用了类似的设计方法。

文章插图
2.4 分层打造秩序【图标|一次客户沟通后，我悟出了「B端图标」若干设计点】对于图标画板来说，它不是一个平面，它就像楼房一样，是分层的。从底层到最上层的内容依次为：主画板区域、核心内容绘制区域、基础图形参考区域、实际图标。

图标|一次客户沟通后，我悟出了「B端图标」若干设计点( 二 )

推荐阅读

北控水务为什么不涨北控水务到底好不好

牵组词语汉字牵组词语

月季花扦插的最佳时间月季花扦插的最佳时间现在可以插吗?

2023重庆医科大学研究生成绩复查申请时间+方式

n95口罩能防尘吗 n95口罩可以用几次

摩托罗拉里程碑2刷机

如果你爱的人总是以怨报德,你会怎么样？

宝马525多少钱落地宝马525价格多少钱

电商铺货是什么意思电商货架什么意思，货架市场

胡萝卜怎样吃最有营养啊视频胡萝卜怎样吃最有营养啊

巴戟天药材多少钱一斤，巴戟天药店多少钱一斤

吕锅上的污渍怎么去除啊

非主流图片唯美霸气非主流相框素材

白金膏的功效与作用皮白金膏的功效与作用?

虚拟机怎么开网页游戏模式，虚拟机怎样打开网页

闻鸡起舞的主人公是谁囊萤映雪的主人公是谁

口红吃饭的时候怎么办

宝宝长期咳嗽易得肺炎

包贝尔大婚柳岩遭闹伴娘柳岩伴娘事件是什么?

未婚生子罚款多少2022年未婚生子罚款多少2022？