正版 UI设计基础培训教程:全彩版 任媛媛 人民邮电出版社 9787115

章 UI 设计的常用工具 009

1.1 Photoshop 的界面介绍 010

1.2 UI 在Photoshop 中的常用工具 012

1.2.1 课堂案例：用常用工具制作界面 012

1.2.2 移动工具 015

1.2.3 自由变换工具 016

1.2.4 矩形工具 016

1.2.5 圆角矩形工具 017

1.2.6 椭圆工具 017

1.2.7 钢笔工具 017

1.2.8 直接选择工具 018

1.2.9 横排文字工具 018

1.3 Illustrator 的界面介绍 019

1.4 UI 在Illustrator 中的常用工具 021

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 椭圆工具 025

1.4.8 多边形工具 026

1.4.9 文字工具 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

0章 列表页设计 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

1章 播放页设计 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

2章 详情页设计 159

12.1 详情页的概念 160

12.2 详情页的常见类型 161

12.2.1 课堂案例：制作购物App 详情页 161

12.2.2 普通型 170

12.2.3 销售型 170

课堂练习：制作食谱详情页 171

课后习题：制作旅游详情页 172

3章 可输入页设计 173

13.1 可输入页的概念 174

13.2 可输入页的常见类型 175

13.2.1 课堂案例：制作软件登录页 175

13.2.2 登录页面 180

13.2.3 信息发布页面 180

13.2.4 聊天页面 181

课堂练习：制作预约信息页 181

课后习题：制作聊天页 182

4章 切图与标注 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

课堂练习：将播放页进行切图 191

课后习题：将旅游主页进行切图 192

5章 制作艺术二维码 193

15.1 二维码的原理结构 194

15.2 制作艺术二维码 195

15.2.1 课堂案例：制作数艺社艺术二维码 195

15.2.2 生成二维码的方法 197

15.2.3 设计艺术二维码的注意事项 199

课堂练习：制作软件书艺术二维码 200

课后习题：制作手绘书艺术二维码 200

任媛媛 毕业于电子科技大学成都学院图形艺术系。 出版图书：《中文版3ds Max 2014/VRay效果图制作接近自学宝典》。 工作经历：2011年起从事建筑动画、室内外效果图表现工作。 2015年起参与时代印象《中文版3ds Max 2016/VRay效果图制作接近自学教程（实例版）》等图书的编写工作

第1章 UI 设计的常用工具 009 1.1 Photoshop 的界面介绍 010 1.2 UI 在Photoshop 中的常用工具 012 1.2.1 课堂案例：用常用工具制作界面 012 1.2.2 移动工具 015 1.2.3 自由变换工具 016 1.2.4 矩形工具 016 1.2.5 圆角矩形工具 017 1.2.6 椭圆工具 017 1.2.7 钢笔工具 017 1.2.8 直接选择工具 018 1.2.9 横排文字工具 018 1.3 Illustrator 的界面介绍 019 1.4 UI 在Illustrator 中的常用工具 021 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 椭圆工具 025 1.4.8 多边形工具 026 1.4.9 文字工具 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 聊天页面 181 课堂练习：制作预约信息页 181 课后习题：制作聊天页 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 课堂练习：将播放页进行切图 191 课后习题：将旅游主页进行切图 192 第15章 制作艺术二维码 193 15.1 二维码的原理结构 194 15.2 制作艺术二维码 195 15.2.1 课堂案例：制作数艺社艺术二维码 195 15.2.2 生成二维码的方法 197 15.2.3 设计艺术二维码的注意事项 199 课堂练习：制作软件书艺术二维码 200 课后习题：制作手绘书艺术二维码 200

全书按照“课堂案例——设计理论解析——课堂练习——课后习题”这一顺序进行编写，力求通过课堂案例的演练使学生熟悉图标、页面的制作方法； 通过设计理论的讲解使学生掌握设计的原理和要素；通过课堂练习和课后习题拓展学生的实际操作能力，巩固学习的内容。 提供书中所有练习的素材、效果文件、620分钟教学视频，以及方便老师教学使用的PPT课件、教学大纲、教案等资料。