移动端app设计规范

标准色
标准字
图标
按钮
模块
布局
01
标准色
colors
颜色
色值 ＃de3737 ＃fe7c2d ＃2fbd2f ＃229de4
使用场景
小面积使用，用于文字，以及按钮，icon
如重要按钮、文字、icon、标签栏选中图标的状态
小面积用于特殊标注的文字，icon
如重要的文字、指示性icon
用于特殊标注的文字，以及按钮，icon等
标准色
标准字
图标
按钮
模块
布局
05
模块
modular
标准色
标准字
图标
按钮
模块
布局
06
布局
layout
顶部导航＋底部导航＋内容区域
页面布局一
标准色
标准字
图标
按钮
模块
布局
06
布局
layout
顶部导航＋内容区域
页面布局二
标准色
标准字
图标
按钮
模块
布局
06
布局
layout
部分内容标注
标准色
标准字
图标
按钮
如状态性文字、指示性icon
用于特殊标注的文字，以及按钮，icon等
如状态性文字、指示性icon
＃303a3e
＃70788c
重要文字用户标题，普通级段落文字，名称等
如名称类，消息文字、简介段落文字
次要文字，文字说明，未选中类图标
如次要的简介、列表描述等
标准色
标准字
来自百度文库
图标
按钮
模块
布局
01
标准色
colors
图标
按钮
模块
布局
06
布局
layout
部分内容标注
标准色
标准字
图标
按钮
模块
布局
06
布局
layout
部分内容标注
谢谢欣赏！
布局
01
标准色
colors
示例展示
标准色
标准字
图标
按钮
模块
布局
02
标准字
Standard word
字号
使用场景
重要标题和按钮
标准字体36px
标准字体34px
标准字体32px
标准字体30px
标准字体28px
标准字体24px
重要标题和按钮
大多用于列表，名称文字
大多用于列表，名称文字 大多用于内容标题，内容信息文字
用于辅助性文字，描述等
标准色
标准字
图标
按钮
模块
布局
02
标准字
Standard word
示例展示
标准色
标准字
图标
按钮
模块
布局
03
图标
icon
标准色
标准字
图标
按钮
模块
布局
03
图标
icon
标准色
标准字
图标
按钮
模块
布局
04
按钮
botton
标准色
标准字
图标
按钮
模块
布局
04
按钮
botton
底部botton
1.iOS设计尺寸640＊1136px
android设计尺寸720*1280；
2.iOS4/5/6适配@2x.png切图，6p适配@3x.png切图； 3.@3x.png切图是@2x.png切图的1.5倍
公共规范
4.android适配@2x.png切图（单独命名保存出切图）； 5.主流适配四种：1080*1920 720*1280 480*800 320*480； 6.以下所有出现单位值均为px 7.设计稿内容距两边边距20px 8.设计文字是微软雅黑，ios和android替换成各自系统文字
颜色
色值 ＃a6b5c4 ＃bfcad8 ＃e4e4e4 ＃ededed
使用场景
特殊图标后缀文字
如登录注册相应图标后缀描述文字
列表后面的描述文字 普通不可点击按钮，文字颜色 所有描边分割线颜色 所有背景的背景色 特殊情况的颜色
如已播放的文字、图标
＃faf5f5
＃b1b6bd
标准色
标准字
图标
按钮
模块
模块
布局
06
布局
layout
部分内容标注
标准色
标准字
图标
按钮
模块
布局
06
布局
layout
部分内容标注
标准色
标准字
图标
按钮
模块
布局
06
布局
layout
部分内容标注
标准色
标准字
图标
按钮
模块
布局
06
布局
layout
部分内容标注
标准色
标准字
图标
按钮
模块
布局
06
布局
layout
部分内容标注
标准色
标准字