# 图标

WinDesign 遵循协同、便捷、高效的设计原则,由于人类的视觉倾向于感知连续的形式而不是离散的碎片,所以对齐的信息更有助于用户的识别,其次对齐的元素在视觉上也有视线引导的作用。

# 设计原则

准确:

能准确表达图标的含义,保证图标的可读性和易懂性;在各种屏幕上显示清晰,减少模糊和锯齿的出现;遵守医学规范,图标命名描述便于他人查找。

image

简洁:

形式与线条去繁从简,在保证充分表达图标含义的前提下,去除多余锚点和细节;绘制时保证参数的简化,尽量消除小数点以及非整数的角度。

image

统一:

保证图标大小、线条粗细、端点特征、倾斜角度等的统一性;系列图标构造上保持一致性,将变化控制在一定范围内。

image

# 画板与辅助

实际画布应控制在栅格中心 14*14px 的区域,周围留有 1px 的出血。在一些特殊情况允许内容适当延展,以确保图标视觉重量上的统一。 在绘制的过程中应根据特性选取相应的辅助线来控制图形样式;在必要时,可以将内容扩展到辅助线之外。

image

# 设计指引

线条:

平直的线条粗细为1.5px,不允许虚边,虚像素的出现!线条末端的终点应为与线条同宽的圆角端点。绘制较复杂的图标时,整体轮廓线条粗细应该使用1.5px,内部结构可以适当调整,但是整体需要和谐统一。

image

圆角:

线性图标外边框圆角0.4px,内边框圆角0.2px,不允许内边框不使用圆角。

image

角度:

线条倾斜角度应为15度的倍数,以便在低分辨率的情况下仍有较高的线条清晰度。

image

锚点:

绘制文件必须保留未轮廓化之前的线条!方便后续调整!做过形状轮廓化之后也需要删减锚点,保证形状缩放效果。

image

间距:

线性 1.5 面形2

# 命名规范

图标库的 Font Class 前缀为 w-icon。

如遇一类 icon 可以单独成为一个子项目,可以添加一个项目名做为区分。

如:标识 icon 前缀为 w-icon-sign-;状态戳 icon 前缀为 w-icon-stamp-;角标 icon 前缀为 w-icon-mark-。

中文命名:

格式为名称-特点-形状属性

TIP

例:新增、减少、新增-圈、减少-方块、新增-圈-面形

英文命名:

与中文名称相对应。长单词、复合单词视情况提取关键词翻译即可;业务、中医等特别难以翻译的,可以使用拼音。原则上不用自己翻译,提交中文名即可。标识、状态戳、角标的命名方式请参考相关模块的具体说明。

新icon注册流程:

新增前,需要查找是否有相似可以表达意义的icon。如果有,可以直接使用。 确定需要新增时,首先要明确使用场景,需要截图示意。其次要明确icon大概是什么意义,给出关键词后,方可进行绘制。 尽量使用已有元素组合的方式绘制新icon。
上次更新: 12/14/2022, 10:45:02 AM