问个 iOS 开发的入门级问题：如果把 iOS 开发分成 [利用 Sketch 等设计软件进行 UI 设计] 和 [基于 Xcode 进行程序开发] 两个阶段，这两个阶段是如何高效串联起来的？

[lyricorpse]

最近在自学 iOS 开发，在看过一些网上资料和书籍，有关于 UI 设计的，也有关于直接在 Xcode 里进行开发的。作为外行有些疑惑：所有 UI 设计的部分最终完成的只是一些图形元素以及它们的大小和之间的位置关系。对于图形元素，在 Xcode 里那些 UI 元素都是内置好的，比如在 Storyboard 里面可以做出的 button 或者 label ，它们 [看上去的样子] 可以直接被 Sketch 输出的图片替换掉么？对于布局，是否需要在 Xcode 里面再依照 UI 设计稿 [以 Xcode 内部的布局方式] 重新实现一遍？

我主要想请教各位 iOS 程序员，当你们拿到一个基于 Sketch 的设计稿后，是如何在 Xcode 里面一步步实现出来的？大致的 workflow 是什么？

[Strikeactor]

http://www.neonto.com/

[lyricorpse]

@Strikeactor 谢谢，这看上去是另外一个思路。不过对于复杂一点的 App 似乎还是不太够用。

[jayzjj000]

既然楼主说复杂一点的 App ，那我们就从复杂一点的 App 来看 UI 开发
---
iOS 开发≠UI 开发，或者 iOS 开发>>UI 开发。
把设计稿变成控件页面的开发在整个 iOS 开发 workflow 里面只是很小一部分，而且取决于其他环节，所以对于这样一个环节来说，我认为一张细致的标注稿加上小部分高效沟通就可以串联起来了
（如果想看原因，请往下，高能装逼提醒）

较为复杂的 App 开发者，大致分为两类：业务开发，架构开发。

- 对于业务开发来说，看起来他们的工作就是绘制一张张页面，但是实际上他们的工作远不仅与拼凑这些 UI 控件，大量的时间花在这些地方：
* 提升代码的可读性、可维护性、可变更性，即如何使用设计模式（ MVC ，或者 MVVM ），如何组织代码，以及如何保证下次需求变更的时候能够尽量少修改代码即可完成。
* 与服务端以及其他业务方的协调，如何准确高效安排分工，减少出错
* 与架构组合作，如何使用各种架构组研制出的高新技术来支撑自己的产品
* 如何在以上条件都满足的情况下优化代码，提高运行效率，保证流畅度

- 对于架构开发来说，可能针对 UI 方面，他们做的事情大概是这样
* 对各个 UI 控件进行自定义和优化，做出一些更适合自身更好的控件给业务开发使用（比如富文本控件）
* 针对某些特定业务需求，开发出一套动态性非常高的 UI 框架，比如通过一个服务端下发的 Json/XML/HTML 文件就可以在客户端通过这个框架直接绘制出一套自带逻辑的页面，一次开发终身受用，支持绝大部分的 UI 需求变更，并且不用改动客户端代码

---
对于开发者来说，追求高效是很好的事情哈，不过可能楼主这个方向并没有对高效 iOS 开发拖很多后腿，或者如果真的有这种需要大量修改控件影响 iOS 开发效率的场景，楼主可以朝着我上面说的架构开发第二个方向努力，把这一环节的开发成本降到最低。

第一次在 V2EX 上装逼感觉好累，为什么看他们装逼都是一句话，我就特么这么长，是姿势不对还是火候不够

[erinsnow]

好问题，我也想知道^^

[jayzjj000]

---
* 针对某些特定业务需求，开发出一套动态性非常高的 UI 框架，比如通过一个服务端下发的 Json/XML/HTML 文件就可以在客户端通过这个框架直接绘制出一套自带逻辑的页面，一次开发终身受用，支持绝大部分的 UI 需求变更，并且不用改动客户端代码
---

我的最终想法是设计师可以使用 PS/Sketch 完成界面设计后，通过某个工具能转化成为 Json/XML/HTML ，下发到客户端就可以看到这个新做好的界面。当然这个想法还没实现（如果实现了我想我应该超有名了诶 hahahahhaha ）

neonto 其实跟我的这个想法的出发点是一样的，都是希望通过某种方式让设计师通过画图的方式来编写界面，这个思路应该算是楼主问题的最好的答案了

[lyricorpse]

@jayzjj000 感谢如此专业的回复！我想我目前的疑问仍然停留在很初级的阶段：

