IOS系统

文字规范

IOS字体

（IOS8）中文:华文黑体／黑体－简  英文:Helvetica Neue

（IOS9）中文:苹方  英文:San Francisco

在PS中，中文字体选择“黑体－简/Heiti SC"，英文字体选择Helvetica Neue

系统字号

36px   用于顶部导航栏栏目名称，背景色微白色时，文字使用黑色，背景为其他颜色时，文字使用白色

30px   用于标题文字和大按钮文字，颜色使用＃333333

28px   用于主要文字、正文和小按钮文字，颜色使用＃333333

24px   用于辅助文字时，颜色使用＃666666.     用于提示性文字时，颜色使用＃999999

22px   用于底部标签栏文字时，颜色使用＃666666.     用于正文中的次要文字时，颜色使用＃cccccc

18px   用于提示文字时，如底部标签栏上购物车图标上的数字，或对话图标上的消息数字，颜色使用白色

框架(以iPhone6为例)

内容区中，每个区块的边距为20px,模块间距为30px

IOS界面与图标规范

iPhone3GS@1x

App图标(应用图标) 57x57

App Store图标(上传至应用商店的应用图标) 512x512 

标签栏导航图标(底部标签导航栏上的图标) 25x25

导航栏图标(分布导航栏上的功能图标) 22x22

工具栏图标(底部工具栏上的功能图标) 22x22

设置图标(列表式的表格视图中左侧功能图标) 29x29

Web Clip图标(小程序或者网站，直接放在桌面上) 57x57

iPhone4/4s@2x

App图标(应用图标) 114x114

App Store图标(上传至应用商店的应用图标) 512x512

标签栏导航图标(底部标签导航栏上的图标) 50x50

导航栏图标(分布导航栏上的功能图标) 44x44

工具栏图标(底部工具栏上的功能图标) 44x44

设置图标(列表式的表格视图中左侧功能图标) 58x58

Web Clip图标(小程序或者网站，直接放在桌面上) 114x114

iPhone5/5s/6@2x

App图标(应用图标) 120x120

App Store图标(上传至应用商店的应用图标) 1024x1024  圆角160

标签栏导航图标(底部标签导航栏上的图标) 50x50 颜色＃666666    文字22px 颜色＃666666  总高度为98px

导航栏图标(分布导航栏上的功能图标) 44x44   标题30px

工具栏图标(底部工具栏上的功能图标) 44x44

设置图标(列表式的表格视图中左侧功能图标) 58x58

Web Clip图标(小程序或者网站，直接放在桌面上) 120x120

顶部标签栏(TAB切换栏) 高60px，上下间距各10px，总高度88px，文字28px 颜色＃666666

iPhone6Plus@3x

App图标(应用图标) 180x180

App Store图标(上传至应用商店的应用图标) 1024x1024   圆角160

标签栏导航图标(底部标签导航栏上的图标) 75x75

导航栏图标(分布导航栏上的功能图标) 66x66

工具栏图标(底部工具栏上的功能图标) 66x66

设置图标(列表式的表格视图中左侧功能图标) 87x87

Web Clip图标(小程序或者网站，直接放在桌面上) 180x180

图标圆角参照

57x57  圆角10

114x114 圆角20

120x120  圆角22

180x180  圆角34

512x512  圆角90

1024x1024  圆角180

栏（以iPhone6为例）

状态栏 40x750

导航栏 88x750       标题文字40px       按钮文字24px

标签栏(位于界面最下方，底部导航栏，手机上不超过5个) 98x750       图标60x60       阴影块153x88

工具栏(工具栏和标签栏在一个视图中只能存在一个)

图片(以iPhone6为例)

图片比例

1  :  1    一般用在社交类应用的头像上，电商类应用的产品列表上，以及选择图片的页面上

3 : 2    一般用在电商类应用的产品详情页上

4 : 3和6 : 9   是常见的照片原始比例，在展示图片类应用的卡片列表页上使用

用户头像

帖子列表 44x44

帖子详情 60x60

消息列表 80x80

个人资料 96x96

个人中心  类似于登录上边的头像 144x144

商品图片

统一不用圆角，1px灰色描边，1:1比例或者3:2比例

店铺列表购物车 140x140

