目录

●第1章认识UI设计/1
1．1UI设计概述/2
1．1．1什么是UI设计/2
1．1．2UI设计的用户体验/4
1．1．3UI设计的常用工具/6
1．2UI设计的运用/8
1．2．1移动App界面设计/8
1．2．2网页界面设计/9
1．2．3游戏界面设计/10
1．2．4应用软件界面设计/11
1．3UI设计的发展趋势/11
1．3．1人工智能产品界面设计/11
1．3．2AR产品界面设计/12
1．3．3VR产品界面设计/13
1．4UI设计的原则/13
1．4．1适用性/13
1．4．2规范性/14
1．4．3易操作性/15
1．4．4统一性/15
1．4．5层级性/16
1．5UI设计的流程/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．4UI设计中常见的色彩搭配/33
2．2．5分析案例——对“普通话学习”App界面进行色彩分析/34
2．3字体/35
2．3．1UI设计常用字体类型/35
2．3．2UI设计字体规范/37
2．3．3UI设计中的字体排版/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．1UI设计规范的原则/57
3．1．2UI设计规范包括的内容/58
3．2不同操作系统的UI设计规范/60
3．2．1iOS的UI设计规范/60
3．2．2Android操作系统的UI设计规范/61
3．2．3Windows操作系统的UI设计规范/63
3．3UI设计的图片规范/63
3．3．1图片的格式/64
3．3．2图片的使用规范/64
3．4项目实训——分析某App界面中的UI设计规范/65
思考与练习/66
第4章UI设计布局与构图/67
4．1UI设计的布局元素/68
4．1．1留白/68
4．1．2视觉层次/70
4．1．3分析案例——分析“佰草集”官方网站界面的布局元素/72
4．2UI设计的布局原则/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．3UI设计的构图方法/78
4．3．1平衡构图/78
4．3．2放射式构图/79
4．3．3九宫格构图/80
4．3．4三角形构图/81
4．3．5F形构图/81
4．3．6S形构图/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．1Logo设计标准与样式/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．1App基本界面构成/119
6．1．2App界面布局形式/120
6．1．3App界面设计要点/125
6．2App界面图标设计/125
6．2．1认识App界面图标/125
6．2．2App界面图标类型/126
6．2．3App界面图标设计要点/127
6．2．4设计案例——设计“书画应用”2．5D图标/129
6．3App首页界面设计/133
6．3．1App首页界面类型/133
6．3．2App首页界面设计要点/135
6．3．3设计案例——设计美食App首页界面/136
6．4App列表页界面设计/142
6．4．1App列表页界面类型/142
6．4．2App列表页界面设计原则/142
6．4．3设计案例——设计美食App列表页界面/143
6．5App其他界面设计/146
6．5．1App其他界面类型/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