Sketch 49 更新：邁向交互設計領域的第一步

2017 年 2 月 28 日，Sketch 發布了最新的版本 Version 49，在這個版本中，主要增加了三項新的功能：

Prototyping：你可以使用連線和熱點圖層來連接 Artboard 製作交互設計，並且可以在 Sketch，Sketch Cloud 和 Sketch Mirror on iOS 進行預覽

Libraries on Sketch Cloud：上傳到 Sketch Cloud 的 Sketch 文件現在可以當做 Libraries 進行安裝

Apple UI Design Resources：Apple 官方的 iOS 11 UI Kit 現在已經添加到了 Sketch 的 Library當中

隨著這個版本的更新， Sketch 終於正式進入交互領域。作為設計領域中一個十分強大的工具，很多交互原型的軟體都會支持直接導入 Sketch 文件，也有 Plugin 來實現交互功能，例如 Craft。如今 Sketch 加入了自己的交互設計支持，究竟它的表現如何？

Prototyping

打開新版的 Sketch ，很明顯的就會發現工具欄上面多了幾個新的按鈕，這幾個按鈕就是 Prototyping 常用的功能了，同時 Sketch 也增加了一個 Prototyping 的 Template，來方便大家學習和了解新的功能。

如何創建交互鏈接

創建交互頁面鏈接，Sketch 這次提供了兩種方式，分別是 Link 和 Hotspot，Link 可以將你選中的圖層創建鏈接跳轉到任意的 Artboard，Hotspot 可以創建一個任意大小的點擊區域鏈接跳轉到任意的 Artboard。可以看出，如果你想要使用 Prototyping 功能，你的 Sketch 文件必須含有 Artboard 才可以進行交互鏈接操作。

1. Link

當你要創建 Link 時，只需要選中你要的圖層，然後使用「快捷鍵 W」或者在 Prototyping 選項中點擊「+」來添加，之後你的圖層會顯示一條跳轉的線，再點擊你要跳轉到 Artboard 就可以了。當你添加完 Link 後，你也可以選擇含有 Link 的圖層，然後再 Prototyping 選項中進行修改操作。

2. Hotspot

當你要創建一個 Hotspot 時，先使用「快捷鍵 H」然後畫出一個你所需要的點擊區域，你畫出的點擊區域會顯示一條跳轉的線，再點擊你要跳轉到 Artboard 就可以了。你也可以通過 Prototyping 選項將一個 Link 轉換成 Hotspot。

在 Prototyping 選項的 Target 選項中，你可以設置跳轉到的 Artboard，當你想要進行返回上一個頁面的操作時，你可以選擇「Previous Artboard」選項，Sketch 會記住你之前進入的頁面，進行返回操作。

預覽交互原型

當你對你的設計完成了交互鏈接操作之後，你可以對你的交互原型進行預覽，Sketch 提供了 3 種預覽方式，在 Sketch 中進行預覽，上傳至 Sketch Cloud 在網頁中預覽和使用 Sketch Mirror 在 iOS 中進行預覽。

1. Sketch 中預覽

在 Sketch 中預覽時，點擊工具欄中的「Preview」按鈕或者使用快捷「? + P」，就會彈出預覽窗口預覽窗口。

在預覽窗口中，你可以點擊之前設置過的鏈接位置，進行頁面跳轉來查看交互效果，當你點擊了沒有設置鏈接位置時，會出現可點擊區域的提示。同時你也可以手動返回上一級頁面，或者選擇想要查看的頁面。當你需要將某個頁面設置為交互流程的起始頁面時，可以選擇到該頁面，然後點擊旗子 icon 進行設置，再次點擊就可以取消設置。

2. Sketch Cloud 中預覽

當你想要將交互原型分享給你的朋友，或者在沒有 Sketch 軟體的環境下觀看時，就可以將該文件 上傳至 Sketch Cloud，點擊工具欄上的 Cloud 圖標就可以完成了，完成上傳會可以將鏈接分享給你的小夥伴進行瀏覽了。

