UI设计（全彩慕课版）

随着移动互联网技术的普及和迅猛发展，UI设计这一行业逐渐被越来越多的人了解。本书从UI设计的角度出发，以设计案例和项目实践相结合的方式，介绍UI设计的相关知识与操作技能。全书共8章内容，分别为认识UI设计，UI设计要素，UI设计规范，UI设计布局与构图，网页界面设计，App界面设计，界面的标注，切图与动效制作，以及综合案例——电商主题界面设计。本书每章的内容讲解和项目实训等能有效锻炼并提高读者的设计思维能力和实际操作能力，还能帮助读者理解和掌握UI设计的相关知识。

夏琰，长春职业技术学院副教授，任吉林省计算机行业商会理事、省美学学会会员。主要研究项目及领域：平面设计、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

随着移动互联网技术的普及和迅猛发展，UI设计这一行业逐渐被越来越多的人了解。本书从UI设计的角度出发，以设计案例和项目实践相结合的方式，介绍UI设计的相关知识与操作技能。全书共8章内容，分别为认识UI设计，UI设计要素，UI设计规范，UI设计布局与构图，网页界面设计，App界面设计，界面的标注，切图与动效制作，以及综合案例——电商主题界面设计。本书每章的内容讲解和项目实训等能有效锻炼并提高读者的设计思维能力和实际操作能力，还能帮助读者理解和掌握UI设计的相关知识。

夏琰，长春职业技术学院副教授，任吉林省计算机行业商会理事、省美学学会会员。主要研究项目及领域：平面设计、UI设计、交互设计。