Sketch+Xcode双剑合璧 移动UI设计师快速上手指南（全彩） 下载 mobi epub pdf 电子书 2024

产品特色

编辑推荐

　　《Sketch+Xcode双剑合壁-移动UI设计师快速上手指南》作为国内首部Sketch书籍，旨在通过灵活的教学方式和轻松的语言组织，让你在整个UI设计过程中不再枯燥，通过当今流行的UI设计工具，快速而又快乐的掌握这项当下热门的技能。
　　并且随书附送海量视频内容，学UI，据说视频和书更配哦
　　《Sketch+Xcode双剑合壁-移动UI设计师快速上手指南》作者良心录制的超过300分钟（实际近600分钟）的教学视频，从设计原理到软件操作技能，再到思考方式，涵盖UI设计的方方面面，轻松幽默的语言让你的学习过程不再枯燥。大量实例贯穿整个学习环节，教你学会技能，更教你如何思考，更快速掌握UI设计的各个环节不再是遥不可及的梦。

内容简介

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

作者简介

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

内页插图

精彩书评

粗略的原型让人表达想法，高保真原型让人感受界面细致与交互的连贯。使用Sketch与Xcode的组合,就可以让你快速的制作一个细致的、可安装在iPhone上的演示的Demo，就跟历时数月开发完的APP效果一样。这真是一种爽快的体验，像我这种平时只做线框原型的人都急切的想知道它是如何快速的实现。

—尹广磊 Axure中文社区创始人

我极力推荐我们的UI团队全员使用sketch软件。Sketch的artboard、shared style、symbols等功能在极大提高设计效率的同时，为团队设计成果统一化建设提供了不小的帮助。另外，Sketch在软件设计上定位精准，且非常的互联网化，使得设计师的学习成本很低。我更欣赏sketch开发团队的高效工作节奏，在反馈软件问题的当天，就收到了新的的版本通知。

—杨蓉蓉 京东智能UI设计师

Sketch让设计师进入了专注于设计本身的全新时代，而它无限扩展的插件又让这些美妙的想法更快更好的付诸实现。强烈建议初中级UI设计师，以及所有对移动端设计感兴趣的朋友读读这本《Sketch+Xcode双剑合壁》，也希望你能喜欢上我的Sketch Measure插件。

—utom 猎豹移动UX设计师 ，Sketch Measure插件创造者

目录

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

前言/序言

前言:

是时候抛弃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，然后在一个界面中，对比和查看它们的不同之处，或者将它们的交互过程串联起来，一切都非常方便。然 Sketch+Xcode双剑合璧 移动UI设计师快速上手指南（全彩） 下载 mobi epub pdf txt 电子书 格式

这本也很小很薄，都有透明薄膜包装～

挺不错的，对我这种新手来说简直太棒

东西看起来不错东西看起来不错

京东发货很快，包装也很好，感觉不错！京东很给力！不错！

不错的书！很实用。

还不错，在研究

双十一的送货竟然也这么快，不到24小时就到了，赞！书的品质也是没得说。

要看这本书学习首先需要装一个叫flinto的软件我们平时都不用这软件，并且我按照提醒也没有装好，觉得这本书对我而言简直一点用都没有，开始以为是用ps，哎失望

厉害了666666666