紙上原型設計，作為傳統(tǒng)的原型設計方式，簡單快速，成本低廉，為大部分設計師所喜愛。而桌面原型工具設計，作為伴隨電腦科技發(fā)展而出現(xiàn)的原型設計方式，快速全面，高效保真，動效靈敏，專業(yè)優(yōu)質，一經(jīng)推出，就備受青睞，迅速在設計師群體之中普及。但作為網(wǎng)頁或移動端應用UX/UI設計的你，更喜歡或更愿意使用他們中的哪一種來完成你的UX/UI設計呢？為方便大家選擇，這里分別為設計師朋友們介紹兩種原型設計方式的優(yōu)缺點，希望對大家有所幫助：

首先，什么是紙上原型設計？

一般而言，紙上原型設計指的是UX/UI設計師們廣泛采用的一種通過紙，筆，剪刀，便利貼之類辦公用具來展示出設計理念的一種設計方式。換句話說，就是設計師們在紙上繪制出各種網(wǎng)頁或手機端應用部件，（例如軟件界面，按鈕和各組件之類）完成原型設計，并檢測其設計理念是否可行且適用的的一個過程。所以，從這當面而言，它也是設計師們創(chuàng)建原型，盡快獲得真是用戶或設計師關于設計實用性反饋的重要方式之一。

什么是桌面原型工工具設計？

而不同于紙上原型設計，桌面原型工具設計是一種基于桌面原型工具，實現(xiàn)網(wǎng)頁或移動端軟件應用原型設計的設計方式。而桌面原型工具是一種能夠安裝在電腦桌面上，幫助UX/UI 設計師獨自或以團隊協(xié)作的方式創(chuàng)建和提升應用原型設計的設計工具。而且，通過優(yōu)秀原型設計工具制作的軟件原型一般細節(jié)詳盡，交互靈敏且轉化多樣，能夠更加全面的展現(xiàn)軟件真實的界面和交互。因此，他們一般非常接近軟件的最終產(chǎn)品，并且為設計師，產(chǎn)品經(jīng)理和軟件工程師研發(fā)出具有良好用戶體驗的網(wǎng)頁或手機端軟件應用發(fā)揮著重要作用。

紙上原型設計和桌面原型工具設計之間的區(qū)別有哪些？

事實上，在軟件UX/UI設計方面，紙上原型設計和桌面原型設計都有其各自的優(yōu)缺點。以下為方便大家區(qū)分和選擇，對他們進行一個簡單的比較：

1). 紙上原型設計的優(yōu)點：

*方便快速實現(xiàn)設計想法的更迭

作為以紙為基礎的設計方式，紙上原型設計允許設計師簡單的通過繪制新的組件，按鈕和部件卡片快速的實現(xiàn)應用原型想法的更迭。哪里設計的不好，或是有全新的想法，重新繪制一張，然后無用或不好的設計稿直接扔進垃圾桶即可。方便快速，無需擔憂。

*低成本，低投入

完成紙質原型所需的都是辦公室隨處可見的紙，筆，剪刀，便利貼之類的工具， 成本低廉，投入低。

*易上手

完成紙上原型設計時，設計師只需要根據(jù)想法用畫筆繪制出設計稿即可，無需使用其他復雜的工具。簡單，易上手，且學習成本低。

紙上原型設計的缺點：

*無法添加靈敏的交互和動畫

盡管設計師們可以通過提前準備多樣的原型按鈕或部件卡片，實現(xiàn)紙質原型的“交互”。但這種交互也是非常有限的，而且在靈活度與可操作性上也是極差的。更不用說，紙上原型是完全不支持動畫添加。

*不方便可行性測試

即使是添加了可活動的軟件外框，表格及組件之類的部件，紙質原型能實現(xiàn)的可行性測試程度也是非常有限的。而且，來回的手動交換各種部件卡片，操作起來也不太方便。

*紙上原型并不能展現(xiàn)應用原型詳盡細節(jié)

