UI规范目的:
- 保证 APP 中各个页面间的显示效果统一;
- UI规范化后,允许 APP 中抽取
样式资源文件,便于App的开发; - 后续有显示效果调整需求时,可统一调整,减少工作量,提高工作效率;
基本样式的制定
文本样式规范
| 样式序号 | 字号 | 颜色 | RBG | 粗体(是否) |
|---|---|---|---|---|
| f40_01 | #40 | #1a1a1a | 26 26 26 | 常规 |
| f40_02 | #40 | #1a1a1a | 26 26 26 | 粗体 |
| f40_03 | #40 | #a7a7a7 | 167 167 167 | 常规 |
| f36_01 | #36 | #1a1a1a | 26 26 26 | 常规 |
| f36_02 | #36 | #a7a7a7 | 167 167 167 | 常规 |
| f36_03 | #36 | #a7a7a7 | 255 255 255 | 常规 |
| f36_04 | #36 | #3d94ea | 61 148 234 | 常规 |
| f32_01 | #32 | #1a1a1a | 26 26 26 | 常规 |
| f32_02 | #32 | #1a1a1a | 26 26 26 | 粗体 |
| f32_03 | #32 | #808080 | 128 128 128 | 常规 |
| f32_04 | #32 | #a7a7a7 | 167 167 167 | 常规 |
| f32_05 | #32 | #3d94ea | 61 148 234 | 常规 |
| f32_06 | #32 | #f25555 | 242 85 85 | 常规 |
| f32_07 | #32 | #1ec859 | 30 200 89 | 常规 |
| f30_01 | #30 | #1a1a1a | 26 26 26 | 常规 |
| f30_02 | #30 | #a7a7a7 | 167 167 167 | 常规 |
| f28_01 | #28 | #1a1a1a | 26 26 26 | 常规 |
| f28_02 | #28 | #a7a7a7 | 167 167 167 | 常规 |
| f28_03 | #28 | #3d94ea | 61 148 234 | 常规 |
| f28_04 | #28 | #1ec859 | 30 200 89 | 常规 |
| f24_01 | #24 | #1a1a1a | 26 26 26 | 常规 |
| f24_02 | #24 | #a7a7a7 | 167 167 167 | 常规 |
| f24_03 | #24 | #3d94ea | 61 148 234 | 常规 |
按钮样式规范
| 按钮样式 | b01_01 | b01_02 | b01_03 |
|---|---|---|---|
| 按钮类型 | 主按钮 | 主按钮 | 主辅助按钮 |
| 按钮尺寸 | 高:80px 宽:match_parent 左右边距:30px 上下边距:20px | 高:80px 宽:match_parent 左右边距:30px 上下边距:20px | 高:80px 宽:match_parent 左右边距:30px 上下边距:20px |
| 圆角 | 10px | 10px | 10px |
| 字体颜色 | #ffffff | #ffffff | #1a1a1a |
| 按钮背景 | #3d94ea | #f25555 | #ffffff |
| 二态字体颜色 | #2b67a3 | #a93b3b | #cccccc |
| 不可点字体颜色 | #2b67a3 | #a7a7a7 | #a7a7a7a |
| 不可点背景颜色 | #cccccc | #cccccc | #cccccc |
| 描边尺寸 | 2px | ||
| 描边颜色 | #1a1a1a | ||
| 不可点描边颜色 | #a7a7a7 | ||
| 用途 | 优先级最高,强行动引导 | 优先级最高,强行动引导(金融) | 优先级低于蓝色/红色主按钮 |
后续随版本迭代以及样式的更新进行补充中!