不用一行代码在Xcode中创建原型交互

打开 Xcode ,选择如图所示的 Single View Application, 点击 Next.

Single View Application

一般设计的 Mockup 都会加上 Status Bar, 所以在如下界面，需要勾选 Hide status bar.

Hide status bar

点击左侧列表的 Main.storyboard, 会看到 View Controller, 它相当于 Sketch 中的 Artboard.

Main.storyboard

点击最右侧的 Inspector 中的 File, 就会看到如下页面。然后 Uncheck "Use Auto Layout" & "Use Size Classes", 会得到像 iPhone6s Size 大小的 View Controller. 点击播放按钮，会出现 iPhone6s 的模拟器界面。

Inspector

Uncheck

点击左侧列表中的 Assets.xcassets, 再将从 Sketch 中导出的图片拖到 Xcode, 如下图所示。

Assets.xcassets

屏幕快照 2016-01-23 下午9.57.49.png

回到 Main.storyboard, 将 Inspector 中的 View Controller 拖到 Canvas, 有几个 Mockup, 就拖几个 View Controller, 注意将 size 改为 iPhone6s 大小。

点击右下角的 Media library, 将其中的 Mockups 按顺序拖到 View Controller中，如下图所示。选中所有的 VC 将 Status Bar 选为 None.

Media library

Canvas

现在来创建交互动作，选择右下角的 Button, 拖到 VC 中的 Nav Bar 上。其中，按住 Option 键拖动，可以复制。然后点击某个 Nav Bar 上的按钮，长按 Control 键，拖动鼠标到另一页面上，选择交互动作即可。另，在模拟器中，按 CMD+SHIFT+H, 可回到桌面。

interaction