认识UI设计　/ 1
1.1　UI设计概述　/2
1.1.1　什么是UI设计　/ 2
1.1.2　UI设计的用户体验　/ 4
1.1.3　UI设计的常用工具　/ 6
1.2　UI设计的运用　/8
1.2.1　移动App界面设计　/ 8
1.2.2　网页界面设计　/ 9
1.2.3　游戏界面设计　/ 10
1.2.4　应用软件界面设计　/ 11
1.3　UI设计的发展趋势　/11
1.3.1　人工智能产品界面设计　/ 11
1.3.2　AR产品界面设计　/ 12
1.3.3　VR产品界面设计　/ 13
1.4　UI设计的原则　/13
1.4.1　适用性　/ 13
1.4.2　规范性　/ 14
1.4.3　易操作性　/ 15
1.4.4　统一性　/15
1.4.5　层级性　/16
1.5　UI设计的流程　/17
1.5.1　分析设计需求　/17
1.5.2　明确视觉定位　/17
1.5.3　绘制原型图　/18
1.5.4　绘制效果图　/19
1.5.5　标注与切图　/20
1.6　项目实训　/21
项目一 天气类应用软件界面的素材搜集与制作　/21
项目二 分析大型网络游戏界面的UI设计原则　/22
思考与练习　/ 23
第 2章　UI设计要素　/ 24
2.1　点、线、面　/25
2.1.1　点　/25
2.1.2　线　/26
2.1.3　面　/27
2.1.4　分析案例——“网易云音乐”App播放页界面分析　/28
2.2　色彩　/29
2.2.1　色彩的属性　/29
2.2.2　色彩的对比　/31
2.2.3　主色、辅助色与点缀色　/32
2.2.4　UI设计中常见的色彩搭配　/33
2.2.5　分析案例——对“普通话学习”App界面进行色彩分析　/34
2.3　字体　/35
2.3.1　UI设计常用字体类型　/35
2.3.2　UI设计字体规范　/37
2.3.3　UI设计中的字体排版　/39
2.3.4　设计案例——小游戏App界面中的文字设计　/40
2.4　风格　/44
2.4.1　界面风格的设计要点　/44
2.4.2　界面常见的设计风格　/44
2.4.3　设计案例——插画风格的网站登录界面设计　/46
2.5　项目实训　/53
项目一 分析网站首页的UI设计　/53
项目二 设计读书App启动页界面　/54
思考与练习　/ 54
第3章　UI设计规范　/56
3.1　了解UI设计规范　/57
3.1.1　UI设计规范的原则　/57
3.1.2　UI设计规范包括的 内容　/58
3.2　不同操作系统的UI设计规范　/60
3.2.1　iOS的UI设计规范　/60
3.2.2　Android操作系统的UI设计规范　/61
3.2.3　Windows操作系统的UI设计规范　/63
3.3　UI设计的图片规范　/63
3.3.1　图片的格式　/64
3.3.2　图片的使用规范　/64
3.4　项目实训——分析某App界面中的UI设计规范　/65
思考与练习　/ 66
第4章　UI设计布局与构图　/ 67
4.1　UI设计的布局元素　/68
4.1.1　留白　/68
4.1.2　视觉层次　/70
4.1.3　分析案例——分析“佰草集”官方网站界面的布局元素　/72
4.2　UI设计的布局原则　/73
4.2.1　对齐原则　/73
4.2.2　对比原则　/74
4.2.3　重复原则　/75
4.2.4　平衡原则　/75
4.2.5　节奏与韵律原则　/76
4.2.6　分析案例——分析手机App界面的布局原则　/77
4.3　UI设计的构图方法　/78
4.3.1　平衡构图　/78
4.3.2　放射式构图　/79
4.3.3　九宫格构图　/80
4.3.4　三角形构图　/81
4.3.5　F形构图　/81
4.3.6　S形构图　/82
4.3.7　设计案例——用三角形构图设计App登录界面　/82
4.4　项目实训　/86
项目一 分析“自然堂”官方网站界面的布局与构图　/86
项目二 设计App引导页界面　/88
思考与练习　/89
第5章　网页界面设计　/ 91
5.1　认识网页界面　/92
5.1.1　网页界面的组成　/92
5.1.2　常见的网页界面布局方式　/94
5.1.3　网页界面的设计要求　/96
5.2　网页界面Logo和按钮设计　/96
5.2.1　Logo设计标准与样式　/97
5.2.2　按钮的类型和特点　/98
5.2.3　设计案例——设计旅行网Logo　/98
5.2.4　设计案例——设计网页登录按钮　/103
5.3　网页界面设计　/105
5.3.1　网页首页界面的主要功能　/105
5.3.2　网页内页界面设计的注意事项　/106
5.3.3　设计案例——制作网页首页界面　/106
5.3.4　设计案例——制作网页内页界面　/112
5.4　项目实训——设计“多肉微观世界”登录页界面　/114
思考与练习　/116
第6章　App界面设计　/ 118
6.1　认识App界面　/119
6.1.1　App基本界面构成　/119
6.1.2　App界面布局形式　/120
6.1.3　App界面设计要点　/125
6.2　App界面图标设计　/125
6.2.1　认识App界面图标　/125
6.2.2　App界面图标类型　/126
6.2.3　App界面图标设计要点　/127
6.2.4　设计案例——设计“书画应用”2.5D图标　/129
6.3　App首页界面设计　/133
6.3.1　App首页界面类型　/133
6.3.2　App首页界面设计要点　/135
6.3.3　设计案例——设计美食App首页界面　/136
6.4　App列表页界面设计　/142
6.4.1　App列表页界面类型　/142
6.4.2　App列表页界面设计原则　/142
6.4.3　设计案例——设计美食App列表页界面　/143
6.5　App其他界面设计　/146
6.5.1　App其他界面类型　/146
6.5.2　设计案例——设计美食App关注页界面　/147
6.5.3　设计案例——设计美食App个人中心页界面　/150
6.6　项目实训——设计旅游App搜索页界面　/154
思考与练习　/155
第7章　界面的标注、切图与动效制作　/ 157
7.1　界面的标注　/158
7.1.1　界面标注的作用　/158
7.1.2　界面标注的内容　/158
7.1.3　界面标注的规范　/160
7.1.4　界面标注的常用工具　/161
7.1.5　设计案例——标注App首页界面　/161
7.2　界面的切图　/167
7.2.1　切图的原则　/167
7.2.2　切图的要点　/167
7.2.3　切图的命名规则　/168
7.2.4　设计案例——对App首页界面进行切图　/169
7.3　界面的动效制作　/171
7.3.1　界面动效的作用　/172
7.3.2　界面动效的类型　/172
7.3.3　设计案例——制作加载动效　/173
7.4　项目实训——标注App关注页界面　/180
思考与练习　/182
第8章　综合案例——电商主题界面设计　/ 183
8.1　家居网案例分析　/184
8.1.1　家居网项目定位　/184
8.1.2　家居网设计思路　/185
8.1.3　绘制家居网界面原型图　/186
8.2　家居网界面设计　/188
8.2.1　设计家居网Logo　/188
8.2.2　设计家居网首页界面　/189
8.2.3　设计家居网内页界面　/195
8.3　家居网App界面设计　/198
8.3.1　设计家居网App首页界面　/198
8.3.2　设计家居网App发现页界面　/201
8.3.3　设计家居网App详情页界面　/202
8.3.4　设计家居网App商品结算页界面　/204
8.3.5　设计家居网App个人中心页界面　/206
8.3.6　设计家居网App登录页界面　/208
思考与练习　/209