常用于|如何从零构建UI组件及设计规范（三）：全局样式 ui|组件|构建

本篇为如何从零构建UI组件及设计规范之设计全局样式篇，主要介绍在组件和界面设计中，涉及全局样式的最基础构成元素，基础样式的使用及规则内容。

文章图片
《如何从零构建UI组件及设计规范》共分为5个系列，分别为《一：介绍篇》、《二：设计原则》、《三：全局样式》、《四：基础组件》、《五：通用模版》
本篇介绍涉及全局样式的最基础构成元素，基础样式的使用及规则内容，它是定义设计规范中的最基础条件，决定了整个产品的风格及调性。

Color 颜色
Font 字体
Icon 图标
Shadow 投影
Voicce 文案
Space 间距

01 Color 颜色颜色的应用能够为九曳的产品和界面带来统一且可识别的一致性。
品牌色平台使用九曳新品牌绿色作为主色调，其中 Light 常用于 hover，Dark 常用于 active。一般情况下，按钮、标签页等除特别标注组件外，组件的颜色以「辅助品牌色」为准。

文章图片
中性色中性色常用于文本、背景、边框、阴影等，可以体现出页面的层次结构。整体中性色偏一点点蓝，让其在视觉体现上更加干净。根据使用场景，中性色主要被定义为3类：文字、线框、背景。

文章图片
辅助色辅助色为界面设计中的特殊场景颜色，常用于信息提示，比如成功、警告和失败。

文章图片
错误案例在产品本身中使用到品牌的色彩数量较少，一般除按钮以外，基本还是「辅助品牌色」，即钴蓝色调为准。

文章图片
02 Font 字体字体系统遵循一致、灵活的原则推荐 macOS（iOS）优先的策略，在不支持苹方字体的情况，使用备用字体。
字体规范中文优先级：PingFang SC、Hiragino Sans GB、Microsoft YaHei
英文优先级：Helvetica Neue、Helvetica、Arial

文章图片
字体代码
-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif主字体为了更好的阅读体验，和一个屏幕展示更多的信息，我们将原先的 14 更改为 13 大小。
考虑到我们系统的使用对象非常注重效率的提升，第一个屏幕可容纳的信息量是非常重要，13 大小既能满足用户的可读性，信息之间的距离也能间接的变大，给用户更舒适、清晰的阅读感受。
字号正文和辅助字号使用 Regular 字重。所有的标题使用 Medium，以突出层次，让信息清晰。字体加粗的代码是600。