1 UI基础 9
1.1 用户界面的风格演变 10
1.2 UI设计的种类 14
1.2.1 网页设计 15
1.2.2 软件界面设计 17
1.2.3 App界面设计 18
1.2.4 游戏界面设计 19
1.3 App界面设计师的职责 20
1.3.1 职责之内 20
1.3.2 职责之外 23
1.4 合格UI设计师的必备技能 24
1.4.1 了解互联网产品的诞生过程 24
1.4.2 深度掌握辅助工具 25
1.4.3 拥有良好的学习心态 26
2 设计入门 27
2.1 审美 28
2.1.1 审美观的概念及其重要性 28
2.1.2 艺术与设计的区别 28
2.1.3 如何培养自己的审美观 28
2.2 配色 29
2.2.1 色彩的基础知识 29
2.2.2 色域与屏幕选择 30
2.2.3 常用颜色模式 32
2.2.4 颜色与情感 34
2.2.5 色彩搭配 36
2.2.6 色彩的选择与应用 40
2.3 构图 42
2.3.1 构图的概念 42
2.3.2 常用的构图方式 42
2.3.3 黄金分割 45
2.4 文字与排版 46
2.4.1 字体的样式 46
2.4.2 系统常用字体 48
2.4.3 字体的搭配 50
3 认识Photoshop 51
3.1 初识Photoshop CC 52
3.1.1 界面布局 52
3.1.2 文档的保存 69
3.2 图层面板 71
3.2.1 图层的概念和用法 71
3.2.2 图层样式 73
3.2.3 图层混合模式 79
3.3 路径与布尔运算 81
3.4 神奇的滤镜 83
3.5 快捷键 85
3.5.1 常用快捷键 85
3.5.2 自定义快捷键 86
4 图 标设计 87
4.1 图标发展进程 88
4.1.1 图标风格进化 88
4.1.2 移动端操作系统平台介绍 89
4.1.3 iOS与Andorid系统图标的差异 91
4.2 图标的可用性分析 92
4.2.1 图标的种类 92
4.2.2 不同图标的设计要点 92
4.3 扁平化风格的图标实战 93
4.3.1 iOS App图标设计规范 93
4.3.2 规范模板文档的使用 95
4.3.3 从零开始画一个“时钟”图标 98
4.3.4 保存与输出 104
4.4 写实风格的图标实战 105
4.4.1 Android App图标设计规范 105
4.4.2 写实版“时钟”图标 107
4.4.3 写实版“徽章”图标 119
4.4.4 保存与输出 131
4.5 设计习惯规范 133
4.5.1 不破坏原始素材 133
4.5.2 整洁的文档 134
4.5.3 规范的文件命名 134
5 界面设计 135
5.1 界面风格进化史 136
5.1.1 iOS从现实到抽象 136
5.1.2 Android与Material design 138
5.2 扁平化风格界面实战 140
5.2.1 从设计语言说起 140
5.2.2 交互设计稿／产品原型 140
5.2.3 从零开始画界面 141
5.2.4 页面标注 148
5.2.5 资源输出 150
5.2.6 切片工具 156
5.3 写实风格界面实战 160
5.3.1 从布局开始 160
5.3.2 细化并打磨细节 161
5.3.3 标注与资源输出 166
6 动效设计 167
6.1 动效设计概念 168
6.1.1 什么是动效设计 168
6.1.2 为什么要做动效 169
6.1.3 动效设计常用软件 175
6.2 动效设计实战 176
6.2.1 动画的原理 176
6.2.2 动画的节奏 176
6.2.3 Photoshop动效面板介绍 177
6.2.4 逐帧动画——小球弹跳 178
6.2.5 时间轴动画——气泡爆炸 181
6.2.6 时间轴动画——旋转 186
6.2.7 输出格式与命名规范 194
7 设计准则 197
7.1 HIG的概念介绍 198
7.1.1 什么是HIG 198
7.1.2 为什么要遵循HIG 198
7.2 iOS系统的HIG 198
7.2.1 设计原则 198
7.2.2 交互方式 200
7.2.3 视觉与控件 207
7.2.4 其他扩展项 214
7.2.5 苹果UI设计资源 217
7.3 Android系统的HIG 217
7.3.1 设计原则 217
7.3.2 与ioS差异点 218
8 破坏规则 229
8.1 为什么要破坏既有的规矩 230
8.2 独一无二的设计 230
8.2.1 活用设计准则 230
8.2.2 设定应用场景 234
8.2.3 情感化设计 235
8.3 无招胜有招 237
9 关于成长 239
9.1 成长的阵痛与迷茫 240
9.2 学会学习的方法 242
9.3 写在最后 244