UI设计基础培训教程（全彩版 第2版）

本书接近针对零基础的读者编写，是入门级读者快速而全面掌握UI设计的参考书；
全面介绍了UI 设计的工具、设计理论和界面制作方法， 包括Photoshop和Illustrator的常用工具；
本书可以作为想从事和刚从事UI设计工作人员的自学参考用书，也适合作为院校设计专业和培训机构相关课程的教材。
附赠教学资源资源：
提供本书课堂案例、课堂练习和课后习题的素材文件、实例文件和600多分钟在线视频。
UI配色方案、UI图标、免抠素材及配色卡，以及专门为教师准备的教学大纲、教学规划参考及PPT课件等专享资源。

本书接近针对零基础的读者编写，是入门级读者快速而全面掌握UI设计的参考书。
本书以各种重要技术和常见界面为主线，全面介绍了UI 设计的工具、设计理论和界面制作方法， 包括Photoshop和Illustrator的常用工具，UI设计的理论、原则和规范，图标设计，常见界面的概念和制作，切图与标注，以及艺术二维码的制作方法。书中提供的大量课堂案例，可以帮助读者快速上手，熟悉设计思路和制作要点；课堂练习和课后习题可以拓展读者的实际操作能力，巩固所学的知识点。同时，本书配套资源丰富，包括课堂案例、课堂练习和课后习题的素材文件、实例文件和在线教学视频，UI配色方案、UI图标、免抠素材、配色卡和iOS尺寸规范电子书，以及为教师准备的教学大纲、教学规划参考及PPT课件等。
本书可以作为想从事和刚从事UI设计工作人员的自学参考用书，也适合作为院校设计专业和培训机构相关课程的教材。

任媛媛，毕业于电子科技大学成都学院图形艺术系，4年建筑动画、室内外效果图表现工作经验，参与编写《中文版3ds Max 2014/VRay效果图制作接近自学宝典》 等图书。 王依洪，从事设计相关工作多年，拥有丰富的实战经验。

目录

第 1 章 UI 设计的常用工具 009
1.1 Photoshop 的界面介绍 010
1.2 Photoshop 中的常用工具 012
1.2.1 课堂案例：用常用工具制作界面 012
1.2.2 移动工具 015
1.2.3 矩形工具 016
1.2.4 椭圆工具 017
1.2.5 钢笔工具 017
1.2.6 直接选择工具 018
1.2.7 横排文字工具 018
1.3 Illustrator 的界面介绍 019
1.4 Illustrator 中的常用工具 020
1.4.1 课堂案例：用常用工具制作手机图标 021
1.4.2 选择工具 023
1.4.3 直接选择工具 023
1.4.4 钢笔工具 023
1.4.5 矩形工具 024
1.4.6 椭圆工具 025
1.4.7 多边形工具 026
1.4.8 文字工具 026
1.5 在Photoshop 中导入Illustrator文件的方法 027
课堂练习：在Illustrator 中绘制闹钟App 功能图标 028
课后习题：在Photoshop 中制作闹钟App 界面 028

第 2 章 界面构图、布局与色彩 029
2.1 界面的常见构图类型 030
2.1.1 井字形构图 030
2.1.2 三角形构图 031
2.1.3 放射形构图 031
2.1.4 折线形构图 032
2.1.5 直角形构图 033
2.2 界面布局的要素 034
2.2.1 页面的留白 034
2.2.2 页面的对齐方式 034
2.2.3 界面的间距 035
2.2.4 界面的层次 035
2.3 界面的色彩搭配 037
2.3.1 色彩心理学 037
2.3.2 配色的方法 039
2.3.3 配色的要素 040

第3 章 UI 设计的原则及规范 041
3.1 iOS 系统的设计原则 042
3.1.1 统一化 042
3.1.2 凸显内容 042
3.1.3 适应性 043
3.1.4 层级性 045
3.1.5 易操作性 046
3.2 iOS 界面尺寸与控件的设计规范 046
3.2. 1 界面尺寸 046
3.2.2 控件规范 047
3.3 Android 系统的设计原则 050
3.3. 1 核心视觉载体 050
3.3.2 层级空间 050
3.3.3 动画 050
3.3.4 颜色 053
3.4 Android 界面尺寸与控件的设计规范054
3.4. 1 界面尺寸 054
3.4.2 控件规范 055
3.5 常用字体规范 063
3.5. 1 文字设计的要素 063
3.5.2 常用字体的类型 065
3.5.3 界面字体的规范 066
3.6 UI 设计的整体规范 069
3.6. 1 色彩控件 069
3.6.2 按钮控件 069
3.6.3 分割线 070
3.6.4 头像 070
3.6.5 提示框 070
3.6.6 文字 071
3.6.7 间距 072
3.6.8 图标 072

