美文网首页
AppUI规范--样式的定义

AppUI规范--样式的定义

作者: egan_ysk | 来源:发表于2016-09-29 14:45 被阅读97次

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规范--样式的定义

    UI规范目的: 保证 APP 中各个页面间的显示效果统一; UI规范化后,允许 APP 中抽取样式资源文件,便于A...

  • 10086 APP设计、标注规范

    这一套移动视觉APPUI设计规范,包含了界面布局、颜色、文字规范、按钮规范、图标规范、图片规范、列表规范、控件规范...

  • 谷歌 HTML/CSS 规范

    背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率。 通用样式规范 协议 省...

  • 编写出色css代码的几个·建议

    1、使用重置样式不要定义全局的,有选择地进行CSS重设,以减少资源浪费重置样式 2、良好的命名规范,不要使用元素的...

  • 4.1 CSS书写规范

    全局CSS样式 CSS样式可细分为3类:自定义样式、重新定义HTML样式、链接状态样式。 自定义样式为设计师自定义...

  • Java的命名规范

    定义java命名规范的目的是为了使项目的代码样式统一,使程序有良好的可读性。 包的命名(全部小写,由域名定义) J...

  • 来学习了解下Flutter及Dart 编码规范?

    dart官方文档中的 【Effective Dart】 规范主要分为四个部分: 样式规范 文档规范 使用规范 设计...

  • 来学习了解下Flutter及Dart 编码规范?

    dart官方文档中的 【Effective Dart】 规范主要分为四个部分: 样式规范 文档规范 使用规范 设计...

  • Android开发-AlertDialog,Progress,P

    AlertDialog 默认样式 单选样式 多选样式 自定义样式 效果图 自定义样式layout Progress...

  • DIV+CSS网页布局常用基础

    文件命名规范全局样式:global.css框架样式:layout.css字体样式:font.css链接样式:lin...

网友评论

      本文标题:AppUI规范--样式的定义

      本文链接:https://www.haomeiwen.com/subject/ctuxsttx.html