對(duì)于現(xiàn)代設(shè)計(jì)師而言，Sketch已經(jīng)成了不可或缺的設(shè)計(jì)工具之一。各家原型設(shè)計(jì)工具也在悄悄的發(fā)生一些改變，迎合設(shè)計(jì)師們的需求，紛紛開(kāi)發(fā)出了針對(duì)sketch原型的插件。既有傳統(tǒng)的桌面端原型工具，也有基于云平臺(tái)的工具。雖然沒(méi)有任何一條標(biāo)準(zhǔn)規(guī)定你必須使用哪一個(gè)工具，然而如何能在眾多的sketch+原型工具的組合中找到最適合自己的工作流程，提高工作效率，也是一件耗時(shí)的工作。

所以最近摹客的小伙伴們精心的為大家整理出了一個(gè)Sketch+原型工具的合集，希望能幫助各位優(yōu)秀的設(shè)計(jì)師朋友們找到適合自己的工具組合，提高工作效率。

Sketch

 

 

長(zhǎng)久以來(lái)，Sketch 在可交互方面一直為人所詬病。官方似乎更希望將這些功能留給第三方開(kāi)發(fā)者做插件，自己安靜的做個(gè)小而美的繪圖軟件。而今年更新的Sketch版本中，它也可以支持在Sketch內(nèi)部進(jìn)行輕量級(jí)的原型設(shè)計(jì)了。這對(duì)于廣大Sketch粉絲來(lái)講無(wú)疑是個(gè)好消息。

原型交互方式：

Sketch中的原型設(shè)計(jì)依賴(lài)于畫(huà)板(Artboards )和熱區(qū)( Hotspot )鏈接實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)，實(shí)現(xiàn)動(dòng)態(tài)交互原型(類(lèi)似于原型設(shè)計(jì)軟件Mockplus中的拖拽式鏈接點(diǎn) )。然而不得不吐槽的一點(diǎn)是鏈接線加的太多會(huì)讓你眼花繚亂。

預(yù)覽方式：

1) Sketch支持在軟件內(nèi)部預(yù)覽(類(lèi)似于Mockplus中F5本地預(yù)覽)。

2) Sketch Mirror內(nèi)實(shí)時(shí)預(yù)覽( USB 連接或同局域網(wǎng)內(nèi)預(yù)覽操作)。

3) Sketch Cloud 內(nèi)實(shí)時(shí)預(yù)覽(登錄 Sketch Cloud 后可將項(xiàng)目文件上傳至官方云端，實(shí)現(xiàn)在線多人預(yù)覽，并可進(jìn)行討論。)

缺點(diǎn)：

鏈接線過(guò)多會(huì)導(dǎo)致體驗(yàn)不好。

鏈接過(guò)渡效果有限。

Sketch相關(guān)資源：不可錯(cuò)過(guò)的19款Sketch線框圖套件

1. Mockplus + Sketch

 

 

Mockplus是更快更簡(jiǎn)單的原型設(shè)計(jì)工具。自發(fā)布以來(lái)深受?chē)?guó)內(nèi)外用戶喜愛(ài)，適合軟件團(tuán)隊(duì)、個(gè)人在軟件開(kāi)發(fā)的設(shè)計(jì)階段使用。簡(jiǎn)單快速的交互功能，能夠很好地表達(dá)設(shè)計(jì)，幫助設(shè)計(jì)師「關(guān)注設(shè)計(jì)，而非工具」。隨著越來(lái)越多設(shè)計(jì)師對(duì)協(xié)作功能的需求，他們也推出了適合多人協(xié)作的團(tuán)隊(duì)版和企業(yè)版，為更多的軟件開(kāi)發(fā)/設(shè)計(jì)團(tuán)隊(duì)提高了工作效率。

原型交互方式：

1) 下載Mockplus Sketch插件

