Craft 強(qiáng)勢(shì)更新！幫你在Sketch 上快速做交互原型

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

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

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

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

△ ?Craft 的面板

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

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

在這個(gè)狀態(tài)下，只要我們選中畫布中的組件，再按快捷鍵 C ，就會(huì)生成一個(gè)箭頭，把剪頭指向組件對(duì)應(yīng)跳轉(zhuǎn)的頁面再點(diǎn)擊，就會(huì)彈出一個(gè)新的彈窗進(jìn)入下一步操作。

△ ?定位組件跳轉(zhuǎn)的頁面

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

△ ?交互設(shè)置的面板

這里要說到，當(dāng)我們?cè)谶x擇交互目的的時(shí)候，在上方會(huì)有兩個(gè)特殊的按鈕是可以選中的，一個(gè)是交互跳轉(zhuǎn)到上一頁，一個(gè)是跳轉(zhuǎn)到制定 URL 鏈接。

△ ?跳轉(zhuǎn)上一個(gè)頁面和網(wǎng)頁鏈接

這時(shí)候我們就要對(duì)其它可交互元素進(jìn)行設(shè)置，完成所有跳轉(zhuǎn)和返回的邏輯（用以前的某個(gè)飛機(jī)稿做的測(cè)試）。

△ ?編輯完跳轉(zhuǎn)后的樣式

這時(shí)候在本地我們是不能直接進(jìn)行操作的，需要對(duì)內(nèi)容進(jìn)行上傳，也就是右上方的上傳按鈕。

△ ?頁面設(shè)置上傳和演示的面板

如果沒有登錄的話在這個(gè)頁面會(huì)有提示，完成登錄操作即可。這時(shí)上方的這個(gè)單選框，點(diǎn)開，選擇或新建一個(gè)畫板，我命名為測(cè)試。

△ ?新建一個(gè)畫板

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

△ ?上傳中的進(jìn)度展示

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

△ ?電腦中訪問的樣式

△ ?手機(jī)中訪問的樣式

InVision Craft Prototyping 目前應(yīng)該還處在前期的測(cè)試階段，還有很多不完善的地方。但相信按他們的風(fēng)格會(huì)不斷優(yōu)化和呈現(xiàn)出最好的產(chǎn)品，大家都可以試試。最后，這個(gè)工具可以很好的用來做原型的交互演示，請(qǐng)趁早淘汰 Axure 吧！

歡迎關(guān)注作者的微信公眾號(hào)：

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

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量200萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com