Sketch+Xcode双剑合璧 移动UI设计师快速上手指南 全彩PDF电子书下载

Chapter 1 华丽转身——从Web设计师到APP设计师 3

1.1 把网页设计稿缩小就是APP设计了吗？ 3

1.2 手机型号、尺寸及分辨率 3

1.2.1 了解主流手机分辨率 3

1.2.2 用哪种分辨率作为设计稿的标准尺寸？ 4

1.2.3 手机分辨率与输出素材对应速查表 6

1.3 移动设备上的字体与字号 6

1.3.1 移动设备使用的字体 7

1.3.2 d p、px、sp傻傻分不清楚 7

1.4 最小可点击区域 8

1.5 Android与iOS界面设计的异同 9

Chapter 2 拥抱变化——Sketch初体验 13

2.1 下载并安装Sketch 13

2.2 熟悉Sketch界面 14

2.2.1 欢迎界面 14

2.2.2 Sketch主界面 15

2.3 自定义工具栏 16

2.4 Sketch工具一览 17

Chapter 3 快速上手——玩转Sketch 28

3.1 Sketch中的Artboard及图层 28

3.1.1 在工作区建立Artboard画板 28

3.1.2 Sketch中的图层结构 29

3.2 玩转Sketch图形工具 32

3.2.1 线条工具（Line） 32

3.2.2 箭头工具（Arrow） 33

3.2.3 矩形（Rectangle）与圆角矩形工具（Rounded） 33

3.2.4 多边形工具 34

3.3 钢笔、铅笔类工具 35

3.3.1 使用钢笔工具绘制线段 35

3.3.2 使用钢笔工具画弧线 35

3.3.3 锚点的添加、删除及移动 36

3.3.4 像素对齐 37

3.3.5 铅笔工具 37

3.3.6 剪刀工具 37

3.3.7 描边选项 38

3.4 画龙点睛——不可或缺的文本工具 39

3.4.1 在Sketch中添加文本 39

3.4.2 改变文字属性 39

3.4.3 调整文本字体、字号及颜色 39

3.4.4 文本修饰 39

3.4.5 在文本上使用颜色渐变 39

3.4.6 文本框宽度 40

3.4.7 行间距、字间距与段间距 40

3.4.8 定义共享文本样式 40

3.4.9 将文字附加到路径 40

3.4.10 将文本转化为轮廓 41

3.5 少即是多——灵巧的位图处理工具 41

3.5.1 在Sketch中插入位图 41

3.5.2 位图在图层中的展示 41

3.5.3 使用矩形选区工具编辑位图 41

3.5.4 魔术棒工具（Magic Wand） 42

3.5.5 反向选择（Invert Selection） 42

3.5.6 使用颜色填充选区（Fill Selection） 42

3.5.7 矢量填充工具（Vectorize Fill） 42

3.5.8 裁切工具（Crop） 42

3.5.9 调整图像颜色 43

3.5.10 将图层转化为位图 43

3.5.11 替换图片 43

3.5.12 将图片还原为原始大小 43

3.5.13 缩小图片体积 43

3.5.14 九宫格图片 43

3.6 导入和导出多种格式的图形文件 45

3.6.1 导入文件到Sketch 45

3.6.2 从Sketch中导出文件 46

3.7 事半功倍的秘诀——Sketch中的模板 48

3.7.1 Sketch3中自带的模板 49

3.7.2 建立自定义模板 52

3.8 不能不说的秘密——Sketch强大的第三方插件 53

3.8.1 Sketch插件的安装方法 53

3.8.2 Sketch常用插件推荐 55

3.9 不加班，一稿过的绝密武器 60

3.9.1 在移动设备上预览并展示设计稿 60

3.9.2 完全还原手机系统真实字体——PDF方式预览设计稿 63

3.9.3 使用Promotee软件将设计稿通过仿真效果呈现 64

3.9.4 使用Mockup模拟真实使用场景 65

3.10 让Sketch更顺手——偏好设置及性能选项 66

3.10.1 General选项卡 66

3.10.2 Canvas选项卡 67

3.10.3 Layers选项卡 68

3.10.4 避免崩溃，影响Sketch性能的因素 69

