在界面中，图标是其中的一个重要模块，容易识别、清晰且美观的图标更是有助于用户操作。在工作中，设计图标是一项独特而有趣的挑战，无论是创建用于 UI、图形设计或独立应用程序图标的单个图标或一组图标，都可以提升他们的技术能力。本文Pixso将与大家分享图标设计的基本指南，希望能为喜爱设计的朋友进行图标设计时提供思路。
1. UI图标的基本分类
图标是一种具有指代意义的图形符号，有高浓度、快捷传达信息且便于记忆等特性，常见的UI图标大致可以分成三大类：交互性图标、装饰性图标及说明性图标。
-
交互性图标：双向信息传递，不仅可以向用户传递信息，引导帮助用户执行特定操作，同时也允许用户向程序传递控制信息，如：开关按钮、点赞、转发分享、注册按钮等。
-
装饰性图标：凸显个性化设计，提升用户体验感和设计亲和度。常见的有：页面升级、奖励、用户等级等都属于装饰性图标。
-
说明性图标：区分不同功能或内容的视觉标记。
2. 利用像素网格
为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，所有的图标都将建立在基础网格之上，图标的每个部分都应该放在像素网格内。
常用的网格绘制尺寸为：16、24、36、48、64、128、512、1024，这些尺寸并不是固定的，在设计中也会存在特殊的尺寸。使用网格以及 Pixso 中的“对齐网格”或“对齐像素”工具，将有助于确保你的线条和形状在较小的尺寸下显示得更好。线条和形状应填满像素网格上的整个正方形，以便它们按比例保持细节。
3. 对简单几何进行分解和组合
图标需要以最简单的方式传达信息，复杂的细节和形状会在较小的尺寸下丢失，所以用基本的几何形状来绘制你的所有图标会更加明智。一般来说，图标的绘制方式有两种：布尔运算（Boolean algebra）和贝塞尔曲线(Bézier curve)。
-
布尔运算
在三维图形中，布尔运算通过两个以上的物体进行并集、差集、交集的运算，从而得到新的物体形态。Pixso提供了4种布尔运算方式：联集、减去顶层、交集和差集。通过布尔运算，我们能绘制出绝大多数的图标，但有些结构线条复杂的图标无法使用相加、相减、相切进行完成，这个时候就需要使用贝塞尔曲线。
- 贝塞尔曲线
贝塞尔曲线是应用于二维图形应用程序的数学曲线，一般的矢量图形软件都是通过贝塞尔曲线画出的，Pixso的钢笔工具允许使用者创建自定义形状和图标，使用矢量路径、锚点和贝塞尔曲线构建复杂的矢量网络图层。
考虑到图标的规范性及后期修改等问题，建议在绘制图标时，尽量使用布尔运算。
4. 关注设计一致性
如果你正在设计一组图标，那么你制作的每个图标之间应该有清晰的联系，这意味着坚持使用相似的字符，使用相同的笔画宽度和一致的视觉重量，元素的对齐方式，以及贯穿始终的间距等等。当然，你仍然可以为你的图标添加大量的变化，但是有关于你的线条有多粗、你要使用多少颜色或色调、你的角有多圆等等的规则，可以帮助你定义一种可以跨越多个图标的风格。
用Pixso将设计创建为组件，设置主组件，完成此操作后，当你后续需要添加任何设计，都只用复制组件创建子组件即可。当主组件发生修改，实例组件同步发生改变，再也不用因为重复的工作而忙到撞墙了！如果是团队项目，那么组件的功能将发挥更大作用。
5. 适当增加独特性及表现力
通常情况下，直接使用最明显的标准化符号或隐喻，比冒着更独特和更高可能混淆人们的风险要好。当然，如果你对自己的能力比较自信，完全可以大胆地探索更多抽象和创造性的隐喻，但在任何时候都不要因为使用标准化符号而感到沮丧，因为它们的优点是无可争议的。
请记住：核心符号本身不必完全独特，完成和装饰图标的方式才是你展示设计潜力的地方。
6. 确认好设计风格
在确定好图标的类型和所需传达的信息后，需要确定图标的设计风格，根据产品调性和模块视觉层级以及考虑延展性来确定设计风格是比较合适的。如果有相关系统，则需要尽量靠近整体的设计风格。在图标设计风格的摸索过程中，我们可以借助现有素材资源获取创作灵感。Pixso内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范，提供海量3D玻璃质感、渐变色、暗黑发光等图标设计模板和素材供设计师参考，更有设计技巧和案例教程时时更新，创意快人一步。
小结
小图标，大学问！图标设计看起来简单，但实际上有许多细节需要注意。设计完成后，最重要的是要实现提高用户体验的目标。为此，除了需要对照图标设计指南进行绘制，还需要对我们的图标进行可用性测试，当符合标准时，才能成为一个合格的图标。如果出现不符合要求的图标，则需要进一步考虑如何进行设计完善及修改。
