打開 Xcode ,選擇如圖所示的 Single View Application, 點擊 Next.
一般設計的 Mockup 都會加上 Status Bar, 所以在如下界面,需要勾選 Hide status bar.
點擊左側列表的 Main.storyboard, 會看到 View Controller, 它相當于 Sketch 中的 Artboard.
點擊最右側的 Inspector 中的 File, 就會看到如下頁面。然后 Uncheck "Use Auto Layout" & "Use Size Classes", 會得到像 iPhone6s Size 大小的 View Controller. 點擊播放按鈕,會出現 iPhone6s 的模擬器界面。
點擊左側列表中的 Assets.xcassets, 再將從 Sketch 中導出的圖片拖到 Xcode, 如下圖所示。
回到 Main.storyboard, 將 Inspector 中的 View Controller 拖到 Canvas, 有幾個 Mockup, 就拖幾個 View Controller, 注意將 size 改為 iPhone6s 大小。
點擊右下角的 Media library, 將其中的 Mockups 按順序拖到 View Controller中,如下圖所示。選中所有的 VC 將 Status Bar 選為 None.
現在來創建交互動作,選擇右下角的 Button, 拖到 VC 中的 Nav Bar 上。其中,按住 Option 鍵拖動,可以復制。然后點擊某個 Nav Bar 上的按鈕,長按 Control 鍵,拖動鼠標到另一頁面上,選擇交互動作即可。另,在模擬器中,按 CMD+SHIFT+H, 可回到桌面。