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

简体网页||繁体网页

☆☆☆☆☆

静电 著

图书标签:

• UI设计
• 移动UI
• Sketch
• Xcode
• iOS设计
• 用户体验
• 设计工具
• 全彩图解
• 新手入门
• 界面设计

出版社： 电子工业出版社

ISBN：9787121273520

版次：1

商品编码：11802664

包装：平装

开本：16开

出版时间：2015-11-01

用纸：纯质纸

页数：208

字数：353600

正文语种：中文

产品特色

编辑推荐

适读人群 ：本书的目标读者是广大初中级UI设计师，所有对移动UI界面设计感兴趣、有志于从事UI设计工作的朋友，以及希望对UI设计有更深入了解的产品经理及开发工程师。

　　《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，然后在一个界面中，对比和查看它们的不同之处，或者将它们的交互过程串联起来，一切都非常方便。然后我们可以将这些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+Xcode 双剑合璧：移动UI设计师快速上手指南（全彩） 简介 在瞬息万变的移动互联网时代，UI/UX 设计师的工具箱早已不是简单的画板和颜色盘。高效、精准、且能与开发流程无缝对接，是每一位优秀移动UI设计师的追求。本书将目光聚焦于当下最主流、最强大的两大设计与开发协同利器——Sketch 和 Xcode，为广大移动UI设计师打造了一套“双剑合璧”的实战训练营。本书以全彩图文并茂的形式，深入浅出地讲解如何运用 Sketch 进行高保真移动应用界面设计，并进一步阐述如何利用 Xcode 中的相关工具，将这些设计稿转化为可交互、可开发的实际产品原型，乃至理解其在最终实现中的关键环节。 本书的核心理念在于打通设计与开发的“最后一公里”，让UI设计师不仅能产出美观的视觉稿，更能理解设计在实际产品中的落地逻辑，从而提升工作效率，减少沟通成本，并最终为用户带来更优质的体验。我们相信，掌握 Sketch 和 Xcode 的协同应用，将是每一位渴望在移动UI设计领域脱颖而出的设计师的必备技能。 本书内容详解 第一部分：Sketch——移动UI设计的瑞士军刀 本部分将带领读者全面掌握 Sketch 在移动UI设计中的强大功能，从基础操作到高级技巧，从单页面设计到复杂组件库构建，让Sketch成为你手中得心应手的创作工具。 第一章：Sketch 入门与核心概念 为什么选择Sketch？ 深入分析Sketch在移动UI设计领域的优势，包括其轻量级、矢量化的特性、强大的插件生态以及与开发者的友好集成。 Sketch工作区概览： 详细介绍Sketch的界面布局、工具栏、侧边栏、画布区域等关键组成部分，帮助新手快速熟悉操作环境。 矢量图形的魔力： 讲解Sketch中矢量图形的核心原理，如何创建、编辑形状，理解路径、节点、描边、填充等概念，以及其在响应式设计中的优势。 图层与画板： 深入理解Sketch中的图层管理，包括图层的命名、分组、锁定、隐藏等，以及如何高效地创建和管理不同尺寸的画板，为多设备适配打下基础。 文本与样式： 掌握Sketch中丰富的文本编辑功能，包括字体、字号、行距、段落样式等。讲解如何创建和应用共享文本样式，实现全局字体一致性。 颜色与渐变： 学习Sketch强大的颜色管理能力，包括创建、保存、应用颜色，以及如何使用渐变工具制作丰富多彩的视觉效果。 第二章：Sketch 高效设计技巧 组件化设计—— Symbols（符号）： 本章是Sketch的核心价值所在。详细讲解Symbols的创建、编辑、覆盖和应用。通过实际案例，演示如何构建可复用的UI组件，如按钮、导航栏、卡片等，实现设计的一致性和效率飞跃。 样式管理——Layer Styles（图层样式）和Text Styles（文本样式）： 深入探讨如何利用Layer Styles和Text Styles管理元素的视觉属性，如阴影、边框、背景色等，实现快速统一的风格调整。 智能布局——Resizing（缩放）与Constraints（约束）： 掌握Sketch的智能布局功能，学习如何为组件设置缩放规则和约束条件，使其在不同尺寸的画板上能够自适应，是实现响应式设计和多设备适配的关键。 插件的力量： 介绍Sketch强大的插件生态系统，推荐并演示一系列实用的插件，如数据填充插件、图标管理插件、代码导出插件等，进一步提升设计效率和功能。 原型制作——Artboards（画板）与Prototyping（原型）： 学习如何在Sketch中创建交互原型，设置页面跳转、链接、过渡动画等，将静态设计稿转化为具有初步交互性的原型，用于用户测试和需求沟通。 第三章：Sketch 在移动UI设计中的实战应用 案例分析：设计一个完整的移动App界面： 从零开始，通过一个实际的App界面设计案例，引导读者将前面学到的Sketch技能融会贯通。例如，设计一个社交App的首页、详情页或列表页。 UI Kit（UI工具包）的构建： 讲解如何从头开始构建一套完整的、可维护的UI Kit，包含各种基础组件、颜色规范、字体规范、图标库等，为团队协作和项目迭代提供标准化支持。 响应式设计与多设备适配： 结合Sketch的智能布局功能，演示如何设计一套能够适应不同屏幕尺寸和分辨率的UI界面。 设计规范与标注： 讲解如何为设计稿添加清晰的标注，包括尺寸、颜色值、字体信息、切图要求等，确保与开发团队的有效沟通。 导出与资产管理： 学习如何高效地导出设计资源，包括不同尺寸的图标、切图、矢量图形等，以及如何组织和管理这些设计资产。 第二部分：Xcode——将设计变为现实的魔法引擎 本部分将从UI设计师的角度出发，深入理解Xcode中与UI设计相关的核心概念和工具，让你明白你的设计稿是如何在iOS平台上得以实现的，以及如何更有效地与iOS开发者协作。 第四章：Xcode 基础概览与UI设计相关概念 Xcode 概览与安装： 介绍Xcode的安装流程和基础界面，帮助设计师建立对开发环境的基本认识。 iOS UI 开发核心框架：UIKit 与 SwiftUI： 简单介绍iOS UI开发最核心的两个框架，UIKit（面向对象）和SwiftUI（声明式）。重点讲解UIKit中的UIView、UIViewController等基本概念，以及SwiftUI中View、State等概念，帮助设计师理解UI元素的构成和渲染机制。 Interface Builder： 详细介绍Xcode强大的Interface Builder（IB），包括Storyboard和XIB文件的作用。讲解如何使用IB可视化地搭建UI界面，拖拽控件，设置属性，以及IB与代码的关联。 View Controller 生命周期： 简要介绍View Controller的生命周期，帮助设计师理解界面的加载、显示、更新和销毁过程，从而更好地设计动态效果和数据加载逻辑。 Auto Layout 基础： 深入讲解Auto Layout（自动布局）的概念和原理。这是将Sketch中的Constraints转化为实际代码布局的关键。学习如何使用Auto Layout设置控件的约束，实现界面在不同设备上的自适应。 第五章：Sketch 设计稿在 Xcode 中的应用 理解 Sketch 导出资源与 Xcode 的对应关系： 讲解Sketch导出的图片资源（PNG, JPG, PDF）如何在Xcode中被引用。重点讲解Assets.xcassets文件的作用，如何组织和管理App的图片资源。 Sketch 尺寸与 Xcode 坐标系： 对比Sketch中的尺寸单位（points, pixels）与Xcode中的点（points）和像素（pixels）概念，帮助设计师理解设计稿中的尺寸如何在不同设备上进行转换。 Sketch 标注与 Xcode 开发者沟通： 强调Sketch标注的重要性，以及这些标注如何帮助iOS开发者准确地还原设计稿中的间距、对齐、尺寸等信息。 矢量图标在 Xcode 中的应用： 讲解如何将Sketch中的矢量图标（如SVG，虽然Xcode直接支持PDF作为矢量资源，但Sketch的高效导出方式也值得探讨）导入Xcode，并利用Xcode的Asset Catalog管理，实现高清、可缩放的图标效果。 Sketch 导出颜色值与 Xcode 代码实现： 讲解Sketch中导出的颜色值（如RGB, Hex）如何在Xcode代码中被转化为 UIColor 或 Color 对象。 第六章：Sketch 与 Xcode 协同的进阶应用 从 Sketch Symbols 到 XcodeReusable Components（可复用组件）： 探讨如何将Sketch中设计的可复用UI组件，如自定义按钮、输入框等，转化为Xcode中可复用的视图（Views）或SwiftUI的自定义View，实现设计与开发的复用。 理解 Sketch 字体样式与 Xcode 字体设置： 讲解Sketch中定义的文本样式，如何指导开发者在Xcode中设置字体、字号、颜色等，确保文本显示的一致性。 原型验证与开发反馈： 演示如何将Sketch制作的交互原型提供给开发者，以及开发者如何根据原型反馈进行开发调整，形成高效的设计-开发闭环。 第三方插件的协同作用： 介绍一些能够帮助Sketch与Xcode之间数据流动的第三方插件，例如能够将Sketch元素导出为SwiftUI代码的插件，或能够直接在Xcode中预览Sketch设计的插件（虽然这类插件的功能可能有限，但其理念值得探讨）。 为开发者提供高效的设计资源： 总结如何组织和交付最终的设计资源，确保开发者能够轻松获取所需的设计元素，并快速集成到App中。 第三部分：实战案例与进阶探索 本部分将通过一个综合性的实战项目，串联起Sketch和Xcode的全部知识点，并探讨一些更前沿的设计与开发协同思路。 第七章：综合实战项目：设计并初步构建一个App 项目设定： 设定一个具有代表性的移动App项目，例如一个简单的电商App、一个日程管理App或一个新闻资讯App。 Sketch 全流程设计： 从需求分析、信息架构、线框图、高保真原型，到最终的UI界面设计，全程使用Sketch完成。 Sketch 资源准备与交付： 规范地组织Sketch文件，导出所有必需的设计资源，并进行详细标注。 Xcode 基础搭建与界面还原： 使用Xcode，根据Sketch设计稿和标注，搭建App的基础框架，并逐步使用Interface Builder或SwiftUI代码还原Sketch中的关键界面。 Auto Layout 的实践： 重点演示如何在Xcode中通过Auto Layout实现Sketch中设置的各种响应式布局和约束。 组件复用与代码优化： 尝试将Sketch中的可复用组件转化为Xcode中的可复用代码，提升开发效率。 交互原型与代码实现对照： 对比Sketch原型与Xcode实际实现的效果，分析差异并进行调整。 第八章：提升效率与未来展望 设计与开发协同的最佳实践： 总结一套行之有效的Sketch与Xcode协同工作流程，涵盖需求沟通、设计评审、原型测试、资源交付、迭代更新等各个环节。 版本控制与协作： 探讨如何利用版本控制工具（如Git）来管理设计稿和代码，以及如何在团队中进行高效协作。 设计系统（Design System）的构建与维护： 深入探讨设计系统的概念，以及如何在Sketch和Xcode中协同构建和维护一个完善的设计系统，以支持更大规模的项目和团队。 AI在UI设计与开发中的应用趋势： 展望AI技术对UI设计与开发流程可能带来的变革，例如AI辅助设计工具、代码生成工具等。 持续学习与成长： 鼓励设计师保持学习的热情，关注行业动态，不断提升自己的技能。 本书特色 全彩图文并茂： 大量高品质的插图、截图和设计示例，使枯燥的技术概念生动形象，易于理解和消化。 实战导向： 紧密结合实际项目需求，通过大量案例分析和实操指导，帮助读者快速掌握核心技能。 “双剑合璧”理念： 强调Sketch与Xcode之间的协同，打通设计与开发的断点，赋能设计师更全面地参与产品构建。 由浅入深： 从基础概念到高级技巧，层层递进，适合初学者入门，也适合有一定基础的设计师提升。 注重效率与可落地性： 传授高效的设计方法和开发对接技巧，帮助设计师提升工作效率，产出更具商业价值的设计。 本书适合读者 初级/中级移动UI/UX设计师： 渴望系统学习Sketch并了解其在开发流程中的作用，希望提升设计效率和与开发沟通能力。 有志于成为移动UI设计师的学生或转行人士： 希望快速掌握必备的设计工具和核心理念。 交互设计师/产品经理： 希望更深入地理解UI设计与开发流程，提升跨部门协作效率。 对移动App界面设计感兴趣的开发者： 希望了解UI设计的工作流程，更好地配合设计师完成产品开发。 掌握Sketch与Xcode的“双剑合璧”，将是你开启移动UI设计职业生涯新篇章的强大助力。让我们一起，用设计赋能产品，用代码实现创意！

