术与道 移动应用UI设计必修课PDF电子书下载

术之篇 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.6iPhone 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.1App图标特点 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.2App图标设计流程 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.3App图标设计方法 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.4iOS图标规范 77

3.4.1 iOS图标适配 77

3.4.2 iOS图标标准 78

3.5Android图标规范 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

04iOS系统界面 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

05Android系统界面 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.5Android系统的插件 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.1iOS系统 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.1iOS系统适配 180

10.1.1 设计基准 180

10.1.2 设计适配 181

10.1.3 适配规则 182

10.2Android系统适配 183

10.2.1 密度独立像素 183

10.2.2 设计基准 184

10.2.3 适配方法 185

10.3iOS系统适配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.5.3 切图 191

10.5.4 界面切图 191

10.5.5 图标切图 192

10.5.6 命名规则 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.1手势使用说明 199

12设计资源 201

12.1网站资源 201

12.2图标资源 202

12.3图片资源 203

参考文献 204