通用APP UI设计指导规范
版本：V1.0.0 时间：2016-08-09 编写：交互设计部 陈锐
1 / 79
目录
一、 二、
前言 .......................................................................................................................... 6 名词解释 ................................................................................................................... 6
1. PX ............................................................................................................................ 6 2. PPI ........................................................................................................................... 7 3. DPI ........................................................................................................................... 7 4. Pt .............................................................................................................................. 8 5. SP ............................................................................................................................ 8 6. DP ............................................................................................................................ 9 三、
iOS 设备 .................................................................................................................10
1. 界面尺寸 ..................................................................................................................10
1.1 设备尺寸 ........................................................................................................10 1.2 设计基准 ........................................................................................................11 1.3 控件尺寸 ........................................................................................................11 1.4 关于IPhone分辨率 ........................................................................................12 1.5 关于IPad分辨率 ............................................................................................14 1.6 状态栏及标签栏参照 ......................................................................................18 2. ICON图标尺寸 ........................................................................................................19
2.1. 尺寸对照表 .....................................................................................................19 2.2. 图标圆角比例 .................................................................................................20 2.3. Icon命名规则 .................................................................................................21 2.4. APP图标变化 ................................................................................................23
2 / 79
2.5. 超椭圆 ............................................................................................................25 2.6. 图标网格 ........................................................................................................25 3. 布局设计规范...........................................................................................................25
3.1. 状态栏规范 .....................................................................................................25 3.2. 导航栏规范 .....................................................................................................26 3.3. 搜索栏 ............................................................................................................27 3.4. 工具栏 ............................................................................................................27 3.5. Stepper控件 ..................................................................................................27 3.6. 提示框 ............................................................................................................28 3.7. 分段控制框 .....................................................................................................28 3.8. 滑块\\开关 .......................................................................................................29 3.9. 布局标准控件 .................................................................................................29 3.10. ios标准色 ...................................................................................................30 3.11. 文字规范 .....................................................................................................30 3.12. 间距和对齐方式 ..........................................................................................31 4. 交互规范 ..................................................................................................................32 5. 标注规范 ..................................................................................................................40 6. 切图规范 ..................................................................................................................40
6.1. 软件切图区别 .................................................................................................40 6.2. 切图规范 ........................................................................................................40 6.3. 可重复元素 .....................................................................................................41 6.4. 图片边缘锯齿和抗锯齿问题 ............................................................................43
3 / 79