写给设计师同学的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」


 

设置 layer.cornerRadius 运行时属性(Runtime Attribute)


这个效果不会在故事板中显示出来,但会在模拟器中显示出来。

链接到其他屏幕

 创建一个空的按钮,然后把它放在视图里面


 

按住 Ctrl,把那个按钮拖拽到其他屏幕。选择推送(Push),记得在根屏幕上有一个导航条,否则这个会没效果。

1像素(px)的行

 Xcode 是在 pt 单元运作的(pt unit)。你其实没有真的创建一个视图,然后把视图设成 0.5pt 或者 1px。所以,如果你需要建一个头发那样细的行,你必须要创建一个 1 像素的构件。

工具条导航

iOS 自带的工具条非常具有可定制性的。你可以改变它的颜色、文字和图标。
 

选择了视图控制器之后,搜过之前做过的 「嵌入」,然后这次选择 Tab 条(Tab Bar)。


 就像在导航条的那样,你可以在每个视图控制器中编辑


 有时候,你不想要导航条或者工具条,你可以通过「选择下方条为空(Selecting Botton Bar to None)」,然后点击「隐藏下方条推送(Hide Botton Bar on Push)」。

滚动

每个人都钟爱 iOS 上的滚动反弹(Bounce back scroll), 如果你也想要这个效果,你必须有一个表格视图(Table View)作为容器,它的结构是:Table View / View (full) / Your objects.


 

小心,表格视图和视图会提前加载一个白色背景。确保已经设置成清色(Clear color)了。


 

在屏幕中,有部分是可滚动的,这个能使屏幕活泼些。


下载这个 Xcode 项目:
可以在上面这个项目上自己进行摸索,可以随便调试设计,项目的资源文件在:
http://cl.ly/2A0m0j0i0g1K



写给设计师同学的xcode使用教程: 教你用 Xcode 做原型设计 Apple开发 1w+ 0 527
2017-02-03 来源:eisk.cn
精彩推荐