Skip to content

Latest commit

 

History

History
63 lines (37 loc) · 2.39 KB

CONTRIBUTING-SVG.zh-CN.md

File metadata and controls

63 lines (37 loc) · 2.39 KB

MoonIcon

设计原则

  • 简洁

保持图形的简单和高识别性,去除不必要的装饰和线条,颜色默认为单色

  • 通用

采用目前 UI 中常见的形状和图形,减少认识难度

  • 统一

保证图标大小、线条粗细、端点特征、拐角特征、圆角特征的统一性

基本信息

  • 大小

图标外边框大小范围设定为 24x24px ,这个范围作为所有图标的虚拟边界(一般都会留有空白部分),是对齐、缩放的参照边界

  • 绘制方式

对于大多数图标,采用 线性描边法绘制 ,线的头部和转角形状选择圆弧,默认描边粗细选为 1.2px ,颜色默认为纯黑色 #000000 对于不同的场景图标大小不同时,可根据实际视觉效果与上下文内容调整描边的宽度,推荐分层级地设定,比如对应 16px24px32px 的图标描边设定为 1.2px

图标绘制细节

  • 基本图形与视觉大小

图标的基本图形可分为正方形、长方形、菱形、圆形、三角形、异形等这几种基本形状,为了保持其视觉上大小相等,应该对它们的绝对尺寸进行调整,比如圆形的外边界应大于方形,这样他们看起来是大致相等的

基本图形的视觉大小调整

  • 圆角尺寸

在许多绘制方框、直角的图标中,为了增加图形的亲和力(不过份尖锐),推荐使用 1px 大小的圆角。这样的圆角通常出现在较大的边框、转角中,对于图标中较小的细节、不同角度的折角,圆角的大小可酌情处理

例如 Delete 图标下部设置为 1px 的两个圆角

其他

  • 复杂的 logo 图标

对于 TwitterChromeDiscordGithub 等常用的以 logo 为识别特征的图标,可不适用线性图标的绘制方式,用已有的、常用的图形来表达是一种更为通用的表现形式,这里将继续沿用,暂不做线性图标的创作

注意: 跟进这些品牌 logo 的更新,如淘宝的新“淘”字 logo 使用规范的英文表达,注意图标命名的大小写