2) 在Mockplus中拖拽組件后面的鏈接點(diǎn)，實(shí)現(xiàn)組件與組件，組件與頁(yè)面，以及組件本身狀態(tài)的交互效果。一拖一放，3秒快速交互。

預(yù)覽方式：

Mockplus提供8種預(yù)覽方式，包括軟件內(nèi)部F5本地預(yù)覽、在線發(fā)布為HTML網(wǎng)頁(yè)微信小程序(搜索Mockplus小程序)、手機(jī)客戶端(MKplayer)掃描二維碼等方式。

2. 摹客iDoc + Sketch

 

 

在實(shí)現(xiàn)交互快、設(shè)計(jì)快、演示快、上手快的敏捷開(kāi)發(fā)(Agile Development)的大趨勢(shì)后，摹客團(tuán)隊(duì)在今年9月份推出了摹客iDoc,朝著更高效的產(chǎn)品協(xié)作設(shè)計(jì)平臺(tái)方向發(fā)展。與Sketch的結(jié)合，使其在原生Mockplus原型設(shè)計(jì)和摹客 iDoc中實(shí)現(xiàn)高保真原型設(shè)計(jì)都非常高效、便捷。

原型交互方式：

在摹客iDoc中，按住鼠標(biāo)在設(shè)計(jì)稿上繪制一個(gè)矩形的熱區(qū)，再松開(kāi)鼠標(biāo)通過(guò)左側(cè)項(xiàng)目樹(shù)選擇熱區(qū)跳轉(zhuǎn)的目標(biāo)頁(yè)面，即可完成交互跳轉(zhuǎn)鏈接的設(shè)置。對(duì)設(shè)置好的交互鏈接還可以設(shè)置跳轉(zhuǎn)動(dòng)畫(huà)，有9種動(dòng)畫(huà)樣式可以選擇，默認(rèn)沒(méi)有動(dòng)畫(huà)。還可通過(guò)下拉框或直接輸入數(shù)值修改動(dòng)畫(huà)執(zhí)行時(shí)長(zhǎng)。

預(yù)覽方式：

摹客iDoc中，點(diǎn)擊頂部導(dǎo)航欄右側(cè)播放按鈕，即可演示交互原型。手機(jī)項(xiàng)目也可生成二維碼用手機(jī)掃描查看。

3. InVision Craft + Sketch

 

 

制作高保真原型時(shí)，大多需要從Photoshop和Sketch上傳內(nèi)容。那你肯定會(huì)碰到一個(gè)問(wèn)題，就是需要填充很多真實(shí)的圖片到界面里。這個(gè)過(guò)程非常浪費(fèi)時(shí)間，有沒(méi)有能節(jié)省時(shí)間的辦法呢?當(dāng)然是有的，那就是Craft。

Craft是InVision出的一個(gè)插件，功能強(qiáng)大。它不只可以輸出視覺(jué)規(guī)范(比較偏向StyleGuid)，還有些很酷的功能例如復(fù)制并排列物件，定義間距，文本/圖片自動(dòng)填充，重復(fù)元素自動(dòng)填充等等。通過(guò)將這個(gè)插件安裝到Sketch，你將體驗(yàn)到Sketch和InVision之間工作的連續(xù)性。通過(guò)將設(shè)計(jì)和原型制作流程結(jié)合在一起，就可以快速的輸出高保真原型。

原型交互方式：

從官網(wǎng)的介紹可以了解到，InVision的原型設(shè)計(jì)方式也是通過(guò)添加鏈接的方式。界面元素中添加鏈接到畫(huà)板，設(shè)置過(guò)渡動(dòng)畫(huà)并添加微交互，將靜態(tài)畫(huà)面轉(zhuǎn)換為交互原型。

預(yù)覽方式：

軟件內(nèi)部播放按鈕預(yù)覽。

4. Flinto + Sketch

 

 

