本书共12 章，兼顾界面设计的理论与实践。第1~2 章通过对界面设计研究范畴、移动应用界面

设计风格发展史、界面设计流行元素变化趋势等内容的介绍，启发读者思考界面设计发展趋势和相关

领域的联系与支持；第3~12 章采用实例引导的方式，根据移动界面设计完成的顺序，分别讲解软件

Axure RP8、Adobe Illustrator、Photoshop 在界面原型设计、界面图标设计和界面美化方面的功能与方法，

以及与内容相关的实例操作。

本书条理清楚、语言流畅，在内容组织上力求自然、合理、循序渐进，并提供了丰富的实例和实

践要点，使读者更好地把握界面设计的特点，更容易理解所涉及的理论知识，掌握设计软件的应用。

本书可作为高等学校信息设计、交互设计及相关专业的教材，亦可作为相关从业人员的参考书。

前 言

移动界面设计的发展与移动互联网技术发展紧密联系，去中心化、广泛化应用是趋势，读者在学习界面设

计时，不仅需要掌握界面元素的设计制作，还需要系统掌握界面设计的设计原则、结构设计、视觉表现以及各

个环节之间的联系。本书基于以上的考虑，按照独立进行移动界面设计的流程，从设计目的制定到设计方法选

择，从流程图原型设计到视觉效果表现，较为完整地讲解了设计思路以及所使用的设计工具，以便很好地兼顾

设计理论与设计结果。

本教材的第1 章、第2 章介绍了移动界面相关设计原则和设计实践，涉及界面设计发展历程、界面设计风

格和影响设计趋势原因等内容。具体的设计实践在第3~12 章中分别讲述，针对设计过程不同的侧重点，介绍

相对成熟和业内通用的设计工具，对界面原型设计、界面图标设计和界面美化设计软件进行讲解，结合实例详

细讲述制作要点和流程。读者可以根据讲解步骤，掌握相关知识，灵活运用软件进行界面制作，从而在理论高

度上总览界面设计的特点、发展，在实践上分类选择各种界面设计方向，有目的、有计划地学习。

书中以移动界面为设计对象，理论部分包括界面设计研究范畴、移动应用界面设计风格发展史、界面设计

流行元素变化趋势、界面设计流程与模式；实践操作部分包括界面结构设计、界面图标设计、界面视觉设计和

界面动态效果设计等。

书中兼顾理论输出与实践操作，从流程图原型设计到视觉效果表现，论述新技术对界面设计的影响，选择

专业常用设计软件，详细介绍了4 种设计软件的使用方法，结合实例有效地开展设计实践，并在有的章后给出

思考题或课后练习，希望能够帮助读者从中找到必然的规律和遵循的法则，为未来的设计提供一些思路。

书中配备数字文件，每章的实例源文件以及图片素材都包含其中，读者可以按照书中内容，配合二维码素

材进行实例练习和创作。

由于时间仓促，编者水平有限，书中缺点和错误在所难免，恳请专家和广大读者不吝赐教。

作者

2019 年8 月

目 录

第1 章 界面设计概述......................................................1

1.1 绪论 .....................................................................................................2

1.2 界面设计基本原则 .............................................................................4

1.3 界面设计研究范畴 .............................................................................5

1.3.1 网页UI 设计 ...........................................................................5

1.3.2 移动端UI 设计 .......................................................................7

1.3.3 智能设备UI 设计 ...................................................................8

1.3.4 游戏及其他领域UI 设计 .......................................................8

1.4 界面设计平台及设计风格 .................................................................9

1.4.1 智能手机及其平台发展历程 .................................................9

1.4.2 移动应用界面设计风格发展历程 .......................................10

1.4.3 界面设计流行趋势变化 .......................................................10

1.4.4 移动应用界面设计人才需求 ...............................................12

文中参考文献 .............................................................................................13

推荐阅读文献 .............................................................................................13

思考题 .........................................................................................................14

第2 章 界面设计流程与模式...........................................15

2.1 UI 设计工作流程 ..............................................................................16

2.2 结构设计 ...........................................................................................16

