Sketch+Xcode双剑合壁

前言:

是时候抛弃Photoshop，用Sketch来设计你的APP了

0.1 迎接移动端设计软件的变革时代。

如果说近八年的设计工作为我带来了什么，那一定是设计工具的巨大变革所带来的感慨。在那个互联网刚刚兴起，然后有点开始热的时代，我们用Photoshop装饰现在看起来已经可以用拙劣来形容的网页。感谢Adobe，让我们可以拥有一个如此美好的互联网世界。但在这个手机应用遍地开花的时代，我们还要庆幸，有Sketch为移动设计所带来的前所未有的改变，甚至可以称之为革命。

我们之前有个观念，不管什么设计，最先想到的必然是Photoshop。是的，Adobe公司的Photoshop软件对整个设计界有着举足轻重的地位，你也许会有疑问，为什么作者会抛出这样一个题目作为书的标题？这是哗众取宠吗? 而反复提到的Sketch又是款什么神奇的工具？

Sketch这款软件的火爆，必然有着它自身无法让人抗拒的理由。在国外，Sketch已经被相当多知名移动应用设计团队当作APP设计的主力工具。在国内，随着它的推广和普及，越来越多的设计师投入到Sketch的怀抱，一些国内领先的大型互联网公司的设计团队也将是否使用Sketch工作当作简历中的加分项目。当你拿到这本书的时候，你可能是一个刚刚接触移动端界面设计的菜鸟，也可能是已经随着这股移动互联的大潮摸爬滚打的经验丰富的设计师。不管是怎样一种状态，我相信你都有足够的理由来读读这本教你如何“抛弃Photoshop”的书，抑或只是好奇，想看看作者到底在书中会写点什么“干货”。但作者在这里向大家保证，这会是一本让你不虚此“读”的书。

本书将会用一些与众不同的方式让大家快速了解、熟练并精通Sketch。更重要的是，教会大家如何解决设计过程中出现的各种问题。不管你用什么软件作为设计工具，善于思考都应是一个移动时代设计师首先应具备的技能之一。

本书创新性地为大家引入Xcode作为UI设计师学习的内容之一。X c o d e 作为i O S 端A P P 开发软件， 设计师也有必要像了解H T M L 和Dreamweaver一样来学习一下这款看起来很复杂的软件。它很复杂吗？未必。我们甚至不需要编写一行代码就可以让自己的设计稿动起来，放在手机上演示，成为真正的APP。看看本书作者是如何用极其简单的方法来教会设计师使用Xcode的。这年头，再不学点Xcode，你还拿什么行走天下，亲爱的设计师同学们。

来跟随本书一起开启这趟美妙的APP设计之旅吧。

0.2 适合阅读本书的人群。

这是一本教大家系统了解Sketch软件的图书，同时也非常适合以下读者朋友：

1. 刚刚从事APP界面设计，苦于无从下手的新人；

2. 有志于或者刚刚从其他行业如平面设计、网页设计转行来的设计师；

3. 已做设计好多年，但苦于看不到未来方向，付出精力无数但仍成就感不足的朋友；

4. 广大为原型图所困扰的产品经理，以及与设计师配合欠佳的开发工程师。

相信在读完本书后，大家不仅能学到一种被广泛使用的APP设计软件的使用方法，同时对于APP界面设计可以快速上手，并更有效率地开展工作。

0.3 那么问题来了：Sketch到底是款什么软件？

Sketch是一款由国外的Bohemian Coding团队开发的，适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页、图标及界面设计的最好方式。但Sketch除了矢量编辑的功能之外，同样添加了一些基本的位图工具，比如模糊和色彩校正。Sketch的作者尽力让这款软件容易理解并轻松上手，有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用。对于绝大多数的数字产品设计，Sketch都能替代Adobe Photoshop、Illustrator和Fireworks。Sketch逐渐被广大设计师接触和使用，并在各种渠道进行推广应用，目前使用Sketch的设计师越来越多，在设计圈内形成了一股学习Sketch的热潮。

0.4 还在犹豫？给你10个设计师应使用Sketch的理由。

在Sketch用户手册中，编者毫不掩饰Sketch的强大功能，甚至说：对于绝大多数的数字产品的设计，Sketch可以完全替代Photoshop、Illustrator和Fireworks。作为一个设计师，起初我对这些话也是不以为然的，毕竟Adobe在设计软件界的强大地位不是其他小软件可以撼动的。对于以往采用这些软件作为主要工具的设计师来说，要让他们抛弃一个使用长达数年且养成使用习惯的软件是非常困难的。那么是什么促使这些人开始完全使用Sketch去做UI界面设计的呢？第一，足够轻巧，对系统配置要求很低；第二，内置大量提高工作效率的特性；第三，多画板工作模式让人有一种一览众山小的感觉。下面，让我们来详细了解一下，Sketch究竟有哪些优势，可以让你信心满满地抛弃传统设计软件。

Artboard——一个界面完成整个工程的设计