紙質原型通常需要設計師手繪原型部件，更多的是用來展現(xiàn)應用原型的大致流程，界面分布以及部分重要部件的設計等。所以，并不適合且不能完全的呈現(xiàn)軟件所有細節(jié)。

*紙上繪圖耗費大量的時間及精力

紙上繪制原型也是需要花費一定的時間跟精力。

2). 桌面原型工具設計的優(yōu)點：

*詳細展現(xiàn)應用軟件細節(jié)

現(xiàn)今科技時代，大多優(yōu)秀的桌面原型工具都自帶強大的組件庫和圖標庫，方便UX/UI設計師直接拖取所需應用原型組件和圖片，展現(xiàn)軟件詳盡細節(jié)。例如，以下將要介紹的Mockplus,就封裝了超過200個組件和3000個圖標，能夠滿足用戶設計各類軟件所需的所有組件和圖標需求。

*快速添加個各式交互，動畫和轉化

與紙上原型不同，桌面原型工具允許設計師直接給網(wǎng)頁或移動端應用原型添加各式交互，動畫以及轉化，是原型更加直觀生動，也更接近軟件最終成品。

*方便軟件可行性和實用性測試

由于桌面原型工具創(chuàng)建的軟件應用原型一般具有豐富的動效和細節(jié)，常常被設計師們用來測試其軟件原型方案的可行性和實用性。而且，因為它們非常接近軟件的最終效果，也時常被設計師們用作軟件的最總設計方案，以便能夠盡快獲得真正用戶或設計師的反饋。

*簡單實現(xiàn)原型預覽，云端同步和分享

現(xiàn)今，很多好用的桌面原型工具都自帶原型項目預覽，云端同步和分享的功能，方便設計師或產(chǎn)品經(jīng)理共享原型資源和設計。

*實現(xiàn)團隊協(xié)作

桌面原型工具同時也能夠幫助設計師實現(xiàn)團隊協(xié)作，共同編輯和提升某個團隊原型項目。

桌面原型工具設計的缺點：

*需要一定的時間學習原型工具

作為眾多電腦桌面工具的一種，原型工具的使用也是需要設計師花費一定的時間學習。并不能入紙上原型設計般簡單易上手。

*成本和投入相對更高

相較于紙上原型設計只需投入一些價格低廉的紙，筆，剪刀之類的辦公工具，原型工具設計一般需要設計師購買原型設計工具。所以，相對而言需要的成本和投入會更高。

3). 究竟該使用哪一種方式才能更好的完成原型設計呢？

事實上，我更贊成兩種方式都使用，才能創(chuàng)建更加優(yōu)秀的應用原型。例如，在原型設計初期，快速簡潔的紙上原型方式，更易于設計師們盡快的錘煉和更迭其設計想法。然后，當想法更加成熟，并與相關設計師或產(chǎn)品經(jīng)理討論完善之后，使用更加全面的桌面原型工具設計，更易于設計師創(chuàng)建和呈現(xiàn)一個專業(yè)，高保真，動效豐富，界面美觀的網(wǎng)站或移動端應用原型。

當然，如果你認為制作紙上原型麻煩或者不太喜歡手繪完成原型設計，你也可以直接選擇使用桌面原型工具進行設計。

重要的是要選擇一款有用且適合你的桌面原型工具。

哪些優(yōu)秀的免費原型工具值得一試？

在詳細了解了紙上原型設計和桌面原型工具之間的區(qū)別之后，忍不住想要試試桌面原型工具？這里羅列兩款好用的免費原型工具：

1). Mockplus

支持平臺：Windows 和Mac OS

Mockplus是一款免費，簡單快速的桌面原型工具。它為設計師用戶提供了很多強大的功能：

*它是一款簡單快速且以用戶為中心的原型工具