使用Flinto可以創(chuàng)建一些小的交互和動(dòng)畫(huà)，實(shí)現(xiàn)多屏App的整體流動(dòng)(Comprehensive Flows)。使用它的Transition Designer，可以非?？焖俚膭?chuàng)建跳轉(zhuǎn)和轉(zhuǎn)場(chǎng)動(dòng)作。對(duì)于新手而言，直觀明了，當(dāng)用習(xí)慣了后就感覺(jué)特別順手，菜單、工具和選項(xiàng)都變成最小化。用它完全可以設(shè)計(jì)出令人印象深刻的原型，避免陷入特點(diǎn)過(guò)多的境地，分散用戶注意力。

原型交互方式：

Flinto可以快速實(shí)現(xiàn)交互設(shè)計(jì)，與Sketch無(wú)縫對(duì)接，并且通過(guò)插件就可以把素材直接導(dǎo)入到Flinto中，添加鏈接和過(guò)渡效果或者添加自動(dòng)跳轉(zhuǎn)。通過(guò)上傳圖片，添加熱點(diǎn)配合相應(yīng)的交互動(dòng)作快速的生成原型，方便客戶通過(guò)網(wǎng)頁(yè)或者手機(jī)端進(jìn)行觀看。

預(yù)覽方式：

1) 點(diǎn)擊軟件內(nèi)部播放按鈕

2) 下載iOS手機(jī)端App預(yù)覽(手機(jī)、電腦處于同一局域網(wǎng))

5. Principle + Sketch

 

 

Principle和Flinto有很多相似的地方。作為一款原型設(shè)計(jì)工具，Principle的設(shè)計(jì)方式別具一格。它更多地關(guān)注于轉(zhuǎn)換制作的時(shí)間軸線路以及Sketch屏幕間的交互。對(duì)于不同習(xí)慣的設(shè)計(jì)師來(lái)說(shuō)，有的人喜歡這種設(shè)計(jì)方法，而有的人就更喜歡使用像Flinto中的Transition Designer或者Framer中的Auto-Code(自動(dòng)編程)。

原型交互方式：

使用Principle可以方便地為多屏App制作流動(dòng)，或者就專(zhuān)注于微交互，這兩種任務(wù)它都可以勝任。與本文介紹的其它工具相比，Principle缺少一點(diǎn)潤(rùn)色。作為一款與眾不同的原型設(shè)計(jì)工具，它的原型設(shè)計(jì)方式也略微特殊。

1) 下載Sketch插件，導(dǎo)入素材

2) 建立過(guò)渡和交互動(dòng)作

3) 用延遲和曲線來(lái)打磨動(dòng)畫(huà)

4) 添加滾動(dòng)/分頁(yè)/拖拽

預(yù)覽方式：

1) 軟件本地預(yù)覽

2) 下載Principle Mirror手機(jī)預(yù)覽

缺點(diǎn)：

1)畫(huà)圖不方便，所以建議大家在Skecth中做好圖，再導(dǎo)入到Principle中

2)不能在當(dāng)前頁(yè)中做動(dòng)畫(huà)。

3)在Principle中的素材不能自由調(diào)整大小，只能用左側(cè)面板的scale選項(xiàng)進(jìn)行寬、高調(diào)整。

6. Axure + Sketch

 

 

眾所周知，Axure是一款老牌的設(shè)計(jì)軟件。作為專(zhuān)業(yè)的原型設(shè)計(jì)工具，它能快速、高效的創(chuàng)建原型。而輸入高保真原型，則需要把視覺(jué)設(shè)計(jì)師在Sketch中制作好的矢量素材，例如圖標(biāo)、控件、按鈕等導(dǎo)入到Axure中提高交互設(shè)計(jì)的效率。

原型交互方式：

