更新时间:2021-04-16 16:14:36
封面
版权信息
内容简介
第1章 初识UI设计
1.1 什么是UI
1.1.1 认识UI设计
1.1.2 UI设计存在的理由
1.1.3 什么是好的UI设计
1.2 UI设计师的工作内容
1.2.1 头脑风暴
1.2.2 交互设计
1.2.3 界面设计
1.2.4 动效设计
1.2.5 切图与标注
1.2.6 辅助研发
1.3 设计师常用软件
第2章 Sketch设计入门
2.1 初识Sketch
2.1.1 Sketch是什么
2.1.2 Sketch在UI设计中的优势
2.1.3 Sketch的团队价值
2.1.4 Sketch未来的发展空间
2.2 如何获取Sketch
2.2.1 下载Sketch
2.2.2 安装Sketch
2.2.3 激活Sketch
2.3 初见Sketch
2.4 了解Sketch主界面
2.4.1 菜单栏
2.4.2 工具栏
2.4.3 页面
2.4.4 图层
2.4.5 画布
2.4.6 检查器
2.4.7 导出
第3章 发现音乐App交互原型图设计
3.1 发现音乐App产品需求文档解读
3.1.1 了解产品需求文档
3.1.2 了解用户群体
3.1.3 产品功能解读
3.2 设计产品交互原型图
3.2.1 为什么要做交互原型图
3.2.2 交互原型图的展示方式
3.3 在Sketch中绘制交互原型图所需要的工具
3.3.1 Insert(添加)工具
3.3.2 Group(编组)工具
3.3.3 Radius(圆角半径)工具
3.3.4 测量功能
3.3.5 对齐功能
3.3.6 元件的创建
3.4 利用Sketch绘制产品交互原型图
3.4.1 创建文档
3.4.2 创建画板
3.4.3 标记非设计区域
3.4.4 选择交互稿色系及明度
3.4.5 绘制首页交互稿
3.4.6 绘制“喜欢”界面交互原型图
3.4.7 绘制“朋友”界面交互原型图
3.4.8 绘制“播放界面”交互原型图
3.4.9 绘制“音乐列表”界面交互原型图
3.4.10 绘制“电台界面”交互原型图
3.5 交互原型图动效初体验
3.5.1 Sketch的Link原型功能介绍
3.5.2 通过原型功能进行产品原型初体验
3.6 作业:绘制产品原型图
第4章 功能图标设计
4.1 了解功能图标
4.2 功能图标的设计思路及技巧
4.3 功能图标的点击范围及显示范围
4.4 功能图标的尺寸规范
4.5 功能图标的视觉平衡
4.5.1 为什么要遵守视觉平衡
4.5.2 计算视觉平衡缩进值
4.5.3 计算各基本形尺寸
4.6 Sketch的布尔运算工具
4.7 利用Sketch绘制功能图标
4.7.1 绘制“侧边栏icon”
4.7.2 绘制“添加icon”
4.7.3 绘制“音乐列表icon”
4.7.4 绘制““icon/返回””
4.7.5 绘制“循环播放icon”
4.7.6 绘制“下载icon”
4.7.7 绘制“留言icon”
4.7.8 绘制“点赞icon”
4.8 作业:绘制产品内的功能图标
第5章 应用图标设计
5.1 当下同类App图标设计风格分析
5.2 应用图标的传导含义
5.3 为应用图标选择元素
5.4 为应用图标选择颜色
5.5 Sketch的STYLE(样式)功能
5.5.1 Fills(填充)
5.5.2 Borders(描边)
5.5.3 Shadows(阴影)和Inner Shadows(内阴影)
5.5.4 Blurs(模糊)
5.5.5 删除未使用的样式
5.5.6 复制与粘贴样式
5.6 利用Sketch绘制应用图标
5.6.1 绘制图标的扁平状态
5.6.2 绘制图标的轻拟物状态