第1章__eol__初识UI设计__eol__1.1?什么是UI 002__eol__1.1.1?认识UI设计 002__eol__1.1.2?UI设计存在的理由 002__eol__1.1.3?什么是好的UI设计 003__eol__1.2?UI设计师的工作内容 004__eol__1.2.1?头脑风暴 004__eol__1.2.2?交互设计 005__eol__1.2.3?界面设计 008__eol__1.2.4?动效设计 009__eol__1.2.5?切图与标注 010__eol__1.2.6?辅助研发 011__eol__1.3?设计师常用软件 012__eol____eol__第2章__eol__Sketch设计入门__eol__2.1?初识Sketch 016__eol__2.1.1?Sketch是什么 016__eol__2.1.2?Sketch在UI设计中的优势 017__eol__2.1.3?Sketch的团队价值 019__eol__2.1.4?Sketch未来的发展空间 020__eol__2.2?如何获取Sketch 021__eol__2.2.1?下载Sketch 021__eol__2.2.2?安装Sketch 023__eol__2.2.3?激活Sketch 023__eol__2.3?初见Sketch 024__eol__2.4?了解Sketch 主界面 025__eol__2.4.1?菜单栏 025__eol__2.4.2?工具栏 026__eol__2.4.3?页面 029__eol__2.4.4?图层 030__eol__2.4.5?画布 031__eol__2.4.6?检查器 031__eol__2.4.7?导出 033__eol____eol__第3章__eol__发现音乐App交互原型图设计__eol__3.1?发现音乐App产品需求文档解读 036__eol__3.1.1?了解产品需求文档 036__eol__3.1.2?了解用户群体 036__eol__3.1.3?产品功能解读 037__eol__3.2?设计产品交互原型图 038__eol__3.2.1?为什么要做交互原型图 038__eol__3.2.2?交互原型图的展示方式 039__eol__3.3?在Sketch中绘制交互原型图所需要的工具 040__eol__3.3.1?Insert（添加）工具 040__eol__3.3.2?Group（编组）工具 043__eol__3.3.3?Radius（圆角半径）工具 044__eol__3.3.4?测量功能 045__eol__3.3.5?对齐功能 045__eol__3.3.6?元件的创建 048__eol__3.4?利用Sketch绘制产品交互原型图 052__eol__3.4.1?创建文档 052__eol__3.4.2?创建画板 053__eol__3.4.3?标记非设计区域 053__eol__3.4.4?选择交互稿色系及明度 056__eol__3.4.5?绘制首页交互稿 057__eol__3.4.6?绘制“喜欢”界面交互原型图 076__eol__3.4.7?绘制“朋友”界面交互原型图 082__eol__3.4.8?绘制“播放界面”交互原型图 085__eol__3.4.9?绘制“音乐列表”界面交互原型图 087__eol__3.4.10?绘制“电台界面”交互原型图 089__eol__3.5?交互原型图动效初体验 090__eol__3.5.1?Sketch的Link原型功能介绍 091__eol__3.5.2?通过原型功能进行产品原型初体验 094__eol__3.6?作业：绘制产品原型图 097__eol____eol__第4章__eol__功能图标设计__eol__4.1?了解功能图标 100__eol__4.2?功能图标的设计思路及技巧 100__eol__4.3?功能图标的点击范围及显示范围 103__eol__4.4?功能图标的尺寸规范 103__eol__4.5?功能图标的视觉平衡 103__eol__4.5.1?为什么要遵守视觉平衡 104__eol__4.5.2?计算视觉平衡缩进值 104__eol__4.5.3?计算各基本形尺寸 105__eol__4.6?Sketch的布尔运算工具 107__eol__4.7?利用Sketch绘制功能图标 108__eol__4.7.1?绘制“侧边栏icon” 109__eol__4.7.2?绘制“添加icon” 111__eol__4.7.3?绘制“音乐列表icon” 112__eol__4.7.4?绘制““icon/返回”” 114__eol__4.7.5?绘制“循环播放icon” 116__eol__4.7.6?绘制“下载icon” 120__eol__4.7.7?绘制“留言icon” 122__eol__4.7.8?绘制“点赞icon” 125__eol__4.8?作业：绘制产品内的功能图标 131__eol____eol__第5章__eol__应用图标设计__eol__5.1?当下同类App图标设计风格分析 134__eol__5.2?应用图标的传导含义 135__eol__5.3?为应用图标选择元素 136__eol__5.4?为应用图标选择颜色 137__eol__5.5? Sketch的STYLE（样式）功能 139__eol__5.5.1?Fills（填充） 139__eol__5.5.2?Borders（描边） 143__eol__5.5.3?Shadows（阴影）和InnerShadows（内阴影） 144__eol__5.5.4?Blurs（模糊） 145__eol__5.5.5?删除未使用的样式 146__eol__5.5.6?复制与粘贴样式 146__eol__5.6?利用Sketch绘制应用图标 147__eol__5.6.1?绘制图标的扁平状态 147__eol__5.6.2?绘制图标的 轻拟物状态 149__eol__5.6.3?绘制图标的拟物状态 152__eol__5.7?作业：绘制应用图标 153__eol____eol__第6章__eol__发现音乐App主界面设计__eol__6.1?竞品分析（音乐App界面设计风格） 156__eol__6.2?Sketch文本处理功能介绍 157__eol__6.2.1?创建文本 157__eol__6.2.2?文本检查器 157__eol__6.2.3?文本Alignment（对齐）功能 157__eol__6.2.4?Text Options（文本选项） 158__eol__6.2.5?文本样式的复制与粘贴 158__eol__6.2.6?创建文本样式 158__eol__6.2.7?在图层中应用文本样式 159__eol__6.2.8?路径上的文本 159__eol__6.2.9?将文本转换为路径 160__eol__6.2.10?解决缺少字体的问题 160__eol__6.3?Sketch中的Mask（蒙版）功能 161__eol__6.4?利用Sketch绘制产品主界面 162__eol__6.4.1?首页设计 162__eol__6.4.2?“喜欢-界面”设计 171__eol__6.4.3?“朋友-界面”设计 175__eol__6.4.4?“播放-界面”设计 179__eol__6.5?作业：设计产品主界面 181__eol____eol__第7章__eol__发现音乐App二级界面设计__eol__7.1?回顾二级界面交互设计稿 184__eol__7.2?利用Sketch及插件绘制产品二级界面 185__eol__7.2.1?“音乐列表-界面”设计 185__eol__7.2.2?“电台-界面”设计 186__eol__7.2.3?搜索系列界面设计 187__eol__7.2.4?搜索歌手系列界面设计 196__eol__7.3?作业：完成产品二级界面绘制 201__eol____eol__第8章__eol__头像设计__eol__8.1?头像的位置 204__eol__8.2?主流头像设计风格分析 204__eol__8.3?头像设计思路分析 205__eol__8.3.1?了解需求 205__eol__8.3.2?寻找特点 205__eol__8.3.3?元素设计 206__eol__8.3?利用Sketch设计产品内的小头像 207__eol__8.4?作业：绘制小头像 215__eol____eol__第9章__eol__产品切图与标注__eol__9.1?产品的切图 218__eol__9.1.1?切图的存储方式 218__eol__9.1.2?了解切图结构 218__eol__9.1.3?了解切图的命名 219__eol__9.2?产品设计稿标注 221__eol____eol__第10章__eol__养成设计好习惯__eol__10.1?如何在Sketch中添加库 228__eol__10.2?如何使用库与更新库 229__eol__10.3?文件整理 231__eol____eol__第11章__eol__UI设计动效入门__eol__11.1?初识Principle 234__eol__11.1.1?为什么要学习动效制作 234__eol__11.1.2?为什么要选择Principle（Sketch的好搭档） 234__eol__11.2?如何获取Principle 235__eol__11