团购列表 240x160

商品列表 140x140

商品详情页 600x400

无数据图片

数据为空时的页面图标  200x200    距离下边的提示文字36px

列表或者有图片的地方  背景色＃f0f0f0   图标＃cccccc

头像底图（默认头像）1:1比例  背景色＃e5e5e5  图标＃cccccc

表单控件(以iPhone6为例)

单选框

未选中状态 40x40  2px描边  描边颜色＃e5e5e5

选中状态 40x40 8px描边 

复选框

未选中状态 40x40  2px描边  描边颜色＃e5e5e5

选中状态 里边的对勾图标24x24

文本框

高56px  背景色#fafafa   边框线2px 颜色＃e5e5e5    提示文字28px 颜色＃cccccc  输入之后文字颜色＃333333

下拉框

高56px 边框线2px 颜色＃e5e5e5    提示文字28px 颜色＃333333 下拉箭头24x24 距离边框20px 

按钮规范(以iPhone6为例)

背景＋文字

按照强烈意愿，安排颜色

高64px 上下间距各12px  两边间距各20px

默认状态设计方式：1.可用有颜色的背景色，文字颜色白色，2.按钮背景色白色，边框＃cccccc,文字颜色＃666666.

点击状态设计方式：1.可用有颜色的背景色，文字颜色白色，2.按钮背景色白色，边框＃cccccc,文字颜色＃666666.

不可用状态设计方式：1.文字颜色白色，按钮背景色＃e5e5e5；2.文字颜色＃cccccc，按钮背景色白色，边框2px 颜色＃e5e5e5。

背景＋图标

一般用于详情页，尺寸：24x24

1.按钮背景可用颜色，文字用白色，图标和文字间距8px

2.按钮背景可用白色，文字用＃666666，图标颜色＃cccccc，边框用＃cccccc

图标＋文字

有的加背景，有的不加(比如：点赞设计) 一般设计为线性图标

图标尺寸：48x48  与文字之间的间距10px   文字28px  颜色#333333

文字

一般用于顶部导航栏，一般中文字符不超过4个字符

文字36px 

其他组件(以iPhone6为例)

加载更多

一般以文字加图标的形式出现，根据设计风格决定是否用外边框

1.高64px， 无需背景色，外边框2px 颜色＃e5e5e5。字号28px，颜色＃333333。与图标间距5px

2.高64px， 背景色＃e5e5e5。字号28px，颜色＃333333。与图标间距5px

3.不需要图标，不需要边框

非模态浮层

轻量级提示，定位在页面中心，显示2秒消失，一般有透明度的黑色或者白色

高80px，颜色白色，透明度80%。文字28px，颜色白色，居中。

模态浮层

对话框，需要用户进行确认。一般使用透明度90%的黑色或者白色

宽540px，里边的分割线2px，颜色＃cccccc。提示文字信息28px，颜色＃333333。需要点击确认的文字框高88px，文字颜色可选，字号32px。

Android系统

文字规范

（Android系统）中文:Droid Sans Fallback  英文:Droid Sans

（Android4.X）中文:Droid Sans Fallback  英文:Roboto

（Android5.0）中文:思源黑体  英文:Roboto

在PS中，中文字体选择“方正兰亭黑"，英文字体选择Roboto

系统字号

36px   用于顶部导航栏栏目名称，背景色微白色时，文字使用黑色，背景为其他颜色时，文字使用白色

30px   用于标题文字和大按钮文字，颜色使用＃333333

28px   用于主要文字、正文和小按钮文字，颜色使用＃333333

24px   用于辅助文字时，颜色使用＃666666.     用于提示性文字时，颜色使用＃999999

22px   用于底部标签栏文字时，颜色使用＃666666.     用于正文中的次要文字时，颜色使用＃cccccc

18px   用于提示文字时，如底部标签栏上购物车图标上的数字，或对话图标上的消息数字，颜色使用白色

Android图标适配

LDPI@0.75x

App图标(应用图标) 36x36

操作栏图标(一般用在导航栏或者工具栏上的图标) 24x24

情境图标(应用程序中使用小图标凸显操作) 12x12

通知图标(显示在状态栏的图标，全部是白色) 18x18

Google Play 512x512

