本书以Photoshop为工具，以iOS和Android设计规范为标准，由浅入深地讲解APP图标和多种组件的设计与实现方法。本书在原型图绘制与交互设计方面着重讲解软件Axure常见的交互操作，突出实用性。此外，本书还以UI社APP产品开发过程为例，重点讲解前期调研、竞品分析、功能需求确定、原型图绘制、视觉规范设计、页面效果图制作、标注和切图等各环节的工作流程和思维过程，可使读者对UI设计师岗位和整个行业有清晰的认识。
本书共8章，内容包括APP UI设计与交互概述、UI基础知识、图标设计、常见APP组件的设计与实现、交互设计与原型图绘制、APP界面设计与实战、标注与切图、职业技能实训指导。
本书适合作为高等教育本、专科院校计算机相关专业的教材，也可供UI设计爱好者自学使用。

1.本书是系列教材改版采用四色印刷，案例精美、阅读体验感较好；
2.配套微课视频、PPT、学期授课计划、课时授课计划等丰富教学资源；
3.突出培养读者的岗位技能。

吴丰，黄河水利职业学院优秀教师，曾出版多部相关教材： 1）网页设计与制作（Dreamweaver CS6 HTML5 CSS3版），独著，ISBN: 9787302403845，清华大学出版社，2015年12月出版。 2）Dreamweaver CS5网页设计与制作(DIV CSS版)，主编，ISBN: 9787302286172，清华大学出版社，2012年7月出版。

