写给设计师同学的xcode使用教程: 教你用 Xcode 做原型设计

我每天早上 7 点起床，一直工作到晚上 7 点，在完成在 Carshare.hk 的那份全职工作之余，一直都在致力于完善那个 Ripple 应用。这个月全是关于 iOS 方面的经验，我面对的挑战是在年底前发布这个 iOS 应用之余，还要为之做些设计师/前端的工作。

在过去的一个月，我每天早上 7 点起床，一直工作到晚上 7 点，在完成在 Carshare.hk 的那份全职工作之余，一直都在致力于完善那个 Ripple 应用。这个月全是关于 iOS 方面的经验，我面对的挑战是在年底前发布这个 iOS 应用之余，还要为之做些设计师/前端的工作。

下载 Xcode 开发原型：
http://cl.ly/2A0m0j0i0g1K

拥抱 Xcode 故事板（Storyboard）

在做应用的时候，我遇到一个很崇尚使用故事板的 iOS 开发牛人。我以前用过故事板来做原型设计，但我的梦想一直是做一个功能性的 iOS 应用。在他的帮助下，我终于能大大地简化了 iOS 开发，因为他会集中于更高级的交互设计，而我得以专心与每个像素的细节、动画和各处的设计布局。苹果的开发文档是世界级的好质量，这对我来说是幸运的。另外，去 Stackoverflow看看，会知道这个社区的人也很多。但这次，我们不用写代码。

为设计师的简化

作为一个不得不要在用户体验、视觉设计和前端这些内容中徘徊的设计师，我不希望事情是复杂的。因为有时候要成为一个高效的设计师，要能够说不。如果我需要学会整个 Objective-C 语言，那么我就会失去动力。在这个文章中，我不会说太复杂的东西，部分原因是觉得其他人已经在这方面做得很好了。相反，我会首先接触些设计师已经熟悉了的东西，然后在慢慢迈向故事板。

iOS7 和 Xcode5

在 iOS7 中，设觉设计发挥的作用已经不像从前那样大了，这要求设计师更加注重风格背后的功能上。伴随着 iOS7 的重磅更新，苹果公司也发布了 Xcode5，一个比以往更加易用的开发工具。它新添了构件库(Assets Library)，自动配置工具(Automatic Configuration，可以更方便地在 iPhone 上测试)，快速打开（Open Quickly，就 SublimeText 的那样），SpriteKit，还有一些更稳定的故事板。

开始使用 Xcode

安装 Xcode 后，创建一个新的项目。

选择单视图应用（Single-View Application），然后给它命名。

每一个新项目都有一个故事板(Storyboard)

增加一个构件库(Assets Library)

每个 iOS 设计师都会对应用图标（AppIcon）和登录图片（LaunchImage）感到熟悉。通过鼠标拖拉就可以把图片填充上去。（译者注：这里对图片格式会有要求，如不可以添加 jpg 格式图片，可以添加 .png 格式图片）

构件库，我的最爱

如何把设计好的构件效果在移动设备上完整实现出来，一直是设计师和开发者交流时最大的问题。
开发者们不得不学 Sketch 或者 Photoshop 去实现设计师他们的设计，或者，不得不就怎么样把构件效果实现出来和设计师们讨论。对绝大部分的设计师来说，为构件写文档是一个非常耗时间但又是必须做的事情。然后，就有了那些可怕的可伸缩插件。你必须知道它们是怎么编写出来的，但这些又是非常复制，复杂到需要很多教程来学习。然后，现在不用了。 Xcode 5 会自动为你穿件这些可伸缩构件。
来自 Sketch, 把插件以 2倍大小和一半大小到处。Sketch 会自动命名好。

从 Sketch 中导入构件到 Xcode 中，Xcode 会自动匹配它们。

对于那些可伸缩的构件，点击打开显示切片(Show Slicing)

然后，点击开始切片(Start Slicing）

根据你需要，点击这三个按钮进行挑战

看，Xcode 自动为你做好这些了。然后根据这个流程，处理你那些按钮和气泡。

你的第一个屏幕显示

让我们开始做第一个屏幕显示。在你的故事板中，从对象库（Object Library）中拖拉图像视图(Image View)

然后，去属性检测器（Attributes Inspector）中编辑图像。如果在构件库中找到对应构件， Xcode 会自动显示出效果。

试着把图拉拽到另一个图像视图（Image View），然后把它设成气泡白。当你调整尺寸时，你会注意到它能很好的适应伸展。

然后创造一个头像。当你按住 Alt 的时候，你会看到一个类似在 Sketch 中的功能:)

现在，拖拽一个标签（Label），然后后设置文字（Text）内容，你可以把行数（Lines）设为 0，这样就可以不限制行数了。

去尺寸检测器（Size Inspector）那，用数字调整尺寸，这会更精确。

作为一个完美主义者，你应该尽可能让你的设计变得更好:)

关于字体，你可以选择一个较瘦的 iOS7 字体, 推荐 Helvetica Neue Light

输入信息的界面

把 View 拖进来，它就像是一个文件夹那样，你可以把所有的东西拖进去。它有自己的属性，是非常好用的。

如果你也做过 CSS 的话，文字框某些属性你应该会熟悉。确认下边框效果(Border style)已经取消了。

然后，那个声名狼藉的按钮。注意高亮显示的那些属性。

导航条

这里有一个简洁的技巧：去帮助(Help)菜单，找到嵌入(Embed)，热后，在导航控制（Navigation Controller）中选择嵌入。

在左边边框，选择导航条（Navigation Bar）, 它在故事板中自带了许多中样式可以选择。

想要一个标题？编辑你的视图控制器（View Controller）的导航条目(Navigation Item)下的属性.

是的，导航条有执行按钮。这个对象是在每个库的最末端。记得去编辑下着色的颜色，因为 Xcode 会自动帮你的图像上色。

圆角

在 CSS 中，你经常不想使用图像来做一些类似圆角的效果。但是，在 Xcode5 中，你可以程序化地设置圆角，这非常有用。
在这个表格中，我们要创建一个视图（View），它可以放置所有的东西，然后加上圆角。记得打开
"剪切子视图(Clip Subviews)"，它的作用就相当于「overflow:hidden」