Sketch 49 的交互原型新功能怎么用?來看這篇教程!

Sketch49 交互原型新功能,對于 UI 設計師們來說是不是新福利呢?我們一起看看!

看到2月28日 Sketch49 新版本發布的消息,打開了官網看到了最新的版本更新視頻,確實還是挺激動的。UIBANG 來和大家一起看看 Sketch49 的版本更新了哪些新功能吧。

一、交互原型功能

畫板( Artboards )和熱區( Hotspot )鏈接實現頁面間的跳轉,實現動態交互原型(類似交互軟件 Marvel 中的熱區鏈接?)。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

Sketch49 版本中的交互原型預覽圖(話說這線條敢不敢再亂點,頁面多了眼會瞎么?相比之下 Principle 還算很好了)我覺得這也是 Sketch需要解決的一個使用體驗問題,期待后續版本可以有好的解決方案。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

二、便捷的效果預覽

設計制作的交互原型,可以通過三種方式預覽查看。

1. Sketch軟件內部預覽(類似于 Principle 中的預覽窗口,或 xcode 中的模擬器)。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

2. Sketch Mirror內實時預覽( USB 連接或同局域網內預覽操作)。

3. Sketch Cloud 內實時預覽(登錄 Sketch Cloud 后可將項目文件上傳至官方云端,實現在線多人預覽,并可進行討論。)

三、其他更新

  • Sketch Cloud 中文件可安裝為 Libraries。
  • 增強復制粘貼大型文檔性能。
  • 改進? EPS/SVG 格式文件 導入。
  • 漸變錨點改為單擊增加。
  • 圖層列表拖入畫板內不再是位圖。
  • 優化縮略圖性能新增原型設計模板及修復已知 Bug。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

四、交互原型功能教程

1. 頁面鏈接跳轉(也就是畫板之間的切換)

更新到 Sketch49 后,在工具欄右側會發現「Link」功能按鈕。

選中畫板中的一個對象后可激活「Link」按鈕(僅選中畫板無法創建鏈接)。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

創建 Link 鏈接后,我們會發現 Sketch 左側圖層矩形上的變化(多了一個曲線箭頭,表示有鏈接)。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

修改頁面切換動效。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

從左至右分別是:無 、向左切換、向右切換、向上切換、向下切換(第一個版本可能比較保守,沒有太多動效選擇)。

2. 如何取消鏈接操作

選中原有鏈接對象 — 矩形 ,右側面板中可編輯鏈接。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

或將 Target 修改為 none。

檢測頁面邏輯可以通過查看跳轉目標驗證。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

3. 如何創建熱區

在 Sketch 中 熱區稱為? Hotspot ,可以通過菜單欄中的 Insert(插入)找到,也可以使用快捷鍵 H。

在畫板內鼠標左鍵圈出「熱區」范圍,箭頭指向目標畫板(頁面)。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

在自定義工具欄中可以為「熱區」添加快捷入口。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

4. 如何預覽交互效果

Sketch 軟件內部預覽(黑屏的小伙伴請看文末說明)

連線操作完成后,點擊 預覽按鈕。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

Sketch Mirror 手機內預覽(暫無 Android 版本,且無法像 Principle 緩存至手機內離線操作)

打開 Sketch Mirror,按照在 Sketch 內設置的交互操作即可。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

當忘記操作熱區時,會有紅色線框提示。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

Sketch Cloud 云端團隊協作預覽?

注冊/登錄? Sketch Cloud。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

登錄后可將當前項目上傳至 Sketch Cloud 云端。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

邀請項目成員及權限設置。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

上傳成功后可查看當前原型項目。

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

五、Sketch49 預覽窗口「黑屏」怎么回事?

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

本人也遇到了這個問題,郁悶了很久,找了幾個小伙伴一起幫忙測試,發現疑似問題是OS X 版本導致,我的 MacBook PRO(10.12.6 )可正常預覽顯示,家中的 iMAC(10.13.3)卻一直無法連接。

但是暫沒有看到官方解釋,我也僅僅是個人猜測,也歡迎小伙伴們共同測試留言給我。

六、總結

本次 Sketch 更新的力度還是很大的,能看得出它在移動端設計上越加強大,真希望有一天能「統一六國」,UI 設計師們可能也不會那么折騰,那么累了。

歡迎關注作者微信公眾號:「UIBANG」

Sketch 49 的交互原型新功能怎么用?來看這篇教程!

「Sketch實用教程」

================明星欄目推薦================

優優教程網 UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備: http://hao.uisdc.com

收藏 52
點贊 9

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。