UI设计必修课 Sketch移动界面设计教程 全彩版PDF电子书下载

Chapter 01 移动UI设计师入门 2

1.1 移动UI设计的发展 2

1.1.1 早期设计保证软件可用性 2

1.1.2 中期设计保证软件易用性 2

1.1.3 后期设计保证软件实用性 4

1.1.4 未来UI设计的展望 5

1.2 移动UI设计师的工作流程 6

1.3 iOS和Android设计特色 7

1.3.1 iOS的设计特色 7

1.3.2 Android的设计特色 11

1.4 移动UI设计师应了解的基本常识 14

1.4.1 移动UI设计中用到的单位 14

1.4.2 iOS的界面设计规范 16

1.4.3 Android的界面设计规范 18

1.4.4 为触控而设计 20

1.4.5 从iOS10的特点看设计趋势 20

1.5 专家支招 22

1.5.1 移动UI设计师常用的设计工具有哪些？ 22

1.5.2 什么是屏幕密度？ 23

1.6 本章小结 23

Chapter 02 初识Sketch 26

2.1 Sketch的安装和启动 26

2.1.1 实战—安装Sketch 26

2.1.2 实战——启动Sketch 27

2.2 Sketch的欢迎介绍 28

2.3 Sketch的主界面 29

2.3.1 菜单栏 29

2.3.2 工具栏 31

2.3.3 工具介绍 33

2.3.4 画布 33

2.3.5 检查器 35

2.3.6 图层 36

2.3.7 画板 36

2.3.8 蒙版 37

2.3.9 布尔运算 37

2.3.10 组件与共享样式 37

2.4 Sketch的快捷键 38

2.4.1 Sketch的快捷键列表 39

2.4.2 实战——自定义快捷键 43

2.5 Sketch的系统偏好设置 44

2.5.1 通用选项卡 45

2.5.2 画布选项卡 46

2.5.3 图层选项卡 47

2.5.4 插件选项卡 48

2.5.5 预设选项卡 49

2.5.6 Cloud选项卡 49

2.6 Sketch的标尺、参考线和网格 49

2.6.1 标尺 49

2.6.2 参考线 50

2.6.3 网格 51

2.7 Sketch的常见问题 53

2.7.1 Sketch是否支持Windows系统？ 53

2.7.2 Sketch能否替代Photoshop？ 53

2.7.3 Sketch是否有汉化版 53

2.7.4 Sketch如何升级？ 53

2.7.5 Sketch价格能不能优惠？ 54

2.8 专家支招 54

2.8.1 Sketch怎么兼容低版本文件？ 54

2.8.2 Sketch是否有类似Axure的组件库的功能？ 55

2.9 本章小结 55

Chapter 03 从线框原型开始 58

3.1 线框原型的基本概念 58

3.2 绘制线框原型的注意事项 59

3.2.1 巧用明暗对比 59

3.2.2 不使用截图和颜色 60

3.2.3 标记第一屏高度 60

3.2.4 合理的布局和间距 61

3.3 Sketch绘制线框原型 61

3.3.1 文件的新建和保存 61

3.3.2 回到Sketch文档的历史版本 63

3.3.3 画板预设 64

3.3.4 画板检查器 65

3.3.5 图层面板 66

3.3.6 关于模板 70

3.3.7 图层组的检查器 71

3.3.8 形状图层的检查器 73

3.3.9 文字图层的检查器 76

3.4 使用Sketch绘制线框原型 78

3.4.1 实战——计步App线框图的绘制 78

3.4.2 实战——内容列表页线框图的绘制 82

3.5 完整线框原型的绘制 86

3.5.1 实战——注册页1线框图的绘制 86

3.5.2 实战——注册页2线框图的绘制 90

3.5.3 实战——注册页3线框图的绘制 92

3.5.4 实战——注册页4线框图的绘制 94

3.6 绘制线框原型的思考 95

3.7 专家支招 96

3.7.1 画好App线框图的要点有哪些？ 96

3.7.2 线框原型的优势有哪些？ 96

3.8 本章小结 97

Chapter 04 使用Sketch设计图标 100

4.1 图标的设计准则 100

4.1.1 图标设计的必要性 100

4.1.2 了解图标的属性 102

4.1.3 不同系统中的图标格式 105

4.1.4 不同系统图标的更换方法 105

4.2 图标集的制作过程 109

4.2.1 创建制作清单 109

4.2.2 设计草图 109

4.2.3 数字呈现 110

