设计规范

颜色

颜色分为动态颜色和静态颜色。

• 动态颜色：可以跟随着手机系统的设置而变化的颜色，比如说ios的暗色模式和亮色模式。

• 静态颜色：不受手机系统设置影响的颜色，一般用于沉浸式的页面。

动态颜色

• 在动态颜色模式下，亮色模式和暗色模式中的色彩和数量是一一对应关系，只有色值是不同的。

• 灰色系的颜色，一般用功能性的名字来命名。比如纯白色这样的中性色，命名为“背景”而非“白色”。因为在亮暗模式下不能更改名字，容易造成理解上的冲突。

• 文本色用如“高强调”、“中强调”等语义化的命名有助于使用时进行快速的颜色筛选。

静态颜色

可以直接用暗色模式的颜色，再增添一些极端的颜色，如黑色、白色。注意，在命名时需要与暗色模式的颜色命名区分开。

特效

特效分为动态特效和静态特效。

• 动态特效也是被分为暗色模式和亮色模式
  

  举例：亮色模式下的阴影特效
  

  模拟物体距离用户眼睛的观感距离，如果距离用户眼睛特别近，那么它在页面中展现的层级就稍微高一些。按照这样的规则设置“高”、“中”、“低”和“默认”。

  一般有三层外阴影，这三层外阴影每一层的属性值都不太一样，可以根据自己实际的需要进行调整，这样叠出来的阴影比只有一层会更加真实一些。

  

文字

字体

字重

ios有8种字重，而安卓只有2种字重。为了向下兼容，需要设置为2种字重。

使用场景

间距

L：页面内容距离屏幕的边距

W：横向间距

H：纵向间距

举例：

第一个模块和第二个模块在我们看来间距是32，实际上在装这两个模块的时候是没有间距的。

• 那么没有间距的话，这个间距从哪里来呢？

实际上他是把这个间距写在了容器下方：
间距始终是0，但由于模块拥有下间距32，所以看上去两个模块之间有间距。

图标

线性图标

所有的颜色都是统一的，方便开发直接进行渲染。

面性图标

• 其中彩色图标是不管在亮色还是暗色模式下都保持一致的。
• 其中半透明图标是需要进行亮暗色模式适配的。

场景图标

图标基板

注意要把每一个图标都创建成一个组件。

注意在一些地方使用图标时图标基板的尺寸不适用，此时需要将其设置为“跟随缩放”，以便改动图标大小；并且使用“等比缩放”工具，以防图标描边不适配。

组件

• 使用组件时，所有的颜色、字体等需要使用规范（即使用设置好的样式）。
• 不是组件库越全越多越好，而是需要保持它的精简。小技巧：所有纳入组件库的内容需要满足使用在三个以上页面的条件。

其他

设置封面

1. 点击容器，右键“设置封面”。

2. 设置完封面后，它就会以大的缩略图的形式展现在团队的文件封面图。

上传团队库

1. 点击“组件”
   

2. 点击“管理”
   

3. 点击“添加为团队库”
   

4. 点击“上传更新”
   

调用团队库

1. 点击“组件”
   

2. 点击“管理”
   

3. 勾选“设计规范”