UI设计（全彩慕课版）

认识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