[ISUX转译]如何使用Xcode进行高保真原型设计?

todd

Xcode不仅是开发者用来开发iOS Apps的开发工具,同样也可以被设计师用来创建App的高保真交互原型。在Xcode开发环境里,没有任何限制,设计师可以嵌入各种各样有趣的交互,动效和声音去创造一个真正的iOS App的体验。在这个教程中,主要讲述Xcode工具中Storyboard功能,这个功能可以让设计师不用任何一行code去创建一个iOS App的原型,这仅仅需要花费几个小时而已。

教程的最终目标是把设计在iOS环境下生成完整的可交互原型。就像WEB设计中学习CSS一样,这可以极大帮助开发者解决UI还原部分的工作,并帮助设计师和开发者更好的进行合作。正如乔布斯所说:“Design is how it works.” 静态的图片对设计来说并不足够,需要把设计带入到真实生活中。

获取Xcode

在App Store 中下载Xcode

Start A New Project(开始一个新项目)

1) 打开Xcode,然后“Create a new project(创建一个新项目)”

2) 选择“Single View Application(单视图模板)”

3) 编辑项目名称和公司名称

初始化App设置

1) 选择仅支持Portrait模式(竖屏)

2) 选择App的 icons

3) 选择App的Launch Images(启动页),Launch Images就是当App启动时展现的第一个页面。

Xcode的UI界面

初次使用Xcode可能会感觉到界面有一点复杂。在这个教程中,我们只专注Storyboard功能有关的部分。

Add images(插入图片)

准备好App的设计页面,页面中不要包含顶部的状态栏。想要把这些图片插入,首先要选择一个“ Group”(组),然后“Add Files  To… (添加文件到…)”。当然也可以直接拖拽图片到创建的Group中。

在执行操作前要确认“Copy items into destination group”(拷贝到指定组中)和“Add to targets”(加入到目标中)两个选项已经启用。

AddFiles

First Screen(第一场景)

到此初始化设置已完成,设计稿图片也已经添加到组中,终于可以开始使用Storyboard工具了。现在去Storyboard面板并从Object Library(控件库)中拖拽一个Button(按钮)到工作区中。

为什么先放置一个Button(按钮)?因为这个Button可以起到一个可被点击并跳转到第二个场景的作用。调整Button尺寸,让它和整体尺寸的比例大小合适。

当选择按钮的时候,需要查看一下Attributes Inspector(属性面板)。其中我们关注的属性是type(类型)、title(标题)和image(图片)。把类型选择成custom(定制),title(标题)设置为none(无),image(图片)设置成设计稿中的第一个页面(输入图片名字的时候系统会帮助自动补齐)

AttributesInspector

Second Screen(第二个场景)

场景在Xcode环境中被称作“Controllers(控制器)”。要开始创建第二个场景,简单的拖拽一个View Controller(场景控制器)到工作区,并重复之前步骤就可以了。

ViewController

把场景联系起来

Xcode通过一个被称作为“Segue(链接)”把不同的场景关联起来。为了创建一个“Segue(链接)”,按下键盘上“Control”键同时使用鼠标光标把第一个场景拖拽到第二个场景上。选择“modal”(模态)模式。这样会创造出一个第二场景从底部滑入的转场动效。

可以通过点击两个场景之间的“Segue”(两屏之间也圆形图标)对转场动效果进行定制,常用的动效有 Cover Vertical(底部滑入), Flip Horizontal(水平翻起), Cross Dissolve(淡入淡出) or Partial Curl(翻页卷起)。 如果不想使用转场动效,取消勾选“animate”(动效)选项即可。

Push Segue(右侧滑入转场动效)

Push Segue(有导航条类型链接)只有存在Navigation Controller(导航控件)场景下才能使用。要想创建一个Navigation Controller,选择第一个场景的View Controller(场景控制器)选中顶部菜单Editor(编辑)>Embed in(嵌入)>Navigation Controller。插入导航控件后,所有链接在一起场景顶部都出现Navigation Controller的导航条。

如果想要移除导航条,选中Navigation Controller,然后把Top bar(顶部条)设置为none

到了这步,可以选择使用Push Segue并为其选择一个Horizontal Sliding(水平滑入动效)。

测试你的App

Xcode内嵌着一个iOS模拟器可以预览当前的工作。要想预览,选择iPhone6.1模拟器并点击左上方的Run(运行)按钮。然后,屏幕正中会出现一个iPhone预览视图让设计师可以测试刚刚创建过的App。

点击第一个场景上面的Button,第二个场景会从右侧水平滑入。虽然非常简单,但可以帮助大家很好的理解Storyboard工具如何工作。

