本书全面、系统地介绍了UI设计的相关知识点和基本设计技巧,包括初识UI设计、图标设计、App界面设计、网页界面设计、软件界面设计和游戏界面设计等内容。
全书内容以知识点讲解与课堂案例为主线。知识点讲解可以使学生能够系统地了解UI设计的各类规范,案例部分可以使学生快速掌握UI设计流程并能完成案例制作。主要章节的*后还安排了课堂练习和课后习题,可以拓展学生对UI设计的实际应用能力。
本书可作为高等院校UI设计类课程的教材,也可供初学者自学参考。

第 1 章 初识UI 设计
1.1 UI 设计的相关概念………………… 2
1.1.1 UI 设计的概念………………… 2
1.1.2 UI 与WUI 和GUI… ………… 2
1.1.3 UI 设计常用术语中英文对照… ………………………… 3
1.1.4 UI 设计常用软件……………… 3
1.2 UI 设计项目流程…………………… 3
1.2.1 项目设计流程… ……………… 4
1.2.2 UI 设计流程…………………… 4
1.3 UI 设计的风格表现………………… 5
1.4 UI 设计的行业发展………………… 6
1.4.1 UI 设计行业现状……………… 6
1.4.2 UI 设计发展趋势……………… 8
1.5 UI 设计的学习方法………………… 9
第 2 章 图标设计
2.1 图标的基础知识… ……………… 12
2.1.1 图标的概念… ……………… 12
2.1.2 图标设计的流程… ………… 12
2.1.3 图标设计的原则… ………… 14
2.2 图标的设计规范… ……………… 16
2.2.1 图标的尺寸及单位… ……… 16
2.2.2 图标的视觉统一… ………… 18
2.2.3 图标的清晰度… …………… 19
2.3 图标的风格类型… ……………… 19
2.3.1 像素风格… ………………… 19
2.3.2 扁平化风格… ……………… 20
2.3.3 拟物化风格… ……………… 24
2.3.4 微拟物风格… ……………… 25
2.3.5 立体风格… ………………… 25
2.4 课堂案例——绘制扁平化风格-单色面性图标… ………………… 26
2.5 课堂练习… ……………………… 30
2.5.1 课堂练习——绘制扁平化风格-不透明色块面性图标… …… 30
2.5.2 课堂练习——绘制扁平化风格-微渐变面性图标… ………… 31
2.6 课后习题… ……………………… 32
2.6.1 课后习题——绘制扁平化风格光影效果图标… …………… 32
2.6.2 课后习题——绘制扁平化风格折纸投影图标… …………… 32
第3 章 App 界面设计
3.1 App 的基础知识………………… 35
3.1.1 App 的概念… ……………… 35
3.1.2 App 设计的流程… ………… 35
3.1.3 App 界面设计的原则… …… 38
3.2 App 界面设计的规范…………… 40
3.2.1 iOS 设计规范… …………… 40
3.2.2 Android 设计规范… ……… 46
3.3 App 常用界面类型……………… 51
3.3.1 闪屏页… …………………… 51
3.3.2 引导页… …………………… 53
3.3.3 首页… ……………………… 54
3.3.4 个人**页… ……………… 56
3.3.5 详情页… …………………… 56
3.3.6 注册登录页… ……………… 57
3.4 课堂案例——制作侃侃App…… 57
3.5 课堂练习——制作Shine App… …………………………… 95
3.6 课后习题——制作Circle App… …………………………… 96
第4 章 网页界面设计
4.1 网页界面设计的基础知识……… 99
4.1.1 网页界面设计的概念… …… 99
4.1.2 网页界面设计的流程… …… 99
4.1.3 网页界面设计的原则… …… 102
4.2 网页界面设计的规范… ………… 104
4.2.1 网页界面设计的尺寸及单位… ……………………… 104
4.2.2 网页界面设计的界面结构… ……………………… 107
4.2.3 网页界面设计的布局… …… 108
4.2.4 网页界面设计的字体… …… 110
4.2.5 网页界面设计的图标… …… 111
4.3 网页常用界面类型……………… 114
4.4 课堂案例——制作Easy Life 家居电商网站… ……………………… 118
4.4.1 课堂案例—制作Easy Life家居电商网站首页… ……… 118
4.4.2 课堂案例—制作Easy Life家居电商网站产品列表页…… 142
4.4.3 课堂案例——制作Easy Life家居电商网站产品详情页…… 151
4.5 课堂练习——制作Artsy 家居电商网站… …………………………… 159
4.6 课后习题——制作装饰家居电商网站… …………………………… 160
第5 章 软件界面设计
5.1 软件界面设计的基础知识……… 162
5.1.1 软件界面设计的概念… …… 162
5.1.2 软件界面设计的流程… …… 162
5.1.3 软件界面设计的原则… …… 165
5.2 软件界面设计的规范… ………… 166
5.2.1 软件界面设计的尺寸及单位… ……………………… 167
5.2.2 软件界面设计的界面结构… ……………………… 168
5.2.3 软件界面设计的布局… …… 168
5.2.4 软件界面设计的字体… …… 172
5.2.5 软件界面设计的图标… …… 174
5.3 软件常用界面类型… …………… 178
5.4 课堂案例——制作音乐播放器软件… …………………………… 180
5.4.1 课堂案例——制作Song 音乐播放器软件首页… ………… 180
5.4.2 课堂案例——制作Song 音乐播放器软件歌单页… ……… 194
5.4.3 课堂案例——制作Song 音乐播放器软件歌曲列表页… … 200
5.5 课堂练习——制作More 音乐播放器软件… …………………… 207
5.6 课后习题——制作CoolPlayer音乐播放器软件… ……………… 208
第6 章 游戏界面设计
6.1 游戏界面设计的基础知识……… 210
6.1.1 游戏界面设计的概念… …… 210
6.1.2 游戏界面设计的流程… …… 210
6.1.3 游戏界面设计的原则… …… 212
6.2 游戏界面设计的规范… ………… 214
6.2.1 游戏界面设计的尺寸及单位…… 214
6.2.2 游戏界面设计的界面结构…… 215
6.2.3 游戏界面设计的布局……… 215
6.2.4 游戏界面设计的字体……… 216
6.2.5 游戏界面设计的图标……… 217
6.3 游戏常用界面类型……………… 217
6.4 课堂案例——制作水果消消消游戏… …………………………… 220
6.5 课堂练习——制作Boom 游戏…… 229
6.6 课后习题——制作Pet Fun游戏… …………………………… 230

Step1精选基础知识,快速了解UI设计
Step2 知识点解析+课堂案例,熟悉设计思路,掌握制作方法
Step3 课堂练习+课后习题,拓展应用能力
Step4 循序渐进,演练真实商业项目制作过程
配套素材及*终效果文件、全书慕课视频、扩展案例、赠送素材包、PPT课件、课程标准、课程计划、教学教案、详尽的案例操作步骤