3.11 熟悉Sketch快捷键，进一步提升工作效率 70

3.11.1 Sketch快捷键一览 71

3.11.2 解决快捷键冲突 77

3.11.3 自定义Sketch快捷键 77

3.11.4 通过修改Sketch插件代码来修改插件快捷键 78

3.12 回到过去——Sketch中的时光机器 80

3.13 为开发做准备——设计稿交付与沟通 82

3.13.1 将Sketch设计稿导出为开发素材 82

3.13.2 为完美复现做好准备——标注你的设计稿 85

3.13.3 让“程序猿”更懂你——动起来的设计稿 88

3.14 实战——使用Sketch绘制图标 93

3.14.1 设计前的分析和思考 93

3.14.2 表盘的绘制 93

3.14.3 指针的绘制 95

3.15 实战——使用Sketch设计APP界面 96

3.15.1 分析画面元素 96

3.15.2 确定为何种平台做设计 97

3.15.3 选择合适的Artboa rd尺寸 97

3.15.4 绘制毛玻璃背景 97

3.15.5 绘制Status Bar 99

3.15.6 绘制文字及图标 99

3.15.7 绘制输入框 101

3.16 实战——使用Sketch绘制可爱的卡通人物 102

3.16.1 分析角色构成 102

3.16.2 绘制头部及眼睛 102

3.16.3 绘制身体 103

3.16.4 绘制胳膊及手指 103

3.16.5 组合所有元素 104

3.17 使用Sketch设计Apple Watch界面 105

3.17.1 为Apple Watch创建画布 106

3.17.2 Apple Watch使用的字体与字号 106

3.17.3 使用Sketch为Apple Watch设计图标 107

3.17.4 Apple Watch中的系统控件 108

3.18 静电的Sketch答疑教室 110

Chapter 4 写给设计师看的Xcode教程 122

4.1 为什么要学习Xcode？ 122

4.2 安装并运行Xcode 124

4.2.1 了解Xcode 124

4.2.2 下载并安装Xcode 124

4.3 Xcode初体验 126

4.3.1 你好，Xcode！ 126

4.3.2 与新朋友一起玩耍 126

4.4 创建启动界面 129

4.4.1 熟悉Xcode中的各项模板 129

4.4.2 使用Single View Application开始新尝试 130

4.4.3 熟悉控件——自定义启动界面 131

4.4.4 导入图片资源文件 134

4.5 使用故事板创建交互效果 137

4.5.1 什么是故事板（StoryBoard）？ 137

4.5.2 为使用故事板准备设计稿 138

4.5.3 设定Xcode故事板尺寸 139

4.5.4 为Storyboard添加控件 141

4.5.5 导入图片资源到Xcode 143

4.5.6 让Storyboard显示图片 144

4.5.7 使用按钮为Storyboard加入点击事件 145

4.5.8 让Storyboard动起来 146

4.6 搞定Tab Bar交互效果 148

4.6.1 准备素材 148

4.6.2 新建Xcode工程 149

4.6.3 使用Tab Ba rController来构建Tab Bar导航效果 149

4.6.4 一点点代码——修改Tab Bar背景颜色与点击图标颜色 154

4.7 创建Navigation Controller导航效果 155

4.7.1 为使用NavigationController准备素材 156

4.7.2 在Xcode中建立新工程 157

4.7.3 使用Navigation Controller 158

4.7.4 导入素材图片 161

4.7.5 链接VC，创建交互效果 163

4.7.6 设置Title Bar属性 164

4.8 创建页面滚动效果 166

4.8.1 准备素材图片 166

4.8.2 建立Xcode工程与导入素材图片 167

4.8.3 使用ScrollView构建界面 169

4.8.4 让Scroll View滚动起来 171

4.9 使用SVN或GIT与工程师协作 175

4.9.1 SVN和GIT是什么？ 175

4.9.2 SVN对设计师有什么作用？ 176

4.9.3 在Xcode中使用SVN或者GIT 176

4.9.4 替换开发工程中的图片文件 177

4.10 静电的Xcode答疑教室 179

Chapter 5后记 184

关于Sketch和Xcode——静电的小伙伴有话说 184

让感性设计与理性思维迸发光芒——写在最后 186