為滿足設計師（無論是剛入行的設計新手，還是入行多年的專家）用戶的各種UI/UX設計需求，Mockplus針對工具的每項操作，按鈕，選項和功能的設計都做到盡可能的簡潔快速。例如，使用Mockplus制作軟件原型的過程中，設計師和產(chǎn)品經(jīng)理可以一鍵快速創(chuàng)建，刪除，保存，云端同步，預覽和分享個人或團隊項目。并且通過簡單拖拽，實現(xiàn)組件之間，組件與網(wǎng)頁之間以及網(wǎng)頁之間的靈活交互。

*封裝了強大的組件和圖標庫

Mockplus提供了超過200個組件和3000個圖標庫，方便用戶簡單拖拽添加軟件原型部件。

*提供了8種原型預覽和分享方式

為方便設計師分預覽和分享各種原型項目，Mockplus提供了8種預覽和分享方式。例如，直接導出原型圖片預覽，導出演示包預覽，導出HTML預覽，直接導出項目樹預覽以及快速掃碼預覽等。

*支持團隊協(xié)作

Mockplus允許多個設計師創(chuàng)建團隊項目，共同編輯和提升同一原型項目。參與團隊項目的設計師也可以審閱，評論并且為團隊項目添加批注等。

*提供多樣的項目例子和模板支持

Mockplus為設計師們封裝了大量的項目例子和模板，方便設計師們直接導入，編輯， 創(chuàng)建新的應用原型。

*實現(xiàn)批量復制

其全新的各自功能允許設計師直接批量復制所需組件或部件組。

*支持圖片及文本的自動填充

Mockplus提供的自動填充功能，支持文本和圖片的批量填充。

*低學習成本，十分鐘即可玩轉Mockplus

作為一款簡單快速的原型工具，Mockplus也是諸多原型軟件中學習成本最低的，十分鐘就能玩轉Mockplus。

總之，無論你是需要創(chuàng)建那種類型的應用原型，簡單，快速且全面的Mockplus都能滿足你的需求。

2). Balsamiq

支持平臺：Windows 和Mac OS

Balsamiq是一款簡潔的線框原型工具，具有獨特的手繪風格。它旨在為設計師們提供一種直接用鉛筆在紙上繪制原型的體驗。所以，深受一些喜愛手繪原型的設計師喜愛。而且，Balsamiq也支持線框項目的在線團隊協(xié)作。

所以，如果你喜歡用鉛筆手繪各種線框原型或需要在線共同協(xié)作完成線框原型，balsamiq會是不錯的選擇。

結語：

網(wǎng)頁或移動端軟件原型設計方式多種多樣，無論是紙上原型設計還是桌面原型工具設計，真正適合你的才是最有用的。所以，你需要根據(jù)自身的設計需求選擇對應的設計方式。例如，如果你只是希望選擇一種能夠幫助你快速更迭原型設計想法的設計方式，紙上原型會是不錯的選擇。如果你是希望選擇一種能夠快速呈現(xiàn)想法，并將其轉化成高保真，動效豐富，且專業(yè)美觀的原型，類似簡單快速的Mockplus之類的桌面原型工具會是很好的選擇。

據(jù)數(shù)據(jù)顯示，中國手機App市場應用已經(jīng)超過402萬款，遠遠高出我們的想象。數(shù)據(jù)背后的支撐，除了龐大的設計開發(fā)團隊，還有各式各樣的原型設計工具的應用。為了找到一款得心應手的原型工具，設計師們和產(chǎn)品經(jīng)理們通常熱衷于求助知乎和Quora。最近留意到一個全世界都在問的問題：哪款App原型設計工具最好用？

可能大多數(shù)產(chǎn)品經(jīng)理或者設計師在看到這個問題的時候，腦子里一片空白，那么多原型工具，我怎么知道哪一款最好用呢？

本著樂于助人的思想，我這里給大家整理了幾款在知乎和Quora上排名都比較靠前的移動應用原型設計工具。

1. Justinmind

【費用】$29/月 ~ $495/用戶

【使用平臺】Mac, Windows

【擅長領域】Web, Desktop, Mobile