2.2.1 界面流程图设计 ...................................................................16

2.2.2 界面模式原型设计 ...............................................................18

2.3 交互设计 ..........................................................................................24

2.3.1 手势互动 ...............................................................................24

2.3.2 界面跳转互动 .......................................................................25

2.3.3 基于界面优化的交互设计原则 ...........................................25

2.4 视觉设计 ...........................................................................................28

推荐阅读文献 .............................................................................................30

思考题 .........................................................................................................30

IV 界面设计

第3 章 Axure RP 概述.................................................31

3.1 Axure RP 8 介绍 ................................................................................32

3.2 Axure RP 8 的主界面 ........................................................................32

3.2.1 菜单栏区域 ...........................................................................33

3.2.2 工具栏区域 ...........................................................................34

3.2.3 样式工具栏 ...........................................................................35

3.2.4 页面编辑区域 .......................................................................36

3.2.5 元件库区域 ...........................................................................36

3.2.6 母版库区域 ...........................................................................38

3.2.7 工作区域 ...............................................................................39

3.2.8 检视器区域 ...........................................................................39

3.2.9 页面元素大纲区域 ...............................................................39

思考题 .........................................................................................................40

第4 章 应用Axure 进行界面原型设计.............................41

4.1 页面编缉区 .......................................................................................42

4.1.1 页面编辑区的作用 ...............................................................42

4.1.2 页面编辑区的功能 ...............................................................43

4.1.3 实例——iOS 时钟App ........................................................44

4.2 Axure 的流程图元件 .........................................................................47

4.2.1 绘制流程图所用的元件 .......................................................47

4.2.2 流程图关联页面 ...................................................................49

4.2.3 流程图显示具体控件 ...........................................................50

4.2.4 流程图的结构 .......................................................................51

4.2.5 实例——网易云音乐App ...................................................52

4.3 应用Axure 中的简单交互 ...............................................................58

4.3.1 页面触发事件 .......................................................................58

4.3.2 “用例编辑”对话框 .............................................................58

4.3.3 打开链接 ...............................................................................59

4.3.4 元件的交互行为 ...................................................................62

4.3.5 动态面板 ...............................................................................66

4.4 母版的使用 .......................................................................................70

4.4.1 母版的概念 ...........................................................................70

4.4.2 母版的功能 ...........................................................................71

4.4.3 母版的创建方法 ...................................................................72

目 录V

4.4.4 母版的拖放行为 ...................................................................76

4.4.5 实例——网易云音乐App 标签栏 ......................................77

课后练习 .....................................................................................................80

第5 章 综合实战应用——“爱彼迎”App 低保真原型设计....81

5.1 需求描述 ...........................................................................................82

5.2 设计思路 ...........................................................................................83

5.3 准备工作 ...........................................................................................83

5.4 设计规范 ...........................................................................................83

5.5 原型制作 ...........................................................................................84

5.5.1 底部标签导航母版设计 .......................................................84

5.5.2 搜索框及海报位区域布局设计 ...........................................88

5.5.3 “人气目的地推荐”布局设计 .............................................89

5.5.4 “特惠房源”布局设计 .........................................................91

5.5.5 海报轮播图效果制作 ...........................................................93

5.5.6 “探索”页面上下滑动与回弹效果制作 .............................94

5.5.7 “人气目的地推荐”区域左右滑动与回弹效果制作 .........97

5.5.8 “新年特惠房源”页签切换效果制作 ...............................100

课后练习 ...................................................................................................102

第6 章 Adobe Illustrator 概述.....................................103

6.1 Adobe Illustrator 介绍 .....................................................................104

6.2 Adobe Illustrator 的主界面 .............................................................105

第7 章 应用Adobe Illustrator 进行界面图标设计..........109

7.1 Adobe Illustrator CC 的常用基本操作 ..........................................110

7.2 常用工具的基本操作 .....................................................................114

7.2.1 线段工具 .............................................................................114

7.2.2 矩形工具 .............................................................................115

7.2.3 椭圆工具 .............................................................................116

7.2.4 多边形和星形工具 .............................................................116

