术与道-移动应用UI设计必修课-第2版

术之篇



01基础知识

1.1　什么是UI设计/20

1.1.1　UI的相关概念/20

1.1.2　UI的学习方法/22

1.2　什么是App/25

1.2.1　App的概念/25

1.2.2　App的开发流程/25

1.3　智能手机的屏幕/26

1.3.1　英寸（Inch）/27

1.3.2　像素（Pixel）/27

1.3.3　分辨率（Resolution）/28

1.4　网点密度与像素密度/28

1.4.1　网点密度（DPI）/28

1.4.2　像素密度（PPI）/29

1.4.3　DPI与PPI/29

1.4.4　逻辑分辨率与像素倍率/30

1.4.5　视网膜屏幕/30

1.5　常见手机屏幕规格/31

1.5.1　热门手机规格/31

1.5.2　热门手机分辨率/33

1.6　iPhone 6 Plus的屏幕/34

1.7　智能手机的传感器/37

1.7.1　摄像头/37

1.7.2　麦克风/38

1.7.3　GPS/38

1.7.4　电子罗盘/39

1.7.5　重力感应器/39

1.7.6　加速度传感器/40

1.7.7　光线传感器/41

1.7.8　距离传感器/41

1.7.9　气压传感器/42

1.7.10　三轴陀螺仪/43

02设计风格

2.1　风格/46

2.1.1　什么是设计风格/46

2.1.2　如何确立设计风格/47

2.2　颜色/50

2.　2. 1 认识色彩/50

2.　2. 2 RGB与HSB/50

2.　2. 3 颜色搭配基础/52

2.3　如何选择颜色/53

2.　3. 1 常见App的颜色/53

2.　3. 2 颜色的性格/55

2.4　字体/61

2.　4. 1 衬线体和无衬线体/61

2.　4. 2 系统内置字体/62

2.　4. 3 什么时候选择内嵌字体/62

2.　4. 4 如何使用内嵌字体/63

03图标与图片

3.1　App图标特点/66

3.　1. 1 独特的图形/66

3.　1. 2 表意准确/67

3.　1. 3 谨慎用色/67

3.　1. 4 避免使用大量文字/68

3.　1. 5 避免使用照片/68

3.　1. 6 适应不同场景/69

3.2　App图标设计流程/69

3.　2. 1 **步：寻找隐喻/69

3.　2. 2 第二步：抽象图形/70

3.　2. 3 第三步：竞品分析/71

3.　2. 4 第四步：确定风格/71

3.　2. 5 第五步：调整细节/72

3.　2. 6 第六步：场景测试/73

3.3　App图标设计方法/74

3.　3. 1 正负形组合/74

3.　3. 2 折叠图形/75

3.　3. 3 局部提取/75

3.　3. 4 线性图标/75

3.　3. 5 透明渐变/76

3.　3. 6 色块拼接/76

3.　3. 7 图形复用/76

3.　3. 8 背景组合/77

3.4　iOS图标规范/77

3.　4. 1 iOS图标适配/77

3.　4. 2 iOS图标标准/78

3.5　Android图标规范/79

3.　5. 1 Android图标适配/79

3.　5. 2 图标的视觉统一/80

3.　5. 3 Android图标标准/81

3.6　设计线性图标/83

3.　6. 1 线性图标的风格/83

3.　6. 2 线性图标的绘制方法/84

3.7　像素对齐/87

3.　7. 1 像素为什么要对齐/87

3.　7. 2 像素如何对齐/88

3.　7. 3 像素缩放的对齐/89

3.　7. 4 像素对齐的微调/89

3.8　图片的使用/89

3.　8. 1 矢量图与位图/89

3.　8. 2 图片的格式/90

3.　8. 3 图片的使用/91

3.　8. 4 图片的存储/92

3.　8. 5 图片的比例/92

04系统界面

4.1　栏/94

4.　1. 1 状态栏/94

4.　1. 2 导航栏/94

4.　1. 3 标签栏/95

4.　1. 4 工具栏/96

4.2　内容视图/97

4.　2. 1 表格视图/97

4.　2. 2 文本视图/99

4.　2. 3 Web视图/99

4.3　临时视图/100

4.　3. 1 对话框/100

4.　3. 2 操作列表/100

05Android系统界面

5.1　导航机制/102

5.　1. 1 硬件特性/102

5.　1. 2 iOS导航机制/102

5.　1. 3 Android导航机制/103

5.2　界面布局/105

5.　2. 1 结构差异/105

5.　2. 2 操作栏/106

5.　2. 3 多任务/107

5.3　消息推送/108

5.　3. 1 推送方式/108

5.　3. 2 通知方式/109

5.4　操作方式/110

5.　4. 1 编辑/110

5.　4. 2 选择/111

5.　4. 3 复制粘贴/112

5.　4. 4 删除/113

5.5　Android系统的插件/114

5.　5. 1 桌面插件/114

