UI界面设计(第3版)

本书从用户研究、交互设计入手，到视觉设计理念的分析，再结合实例对UI界面设计全过程进行剖析、归纳和演绎，将“理论知识”“软件技术”与“艺术设计”“美育思政”各项元素充分融合，是一本全面的UI界面设计与制作的基础教程。本书结构合理、内容翔实、图文并茂，结合Photoshop、Illustrator软件中常用的工具和方法，有针对性地剖析UI界面设计设计与制作的实施策略与过程，精选了图标设计、手机主题界面设计、App界面设计、网页界面设计、智能电视界面设计、其他类型人机界面设计等典型UI界面设计项目，将艺术设计与软件操作技巧融入其中，引导学生进行思考及操作实践，提升学生的审美、审艺能力。本书适合作为高等职业院校计算机数字媒体／艺术类相关专业的教材，也可供平面设计人员、美工和对UI设计感兴趣的读者阅读和参考。

第一部分 知识准备
第1章 UI设计相关知识
1.1 UI设计概述 1
1.1.1 UI设计的概念 1
1.1.2 UI设计的流程 2
1.1.3 UI设计的规范 4
1.2 UI设计与用户体验 6
1.2.1 用户体验的含义 6
1.2.2 影响用户体验的因素 6
1.3 UI设计常见风格 7
1.3.1 扁平化风格 8
1.3.2 拟物化风格 10
1.3.3 卡通化风格 10
1.3.4 立体风格 10
1.3.5 几何风格 11
1.3.6 渐变风格 11
第2章 UI设计的常用方法
2.1 UI设计中的设计方法 12
2.1.1 方法与方法论 12
2.1.2 设计方法学 12
2.1.3 UI设计中实用的设计方法 13
2.2 UI设计中实用的构成方法 13
2.2.1 什么是构成 13
2.2.2 形式美法则 14
2.2.3 构成的思维方式 17
第3章 UI设计的配色方法
3.1 色彩基础 21
3.1.1 色彩的基本理论 21
3.1.2 常用颜色模式 23
3.2 色彩搭配 23
3.2.1 界面中不同色彩的象征与联想 23
3.2.2 色彩搭配方法 27
3.2.3 色彩搭配的其他原则 28
3.3 设计软件中的色彩调整 31
3.3.1 Photoshop中的色彩调整 31
3.3.2 Illustrator中的色彩调整 31
第4章 UI设计常用工具
4.1 Photoshop 33
4.1.1 初识Photoshop 33
4.1.2 图像常用基本操作 34
4.1.3 选区的基本操作 36
4.1.4 矢量绘制类工具的应用 38
4.1.5 画笔工具的应用 40
4.1.6 图层相关知识 42
4.1.7 蒙版相关知识 46
4.1.8 擦除类工具的应用 48
4.1.9 外部素材的载入 49
4.1.10 小练手 50
4.2 Illustrator 52
4.2.1 初识Illustrator 52
4.2.2 界面设计常用图形 53
4.2.3 绘制对象的常用操作 55
4.2.4 填色和描边 55
4.2.5 直角变圆角 56
4.2.6 路径查找器与形状生成器 56
4.2.7 通过扩展路径描边让线变成面 57
4.2.8 Illustrator 工具箱中的比例缩放工具 57
4.2.9 旋转与镜像打造对称图形 58
4.2.10 图像描摹 58
4.2.11 小练手 59
4.3 其他辅助工具 62
第5章 UI界面常用壁纸与控件制作
5.1 常用壁纸制作 64
5.1.1 摄影像素壁纸 64
5.1.2 设计构成壁纸 64
5.1.3 综合图像壁纸 65
5.1.4 小练手：多种壁纸设计 65
5.2 常见控件制作 70
5.2.1 按钮 70
5.2.2 下拉选择框 72
5.2.3 进度条 74
5.2.4 TAB切换块 78
5.2.5 气泡对话框 79
5.2.6 步进器 80
5.2.7 开关 80
第6章 图标设计
6.1 图标的设计与制作概述 82
6.1.1 图标设计概述 82
6.1.2 图标的背板 83
6.1.3 图标的分类 83
6.1.4 图标的规格 87
6.1.5 图标的统一性 89
6.2 线性图标 89
6.2.1 利用Illustrator打造线性图标 89
6.2.2 多种线性图标风格 98
6.3 面性图标 102
6.3.1 面性图标设计制作思路 102
6.3.2 多种面性图标风格 102
6.4 2.5D图标 104
6.4.1 利用Illustrator打造2.5D图标 104
6.4.2 使用Photoshop打造2.5D图标 107
6.5 MBE图标 107
6.6 利用Photoshop打造拟物化图标 108
6.7 延伸阅读与练习 111
6.7.1 利用Illustrator批量导出图标 111
6.7.2 拓展练习： 利用Photoshop打造扁平化图标 114
6.7.3 拓展练习： 利用Photoshop打造单色图标 116
6.7.4 拓展练习： 利用Photoshop打造线性图标 117
6.7.5 拓展练习：利用Photoshop打造样式图标 118
6.8 独立实践 118
第7章 手机主题界面设计
7.1 手机主题界面设计概述 119
7.1.1 手机常用尺寸与图标格式 119
7.1.2 手机主题界面设计内容 120
7.1.3 手机界面设计的原则 120
7.2 项目实作：卡通小熊手机主题界面设计 121
7.2.1 界面设计任务分析 121
7.2.2 学习目标 122
7.2.3 制作步骤详解 122
7.3 项目实作：伪扁平手机主题界面设计 136
7.3.1 界面设计任务分析 136
7.3.2 学习目标 136
7.3.3 关键步骤提示 136
7.4 独立实践 137
7.5 本章小结 137
第8章 App界面设计
8.1 App界面设计概述 138
8.1.1 手机App界面视觉设计 138
8.1.2 手机App界面用户体验设计 139
8.1.3 App界面布局设计 139
8.2 项目实作：操作型App―计算器界面设计 140
8.2.1 界面设计任务分析 140
8.2.2 学习目标 141
8.2.3 制作步骤详解 141
8.3 项目实作：拼拼乐App界面设计 143
8.3.1 界面设计任务分析 143
8.3.2 学习目标 143
8.3.3 制作步骤详解 144
8.4 项目实做：水平仪App界面设计 148
8.5 独立实践 148
8.6 本章小结 148
第9章 网页界面设计
9.1 网页界面设计概述 149
9.1.1 网页界面设计基本原则 149
9.1.2 网站页面的功能美与形式美 149
9.2 项目实作：一栏式简单网页设计与制作 150
9.2.1 界面设计任务分析 150
9.2.2 学习目标 151
9.2.3 制作步骤详解 151
9.3 项目实作：多栏式电子商务网页设计与制作 156
9.3.1 界面设计任务分析 156
9.3.2 学习目标 157
9.3.3 制作步骤详解 157
9.4 项目实作：自由版式专题网页设计与制作 169
9.4.1 界面设计任务分析 169
9.4.2 学习目标 171
9.4.3 制作步骤详解 171
9.5 独立实践 203
9.6 本章小结 203
第10章 智能电视界面设计
10.1 智能电视界面设计概述 204
10.1.1 智能电视界面设计 204
10.1.2 智能电视界面设计的原则 204
10.2 项目实作：智能电视界面设计 205
10.2.1 界面设计任务分析 205
10.2.2 学习目标 205
10.2.3 制作步骤详解 206
10.3 独立实践 217
10.4 本章小结 217
第11章 其他类型人机界面设计
11.1 人机界面设计概述 218
11.1.1 人机界面概述 218
11.1.2 人机界面设计的要点 220
11.1.3 人机界面设计的原则 221
11.2 项目实作：播放器界面设计 221
11.2.1 界面设计任务分析 221
11.2.2 学习目标 222
11.2.3 制作步骤详解 222
11.3 独立实践 229
11.4 本章小结 229