目录
当前位置: 首页 > 文档资料 > Pile.js 中文文档 >

Icon 图标

优质
小牛编辑
155浏览
2023-12-01

图标定义

图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识,界面中的图标是功能标识。它源自于生活中的各种图形标识,是计算机应用图形化的重要组成部分。

命名
图标遵循统一命名规则,即 类型_位置_名称
例:ico_nav_time
适用范围
内容表意单一,且需要被强调/区分/解释/缩略
使用限制
保持简洁:减少复杂元素的出现。可用圆、矩形等基础元素进行绘制
品牌个性:准确直观的表达品牌设计理念和表意
应用发展:具备识别性、统一性、扩展性
创造喜悦:对图形的定义附有创意,能够感知到设计细节
比例
关键形状是网格的基础。通过使用这些核心形状为指导,你可以保持整个相关产品的图标一致的视觉比例
尺寸
系统图标以16px为基础。当创建图标时,按100% 比例来设计,精确到像素
图标的大小应保持在有效区域内。如果需要额外的视觉考量也应不越过修剪区域
边角
一致的圆角半径是一套系统图标的关键。结合滴滴品牌和logo特性,以0px和1px圆角的组合,图形上半部分统一使用0px圆角,图形下半部分统一使用1px圆角
线的粗细统一为1px。分割区域不做圆角修饰,封闭图形须有切口,切口宽度统一为2px,切口角度为垂直90°或者倾斜45°,在遵守设计原则的基础上,以视觉的最优化微调设计原则
调和
一致性有助于用户加强对品牌的印象
调和
有新增图标需求,首先寻找常用图标集中是否已存在
图标新增,按流程进行
严格执行图标绘制方法
如遇紧急情况,来不急提交评审流程,可先行使用,后续评审并替换为评审后的内容
评审人:李海威、韩少鹏