前段时间组织了一次关于 UI 图标设计打卡活动，根据大家提交的图标作品中，发现了一些关于图标包装的问题。除了图标本身的质量把控以外，图标的包装效果也是至关重要的。为了提高大家对图标作品的包装能力，特意为大家总结了一些图标包装的技巧，希望可以带给大家一些帮助！

目录

1. 简单图标避免独立展示

2. 让图标数量刚刚好

3. 相互间距以图标大小计算

4. 适当增加包装留白

5. 给图标添加固定造型背景

6. 添加文案作为包装装饰

7. 避免过度复杂的背景

8. 图标配色与背景色形成对比

9. 隐藏设计参考线

10. 名称文案易小不易大

11. 线性图标避免缩放

12. 控制图标颜色效果更佳

1. 简单图标避免独立展示

针对特别简单的线性图标或者面性图标，尽量多设计几个形成组合，不适合单个图标作为作品展示。一些比较复杂的质感图标可以单个展示，但是不建议放得太大，容易暴露图标设计中的缺点，适当增加留白可以让作品显得更精致。

2. 让图标数量刚刚好

完成一组图标之后，展示的时候可以根据宫格的方式去计算，尽量满足宫格的布局，让图标展示数量刚刚好。

3. 相互间距以图标大小计算

展示系列图标时不要显得拥挤，相互之间的间距要适当加大。图标之间的最小间距大于等于图标大小值，这样作品包装效果会更舒适通透。

4. 适当增加包装留白

图标展示时不要完全挤满整个画布，四周预留更多的留白可以使得作品展示效果更加通透。

5. 给图标添加固定造型背景

图标展示可以直接在单色背景上面呈现，如果图标比较简单且展示效果显得空旷时，可以考虑给图标添加固定造型背景，不仅可以丰富包装效果，也能避免图标单调的情况。

6. 添加文案作为包装装饰

除了仅展示图标以外，想要增加作品包装效果，可以通过添加文字作为包装装饰。

7. 避免过度复杂的背景

图标作品包装更适合在单色背景展示，可以适当丰富背景效果，但是需要避免过度复杂的背景效果，过度的背景会干扰图标本身。

8. 图标配色与背景色形成对比

图标展示背景如果选择深色时，需要注意背景色与图标配色形成对比，不要过度融合。

9. 隐藏设计参考线

图标规范或者参考线作为图标设计的参考，展示图标作品的时候不需要显示，观察系列图标视觉平衡度时也要隐藏规范或者参考线。

10. 名称文案易小不易大

文字可以作为图标包装的点缀，但是不要太大，文字小一点显得更精致一些。

11. 线性图标避免缩放

设计图标时就定好大小规范，线性图标不要放大了画再缩小，如果不确定包装大小，就先用色块作为占位符。定好图标大小规范之后再绘制，缩放会使得图标粗细存在误差，也会导致结构错位。

12. 控制图标颜色效果更佳

图标配色也是非常重要的，如果颜色控制不好就做减法，采用主色与辅助色搭配，就不会出现颜色过多而显得花俏。

小结

作品包装是为了提高作品质量，带给读者更好的感官体验，就算是图标的展示也需要加强包装效果。希望本期的总结可以让大家对于图标的包装能够更加注重，从每一个细节入手，带给别人更好的印象。

作者：黑马青年（vx: heimaui）

本文由 @黑马青年 原创发布。未经许可，禁止转载。

Powered by Froala Editor