Android中色值统一的方案

最近公司在做项目整体UI效果统一的工作，这其中的基础就是色值统一，目前我们参考了阿里的方案，同时考虑了我们公司深色模式的需求，整理了以下方案：

初版大纲：

1. 设计师在设计图上标注颜色的别名，比如标注为 firstBg，这个别名在正常模式下对应的色值名称为：white——#ffffff，在深色模式下对应的色值名称为：black——#000000
2. 设计师出一份规范的色值表格，包含场景，别名，色值名，色值本身等
3. 设计图中所有的色值都必须从这个色值表中取值，不能自己随便定义
4. 开发进行开发时，统一使用设计图上标注的色值别名，不能直接使用色值名称或者色值本身，更不能自己随便新增和更改色值别名
   5：新建一个UI的moudle，专门用来存放统一后的色值、demin等跟设计相关的内容

下面是参考的色值方案：

image.png

下面是我们公司的方案：

一：设计系统介绍

Design目标：

1. 通过一套通用的设计系统去统一规范产品中的体验问题
2. 促进设计与研发之间的协作，成为开发者之间的共同语言
3. 通过设计系统，解决通用需求，提高效率，让设计师研发做一些更需要创造力的东西。

设计变量

1. 基础色：基于品牌色生成的一套基础梯度色盘，使用基础色中的颜色可以进一步定义场景功能色。
2. 中性色：又称为无彩色系，在界面中调和色彩搭配，同时有利于拉开内容层次，常用于文字、背景、边框、分割线/……
3. 动态色彩
   A：业务主色：
   1.产品的代表色，常用于主要的按钮、文字、重点强调……
   2.基于产品业务属性，还提供了两套主色，卖家蓝、艺术品黄

B：功能色：传达成功、警告、错误
C：文本色：四个不同层级的文本/图标，分别代表：
D：链接色：产品中超链接的文本、可点击的文本
E：背景色：各级别前后关系的背景，导航、卡片等
F：填充色：容器的背景颜色，图片头像背景、按钮背景
G：描边：按钮描边、图片描边
H：禁用色：表达禁用的元素的填充、描边、文本、背景
I：阴影色：模拟光影，表现前后关系，常用于悬停导航、下拉菜单、气泡
J：渐变色：增加图层色感丰富度，通过多个颜色、角度组合使用，常用于标签、按钮

4.基础组件

image.png

二：基础色

image.png
image.png
image.png
image.png
image.png
image.png
image.png

三：动态色(Light / Dark)

image.png
image.png
image.png
image.png
image.png

四：字体变量

1.命名规则：tv_字号场景字重
2.常规变量色 tv_16_text_primary_medium
3.代表功能的 tv_16_success_medium
4.深浅模式下固定色 tv_16_cwhite_1_medium
5.不加粗的（rugular）不用写粗细 tv_16_text_primary

image.png
image.png
image.png