对于“把设计稿变成控件页面的开发”这个步骤，程序员是用自己的方式把设计稿展现的 UI 界面重新实现出来么？比方说，在 Sketch 中设定好了一个按钮的阴影的具体细节，作为程序员，是直接调用 Sketch 生成的图形素材还是自己写代码去再现那些细节？如果是后者，总感觉这两个阶段有点重复劳动呢，而且我也不太清楚在 Xcode 中如何操作 Storyboard 去 implement 。

另外，假如能够在 Storyboard 中很完美地再现“通过 Sketch 的实现的 UI ”这一步，设计师又为何要在 Sketch 中去设计而不直接在 Storyboard 中绘制呢，那样对于 iOS 开发流程来说应该会更加高效把？

[lyricorpse]

@jayzjj000 才看到你的最新回复，接着我上面的问题，目前工业标准流程是通过类似 neonto 这样的工具直接将 Sketch 设计稿转换成初步的 code ，再由程序员在其基础上加工么？

[jayzjj000]

@lyricorpse 按照我看到的情况看，复杂的 App 不太有使用 neonto 这样的工具来进行自动代码生成，因为这样生成的代码难保符合规范符合要求并且不出错，就算是有，自动生成的代码还需要人工 codeReview ，这样的效率也高不到哪里去，所以大多数都是设计师给标注稿后直接写 Code 完事，最多接入一些嵌入式工具来调整具体 UI 细节。

另外，其实复杂的 App 大都不喜欢用 Storyboard ，大部分是直接通过 Code 来写，不管是团队合作还是整体代码的可控性都要高。

关于重复劳动，我不认为设计师用图纸画一遍，然后程序员用代码画一遍算是重复劳动。举个栗子，我的设计师每次设计都会有好多好多版，每次完成一版后都要给老板、给产品、给开发看确认会不会有什么问题，如果有问题要及时修改，所以他们需要非常专业并且轻量级的工具来快速完成每次修改，等到确认没问题以后再把视觉稿交给我们让我们绘制。所以他们必须用 PS/Sketch ，而不是 Storyboard 或者 neonto 这样的设计和代码整合的工具，这样对他们来说效率最高

[lyricorpse]

@jayzjj000 欧~ 感谢！大概明白了。所以假如我想直接进行高效的个人开发，应该去看一些关于直接用 Code 进行 UI 开发的资料么？(作为初学者目前看到的资料都是利用 Storyboard...)

PS ：最近学 Sketch 感觉做图形确实很方便，如果 Xcode 的 Storyboard 能直接嵌入 Sketch 就完美了

[jayzjj000]

@lyricorpse 用 Code 开发把，应该是必须必须掌握的技能。至于教材，现在 iOS 开发这么火，教材应该比较多才对，我也不太了解哪本书讲的比较好，有闲钱就多买几本呗，如果你以后要从事这一行的话这种投资稳赚不亏，另外一定要看代码敲代码，某种意义上来说，代码量真的是王道

[lyricorpse]

@jayzjj000 Got it. Thank you so much!

[yxjxx]

@jayzjj000 记笔记中...😂

[zapper]

个人觉得 storyboard 做的界面可维护性太差了，而且加载还很久，不过要熟悉 iOS 上界面布局的约束这个坑还是得踩踩…熟悉了约束再用 code 布局罢

[lyricorpse]

@zapper 嗯哈！目前初学者资料可能由于介绍的例子简单 几乎都使用 storyboard ，有进阶的关于 code 布局的资料推荐不？

[em70]

既然初学，就应该用最笨的办法，纯手工能做出任何设计界面，然后再考虑怎样简化流程

[zapper]

@lyricorpse 你可以在 v2 搜搜 AutoLayout,我现在用 PureLayout, https://github.com/PureLayout/PureLayout 资料我看过一本 iOS Auto Layout 开发秘籍(iOS Auto Layout Demystified),感觉这本书拿来做个系统的认知还是可以的,当然最好的资料还是 Apple 官方的文档

[lyricorpse]

@zapper 好，多谢啦！

[tigerZhang]

如果楼主英语水平不错， https://developer.apple.com/library/ios/navigation/和 http://web.stanford.edu/class/cs193p/cgi-bin/drupal/ 是独一无二的选择。

[jayzjj000]

@yxjxx Yxj 你又淘气😂

@lyricorpse AutoLayout 可以试试 Masony ： <https://github.com/SnapKit/Masonry>

[lyricorpse]

@jayzjj000 嗯哈，感谢！