ios系统设计规范
ios系统设计规范
制作APP步骤
4,图标
3， 启动页
loading
闪屏
3，引导页
猫眼电影引导页
发现--了解影片细节
x详情页
实时--最新热映电影
主页
影院---最全周边搜索
影院
书法字体
1，书法家写
2，古人写
古代书法家
尽情使用
书法迷@
选择识别性高的文字，在ps里转为路径，调整
3，自己写
制作方法a
通过查找古人字体，修改，做旧
现在字体
优优书法
字库字体修改
建议老板购买，或租用
字体设计
在百度上输入关键词空格书法
2， 登录注册
登录
邮箱、手机号、用户名、会员卡、
密码
记住密码
忘记密码
跳过或返回
快捷入口、快速注册
登录按钮
提示框
灰色，
橙色
绿色
第三方登录
微信、
微博
腾讯
支付宝
注册
手机注册
手机号
协议
验证码
设置密码
上传头像
用户名或昵称
性别
年龄
添加地址
账户绑定
安全设置
邮箱登录
常用邮箱
昵称
密码
确认密码
保存密码
协议
昵称注册
数字是，制作顺序。从上到下是视觉顺序
1， 主页
2， 二级页面
颜色
APP颜色比重
背景色
面积最大的颜色，承载内容的摆放
70%
主色调
体现产品的性格和表达功能
20%
辅助色
提示按钮，交互
5%
点缀色
各种注释颜色
5%
APP颜色分类
红色
新闻类
权威类
黄色
美食类
儿童类
橙色
购物类
玫红色
女性类
自拍类
蓝色
社交类
科技类
绿色
效率类
健康类
紫色
神秘类
奢华类
彩虹色
相机类
奇葩类
企业色
辅助色
中性色
黑白灰（无色相）
偏色相得灰
建议颜色
背景色
深色
#f5f5f5
H:0;S:0;B:96
百度外卖
#f3f3f3
H:0;S:0;B:95
京东
苏宁
#f0f0f0
H:0;S:0;B:94
美团
大众点评
易信
#ededed
H:0;S:0;B:93
淘宝
饿了么
#e8e8e8
H:0;S:0;B:91
天猫
拉手网
#e1e1e1
H:0;S:0;B:88
百度糯米
#d9d9d9
H:0;S:0;B:85
微信
#f0f0f6
H:240;S:2;B:96
网易
微信
苹果官方
陌陌，黄色灰
网易云音乐
蓝灰
#b6d7dc
H:230;S:3;B:96
包括分割线
浅色
#ffffff
白色
H:0;S:0;B:100
#fafafa
H:0;S:0;B:98
主色
淘宝红
#ff5000
H:196;S:100;B:100
天猫红
#dd2727
H:0;S:82;B:87
京东红
#f23030
H:0;S:80;B:95
百度外卖红
#ff2d4b
H:351;S:82;B:100
网易红
#df3031
H:0;S:78;B:87
新浪红
#e62f17
H:7;S:90;B:99
苏宁黄
#ffc001
H:45;S:99;B:100
美团黄
#ffd705
H:50;S:98;B:100
爱鲜蜂黄
#ffd600
H:50;S:100;B:100
饿了么蓝
#4392e9
H:209;S:78;B:91
美团外卖蓝
#06c1ae
H:174;S:97;B:76
glide蓝
#00a6fb
H:200;S:100;B:98
字体颜色
标题
#323232
H:0;S:0;B:20
网易
#1a1a1a
H:0;S:0;B:10
新浪
#404040
H:0;S:0;B:25
搜狐
#454545
H:0;S:0;B:27
蓝黑
#061b28
H:20;S:87;B:16
蓝黑
#3e3e48
H:240;S:14;B:28
白色
#ffffff
B:30以下都可以用
摘要
#666666
H:0;S:0;B:40
#909090
H:0;S:0;B:56
腾讯
#949494
H:0;S:0;B:58
#999999
H:0;S:0;B:60
B的值控制在40--70之间
正文
#323232
H:0;S:0;B:20
#646464
H:0;S:0;B:39
底部操作栏的图标的灰色
苏宁
#323232
H:0;S:0;B:20
百度外卖
#585858
H:0;S:0;B:35
京东
#5d5d5d
H:231;S:12;B:42
淘宝、天猫
#5f646e
H:220;S:14;B:43
微信
#7a7a7a
H:213S:7;B:51
蓝灰
作品的评判标准
布局
界面结构和操作流程是否匹配
界面的布局是否符合软件的功能定义合并跳转的逻辑
界面的元素是否规整，水平与垂直对齐
按图标的大小是否合理保持一致，内容间距是否合理
行高间距是否保持一致，内容间距是否合理
是否恰当的利用窗体和控件的空白，以及分隔线条
色彩
界面的色调是否符合产品定义，让人感觉舒适
重要的对象是否利用醒目的色彩表示，或者加强对比
色彩的使用是否符合流行趋势以及用户心理
让色盲与色弱的用户是否可以使用
一致性
图标风格是否具有一致性
界面的风格是否统一
同类的界面元素是否有相同的外观和操作方式
是否符合广大用户 使用同类软件的习惯
完整性
共同的界面元素是否完整
按键的状态是否齐全
执行选择操作之前，是否有提示和确认
是否提供进度条，动画反应正在进行的比较耗时的过程
易用性
用户界面是否与软件的功能比较融洽
是否符合用户的使用环境
界面元素是否有错别字，或者措辞模糊，逻辑混乱
输入数据或递交数据时，是否进行相应的数据提示
切图标注
标注
Mark Man、Pxco
各要件的距离（ 要件：图标）
文字间距，上下左右
列表高度与宽度
列表图标的高度
文字大小
透明度
字体颜色
分割线的颜色
列表颜色
背景颜色
辅助色
点缀色
主色调
居中的话，直接标注，文字上下居中
距离，大小
颜色（#六进制、HSB/RGB）
切图
终极法则
切工程师搞定不了的
Cutter Man、Pxcook（ 可存储psd的源文件）
给图层，或图层组命名，然后在切图，导出后直接可用
避免单数，最好能是4的倍数关系，需要设置固定尺寸或裁剪画布
导出图标之前需要将形状合并，或者转为智能对象
2X:640*1280;750*1334
底部操作栏
（标签栏）
98px
底部图标尺寸
60px*60px以内
常用
50px
48px
46px
44px
字号
中文
常用
20px
中等
视觉最好
24px
英文
14px
字体
中文
平方
ios9
谷歌思源
冬青黑简体
华文Heiti SC
方正黑体简
英文
San Francisco text
helevetica
字号
标题文字
30--40px
常用的：34px
副标题文字
32--36px
正文字号
24--32px
常用的
24px
中等，不能太粗
辅助文字
20--24px
常用的
20px
中等
最小文字
20px
其他
安全距离
18px
20px
24px
30px
34px
40px
常用
热区
最小点击范围
44*44px
框容器
搜索框
60px
常用字号
24px
30px
评论框，输入框，地址框，对话框
启动图标
10024*1024px正方形
4（s），5（c，s），6（s）
电池电量条
（状态栏）
40px
顶部操作栏
（导航栏）
88px
顶部大标题
32--40px
常用
34px
一般用粗体
顶部按钮
常用
30--46px
高度不大于60px
列表
高度：88px;字号30px
高度：80px
少数
70px
90px
100px
104px
最小的列表：64px
内容模块间最小间距为16px
ios 规范
启动图标
10024*1024px正方形
4（s），5（c，s），6（s）
电池电量条
（状态栏）
40px
顶部操作栏
（导航栏）
88px
顶部大标题
32--40px
常用
34px
一般用粗体
顶部按钮
常用
30--46px
高度不大于60px
列表
高度：88px;字号30px
高度：80px
少数
70px
90px
100px
104px
最小的列表：64px
内容模块间最小间距为16px
框容器
搜索框
60px
常用字号
24px
30px
评论框，输入框，地址框，对话框
底部操作栏
（标签栏）
98px
底部图标尺寸
60px*60px以内
常用
50px
48px
46px
44px
字号
中文
常用
20px
中等
视觉最好
24px
英文
14px
字体
中文
平方
ios9
谷歌思源
冬青黑简体
华文Heiti SC
方正黑体简
英文
San Francisco text
helevetica
字号
标题文字
30--40px
常用的：34px
副标题文字
32--36px
正文字号
24--32px
常用的
24px
中等，不能太粗
辅助文字
20--24px
常用的
20px
中等
最小文字
20px
其他
安全距离
18px
20px
24px
30px
34px
40px
常用
热区
最小点击范围
44*44px
制作APP步骤
4,图标
3， 启动页
loading
闪屏
3，引导页
猫眼电影引导页
发现--了解影片细节
x详情页
实时--最新热映电影
主页
影院---最全周边搜索
影院
书法字体
1，书法家写
2，古人写
古代书法家
尽情使用
书法迷@
选择识别性高的文字，在ps里转为路径，调整
3，自己写
制作方法a
通过查找古人字体，修改，做旧
现在字体
优优书法
字库字体修改
建议老板购买，或租用
字体设计
在百度上输入关键词空格书法
2， 登录注册
登录
邮箱、手机号、用户名、会员卡、
密码
记住密码
忘记密码
跳过或返回
快捷入口、快速注册
登录按钮
提示框
灰色，
橙色
绿色
第三方登录
微信、
微博
腾讯
支付宝
注册
手机注册
手机号
协议
验证码
设置密码
上传头像
用户名或昵称
性别
年龄
添加地址
账户绑定
安全设置
邮箱登录
常用邮箱
昵称
密码
确认密码
保存密码
协议
昵称注册
数字是，制作顺序。从上到下是视觉顺序
1， 主页
2， 二级页面
颜色
APP颜色比重
背景色
面积最大的颜色，承载内容的摆放
70%
主色调
体现产品的性格和表达功能
20%
辅助色
提示按钮，交互
5%
点缀色
各种注释颜色
5%
APP颜色分类
红色
新闻类
权威类
黄色
美食类
儿童类
橙色
购物类
玫红色
女性类
自拍类
蓝色
社交类
科技类
绿色
效率类
健康类
紫色
神秘类
奢华类
彩虹色
相机类
奇葩类
企业色
辅助色
中性色
黑白灰（无色相）
偏色相得灰
建议颜色
背景色
深色
#f5f5f5
H:0;S:0;B:96
百度外卖
#f3f3f3
H:0;S:0;B:95
京东
苏宁
#f0f0f0
H:0;S:0;B:94
美团
大众点评
易信
#ededed
H:0;S:0;B:93
淘宝
饿了么
#e8e8e8
H:0;S:0;B:91
天猫
拉手网
#e1e1e1
H:0;S:0;B:88
百度糯米
#d9d9d9
H:0;S:0;B:85
微信
#f0f0f6
H:240;S:2;B:96
网易
微信
苹果官方
陌陌，黄色灰
网易云音乐
蓝灰
#b6d7dc
H:230;S:3;B:96
包括分割线
浅色
#ffffff
白色
H:0;S:0;B:100
#fafafa
H:0;S:0;B:98
主色
淘宝红
#ff5000
H:196;S:100;B:100
天猫红
#dd2727
H:0;S:82;B:87
京东红
#f23030
H:0;S:80;B:95
百度外卖红
#ff2d4b
H:351;S:82;B:100
网易红
#df3031
H:0;S:78;B:87
新浪红
#e62f17
H:7;S:90;B:99
苏宁黄
#ffc001
H:45;S:99;B:100
美团黄
#ffd705
H:50;S:98;B:100
爱鲜蜂黄
#ffd600
H:50;S:100;B:100
饿了么蓝
#4392e9
H:209;S:78;B:91
美团外卖蓝
#06c1ae
H:174;S:97;B:76
glide蓝
#00a6fb
H:200;S:100;B:98
字体颜色
标题
#323232
H:0;S:0;B:20
网易
#1a1a1a
H:0;S:0;B:10
新浪
#404040
H:0;S:0;B:25
搜狐
#454545
H:0;S:0;B:27
蓝黑
#061b28
H:20;S:87;B:16
蓝黑
#3e3e48
H:240;S:14;B:28
白色
#ffffff
B:30以下都可以用
摘要
#666666
H:0;S:0;B:40
#909090
H:0;S:0;B:56
腾讯
#949494
H:0;S:0;B:58
#999999
H:0;S:0;B:60
B的值控制在40--70之间
正文
#323232
H:0;S:0;B:20
#646464
H:0;S:0;B:39
底部操作栏的图标的灰色
苏宁
#323232
H:0;S:0;B:20
百度外卖
#585858
H:0;S:0;B:35
京东
#5d5d5d
H:231;S:12;B:42
淘宝、天猫
#5f646e
H:220;S:14;B:43
微信
#7a7a7a
H:213S:7;B:51
蓝灰
作品的评判标准
布局
界面结构和操作流程是否匹配
界面的布局是否符合软件的功能定义合并跳转的逻辑
界面的元素是否规整，水平与垂直对齐
按图标的大小是否合理保持一致，内容间距是否合理
行高间距是否保持一致，内容间距是否合理
是否恰当的利用窗体和控件的空白，以及分隔线条
色彩
界面的色调是否符合产品定义，让人感觉舒适
重要的对象是否利用醒目的色彩表示，或者加强对比
色彩的使用是否符合流行趋势以及用户心理
让色盲与色弱的用户是否可以使用
一致性
图标风格是否具有一致性
界面的风格是否统一
同类的界面元素是否有相同的外观和操作方式
是否符合广大用户 使用同类软件的习惯
完整性
共同的界面元素是否完整
按键的状态是否齐全
执行选择操作之前，是否有提示和确认
是否提供进度条，动画反应正在进行的比较耗时的过程
易用性
用户界面是否与软件的功能比较融洽
是否符合用户的使用环境
界面元素是否有错别字，或者措辞模糊，逻辑混乱
输入数据或递交数据时，是否进行相应的数据提示
切图标注
标注
Mark Man、Pxco
各要件的距离（ 要件：图标）
文字间距，上下左右
列表高度与宽度
列表图标的高度
文字大小
透明度
字体颜色
分割线的颜色
列表颜色
背景颜色
辅助色
点缀色
主色调
居中的话，直接标注，文字上下居中
距离，大小
颜色（#六进制、HSB/RGB）
切图
终极法则
切工程师搞定不了的
Cutter Man、Pxcook（ 可存储psd的源文件）
给图层，或图层组命名，然后在切图，导出后直接可用
避免单数，最好能是4的倍数关系，需要设置固定尺寸或裁剪画布
导出图标之前需要将形状合并，或者转为智能对象
2X:640*1280;750*1334