评分☆☆☆☆☆

这本书的包装和封面设计就透着一股专业和干练，这让我对内容本身充满了期待。我一直认为，优秀的UI设计不仅仅在于创意和美观，更在于其实现的可行性和效率。Sketch 作为一款功能强大的UI设计软件，其在流程上的优化能力毋庸置疑。然而，对于许多设计师而言，最终将设计稿转化为可运行的APP代码，往往是流程中的一个瓶颈。这本书的“双剑合璧”理念，正是我一直以来所寻求的解决方案。我尤其关注书中关于“组件化”、“资源管理”以及“代码生成”的章节。想象一下，通过 Sketch 的灵活设计，再结合 Xcode 的开发环境，能够实现设计与开发的高度协同，这无疑能极大地提升项目周期和产品质量。我迫不及待地想看到书中是如何引导设计师理解 Xcode 的基本框架，以及如何在 Sketch 中进行更具开发导向的设计，从而为后续的开发打下坚实的基础。这本书的出现，有望改变许多设计师在设计流程中的痛点。

评分☆☆☆☆☆

这本书的内容，可以说是填补了我长期以来在移动UI设计流程中的一个巨大空白。作为一名资深设计师，我们都知道，最终的UI呈现效果，很大程度上取决于设计稿与最终代码实现之间的贴合度。Sketch 毋庸置疑是业界领先的设计工具，而 Xcode 则是我们实现创意落地的终点。以往，我们设计师提交的 Sketch 文件，开发工程师在 Xcode 中进行还原时，总会出现各种各样的“误差”。可能是颜色值有细微偏差，可能是切图尺寸不对，也可能是某些圆角、阴影效果在代码中无法完美复现。这本书巧妙地将 Sketch 的设计思维与 Xcode 的开发实现紧密结合，提供了一套行之有效的“双剑合璧”方案。我特别关注书中关于“Sketch 插件”的应用部分，据介绍，这些插件能够极大地自动化 Sketch 中的一些重复性工作，并直接生成与 Xcode 兼容的代码片段。这对于提高团队协作效率、减少沟通成本、确保设计还原度方面，无疑具有划时代的意义。我非常期待能通过这本书，掌握一套能够让我的设计稿在 Xcode 中“活”起来的秘诀，让创意和实现之间不再有鸿沟。