第 1章 APP UI设计与交互概述 1
1.1 UI设计概述及行业发展前景 2
1.1.1 UI设计概述 2
1.1.2 交互设计概述 2
1.1.3 用户体验概述 4
1.1.4 移动端UI的操作系统 4
1.1.5 就业前景 5
1.2 如何学习UI设计 6
1.2.1 UI设计师常用软件介绍 6
1.2.2 UI设计师设计理论的知识储备 8
1.3 UI设计理论基础 8
1.3.1 色彩三要素 9
1.3.2 UI设计配色基础 10
1.3.3 配色组合推荐 11
1.3.4 小试牛刀（绘制APP功能界面） 13
1.4 APP UI界面设计的流行趋势 14
1.4.1 极简设计 15
1.4.2 玻璃拟态 15
1.4.3 3D元素 16
1.4.4 玻璃拟态元素的制作（玻璃卡片） 17
1.5 浅析APP产品开发流程 19
1.6 职场经验分享 21
1.6.1 作品集 21
1.6.2 团队的合力 21
1.6.3 学以致用 22
1.6.4 设计师应具备的视野 22
1.7 学习反思 23
1.7.1 本章小结 23
1.7.2 课后练习 23
第 2章 UI基础知识 24
2.1 APP页面分类解析 25
2.1.1 启动页、闪屏和引导页 25
2.1.2 首页 28
2.1.3 导航 30
2.1.4 详情页 32
2.1.5 注册登录页 32
2.2 APP框架布局与基础概念 33
2.2.1 认识APP框架布局 33
2.2.2 常见术语 34
2.3 iOS设计规范 36
2.3.1 iOS界面尺寸 36
2.3.2 iOS界面的框架尺寸 37
2.3.3 iOS界面的图标尺寸 38
2.3.4 iOS字体规范 38
2.3.5 制作iOS标准界面（列表界面） 39
2.4 Android设计规范 41
2.4.1 Android界面尺寸 41
2.4.2 Android图标尺寸与字体规范 42
2.4.3 制作Android标准界面 42
2.5 其他设计规范 43
2.5.1 边距与间距 43
2.5.2 内容布局 45
2.5.3 常用颜色 45
2.6 学习反思 46
2.6.1 本章小结 46
2.6.2 课后练习 46
第3章 图标设计 47
3.1 UI图标设计 48
3.1.1 图标的分类 48
3.1.2 常见存储格式与图标尺寸 49
3.1.3 APP启动图标的常见创意设计方法 50
3.2 线性图标 51
3.2.1 线性图标概述 51
3.2.2 线性图标的制作（Wi-Fi图标） 51
3.2.3 课堂巩固练习（Keep图标） 53
3.3 剪影类图标 54
3.3.1 剪影类图标概述 54
3.3.2 剪影类图标的制作（抖音APP图标） 54
3.3.3 课堂巩固练习（微信图标） 57
3.4 扁平化与长阴影图标 57
3.4.1 扁平化与长阴影图标概述 57
3.4.2 扁平化与长阴影图标的制作（指南针图标） 58
3.4.3 课堂巩固练习（一组扁平化图标） 61
3.5 拟物化图标 61
3.5.1 拟物化图标概述 61
3.5.2 拟物化图标的制作（木纹质感翻页日历） 62
3.5.3 课堂巩固练习（拟物齿轮） 66
3.6 学习反思 66
3.6.1 本章小结 66
3.6.2 课后练习 67
第4章 常见APP组件的设计与实现 68
4.1 UI Kit概述 69
4.2 按钮 69
4.2.1 按钮概述 69
4.2.2 按钮的按压状态 70
4.2.3 按钮的种类 71
4.2.4 按钮的设计要点 72
4.2.5 扁平化按钮的制作 73
4.2.6 质感按钮的制作 74
4.2.7 课堂巩固练习（水晶质感按钮） 77
4.3 滑动条 77
4.3.1 扁平滑动条的制作 77
4.3.2 质感滑动条的制作 78
4.3.3 课堂巩固练习（QQ音乐播放器） 80
4.4 表单 80
4.4.1 表单结构与设计要点 80
4.4.2 单选按钮与复选框的制作 82
4.4.3 文本框与下拉框的制作 83
4.4.4 课堂巩固练习（反馈页表单） 84
4.5 数据图表 84
4.5.1 数据图表概述 84
4.5.2 数据图表的制作 86
4.5.3 课堂巩固练习（环形数据图表） 89
4.6 Banner 89
4.6.1 Banner概述 89
4.6.2 Banner组件的制作 90
4.6.3 课堂巩固练习（通栏Banner） 91
4.7 卡片 92
4.7.1 卡片概述 92
4.7.2 卡片组件的制作 92
4.7.3 课堂巩固练习（信息卡片） 93
4.8 学习反思 94
4.8.1 本章小结 94
4.8.2 课后练习 94
第5章 交互设计与原型图绘制 95
5.1 初识交互设计 96
5.1.1 交互设计概述 96
5.1.2 产品开发中的层级关系 97
5.1.3 相关工作经验 98
5.2 初识产品原型 99
5.3 原型制作工具Axure RP 100
5.3.1 Axure RP界面认知 100
5.3.2 Axure RP基本操作 101
5.3.3 绘制手机原型并存放于自己的元件库 103
5.3.4 多页面巩固练习（绘制金融类APP原型图） 104
5.4 Axure RP常见的交互应用 105
5.4.1 页面跳转 105
5.4.2 引导页左右滑动效果 106
5.4.3 长页面上下滚动效果 108
5.4.4 弹出消息框效果 110
5.4.5 侧边栏菜单滑入效果 113
5.4.6 表单验证与登录交互 114
5.5 学习反思 118
5.5.1 本章小结 118
5.5.2 课后练习 118
第6章 APP界面设计与实战 119
6.1 APP项目实战UI社APP产品设计与实现 120
6.1.1 产品定位与背景简要分析 120
6.1.2 竞品分析 120
6.1.3 UI社APP产品架构梳理 125
6.1.4 绘制低保真原型图 125
6.1.5 UI社APP的视觉规范 126
6.1.6 APP产品启动图标的制作 128
6.1.7 引导页效果图的制作 128
6.1.8 登录页效果图的制作 129
6.1.9 首页效果图的制作 129
6.1.10 发现页效果图的制作 129
6.1.11 上传页效果图的制作 130
6.1.12 动态页与动态详情页效果图的制作 130
6.1.13 我的页效果图的制作 131
6.1.14 其他页面效果图 132
6.2 学习反思 133
6.2.1 本章小结 133
6.2.2 课后练习 133
第7章 标注与切图 135
7.1 标注 136
7.1.1 标注工具概述 136
7.1.2 Markman的使用方法 137
7.1.3 标注的内容 138
7.1.4 UI社APP项目引导页标注 139
7.1.5 UI社APP项目登录页标注 139
7.1.6 UI社APP项目首页标注 140
7.1.7 UI社APP项目教程功能列表页标注 141
7.2 切图 141
7.2.1 切图概述 141
7.2.2 图片资源命名规范 142
7.2.3 切图工具Cutterman 142
7.2.4 iOS平台与Android平台下的切图 143
7.2.5 点9图 145
7.3 学习反思 147
7.3.1 本章小结 147
7.3.2 课后练习 147
第8章 职业技能实训指导 148
8.1 实训意义和目的 149
8.2 实训要求与考核标准 149
8.2.1 实训的总体要求 149
8.2.2 考核标准 149
8.3 实训步骤引导 150
8.3.1 确定项目题材 150
8.3.2 确定色彩、字体与间距标准 150
8.3.3 绘制确定图标 151
8.3.4 制作各级页面 152