设计视觉规范.docx

设计视觉规范.docx界面设计视觉及交互规范
APP设计规范指对APP界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规范和 使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的 沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材,控制安装包 的大小。
APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、 图标、按钮常/态点击态等进行统一的梳理和规范。
_、页面布局规范
安卓：720*1280px
状态栏高度：50px
栏高度：88px
标题栏高度：96px
左上角常用返回
右上角常用操作
卡片式布局
状态栏
Q
闺蜜圈
ios-i4+i5： 640,1136px 状态栏高度：40px
来自卡卡的人生哲学
9 节南山区1公里以内
(...)伊丽莎白斯s
人生啊，就像肥皂泡一样,风一吹就呼呼 的飞上了天，注意到的时候却啪的一下消 失了，就在即将破裂的瞬间，想要自己飞 的更高，但回过神来却来不及了。。。
二级导航tab
—切角10px
切角15px
按钮+圈子
15888
伊丽莎白斯s
20000
ios-i4+i5
底部导航栏高度：98px
安卓720*1280
底部导航栏高度：96px
icon尺寸：60*60px
文案大小：18px
icon尺寸:60*60px
文案大小：18px
页面布局
页面布局和交互规范上建议安卓、ios尽量统一，这样可以避免安卓和ios分别设计一套稿子。
当然土豪公司可以忽略这个建议，安卓和ios分别做专门的设计当然更好。在中小型项目来看，设 计资源紧张的话可以考虑安卓和ios用同一个稿子，分别做相应的微调后输出适用安卓和ios不同 的尺寸要求就可以。
以ios平台的iPhone5的尺寸640*1136px作为标准尺寸设计。在界面设计完成后可以做相应
的微调导出适用ios和安卓尺寸的稿子。这里可以首先统一设计稿输出规范:
。安卓(720*1280px ):界面预览图、界面坐标图、标准界面的图标png文件
。IOS ( 640*1136px ):界面预览图、界面坐标图、1-3倍图矢量图标pdf文件
PS :界面坐标图指在设计已定稿的界面预览图上标注:界面元素的间距、文字的颜色、文字的 字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等
界面坐标图实例
二、标准色规范
色值
使用场景
#ff5e5e
重要
# 333333
小面积使用,用于特别需要强调和突出的文字、按钮和icon
如上导航栏、圈子名称、tab标题（选中）、注册按钮之类
用于重要级文字信息
如帖子正文、类目名称
# 8e8e8e
用于普通级信息、引导词
如呢称、弹层文案、查看更多之类
# bbbbbb
用于辅助、次要的文字信息、普通按钮描边 如时间、来自等补充信息文案
# dedfeO
用于分割线
较弱 # F3F3F3
用于背景色
# ADCOCD
用于地址信息
标准色规范
标准色规范:重要、一般、弱。标准色重要:重要颜色中一般不超过3种,这里的例子重要颜 色之一红色需要小面积使用，用于特别需要强调和突出的文字、按钮和icon ;而黑色用于重要级文 字信息比如标题、正文等。标准色一般：都是相近的颜色,而且要比重要颜色弱,普遍用于普通级 信息、引导词比如提示性文案或者次要的文字信息。标准色较弱:普遍用于背景色和不需要显眼的 边角信息。
标准色-示例
DO
4： 21 PM
＜返回 帖子 0
tf5e5e
来自军嫂来报道# 8e8e8e 2345
普通级信息、引导调
可爱的小猪# 8e8e8e
#bbbbbb辅助、次要的文字信
特别需要强调和突出的文字、按钮
#ff5e5e
#33333洗不说他有没有钱，有没有像样的工作，
用丁拜飒文字信但我爱他，我哥前段时间去他那里，4点到 的杭州，7点道德上海，一开始打他电话还 说在哪里等着他过去接我哥，可是后来竟 然电话打不通，我哥在上海没有亲戚朋 友，又打电话给我爸我爸气的不得了 “我 又打他电话，一直打不通.•••

半穿, T 种^#bbbbbb
轴助、次要的文字信
# dedfeO
用于分割线
评论4
从新到旧4
标准色实例
三、标准字规范
样式
字号
36px
32px
使用场景
用在少数重要标题
如上导航标题
用在一些较为重要的文字标题或操作按钮
如搜索