可以單擊這裡來預覽效果

3. 在 iOS 中預覽

Sketch 同時支持在 iOS 中預覽你的交互原型，你只需要在手機中安裝 Sketch Mirror，然後通過 Wi-Fi 或者 USB 與 Sketch 進行連接，之後就可以在手機上預覽你的交互原型了。

Sketch Mirror

iOS

相關文章下載

一些小技巧

1. 隱藏交互鏈接連線

如果你的 Sketch 頁面很多，頁面中顯示交互鏈接的連線往往會影響到本來的設計工作，你可以點擊菜單中的「View - Show Prototyping」或者使用快捷鍵「? + F」來進行隱藏或者顯示。

2. Symbol 也支持交互鏈接

你同樣的可以為 Symbol 增加交互鏈接，當你在文件中添加了該 Symbol 時，你可以在 Symbol 的 Overrides 選項中來設置想要跳轉的頁面。這使得 Symbol 的功能進一步提示，大大降低了重複勞動。

3. 更換交互連線顏色

交互連線默認的顏色是橙色，如果你並不是很喜歡這個顏色的話，你可以在 Sketch 的設置頁面進行更換，點擊「Sketch - Preferences…」或者使用快捷鍵「? + ,」進入 Sketch 設置界面，在 Canvas 選項卡中進行設置。

4. 創建跳轉的快捷方式

當你創建了 Link 或者 Hotspot 時，在選擇 Artboard 時，當前的 Artboard 會有兩個快速創建鏈接的按鈕，一個可以選擇返回進入頁面，一個可以選擇任意 Artboard，包括不同 Page 的 Artboard。

從 Sketch Cloud 添加 Libraries

之前，你想要將 Libraries 分享給你的朋友時，只能上傳到網盤或者將文件傳給對方。現在 Sketch 支持將 Sketch Cloud 中的文件作為 Libraries 進行添加。你只需要將想要作為 Libraries 的 Sketch 文件上傳到 Sketch Cloud 中，然後打開該文件的 Sketch Cloud 鏈接，點擊「Download - Add Library to Sketch」就可以了。需要注意的時，你的這個文件必須勾選「Allow others to download this Document」選項才可以。

安裝 Apple 官方的 iOS 11 UI Kit

Sketch 提供了 Apple 官方的 iOS 11 UI Kit，如果你想使用，點擊「Sketch - Preferences…」或者使用快捷鍵「? + ,」進入 Sketch 設置界面，在 Libraries 選項卡中，就可以進行下載了。

其他改進

這次更新除了上面提到的這三個重要更新之外，這次版本更新還有 60 多處提升和 bug 修復，這裡簡單的說幾個重要的改進。

1. Symbol Overrides 選項顯示改進

當你在使用一個比較複雜的 Symbol 時，例如一個嵌套 Symbol，Overrides 的選項名稱顯示有時會顯示不完整，這次的改進，使得 Overrides 選項具有了更高的可讀性。

2. 矢量工具的改進

當你在矢量編輯狀態下時，你可以按住「?」鍵並拖拽路徑，可以創建或調整一個曲線路徑。

總結

隨著發展，設計和交互在一個軟體中統一，已經是發展的趨勢，不管是 Adobe XD，最新更新的 Framer，還是將要推出的 InVision Studio 都包含了設計和交互兩個功能。Sketch 這次的更新可以說是極其重要的一步，但是目前 Sketch 的交互功能還是有很多不足，例如只能做頁面跳轉交互而不能做精細的交互動畫，對滾動頁面沒有很好的支持，頁面跳轉過場動畫種類較少等，期待 Sketch 在之後的更新可以更好的完善交互功能，減少設計界面和交互需要學習多個軟體的成本。

更多 Sketch 相關內容，歡迎關注 探索 Sketch 專欄。

想第一時間了解重要 App 的更新資訊？快來 App Store 下載 少數派客戶端。