先安裝好Sketch插件AxureRP.sketchplugin,選中Sketch的素材，點(diǎn)擊菜單的Plugins-AxureRP-Copy Selection。對(duì)于一般的交互，在Axure中可以通過(guò)彈窗來(lái)逐個(gè)篩選設(shè)置，到屬性面板上去篩選目標(biāo)頁(yè)面(頁(yè)面多的時(shí)候就有點(diǎn)煩了)。稍微復(fù)雜的交互，則需要條件生成器來(lái)實(shí)現(xiàn)。Axure在交互設(shè)置中，可以添加條件判斷，但需要用戶有一定的編程常識(shí)，否則掌握起來(lái)有相當(dāng)難度。尤其是初次使用的時(shí)候。

預(yù)覽方式：

本地發(fā)布預(yù)覽

7. Marvel + Sketch

 

 

Marvel是一款免費(fèi)的原型設(shè)計(jì)Web 應(yīng)用，可以進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)和移動(dòng)端的UI設(shè)計(jì)。它根據(jù)你設(shè)計(jì)好的 PSD 或 Sketch 文檔，也就是說(shuō)你的視覺(jué)稿無(wú)需轉(zhuǎn)換格式就可以使用，當(dāng)然線稿圖(.jpg or .png)也可以，導(dǎo)入后進(jìn)行后續(xù)的交互設(shè)計(jì)。

原型交互方式：

先將畫(huà)板通過(guò)Sketch插件同步到Marvel，框選界面元素，通過(guò)熱點(diǎn)(HotSpot)連接目標(biāo)畫(huà)板并設(shè)置頁(yè)面的轉(zhuǎn)場(chǎng)方式和操作手勢(shì)。不像連線的方式那么直觀，所以容易造成邏輯混亂。

預(yù)覽方式：

1) 直接在web頁(yè)面中進(jìn)行可交互的原型展示。

2) 生成URL通過(guò)郵件分享。

8. Framer + Sketch

 

 

與其他幾款原型設(shè)計(jì)工具不同，F(xiàn)ramer 可能是最特別的一款原型工具，因?yàn)樗笤O(shè)計(jì)師具備代碼能力。而它制作出來(lái)的原型也最接近真實(shí)效果。它支持調(diào)用系統(tǒng)鍵盤(pán)，輸入真實(shí)的文本，然后作為數(shù)據(jù)被使用;它支持對(duì)音頻、視頻進(jìn)行真實(shí)的控制與監(jiān)聽(tīng);Framer 的強(qiáng)大來(lái)自于它對(duì) HTML、CSS 以及 Javascript 的無(wú)縫支持，單是音頻和視頻，就有數(shù)十種屬性和事件可以拿來(lái)用。

原型交互方式：

Framer X中原型設(shè)計(jì)變得更加直觀，只需點(diǎn)擊幾下即可創(chuàng)建基本級(jí)別的交互。將畫(huà)板從sketch中復(fù)制粘貼到Framer中,使用“鏈接”工具添加推送和疊加等過(guò)渡，或使用多向手勢(shì)創(chuàng)建嵌套滾動(dòng)視圖。

預(yù)覽方式：

1) 本地預(yù)覽

2) iOS/Android手機(jī)鏡像預(yù)覽

總結(jié)

以上就是一些比較常見(jiàn)的Sketch原型設(shè)計(jì)工具組合。當(dāng)然還有很多我們并沒(méi)有列舉出來(lái)的工具，例如Pixate 和UXPin，當(dāng)然了還有Facebook的Origami Studio。如開(kāi)頭所說(shuō)，并沒(méi)一項(xiàng)規(guī)定限制你必須使用哪一種工具，只要是適合自己的使用習(xí)慣，適合自己的語(yǔ)言環(huán)境，適合團(tuán)隊(duì)的工作節(jié)奏，在不同的原型設(shè)計(jì)工具中切換使用也是常有的事。

不管是使用Sketch的原型設(shè)計(jì)功能還是使用Sketch+原型設(shè)計(jì)工具組合的方式，只要能幫助自己提高工作效率，設(shè)計(jì)出滿意的現(xiàn)代原型就是很好的組合。找到適合自己工作流程的原型工具，然后就開(kāi)始工作吧!