4.2.4 确定最终效果 110

4.2.5 命名并导出 111

4.3 使用Sketch插入面板 111

4.3.1 插入矢量 111

4.3.2 插入铅笔 115

4.3.3 插入形状 116

4.3.4 插入文本 120

4.3.5 插入图片 121

4.4 图形的布尔运算 121

4.5 实战——绘制iOS App图标 124

4.6 实战——绘制音乐应用图标 128

4.7 图标的源文件格式 132

4.8 专家支招 133

4.8.1 iOS系统中图标的尺寸 133

4.8.2 如何获得专业图标 134

4.9 本章小结 134

Chapter 05 使用Sketch设计移动UI 136

5.1 移动UI的设计原则 136

5.1.1 视觉一致性原则 136

5.1.2 视觉简易性原则 137

5.1.3 从为用户的考虑角度出发 137

5.2 移动界面的色彩搭配与视觉效果 138

5.2.1 冷暖色调的对比 138

5.2.2 色彩的意向 138

5.2.3 色彩的搭配技巧 139

5.2.4 App界面配色原则 140

5.2.5 App UI设计的用色规范 142

5.3 iOS应用界面设计规范 142

5.3.1 Sketch的iOS UI模板 143

5.3.2 模板使用的注意事项 144

5.4 安卓界面及Material Design设计规范 146

5.5 移动界面中的色彩应用 147

5.5.1 Sketch颜色面板的使用 148

5.6 文字的创建与编辑 157

5.6.1 文本的添加 158

5.6.2 文本的编辑 158

5.6.3 文本路径 160

5.6.4 文本转换轮廓 160

5.7 使用共享样式 161

5.8 文字的导出 163

5.9 实战——绘制iOS音乐播放界面 164

5.10 实战——绘制iOS社交App界面 168

5.11 实战——绘制iOS支付App界面 172

5.12 专家支招 176

5.12.1 移动界面中的文字使用技巧 176

5.12.2 移动界面中的色彩选择 177

5.13 本章小结 178

Chapter 06 使用Sketch设计PC端网站UI 180

6.1 网页设计PC端和移动端的区别 180

6.1.1 屏幕尺寸不同 180

6.1.2 操作方式不同 180

6.1.3 网络环境不同 181

6.1.4 传感器不同 181

6.1.5 使用场景和使用时间的不同 181

6.1.6 软件迭代时间和更新频率不同 181

6.1.7 功能设计上的区别 181

6.2 扁平化设计在UI设计中的应用 182

6.2.1 图标和徽章 182

6.2.2 圆角和折角 183

6.2.3 标签和条纹 184

6.2.4 装饰元素 185

6.3 编辑绘制的图形 186

6.3.1 分组和取消分组 186

6.3.2 编辑和变换图形 187

6.3.3 旋转图形 187

6.3.4 蒙版 189

6.3.5 剪刀与描边宽度 192

6.4 位图的编辑 192

6.4.1 编辑位图 193

6.4.2 色彩校正 195

6.5 应用样式 195

6.5.1 阴影 195

6.5.2 内阴影 196

6.5.3 模糊 196

6.6 混合模式 198

6.7 组件 199

6.7.1 创建组件 200

6.7.2 覆盖文本 200

6.7.3 管理组件 201

6.8 实战——绘制企业PC端网站界面 202

6.9 实战——绘制企业PC端网站界面 205

6.10 专家支招 215

6.10.1 理解以用户为中心 215

6.10.2 界面设计中的内容与形式统一 215

6.11 本章小结 216

Chapter 07 UI的输出与交互设计 218

7.1 适配多分辨率移动界面 218

7.1.1 适配安卓设备 218

7.1.2 适配iOS设备 218

7.1.3 使用自适应设计插件 218

7.2 实现在设备上实时预览 219

7.3 分享设计稿 219

7.4 交付给开发人员的文件 220

7.5 使用Sketch切图 221

7.5.1 切片图层检查器 223

7.5.2 点九切图 224

7.6 使用Sketch标注 227

7.7 设计移动交互动效 230

7.7.1 了解移动设备的手势 230

7.7.2 移动交互动效设计的注意事项 233

7.7.3 常见的动效制作软件 234

7.8 使用Sketch插件 237

7.8.1 插件的安装 237

7.8.2 实用的插件 238

7.9 专家支招 240

7.9.1 如何对移动界面进行标注 240

7.9.2 常见角度动画效果 241

7.10 本章小结 242