目 录
第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