7.3 对象的基本操作方法 .....................................................................117

7.3.1 选择移动 .............................................................................117

7.3.2 调整图形堆叠顺序 .............................................................118

VI 界面设计

7.3.3 编组 .....................................................................................119

7.3.4 对齐与分布 .........................................................................119

7.4 填色与描边 .....................................................................................120

第8 章 综合实战应用——图标设计...............................123

8.1 制作安卓图标 .................................................................................124

8.2 Material Design 图标绘制 ..............................................................128

8.2.1 制作谷歌浏览器图标 .........................................................128

8.2.2 绘制“文件”图标 .............................................................133

8.2.3 使用Adobe Illustrator 制作视频图标按钮 ........................136

8.3 使用Adobe Illustrator 制作断线图标 ............................................141

8.3.1 绘制“我的”图标 .............................................................141

8.3.2 绘制“ 发现”图标 ..............................................................143

8.3.3 绘制“分类”图标 .............................................................144

8.3.4 绘制“旅游”图标 .............................................................145

课后练习 ...................................................................................................146

第9 章 Photoshop CC 概述.......................................147

9.1 Photoshop CC 介绍 .........................................................................148

9.2 Photoshop CC 的操作界面 .............................................................149

9.3 文件的基本操作 ............................................................................154

参考文献 ...................................................................................................156

课后练习 ...................................................................................................156

第10 章 应用Photoshop CC 进行界面美化设计...........157

10.1 Photoshop CC 五大核心功能 .......................................................158

10.1.1 改变设计对象顺序——图层 ...........................................158

10.1.2 编辑图像的准确区域——蒙版 .......................................159

10.1.3 调整图像色彩色调——调整/ 填充图层 ........................161

10.1.4 精确把握编辑区域——选区 ...........................................161

10.1.5 准确传递界面信息——文字 ...........................................161

10.2 绘图工具 .......................................................................................162

10.2.1 矩形工具 ...........................................................................162

10.2.2 圆角矩形工具 ...................................................................163

目 录VII

10.2.3 椭圆工具 ...........................................................................163

10.2.4 多边形工具 .......................................................................163

10.2.5 直线工具 ...........................................................................164

10.2.6 自动形状工具 ...................................................................165

10.2.7 钢笔工具 ...........................................................................165

10.3 质感提升工具 ...............................................................................166

10.3.1 斜面和浮雕 .......................................................................166

10.3.2 描边 ...................................................................................167

10.3.3 内阴影 ..............................................................................168

10.3.4 内发光 ...............................................................................168

10.3.5 光泽 ...................................................................................168

10.3.6 颜色叠加 ...........................................................................170

10.3.7 渐变叠加 ...........................................................................170

10.3.8 图案叠加 ...........................................................................170

10.3.9 外发光 ...............................................................................171

10.3.10 投影 .................................................................................171

推荐阅读文献 ...........................................................................................172

课后练习 ...................................................................................................172

第11 章 综合实战应用——界面美化设计.......................173

11.1 工具类App 界面设计 ...................................................................174

11.2 生活类App 界面设计 ...................................................................179

11.2.1 扁平风格健康App 界面设计 ..........................................179

11.2.2 卡片投影风格烹饪App 界面设计 ..................................182

11.2.3 半透明线条感音乐App 界面设计 ..................................185

推荐阅读文献 ...........................................................................................188

课后练习 ...................................................................................................188

第12 章 界面动态效果制作..........................................189

12.1 猴子跑动动态效果制作 ...............................................................190

12.2 启动页动态效果制作 ...................................................................193

本书采用实例引导的方式，根据移动界面设计的顺序，讲解软件Axure RP8、Adobe Illustrator和Photoshop在界面原型设计、图标设计和美化方面的功能和用法，在教学中广受欢迎。配有本书实例和素材文件，并进行了在线课程建设。

吴旭敏，武汉理工大学艺术与设计学院副教授，硕士生导师，研究生学历博士，研究方向是信息艺术设计研究与实践，教授《界面设计》《网络设计》《交互设计原理》《用户体验设计》等本科和硕士研究生专业课程 。