Justinmind 是一個很靈活的原型設計工具，支持多種終端設備，從簡單的鼠標點擊到各種復雜交互的工作都能勝任。既可以在已設計好的效果圖上添加交互特性，也可以在Justinmind中使用預設的標準組件庫創(chuàng)建各種界面。

優(yōu)勢：

支持特定設備的模板和功能。

可快速、直觀的通過拖拽操作添加各種資源。

可模擬生成自帶設備外框、以及完整交互特性的web頁面進行預覽。

可以為每個微小的、單獨的設計元素添加交互屬性。

支持基于手勢操作的交互操作設定。

劣勢：

陡峭的學習曲線，首次使用的用戶需要花一些時間上手。

添加多個動作到同一個設計元素上時，動作無法同時執(zhí)行，而且按順序逐個執(zhí)行。

2. Axure

【費用】標準版：$ 289 / 專業(yè)版：$ 589

Axure是一個用來設計Web、App或者桌面客戶端軟件類型原型的理想工具，可以設計各種復雜的交互動作和以及多種狀態(tài)的界面表現(xiàn)。

有良好的培訓文檔和客戶支持文檔。

擅于設計復雜的交互行為動作。

內建的組件庫可以自定義各種特定的動作和行為屬性。

靈活性 --- 能被用于設計任何數(shù)碼設備平臺上的產(chǎn)品原型。

陡峭的學習曲線；對首次使用的用戶來說不夠簡單。

沒有內建特定設備（例如：iPhone / Android 等）的模板和功能組件

主要用于在工具中從頭開始創(chuàng)建原型頁面，相對來說不太方便在已有設計圖上添加交互屬性。

3. Mockplus

【費用】專業(yè)版：118元/年；終身版：699元/用戶

Mockplus是一個簡單快速且非常強大的原型工具。每一次版本更新都會用戶帶來驚喜。有幸加入了他們的測試群，體驗了一把即將發(fā)布的3.2，新增了格子、流程圖、Sketch導入和項目模板等5大新功能。雖然有些地方還待完善，但不得不說，新功能真的很贊！

操作簡單，學習成本低，一拖一放，3秒鐘完成交互設置。

交互設置簡單直觀，快速上手。

豐富的組件庫和圖標庫，200個組件和3000個圖標，任意使用。

支持多種手機預覽方式，可直接輸入原型碼在手機端預覽，也可直接分享URL，非常簡便。

多人協(xié)作和在線審閱，促進團隊成員溝通，大大提升團隊工作效率。

功能細節(jié)需要繼續(xù)打磨。

官網(wǎng)教程不夠完善。

交互上不支持手勢操作。

項目例子多，但沒有詳細的操作指導，對新用戶不夠友好。

4. Proto.io

【費用】29美元/月,或者288美元/年,可以有5個活躍項目。還有10、15、30個活躍項目的套餐。

【使用平臺】web平臺

【擅長領域】iOS, Android

Proto.io是一個專用的手機原型開發(fā)平臺—可以構建和部署全交互式的移動程序的原型，并且可以模擬出相似的成品。它可以運行在大多數(shù)的瀏覽器上。

易于制作快速的實體模型。

大量的標準UI元素庫，而且很多是可以定制的。

可以在一個項目中包含多個屏，屏之間可以創(chuàng)建過渡效果。

支持元件跟Dropbox同步。

沒有即時預覽。

如果加了很多交互，動效會變慢。

所有原型都保存在Proto.io的web平臺上，這意味著如果你要取消你的帳號，將不能再繼續(xù)運行你的項目。

不支持3D動效。

總結

這幾款App原型設計工具都有自己的獨特優(yōu)勢，適合不同的需求。沒有最好的工具，只有最適合的。通過每一個工具的優(yōu)劣勢分析，我想大家應該知道自己需要的是哪款工具了。對于我來說，還是更期待Mockplus3.2的發(fā)布，體驗了內測版之后，已經(jīng)按捺不住內心的激動了(≧▽≦)/，流程圖大大的贊！