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

请输入图片描述
在过去的一个月,我每天早上 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 会比 HTML/CSS/SCSS/Javascript 简单得多。它提供了强大的 UI 可以让你编辑绝大多数应用上的视觉元素。某种意义上来说,它就是所见即所得了(WYSIWYG)。下次,我会讨论如何用最少代码,仅依靠使用 CocoaPds和第三方库的去定制字体、声音、动画等。如果你有兴趣关注后续 Ripple 应用的开发或相关 Xcode 教程,你可以在twitter 上关注我:@mengto

没有更多推荐了,返回首页