5.　5. 2 设计趋势/114



道之篇



06建立规范

6.1　组建规范/116

6.　1. 1 设计规范的目的/116

6.　1. 2 规范的组成/116

6.2　颜色规范/119

6.　2. 1 为什么选择HSB/119

6.　2. 2 创建调色板/120

6.　2. 3 调色板应用/121

6.3　文字规范/123

6.　3. 1 iOS系统/123

6.　3. 2 Android系统/123

6.　3. 3 系统字号/123

6.4　布局/125

6.　4. 1 框架/125

6.　4. 2 顶部导航栏/126

6.　4. 3 顶部标签栏/126

6.　4. 4 底部标签栏/127

6.5　图片规范/127

6.　5. 1 用户头像/127

6.　5. 2 商品图片/129

6.　5. 3 无数据图片/129

07设计组件

7.1　控制元素/132

7.　1. 1 活动指示器/132

7.　1. 2 进度指示器/132

7.　1. 3 页码控制器/134

7.　1. 4 刷新控件/134

7.　1. 5 滑动器/137

7.　1. 6 开关/137

7.　1. 7 步进器/137

7.2　筛选器/138

7.　2. 1 选择器/138

7.　2. 2 日期时间选择器/138

7.　2. 3 分段控件/139

7.　2. 4 选项卡 /139

7.　2. 5 排序/140

7.　2. 6 地区选择/140

7.3　表单控件/141

7.　3. 1 单选框/141

7.　3. 2 复选框/142

7.　3. 3 文本框/142

7.　3. 4 下拉框/143

7.　3. 5 表格/144

7.4　按钮规范/144

7.　4. 1 背景 文字/144

7.　4. 2 背景 图标/145

7.　4. 3 图标 文字/146

7.　4. 4 文字/146

7.5　其他组件/147

7.　5. 1 加载更多/147

7.　5. 2 非模态浮层/147

7.　5. 3 模态浮层/148

08导航设计

8.1　扁平导航/150

8.　1. 1 标签导航/150

8.　1. 2 舵式导航/151

8.　1. 3 宫格式导航/152

8.2　内容主导式导航/153

8.　2. 1 陈列式导航/153

8.　2. 2 旋转木马式导航/154

8.3　列表式导航/155

8.　3. 1 列表式/155

8.　3. 2 抽屉式/156

8.4　其他导航/157

8.　4. 1 点聚式导航/157

8.　4. 2 瀑布式导航/158

09界面设计

9.1　首页 /160

9.　1. 1 搜索栏/160

9.　1. 2 标签栏/161

9.　1. 3 卡片式设计/161

9.　1. 4 楼层设计/162

9.2　列表页/163

9.　2. 1 消息列表/163

9.　2. 2 横向卡片/163

9.　2. 3 瀑布流/164

9.3　详情页/165

9.　3. 1 全局按钮/165

9.　3. 2 快速通道/166

9.4　个人中心/167

9.　4. 1 头像区域/167

9.　4. 2 个人信息/168

9.　4. 3 功能模块/169

9.5　启动页/170

9.　5. 1 品牌宣传类/170

9.　5. 2 首页样式类/171

9.　5. 3 情感故事类/172

9.　5. 4 节日氛围类/173

9.6　引导页/173

9.　6. 1 功能介绍类/173

9.　6. 2 使用说明类/176

9.　6. 3 情感故事类/177

10设计适配

10.1　iOS系统适配/180

10.　1. 1 设计基准/180

10.　1. 2 设计适配/181

10.　1. 3 适配规则/182

10.2　Android系统适配/183

10.　2. 1 密度独立像素/183

10.　2. 2 设计基准/184

10.　2. 3 适配方法/185

10.3　iOS系统适配Android系统/185

10.　3. 1 设计目的/185

10.　3. 2 换算关系/185

10.　3. 3 适配方法/186

10.4　标注设计/186

10.　4. 1 标注基准/187

10.　4. 2 标注方法/187

10.5　点九图/189

10.　5. 1 什么是点九图/189

10.　5. 2 如何制作点九图/191

10.6　切图/191

10.　6. 1 界面切图/191

10.　6. 2 图标切图/192

10.　6. 3 命名规则/192

11手势应用

11.1　为什么使用手势/194

11.2　常用手势操作/195

11.　2. 1 单击/195

11.　2. 2 双击/195

11.　2. 3 上下滑动/196

11.　2. 4 左右滑动/196

11.　2. 5 拖曳/197

11.　2. 6 张开 / 闭合/197

11.　2. 7 长按/198

11.　2. 8 摇晃/198

11.3　手势设计禁忌/199

11.　3. 1 使用标准手势/199

11.　3. 2 定义标准手势/199

11.　3. 3 使用简单手势/199

11.　3. 4 手势使用说明/199

12设计资源

12.1　网站资源/201

12.2　图标资源/202

12.3　图片资源/203

附录/204

参考文献/211