第4 章 图标设计 073
4.1 扁平化风格图标 074
4.1.1 课堂案例：制作扁平化风格的播放器图标 074
4.1.2 课堂案例：制作扁平化风格的旅游图标 075
4.1.3 扁平化图标的概念 077
4.1.4 扁平化图标的类型 078
4.1.5 设计扁平化图标的注意事项 078
4.2 线性风格图标 079
4.2.1 课堂案例：制作线性风格的聊天图标 079
4.2.2 课堂案例：制作线性风格的功能图标 082
4.2.3 线性图标的概念 084
4.2.4 设置线性图标的注意事项 084
4.3 其他类型的图标 085
4.3. 1 像素图标 085
4.3.2 拟物化图标 085
4.3.3 立体图标 085
4.3.4 卡通图标 085
4.3.5 文字图标 086
4.3.6 功能图形化图标 086
课堂练习：在Illustrator 中绘制手机功能图标 086
课后习题：在Photoshop 中绘制功能图标 086

第5 章 闪屏页设计 087
5.1 闪屏页的概念 088
5.2 闪屏页的常见类型 088
5.2.1 课堂案例：制作中秋主题的闪屏页 088
5.2.2 宣传型 092
5.2.3 关怀型 092
5.2.4 推广型 093
课堂练习：制作品牌宣传型闪屏页 093
课后习题：制作推广型闪屏页 094

第6 章 引导页与浮层引导页设计095
6.1 引导页的概念 096
6.2 引导页的常见类型 096
6.2.1 课堂案例：制作功能介绍型引导页 096
6.2.2 功能介绍型 100
6.2.3 情感型 101
6.2.4 幽默型 101
6.3 浮层引导页 102
6.3.1 课堂案例：制作浮层引导页 102
6.3.2 浮层引导页的概念 104
课堂练习：制作旅游App 引导页 105
课后习题：制作文档App 引导页 106

第7 章 空白页设计 107
7.1 空白页的概念 108
7.2 空白页的常见类型 108
7.2.1 课堂案例：制作资料审核空白页 108
7.2.2 首次进入型 112
7.2.3 错误提示型 112
课堂练习：制作消息中心空白页 113
课后习题：制作购物车空白页 114

第8 章 首页设计 115
8.1 首页的概念 116
8.2 首页的常见类型 116
8.2.1 课堂案例：制作外卖App 首页 116
8.2.2 列表型 125
8.2.3 图标型 126
8.2.4 卡片型 126
8.2.5 综合型 127
课堂练习：制作旅游App 主页 128
课后习题：制作美食类App 主页 128

第9 章 个人中心页设计 129
9.1 个人中心页的概念 130
9.2 个人中心页的常见类型 131
9.2.1 课堂案例：制作个人中心页 131
9.2.2 头像居中对齐 137
9.2.3 头像居左对齐 137
课堂练习：制作视频App 个人中心页 138
课后习题：制作学习类App 个人中心页 138

第 10 章 列表页设计 139
10.1 列表页的概念 140
10.2 列表页的常见类型 141
10.2.1 课堂案例：制作图书折扣列表页 141
10.2.2 单行列表 145
10.2.3 双行列表 146
10.2.4 时间轴 146
10.2.5 图库列表 147
课堂练习：制作购物App 列表页 147
课后习题：制作物流信息列表页 148

第 11 章 播放页设计 149
11.1 播放页的概念 150
11.2 播放页的常见类型 150
11.2.1 课堂案例：制作音乐播放器界面 150
11.2.2 音乐播放页 155
11.2.3 视频播放页 156
11.2.4 音频播放页 157
课堂练习：制作音乐播放页 157
课后习题：制作音频播放页 158

第 12 章 详情页设计 159
12.1 详情页的概念 160
12.2 详情页的常见类型 161
12.2.1 课堂案例：制作购物App 详情页 161
12.2.2 普通型 170
12.2.3 销售型 170
课堂练习：制作食谱详情页 171
课后习题：制作旅游详情页 172

第 13 章 可输入页设计 173
13.1 可输入页的概念 174
13.2 可输入页的常见类型 175
13.2.1 课堂案例：制作软件登录页 175
13.2.2 登录页面 180
13.2.3 信息发布页面 180
13.2.4 聊天页面 18 1
课堂练习：制作预约信息页 18 1
课后习题：制作聊天页 182

第 14 章 切图与标注 183
14.1 iOS 与Android 的切图方法 184
14.1.1 课堂案例：对个人中心界面进行切图 184
14.1.2 Android 的常用单位 187
14.1.3 iOS 与Android 的尺寸关系 188
14.1.4 iOS 与Android 的切图命名方式 188
14.1.5 通用切图法 189
14.1.6 Android 的“点九”切图法 189
14.2 界面标注 190
14.2.1 标注软件 190
14.2.2 标注规范 190
课堂练习：对播放页进行切图 1 91
课后习题：对旅游主页进行切图 192

第 15 章 制作艺术二维码 193
15.1 二维码的原理结构 194
15.2 制作艺术二维码 195
15.2.1 课堂案例：制作数艺设艺术二维码 195
15.2.2 生成二维码的方法 197
15.2.3 设计艺术二维码的注意事项 199
课堂练习：制作软件书艺术二维码 200
课后习题：制作手绘书艺术二维码 200