视觉规范 Visual Guidelines

图标 Iconography

1. 系统图标
2. 功能图标
3. 按钮图标
4. 系统图标样例
5. 功能图标样例
6. Vue.js Reference
7. React Native Reference

图标通过图形化的语义帮助用户理解当前操作。图标应该清晰易读，既能帮助用户更清晰地理解界面、完成任务，也能够增加视觉趣味性。

适用情况

• 引导和帮助用户理解页面信息和操作。

不适用情况

• 某个图标含义比较抽象且难于理解时，图标单独出现，且图标旁边没有文字说明。建议：使用文字按钮或者在图标旁边加上文字。
• 不同页面上表示同样含义的图标样式不同，缺乏统一性。
• 非影响使用的情况下，增加除以下图标风格以外的新风格。建议：增添新图标时，应维持新增图标和现有图标风格的一致性。

云闪付 App 内图标按风格分为两种：系统图标与功能图标。 应当明确两者的作用和使用场景，不可混淆。

系统图标

系统图标用于 App 中在“我的”、“消息设置”、“转账”等系统层面的功能模块中，代表系统功能的入口。 以下为图标示例：

系统图标风格为纯色的面性图标，根据图标位置的不同，区域大小上可以选择 24×24（无圆形容器），24×24（带 36×36 圆形容器）和 28×28（带 42×42 圆形容器）几种情况。

基础风格

系统图标为纯色扁平面性图标，颜色仅可使用系统主色和辅助色中的颜色。 绘制时应保持图标的简洁纯色扁平风格，仅保留足够图标辨识的必要细节，避免出现透视，避免细节过多，避免出现系统色以外的颜色，避免渐变，避免风格不一致。

视觉修正

图标绘制时应参考使用组件库中提供的 24×24 图标网格。 绘制图标不要刻板追求数值上的等宽等高，而是考虑到不同形状在视觉上的不同感官利用边缘像素进行视觉修正，使得图标看上去尺寸和谐。 当图标造型接近于以下形状时，可参考建议大小绘制图标，实际可根据图标造型具体调整： 正方形 18×18，矩形 16×22，圆形 20×20

圆角

圆角依据图标本身造型需求，选择使用 1pt 或者 2pt 的圆角，避免过度尖锐，避免过度圆润，保持观感自然。 图标内镂空处，如果宽度不超过 2pt，应尽量保持直角，有助于保持图标造型的简洁干净。

容器

系统图标作为入口横向排列或者在双行列表中，需放置在圆形容器内。 圆形容器背景色为 9% 不透明的图标颜色，来强化对应颜色的分类。容器有 36×36 和 42×42 大小两种

功能图标

按钮图标以图标的形式承担了按钮的功能，通常出现在导航栏上，以及界面中不宜占用太多空间的地方。没有辅助文字情况下，所使用的图标尤其需要清晰易懂。 功能图标风格为纯色的线性图标，区域大小为 24×24。

基础风格

系统图标为黑白或灰色扁平线性图标，颜色仅可使用系统颜色中的灰度色。 绘制时应保持图标的简洁扁平线性风格，使用 2pt 的线性造型，避免出现透视，避免风格不一致，避免细节过多，避免出现彩色或渐变。

视觉修正

功能图标的视觉修正与系统图标一致，使用提供的网格，注意保持图标视觉大小一致即可。

圆角

圆角依据图标本身造型需求，选择使用 1pt 或者 2pt 的圆角，避免过度尖锐，保持观感自然。线的末端同样应保持适当圆角。

按钮图标

这类图标比较特殊，用在按钮里对按钮起加强解释作用，图标大小为 18×18，图标造型与系统图标保持一致。

系统图标样例

功能图标样例

<up-icon color-class="has-text-secondaryRed" name="up_iconsys_transfer"></up-icon>

<up-icon color-class="has-text-secondaryCyan" bg-class="has-bg-secondaryCyan5" name="up_iconsys_life"></up-icon>

<up-icon color-class="has-text-secondaryOrange" bg-class="has-bg-secondaryOrange5" name="up_iconsys_student" size="md"></up-icon>

<Icon name='sys_coin' size="sm" color={Theme.secondaryColorGreen2}/>

Vue.js Reference

React Native Reference