MDPI@1x

App图标(应用图标) 48x48

操作栏图标(一般用在导航栏或者工具栏上的图标) 32x32

情境图标(应用程序中使用小图标凸显操作) 16x16

通知图标(显示在状态栏的图标，全部是白色) 24x24

Google Play 512x512

HDPI@1.5x

App图标(应用图标) 72x72

操作栏图标(一般用在导航栏或者工具栏上的图标) 48x48

情境图标(应用程序中使用小图标凸显操作) 24x24

通知图标(显示在状态栏的图标，全部是白色) 36x36

Google Play 512x512

XHDPI@2x

App图标(应用图标) 96x96

操作栏图标(一般用在导航栏或者工具栏上的图标)  实际区域64x64，图标区域48x48

情境图标(应用程序中使用小图标凸显操作)  32x32

通知图标(显示在状态栏的图标，全部是白色)  48x48

Google Play  512x512

XXHDPI@3x

App图标(应用图标) 144x144

操作栏图标(一般用在导航栏或者工具栏上的图标) 64x64

情境图标(应用程序中使用小图标凸显操作) 48x48

通知图标(显示在状态栏的图标，全部是白色) 72x72

Google Play 512x512

XXXHDPI@4x

App图标(应用图标) 192x192

操作栏图标(一般用在导航栏或者工具栏上的图标) 128x128

情境图标(应用程序中使用小图标凸显操作) 64x64

通知图标(显示在状态栏的图标，全部是白色) 96x96

Google Play 512x512

图标圆角参照

48x48  圆角8

72x72 圆角12

96x96  圆角16

144x144  圆角24

192x192  圆角32

512x512  圆角90

个人中心

头像＋个人信息＋功能模块

头像区域

1.头像居中放置，背景可采用模糊加深色遮罩，随着头像的选择变化；也可以用固定的深色背景

2.电商应用的个人中心，可采用头像居左设计

个人信息

文字＋数字形式（如：待发货）

功能模块

1.表单形式（案例：美团－－我的页面）

2.图形形式（案例：支付宝－－首页）

导航设计

扁平导航

标签导航（案例：微信／App Store／大众点评）

舵式导航（案例：博美／美拍）

宫格式导航（案例：支付宝／爱奇艺）

内容主导式导航

陈列式导航（案例：厨房故事／Dribbble／Pinterest）

旋转木马式导航（案例：iPhone自带的天气应用）

列表式导航

列表式（案例：iPhone系统设置界面）

抽屉式导航（案例：手机QQ）

其他导航

点聚式导航（案例：Path）

瀑布式导航（案例：网易新闻／Vine）

详情页

全局按钮

1.底部工具栏上放着半透明的全局按钮（案例：京东商品详情）

2.顶部悬浮全局按钮，按钮在详情页中间（案例：美团团购详情）

快速通道

1.在导航栏的右侧加一个弹出菜单（案例：淘宝详情页的首页快速入口）

启动页

品牌宣传类

直接使用应用的基础造型和配色，配上应用的的名称即可

首页样式类

1.截取应用主页的部分元素进行展示

2.截取应用主页的全部元素

情感故事类

1.使用照片

2.插画

节日氛围类

QQ音乐中秋节启动页

引导页

功能介绍类

文字配合界面、插图的方式

1.界面配合文字，直接截取重点介绍的页面进行设计，辅以文字介绍

2.插图配合文字，根据产品的功能特点进行提炼，文字分为2个层次，大标题和小标题，大标题要控制在9个字以内，小标题是对其功能模块的进一步补充说明（案例：易信应用的引导页）

使用说明类

1.使用透明蒙层加插图的方式

选择好需要说明的功能界面进行截图，在上边叠加一层黑色且透明度为70%的半透明效果。配上简单的插画说明文字，文字颜色不宜超过2种

2.采用动画的方式

1.界面配合文字，直接截取重点介绍的页面进行设计，辅以文字介绍（案例：土巴兔应用的引导页）

2.采用动态图说明一些特殊功能（案例：bump应用的引导页）

情感故事类

1.插图配文字（案例：片刻应用的引导页）

2.视差动画（案例：same应用的引导页）

3.视频展示（案例：Cal应用的引导页）