Sketch中没有画布的概念，整个空白区域都可进行创作，因为它是基于矢量的。但我们在某些时候需要一个“框”，来具象化我们的设计。在Photoshop及其他设计软件中，它叫画布，但在Sketch中，它被赋予了一个新词，Artboard。我们可以在一张画布上创建无数张Artboard。这对于APP的连贯性来说，是非常有帮助的，可以将一个APP界面看作一个Artboard，然后在一个界面中，对比和查看它们的不同之处，或者将它们的交互过程串联起来，一切都非常方便。然后我们可以将这些Artboard分别导出为PDF或者分为一个个的图片文件，方便产品经理或开发者查看。一切只需要一到两步的操作。

为移动端UI设计准备的丰富的组件库

有时候我们需要在设计稿中调用Android或者iOS系统自带的控件，比如弹出的提示框、浮动键盘。但我们一定要自己再画一次吗？不必，Sketch有丰富的组件库，可以直接将需要的部分拖进来，这节省了我们大部分的时间，让我们可以有更多时间用于产品设计思考上。

设计稿智能标记

Sketch实现了软件内的快速与智能标记！这比用标记软件还要方便好多倍。我们在做完设计要交付给工程师的时候，都要将设计稿详细标注，以便工程师更好地开发。Sketch可以让你抛弃其他的设计稿标注软件，它无比高效率的标注功能，为设计师节省了大量时间。

为效率而生——智能切片工具

借助Sketch的切片工具，我们可以轻松将图标元素批量导出为适用于iOS和Android的各种尺寸，甚至不用理解大部分的原理，就可以顺利地切出没有毛边、精确适配Android与iOS各种机型与分辨率的切片资源交付工程师。更重要的是，使用Sketch来完成切片工作，将节省比传统方式少一半甚至更多的时间。

先进的对齐工具及钢笔工具

虽然Photoshop CC 2014版本改进了一些辅助对齐功能，但与Sketch比起来简直就是小巫见大巫。Sketch的对齐工具可以帮助我们更轻松地对齐大部分的元素，丝毫不差。同时，Sketch强大的钢笔工具可以完全替代Illustrator，让你轻松进行矢量绘图。

便捷的全矢量设计模式，轻松适配多种移动设备

不同于Photoshop基于位图的设计模式，Sketch采用全矢量设计，不论你是放大或者缩小设计稿，图片质量都不会有任何损失，让设计师不再担心手机分辨率越来越大、计算机性能跟不上等各种问题。

兼容Photoshop、Illustrator等文件格式

Sketch最出色的一点是，它完全兼容Photoshop、Fireworks、Illustrator等软件输出的文件格式，比如PSD、PNG、AI、EPS，可以非常方便地将这些应用生成的文件导入Sketch，并且可以在Sketch中编辑源文件。

上百种扩展插件，让设计更有效率

Sketch开放了第三方插件接口，设计师可以在几百种插件中轻松找到适合自己工作方式的插件，并且它们都非常容易获得和安装。如果你有兴趣，甚至可以开发出更适合自己工作习惯的插件来与Sketch爱好者分享。

设计稿可以在移动设备上即时预览，工作效率瞬间提高

Sketch中自带了Mirror的功能，可以像PsPlay和Photoshop的远程连接工具一样，将你的设计稿在移动设备上即时预览查看。不用再插拔数据线进行烦琐的复制、粘贴、导入等浪费时间的事情，这让设计变得非常简便。

产品经理和APP开发工程师也可以使用Sketch轻松配合

对于产品经理，Sketch完全适用且更容易上手，用它来画原型图简直轻而易举。丰富的组件库和精确的尺寸控制让原型图更逼真，更有利于交流和前期的展示。你甚至可以考虑将Axure抛弃了。对于开发工程师，再也不用安装“臃肿”的Photoshop，只需下载安装Sketch即可打开设计师提供的小巧的Sketch源文件，非常方便地得到设计稿中各种元素的长宽、颜色及各种属性值，有利于快速开发。设计师、产品经理、开发工程师使用Sketch来协作，会使整个开发流程变得更为顺畅。我所在的团队，设计师与工程师已经全部开始使用Sketch进行工作，每个职位都可以专注于自身的工作质量与产出效率，何乐而不为呢？

　　静电，sketch中国社区创始人，站酷及UI中国、优设网等媒体人气教程作者，致力于推广Sketch等UI设计新工具的使用及前沿设计理念。对当今互联网行业设计有着深刻思考，撰写过多篇教程、评论文章等，得到了业界的热烈反应和认同。静电倡导设计师与产品经理及开发工程师密切合作，认为设计师应当从多种层面了解设计以外的知识内容，从而推动不同角色之间更有效的协作。

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

　　UI设计作为近两三年新型的设计门类吸引了越来越多的设计师加入其中。与其他设计不同，UI设计师需要更加深入地了解用户心理、技术实现形式。本书以Sketch的软件操作作为切入点，以一个个发生在设计师身边的小故事为引子，让广大设计师深入浅出地理解UI设计的相关知识以及工作流程。
　　同时，书中创新地引入Xcode这款APP开发工具，通过大量的实例，让设计师了解一款应用从设计到开发的全过程，并最终可以做成一款真正可以在移动端运行的Demo。