酸梅干超人：InVision Craft Prototyping 功能終于上線了，從兩年前開發到現在，千呼萬喚始出來，有生之年系列既視感！

可能很多人對 InVision 是做什么的不太清楚，這里稍微科普一下，除去需要搭梯子來提速，這家公司應該是目前所有原型工具中最優秀的，沒有之一。無論是對于產品的理解、體驗的設計，還是對于前端技術的追求。

Craft 的原型工具，可以快速在 Sketch 把頁面的交互設置做好，然后生成網頁的鏈接分享出去。可以讓任何人，通過任何設備的瀏覽器進行訪問和操作。這里面很多優點就不說了，大家可以自己研究。

下面直接進入今天的主題，沒有下載的可以去官網下載最新的安裝包，https://labs.invisionapp.com/craft。以及保證自己更新到最新的版本，開啟了最下方的 Sync + Prototype。

△ ?Craft 的面板

然后我們在 Sketch 界面中的 Craft 的功能欄最下方（位置比較坑），可以看見一個閃電按鈕，點擊開就可以開啟原型編輯模式，同時底部會有提示框彈出。

△ ?開啟原型編輯模式時彈出的提示

在這個狀態下，只要我們選中畫布中的組件，再按快捷鍵 C ，就會生成一個箭頭，把剪頭指向組件對應跳轉的頁面再點擊，就會彈出一個新的彈窗進入下一步操作。

△ ?定位組件跳轉的頁面

這個彈窗是用來設置交互動作和效果的。最上方的單選彈窗，用來選擇交互目的，是鏈接到新頁面或者頁面遮罩的模式。下方 Gesture 代表手勢，比如點擊、滑動、長按等。Transition 代表在觸發了上方交互動作以后執行的交互效果，比如常見的 Push 、Slide、Flip 。再下面那個選項不好解釋，后面自己操作一下就明白了。這時我們按保存，就代表已經創建了一個交互動作——點擊該組件下個頁面會從右向左推進。

△ ?交互設置的面板

這里要說到，當我們在選擇交互目的的時候，在上方會有兩個特殊的按鈕是可以選中的，一個是交互跳轉到上一頁，一個是跳轉到制定 URL 鏈接。

△ ?跳轉上一個頁面和網頁鏈接

這時候我們就要對其它可交互元素進行設置，完成所有跳轉和返回的邏輯（用以前的某個飛機稿做的測試）。

△ ?編輯完跳轉后的樣式

這時候在本地我們是不能直接進行操作的，需要對內容進行上傳，也就是右上方的上傳按鈕。

△ ?頁面設置上傳和演示的面板

如果沒有登錄的話在這個頁面會有提示，完成登錄操作即可。這時上方的這個單選框，點開，選擇或新建一個畫板，我命名為測試。

△ ?新建一個畫板

然后可以選擇是上傳所有畫布，還是自己手動選擇的畫布，推薦手動選擇的。按下方 Sync to InVision 就可以把這些頁面和完成的交互信息全部上傳到服務器上去。當然，如果你之前已經在本地修改過頁面，只需要一樣的方法再次上傳就可以覆蓋舊的記錄。我們需要耐心等待上傳過程，面板左下角會有上傳進程。當完成后，就可以點擊右側的按鈕進行瀏覽啦！

△ ?上傳中的進度展示

其中 Open 是用來在線上開啟頁面的文件夾進行精確的編輯。最右側的箭頭，就是直接可以讓我們進行交互操作演示的按鈕，點擊就可以打開瀏覽器，在網頁中訪問。把這個頁面的鏈接復制黏貼下來發給別人，就可以讓項目其它成員一起瀏覽了。

△ ?電腦中訪問的樣式

△ ?手機中訪問的樣式

InVision Craft Prototyping 目前應該還處在前期的測試階段，還有很多不完善的地方。但相信按他們的風格會不斷優化和呈現出最好的產品，大家都可以試試。最后，這個工具可以很好的用來做原型的交互演示，請趁早淘汰 Axure 吧！

歡迎關注作者的微信公眾號：

「用Sketch 做交互原型的軟件」

1. 工具隨心用！教你用KEYNOTE快速制作高保真交互原型
2. 新晉神器！超厲害的原型設計新玩具Kite Compositor 深度測評

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量200萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com