AppUI规范--样式的定义

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
用途 优先级最高,强行动引导 优先级最高,强行动引导(金融) 优先级低于蓝色/红色主按钮

后续随版本迭代以及样式的更新进行补充中!

你可能感兴趣的:(AppUI规范--样式的定义)