评分☆☆☆☆☆

简直是为我量身定做的！作为一个沉浸在UI设计领域多年的从业者，一直以来都在寻找能真正提升效率、又不至于过度复杂的工作流。Sketch 我用了很久，它的强大和灵活我深有体会，但每次从 Sketch 导出资源、然后转到 Xcode 进行实际的界面开发时，总感觉中间隔了一层“墙”，需要反复沟通、手动调整，有时甚至会因为细节上的偏差而耗费大量时间。这本书的出现，就像打通了这层“墙”的任督二脉。尤其是那些关于 Sketch 标注导出、颜色管理、字体一致性以及如何将设计元素无缝转化为 Xcode 可用代码的章节，虽然我还没来得及深入实践，但光是看目录和作者的介绍，我就已经能预见到它能带来的巨大改变。我尤其期待书中关于“组件化设计”和“响应式布局”在 Sketch 和 Xcode 联动中的具体实现方法，这对于我目前负责的项目来说，简直是雪中送炭。作者能将这两个看似独立的工具串联起来，并以如此详尽、易于理解的方式呈现，实在是功力深厚。这本书的“快速上手”定位也很精准，我不需要花费大量时间去学习全新的理论，而是能直接将知识应用到实际工作中，这一点对于我这种时间宝贵的职场人士来说，是极大的吸引力。

