# 图标
WinDesign 遵循协同、便捷、高效的设计原则,由于人类的视觉倾向于感知连续的形式而不是离散的碎片,所以对齐的信息更有助于用户的识别,其次对齐的元素在视觉上也有视线引导的作用。
# 设计原则
准确:
能准确表达图标的含义,保证图标的可读性和易懂性;在各种屏幕上显示清晰,减少模糊和锯齿的出现;遵守医学规范,图标命名描述便于他人查找。简洁:
形式与线条去繁从简,在保证充分表达图标含义的前提下,去除多余锚点和细节;绘制时保证参数的简化,尽量消除小数点以及非整数的角度。统一:
保证图标大小、线条粗细、端点特征、倾斜角度等的统一性;系列图标构造上保持一致性,将变化控制在一定范围内。# 画板与辅助
实际画布应控制在栅格中心 14*14px 的区域,周围留有 1px 的出血。在一些特殊情况允许内容适当延展,以确保图标视觉重量上的统一。 在绘制的过程中应根据特性选取相应的辅助线来控制图形样式;在必要时,可以将内容扩展到辅助线之外。
# 设计指引
线条:
平直的线条粗细为1.5px,不允许虚边,虚像素的出现!线条末端的终点应为与线条同宽的圆角端点。绘制较复杂的图标时,整体轮廓线条粗细应该使用1.5px,内部结构可以适当调整,但是整体需要和谐统一。圆角:
线性图标外边框圆角0.4px,内边框圆角0.2px,不允许内边框不使用圆角。角度:
线条倾斜角度应为15度的倍数,以便在低分辨率的情况下仍有较高的线条清晰度。锚点:
绘制文件必须保留未轮廓化之前的线条!方便后续调整!做过形状轮廓化之后也需要删减锚点,保证形状缩放效果。间距:
线性 1.5 面形2# 命名规范
图标库的 Font Class 前缀为 w-icon。
如遇一类 icon 可以单独成为一个子项目,可以添加一个项目名做为区分。
如:标识 icon 前缀为 w-icon-sign-;状态戳 icon 前缀为 w-icon-stamp-;角标 icon 前缀为 w-icon-mark-。
中文命名:
格式为名称-特点-形状属性TIP
例:新增、减少、新增-圈、减少-方块、新增-圈-面形