术之篇 20
01 基础知识 20
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 设计风格 46
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 图标与图片 66
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 iOS系统界面 94
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
05 Android系统界面 102
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
道之篇 116
06 建立规范 116
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 设计组件 132
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 导航设计 150
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 界面设计 160
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 设计适配 180
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 手势应用 194
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 设计资源 201
12.1 网站资源 201
12.2 图标资源 202
12.3 图片资源 203
附录 204
参考文献 211