下载 Prototype 1.0  这是当前所设计的原型

Header and Content(标题和内容)

Header and Content会有很多的交互。在View Controller(场景控制器)里,可以从Object Library选择使用任意一种控件。一般比较典型的页面会有一个稳定Header,若干个button和可以滚动展示的Content。

首先,必须在Photoshop或者Sketch中把Header和Content分离。现在把之前创建的Button删掉,并从Object Library中拽取一个图片控件到Header(标题)位置上。在Attribute(属性)面板中编辑图片的名字。至于尺寸,选择Size tab(尺寸页卡)把高度设置为和Header图片尺寸一样。

请注意Xcode一般使用pt而不是px作为单位(1pt=2px),在设置尺寸时请注意单位的换算。

在Header上面,可以从控件库继续拖拽Button和Label控件。

Scrollable Content(可滚动的内容)

为了设计内容可以在界面内滚动查看,需要拖拽来一个Table View控件并调整尺寸大小填充页面中剩余 部分。在Table View控件区域里,拖拽来一个Button控件并设置尺寸大小和图片大小一致。在这个Button控件上可以编辑一个Segue链接第二个场景。在当你按下Control进行拖拽和放置的时候确保Button是一直被选中的。

Layers

与此同时,还必须确认Header(标题)图层要比Table View 图层更优先运行。Xcode环境中一般采用反向的顺序,在底层的图层会比上层的图层优先运行。

The Back Button(返回按钮)

Back button(返回按钮)之所以会在本文中提到,是因为它是非常重要有用的,文章作者会在未来教程中解释其如何使用。现在要做的是创建一个Group,把Object—C category files拖拽到Group里面。在导入文件的确保勾选上“Add to Targets(添加到目标)”选项。

导入文件后,便可以把Back Button 和底部Exit(退出)图标链接在一起,这时一个叫做 backbutton(返回按钮)选项会浮现出来,点击这个选项。

Backbutton

Views and Objects(视图和对象)

下面是一个关于Views and Objects (视图和对象)是如何构建的图例:

一旦了解了Views and Objects(场景和对象),便可以按照你的想法定制上图中的控件。

在iPhone上预览

xcode可以帮助在iPhone上预览设计的App。不过这是一个比较复杂的过程,而且需要开发者帐号。如果你有开发者帐号,你必须根据说明和指引去创建证书并修改你的mac的配置文件,完成后才能取得像iPhone安装App的权限。简单的把模版里面的图片替换成你自己的,调整一下面板里的属性,加上新的场景并用Segue链接他们。

下载模板

下面的这个模板可以帮助大家开始熟悉Storyboard

简单的把模版里面的图片替换成你自己的,调整一下面板里的属性,加上新的场景控件并用Segue链接他们。

资源

就像在sketch软件一样,研究别人做的Xcode源文件,对于学习Xcode是非常关键的。下面是一些对学习Xcode资源有用的资源

  •     Cocoa Controls-可以找到很多开源的控件
  •     在Github里面搜索Xcode projects
  •     未完待续

最后一些想法

作为一个设计师,我从来没想过自己会写Xcode教程。这个程序原来仅对开发人员有吸引力——程序界面复杂且需要使用者掌握Objective-C,使得使用门槛非常高。所幸,从Xcode 4版本开始增加的Storyboard让设计师能够规避对编程的恐惧,并能自如地使用程序完成交互设计。

如果没有iOS开发者Max Tagher的帮助我是无法完成这篇教程的,是他帮助我解决了使用Xcode中遇到的各种困难。如果你认识有iOS开发背景的朋友,我建议在使用Storyboard遇到困难时向他请教。这是Storyboard系列教程中的第一篇。在下一篇中,会包含如何定制字体,更复杂的流程、动效和声音。高质量的Xcode资源很不容易找到,如果你有,请分享给大家。

原文作者:Meng To

原文链接:http://blog.mengto.com/prototype-xcode-storyboard/

Tags: , , , ,

todd
todd
体验设计
上一遍
下一遍
QQ空间 腾讯微博 新浪微博 Facebook Google+

相关推荐

留下你的想法吧

  1. dark says:

    好文收藏之

  2. tina says:

    好好学习~

  3. angelo says:

    其实xcode也并非多么难学,只要你学过c,懂得使用api接口,要掌握obj—c也就是一两个月的事情。

  4. 看样子不错,但是看不懂~

  5. 小生 says:

    这个教程貌似不够详细,有几个步骤都不是很懂。求大神搞一个更加详细的……