目 录

第1章 UI设计学习入门

1.1 了解UI设计 2

1.1.1 UI设计简介 2

1.1.2 UI设计原则 3

1.1.3 UI设计流程 4

1.1.4 UI设计常用软件 5

注意事项 在线制作网站 7

1.1.5 UI设计行业的发展 7

1.2 UI设计方向 8

1.2.1 用户研究 8

1.2.2 交互设计 8

1.2.3 界面设计 8

1.3 UI设计的设计规范 9

1.3.1 一致性 9

1.3.2 准确性 9

1.3.3 可读性 10

1.3.4 布局合理化 10

1.3.5 系统操作合理性 10

1.3.6 系统响应时间 11

1.4 UI设计的色彩基础 11

1.4.1 色彩的基础知识 11

知识点拨 色相环的色彩构成 12

1.4.2 色彩搭配 14

实战演练：UI设计欣赏 16

新手答疑 18

第2章 图标设计

2.1 图标的设计规范 20

2.1.1 图标的尺寸规范 20

注意事项 图标切图 21

2.1.2 图标的视觉规范 21

动手练 制作视频播放器图标 23

2.2 图标的基础知识 26

2.2.1 图标的概念 26

2.2.2 图标的设计原则 27

动手练 制作文件袋图标 28

2.3 图标的风格类型 33

2.3.1 像素风格 33

2.3.2 扁平化风格 33

知识点拨 线性图标分类 34

知识点拨 面性图标分类 34

2.3.3 拟物风格 35

2.3.4 立体风格 35

动手练 制作面性图标 35

实战演练：制作扁平化风格图标 39

新手答疑 44

第3章 控件设计

3.1 控件的基础知识 46

3.1.1 控件的概念 46

注意事项 控件和组件 46

3.1.2 控件的规范 47

动手练 制作搜索框控件 48

3.2 常见控件类型 50

3.2.1 按钮控件 50

动手练 制作不同状态的按钮控件 52

3.2.2 选择控件 55

知识点拨 单选按钮 56

3.2.3 文本输入框控件 56

3.2.4 弹框控件 57

实战演练：制作升级弹框 58

新手答疑 62

第4章 动效设计

4.1 UI动效简介 64

4.1.1 认识UI动效 64

4.1.2 UI动效类型 64

动手练 制作扫码动效 65

4.2 制作UI动效 70

4.2.1 After Effects的工作界面 70

知识点拨 工作区设置 71

4.2.2 UI动效制作 71

知识点拨 重新设置合成 72

知识点拨 添加关键帧 74

注意事项 关键帧应用 74

4.2.3 蒙版和形状 74

知识点拨 键盘↑↓键的妙用 75

4.2.4 输出动效 76

动手练 制作logo的出现动效 76

实战演练：制作加载动效 79

新手答疑 84

第5章 App界面设计

5.1 App界面设计规范 86

5.1.1 iOS系统设计规范 86

知识点拨 最小点击区域 88

注意事项 最小字号 89

5.1.2 Android系统设计规范 89

注意事项 Android界面常用尺寸 90

5.2 App界面常见类型 91

5.2.1 闪屏页 91

5.2.2 引导页 92

注意事项 功能介绍型引导页分类 92

5.2.3 注册登录页 93

注意事项 注册登录页分类 94

动手练 制作食味App登录注册页 94

5.2.4 空白页 97

5.2.5 首页 98

5.2.6 个人中心页 99

注意事项 其他常见页面 99

动手练 制作食味App个人中心页 99

实战演练：制作旅行客App常用页面 103

新手答疑 112

第6章 网页界面设计

6.1 网页界面设计规范 114

6.1.1 网页尺寸规范 114

注意事项 首屏高度 115

6.1.2 网页界面结构规范 115

6.1.3 网页界面布局规范 115

注意事项 网格列数 116

6.1.4 网页界面字体规范 116

动手练 制作花间集网站首页 116

6.2 网页界面常见类型 125

6.2.1 首页 125

6.2.2 栏目页 126

6.2.3 详情页 127

动手练 制作花间集网站详情页 128

6.2.4 专题页 133

实战演练：制作饮炊美食网站首页 133

新手答疑 142

第7章 软件界面设计

7.1 软件界面设计规范 144

7.1.1 软件界面结构布局规范 144

7.1.2 软件界面尺寸规范 145

知识点拨 断点 145

7.1.3 软件界面字体规范 145

知识点拨 常见无衬线体和衬线体 146

注意事项 文字间距 147

7.1.4 软件图标规范 147

动手练 制作绘图软件启动页 148

7.2 软件界面常见类型 151

7.2.1 启动页 151

7.2.2 着陆页 151

7.2.3 集合页 152

动手练 制作绘图软件集合页 152

7.2.4 主/细节页 157

7.2.5 详细信息页 158

7.2.6 表单页 158

实战演练：制作视频软件界面 159

新手答疑 168

第8章 界面的标注与切图

8.1 界面标注 170

8.1.1 标注内容 170

注意事项 极限值 170

注意事项 图标标注 171

知识点拨 其他需要标注的内容 171

注意事项 标注单位 171

8.1.2 标注工具 171

动手练 标注App注册登录页 172

8.2 界面切图 175

8.2.1 切图原则 176

知识点拨 点九切图 176

知识点拨 图标切图 176

注意事项 不需要切图元素 176

8.2.2 切图命名规范 176

注意事项 切图命名原因 177

8.2.3 切图工具 177

动手练 切图并输出网页界面 178

实战演练：标注软件界面并进行切图 181

新手答疑 188

第9章 综合实战案例

9.1 设计美食App界面 190

9.1.1 设计思路 190

9.1.2 制作闪屏页 190

注意事项 参考线的区别 191

9.1.3 制作首页 193

9.1.4 制作详情页 201

9.2 设计移动端创意图标 208

9.2.1 设计思路 208

9.2.2 设计准备之画板的创建 208

9.2.3 绘制界面图标 210

9.2.4 绘制交流类应用图标 214

9.2.5 绘制其他常见图标 216