對于許多剛剛開始接觸原型設(shè)計(jì)的設(shè)計(jì)師而言，很容易混淆線框圖（Wireframe）、視覺稿（Mockup）和原型（Prototyping）這三個(gè)基本概念。
對于許多剛剛開始接觸原型設(shè)計(jì)的設(shè)計(jì)師而言，很容易混淆線框圖（Wireframe）、視覺稿（Mockup）和原型（Prototyping）這三個(gè)基本概念。
在許多項(xiàng)目和相關(guān)文章中，這些概念經(jīng)常被混用。雖然在功用上，三者有許多相似點(diǎn)，然而差異也非常明顯。
不過，許多原型并不一定得做的非常的好看，它最主要的的功能是還原并呈現(xiàn)設(shè)計(jì)思路，它需要是可運(yùn)行、可交互的，這是核心。
一個(gè)典型的原型設(shè)計(jì)工作流大概是這個(gè)樣子的：
InVision
InVision有多優(yōu)秀？Twitter和 Uber在用它，福布斯推薦它，而財(cái)富榜百強(qiáng)企業(yè)都在用它來設(shè)計(jì)產(chǎn)品。InVision 將產(chǎn)品設(shè)計(jì)流程中的每一個(gè)環(huán)節(jié)都進(jìn)行了細(xì)化，讓協(xié)作成為了流程的核心，讓團(tuán)隊(duì)中每個(gè)人都能圍繞著項(xiàng)目推進(jìn)緊密地合作。
InVision 讓團(tuán)隊(duì)可以在瀏覽器中實(shí)現(xiàn)實(shí)時(shí)協(xié)作。如果你想讓你的高保真原型能夠像真實(shí)產(chǎn)品一樣運(yùn)作，如果你想讓你的原型自由無限制地進(jìn)行測試，如果你希望你的原型能夠像素完美，那么InVision 應(yīng)該是最適合你的原型工具，哪怕你沒有一點(diǎn)編程和代碼知識。
Pidoco
如果你不想在產(chǎn)品開發(fā)流程中放棄線框圖，那么Pidoco 可能是更好的選擇。和InVision 不同，Pidoco 真正的核心優(yōu)勢在于設(shè)計(jì)出強(qiáng)交互性的UX原型。在Pidoco 的協(xié)助下，你能創(chuàng)造出可用來展示、完全可操作的原型，支持手勢操作、過渡動效、鍵盤錄入等多種復(fù)雜交互，它可以為你帶來理想的移動端演示原型。
你可以在瀏覽器、iOS和Android 設(shè)備上實(shí)時(shí)演示你的原型，Pidoco 的智能模板使得原型的設(shè)計(jì)和搭建極其快速而便捷，這也使得它簡單易學(xué)，將它介紹給團(tuán)隊(duì)成員并作為主要的工具之一絕不會是麻煩的事情。
由于Pidoco 主要是在云端運(yùn)行，所以你不需要安裝程序，只需要登錄、同步、演示就好了。同樣的，Pidoco 不需要你具備代碼知識，上手很快的哦。
Proto.io
Proto.io 是一款專門的移動端原型設(shè)計(jì)平臺，它不僅能幫你搭建可交互的原型，可以能用來測試和模擬移動端APP。Proto.io 能運(yùn)行于絕大多數(shù)的網(wǎng)頁瀏覽器，它擁有一個(gè)用來管理整個(gè)項(xiàng)目的控制面板，一個(gè)專用的編輯器，以及專門運(yùn)行原型的播放器。這些工具使得你可以在iOS和Android 設(shè)備上測試你所設(shè)計(jì)的原型。
在使用編輯器搭建原型的過程中，用戶可以查看并參與進(jìn)來，通過交互和體驗(yàn)之后，給予設(shè)計(jì)者以反饋。來自IDEO、迪士尼、PayPal 的設(shè)計(jì)師目前都在使用Proto.io 設(shè)計(jì)原型。Proto.io 不僅加快了他們的設(shè)計(jì)工作，而且避免了開發(fā)過程中犯錯(cuò)的可能帶來的高昂代價(jià)。
如果你想更快地將產(chǎn)品推向市場，Proto.io 所提供的解決方案應(yīng)當(dāng)能夠讓你事半功倍。
Webflow
如果你的產(chǎn)品從研發(fā)到發(fā)布都是采用標(biāo)準(zhǔn)的HTML、CSS和JS的代碼，那么Webflow 能夠?yàn)槟闾峁脑驮O(shè)計(jì)到最終交付一條龍的服務(wù)。借助Webflow 設(shè)計(jì)的頁面都是響應(yīng)式的，當(dāng)你打算將它展示給團(tuán)隊(duì)成員、客戶和其他利益相關(guān)者的時(shí)候，發(fā)送一個(gè)鏈接就可以了。
Webflow 是一款針對網(wǎng)頁端的高素質(zhì)原型設(shè)計(jì)工具，版本控制和迭代升級永遠(yuǎn)不是問題。從原型、設(shè)計(jì)到開發(fā)，逐步推進(jìn)，步步為營。
PowerMockup
如果你是PowerPoint 用戶，那么這款原型工具會是你的菜。PowerMockup 是一款PowerPoint中運(yùn)行的原型工具包，有了它，你可以借助PPT直接設(shè)計(jì)制作出可運(yùn)行、能交互的原型，絕對有說服力。
借助PowerMockup 來設(shè)計(jì)原型并不復(fù)雜，你所需要做的就是從PowerMockup 的庫當(dāng)中選取合適的形狀和控件，托拽到PPT背景上，制作成合理的布局。結(jié)合PPT當(dāng)中的動效和交互功能，一個(gè)可靠的原型就能搞定了。
HotGloo
如果你一直在尋找一款簡單易用、擁有全部正確功能的原型工具，那么不妨試試HotGloo。作為一款屢獲殊榮的原型設(shè)計(jì)工具，HotGloo 能為你提供舒適的設(shè)計(jì)環(huán)境，幫你在瀏覽器中設(shè)計(jì)出交互生動而有趣的原型。
當(dāng)你開始使用HotGloo的之后，你同時(shí)擁有了其中內(nèi)置的2000+ UI控件，多賬戶授權(quán)能夠方便你與同事進(jìn)行協(xié)同，同事能夠針對移動端優(yōu)化，測試你的設(shè)計(jì)效果，并且能夠動態(tài)地添加注釋。除此之外，HotGloo還擁有完整的文檔說明，詳細(xì)的視頻教程，還有在線論壇供大家討論。
Lucidchart
Lucidchart 可能是目前市場上最好的圖表和線框圖設(shè)計(jì)解決方案。它不僅僅能幫你完成工作流程圖和思維導(dǎo)圖，還能將你設(shè)計(jì)的圖表和線框圖快速地轉(zhuǎn)化為可交互的原型，并且能用作展示和測試之用。
有了Lucidchart ，創(chuàng)建大型、復(fù)雜的線框圖就再也不是問題了，內(nèi)置的協(xié)同服務(wù)讓你可以更加便捷地同團(tuán)隊(duì)成員和客戶進(jìn)行合作。Lucidchart 本身是一個(gè)基于云服務(wù)的APP，能夠和 Google Apps 、Google Drive、Confluence、Jive以及 JIRA 進(jìn)行聯(lián)動和協(xié)同。
總結(jié)
其實(shí)就原型設(shè)計(jì)工具都只是手段，選擇合適的工具即可，更重要的是原型設(shè)計(jì)的思路。
了解更多原型設(shè)計(jì)的知識，參與更多的項(xiàng)目，一邊實(shí)踐一邊學(xué)習(xí)知識，在實(shí)戰(zhàn)中了解不同工具的優(yōu)劣好壞，再作出符合你需求的選擇就好了。