评分☆☆☆☆☆

一直以来，我都在思考如何才能让自己的UI设计技能更上一层楼，不仅仅停留在静态稿层面，而是能够更深入地理解设计的实现过程。Sketch 是我常用的设计工具，它的灵活性和强大的功能让我爱不释手，但我也清楚，最终的产品呈现离不开 Xcode 这个开发平台。很多时候，设计稿的细节在转化为代码时总会丢失一些东西，导致产品最终效果与设计初衷有所偏差。这本书的出现，恰恰解决了我的这个困惑。我非常期待书中能够详细讲解如何在 Sketch 中进行“开发友好型”的设计，例如如何规范地命名图层、如何合理地切图、如何有效地管理颜色和字体，以便于在 Xcode 中快速、准确地复用。此外，书中关于“Sketch 插件”和“Xcode 插件”的介绍，也让我眼前一亮，我希望能够从中学习到如何利用这些工具来自动化繁琐的工作，从而节省大量宝贵的时间。这本书的“快速上手”定位，也让我对学习过程充满信心，相信能够迅速掌握核心技能，并将其应用到实际工作中。

评分☆☆☆☆☆

作为一个刚刚踏入移动UI设计领域的“新人”，我对于市面上充斥的各种教程感到有些茫然。很多教程要么过于理论化，要么过于碎片化，让我很难找到一个清晰的学习路径。当我看到这本书的标题——“Sketch+Xcode双剑合璧 移动UI设计师快速上手指南（全彩）”时，我立刻被吸引了。我听说 Sketch 是UI设计界的“神器”，而 Xcode 则是苹果设备开发不可或缺的工具。这本书的出现，意味着我不需要分别去学习这两个工具，而是能够直接学习如何将它们“结合”起来，这对我来说简直太及时了。我非常期待书中能够提供从零开始的详细步骤，能够清晰地指导我如何在 Sketch 中完成一个UI设计，然后如何将这个设计平滑地过渡到 Xcode 中，最终实现一个可运行的应用界面。书中的“快速上手”和“全彩”这两个关键词，也让我对学习的效率和体验充满了信心。我希望这本书能够帮助我快速掌握核心技能，少走弯路，早日成为一名合格的移动UI设计师。

评分☆☆☆☆☆

是了解这几种新的设计软件，提高效率的好书

评分☆☆☆☆☆

很不错，值得学习。

评分☆☆☆☆☆

还好还好还好还好还好

评分☆☆☆☆☆

不错不错不错不错不错不错不错不错

评分☆☆☆☆☆

很不错的书，讲解很独特到位，快递也很快。

评分☆☆☆☆☆

这次买的书比较薄，内容精简！

评分☆☆☆☆☆

翻了好多UI设计的书,最终还是选了静电大大的,步入UI设计靠你啦

评分☆☆☆☆☆

公司买的书，中秋福利，买了好多好多，后续还会买很多，现在搞活动买着特别划算。

评分☆☆☆☆☆

全彩，还没细看。。。。