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 | ||
用途 | 优先级最高,强行动引导 | 优先级最高,强行动引导(金融) | 优先级低于蓝色/红色主按钮 |
后续随版本迭代以及样式的更新进行补充中!