内容简介

UI设计作为近两三年新型的设计门类吸引了越来越多的设计师加入其中。与其他设计不同，UI设计师需要更加深入地了解用户心理、技术实现形式。本书以Sketch的软件操作作为切入点，以一个个发生在设计师身边的小故事为引子，让广大设计师深入浅出地理解UI设计的相关知识以及工作流程。

同时，书中创新地引入Xcode这款APP开发工具，通过大量的实例，让设计师了解一款应用从设计到开发的全过程，并*终可以做成一款真正可以在移动端运行的Demo。

作品目录

Chapter 1

华丽转身，从Web设计师到APP设计师

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 dp、px、sp傻傻分不清楚 / 7

1.4 *小可点击区域 / 8

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

========================================================

Chapter 2

拥抱变化——Sketch初体验

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

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 选择合适的Artboard尺寸 / 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.18 静电的Sketch答疑教室 / 110

========================================================

Chapter 4

写给设计师看的Xcode教程

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 Bar Controller来构建Tab Bar导航效果 / 149

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

4.7 创建Navigation Controller导航效果 / 155

4.7.1 为使用Navigation Controller准备素材 / 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

后记

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

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