紙上原型設計 VS 桌面原型工具設計，你更喜歡誰？

紙上原型設計，做爲傳統的原型設計方式，簡單快速，成本低廉，爲大部分設計師所喜好。而桌面原型工具設計，做爲伴隨電腦科技發展而出現的原型設計方式，快速全面，高效保真，動效靈敏，專業優質，一經推出，就備受青睞，迅速在設計師羣體之中普及。但做爲網頁或移動端應用UX/UI設計的你，更喜歡或更願意使用他們中的哪種來完成你的UX/UI設計呢？爲方便你們選擇，這裏分別爲設計師朋友們介紹兩種原型設計方式的優缺點，但願對你們有所幫助：

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

通常而言，紙上原型設計指的是UX/UI設計師們普遍採用的一種經過紙，筆，剪刀，便利貼之類辦公用具來展現出設計理念的一種設計方式。換句話說，就是設計師們在紙上繪製出各類網頁或手機端應用部件，（例如軟件界面，按鈕和各組件之類）完成原型設計，並檢測其設計理念是否可行且適用的的一個過程。因此，從這當面而言，它也是設計師們建立原型，儘快得到真是用戶或設計師關於設計實用性反饋的重要方式之一。

 

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

而不一樣於紙上原型設計，桌面原型工具設計是一種基於桌面原型工具，實現網頁或移動端軟件應用原型設計的設計方式。而桌面原型工具是一種可以安裝在電腦桌面上，幫助UX/UI 設計師獨自或以團隊協做的方式建立和提高應用原型設計的設計工具。並且，經過優秀原型設計工具製做的軟件原型通常細節詳盡，交互靈敏且轉化多樣，可以更加全面的展示軟件真實的界面和交互。所以，他們通常很是接近軟件的最終產品，而且爲設計師，產品經理和軟件工程師研發出具備良好用戶體驗的網頁或手機端軟件應用發揮着重要做用。 

 

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

事實上，在軟件UX/UI設計方面，紙上原型設計和桌面原型設計都有其各自的優缺點。如下爲方便你們區分和選擇，對他們進行一個簡單的比較：

1). 紙上原型設計的優勢：

*方便快速實現設計想法的更迭

做爲以紙爲基礎的設計方式，紙上原型設計容許設計師簡單的經過繪製新的組件，按鈕和部件卡片快速的實現應用原型想法的更迭。哪裏設計的很差，或是有全新的想法，從新繪製一張，而後無用或很差的設計稿直接扔進垃圾桶便可。方便快速，無需擔心。 

*低成本，低投入

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

*易上手

完成紙上原型設計時，設計師只須要根據想法用畫筆繪製出設計稿便可，無需使用其餘複雜的工具。簡單，易上手，且學習成本低。

紙上原型設計的缺點：

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

儘管設計師們能夠經過提早準備多樣的原型按鈕或部件卡片，實現紙質原型的「交互」。但這種交互也是很是有限的，並且在靈活度與可操做性上也是極差的。更不用說，紙上原型是徹底不支持動畫添加。

*不方即可行性測試

即便是添加了可活動的軟件外框，表格及組件之類的部件，紙質原型能實現的可行性測試程度也是很是有限的。並且，來回的手動交換各類部件卡片，操做起來也不太方便。

*紙上原型並不能展示應用原型詳盡細節

紙質原型一般須要設計師手繪原型部件，更多的是用來展示應用原型的大體流程，界面分佈以及部分重要部件的設計等。因此，並不適合且不能徹底的呈現軟件全部細節。

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

紙上繪製原型也是須要花費必定的時間跟精力。

 

2). 桌面原型工具設計的優勢：

*詳細展示應用軟件細節

現今科技時代，大多優秀的桌面原型工具都自帶強大的組件庫和圖標庫，方便UX/UI設計師直接拖取所需應用原型組件和圖片，展示軟件詳盡細節。例如，如下將要介紹的Mockplus,就封裝了超過200個組件和3000個圖標，可以知足用戶設計各種軟件所需的全部組件和圖標需求。

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

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

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

因爲桌面原型工具建立的軟件應用原型通常具備豐富的動效和細節，經常被設計師們用來測試其軟件原型方案的可行性和實用性。並且，由於它們很是接近軟件的最終效果，也時常被設計師們用做軟件的最總設計方案，以便可以儘快得到真正用戶或設計師的反饋。

*簡單實現原型預覽，雲端同步和分享

現今，不少好用的桌面原型工具都自帶原型項目預覽，雲端同步和分享的功能，方便設計師或產品經理共享原型資源和設計。

*實現團隊協做

桌面原型工具同時也可以幫助設計師實現團隊協做，共同編輯和提高某個團隊原型項目。

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

*須要必定的時間學習原型工具

做爲衆多電腦桌面工具的一種，原型工具的使用也是須要設計師花費必定的時間學習。並不能入紙上原型設計般簡單易上手。

*成本和投入相對更高

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

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

事實上，我更同意兩種方式都使用，才能建立更加優秀的應用原型。例如，在原型設計初期，快速簡潔的紙上原型方式，更易於設計師們儘快的錘鍊和更迭其設計想法。而後，當想法更加成熟，並與相關設計師或產品經理討論完善以後，使用更加全面的桌面原型工具設計，更易於設計師建立和呈現一個專業，高保真，動效豐富，界面美觀的網站或移動端應用原型。

固然，若是你認爲製做紙上原型麻煩或者不太喜歡手繪完成原型設計，你也能夠直接選擇使用桌面原型工具進行設計。

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

哪些優秀的免費原型工具值得一試？

在詳細瞭解了紙上原型設計和桌面原型工具之間的區別以後，忍不住想要試試桌面原型工具？這裏羅列兩款好用的免費原型工具：

1). Mockplus

支持平臺：Windows 和Mac OS

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

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

爲知足設計師（不管是剛入行的設計新手，仍是入行多年的專家）用戶的各類UI/UX設計需求，Mockplus針對工具的每項操做，按鈕，選項和功能的設計都作到儘量的簡潔快速。例如，使用Mockplus製做軟件原型的過程當中，設計師和產品經理能夠一鍵快速建立，刪除，保存，雲端同步，預覽和分享我的或團隊項目。而且經過簡單拖拽，實現組件之間，組件與網頁之間以及網頁之間的靈活交互。

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

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

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

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

*支持團隊協做

Mockplus容許多個設計師建立團隊項目，共同編輯和提高同一原型項目。參與團隊項目的設計師也能夠審閱，評論而且爲團隊項目添加批註等。

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

Mockplus爲設計師們封裝了大量的項目例子和模板，方便設計師們直接導入，編輯， 建立新的應用原型。

*實現批量複製

其全新的各自功能容許設計師直接批量複製所需組件或部件組。

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

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

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

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

總之，不管你是須要建立那種類型的應用原型，簡單，快速且全面的Mockplus都能知足你的需求。

2). Balsamiq

支持平臺：Windows 和Mac OS

Balsamiq是一款簡潔的線框原型工具，具備獨特的手繪風格。它旨在爲設計師們提供一種直接用鉛筆在紙上繪製原型的體驗。因此，深受一些喜好手繪原型的設計師喜好。並且，Balsamiq也支持線框項目的在線團隊協做。

因此，若是你喜歡用鉛筆手繪各類線框原型或須要在線共同協做完成線框原型，balsamiq會是不錯的選擇。

 

結語：

網頁或移動端軟件原型設計方式多種多樣，不管是紙上原型設計仍是桌面原型工具設計，真正適合你的纔是最有用的。因此，你須要根據自身的設計需求選擇對應的設計方式。例如，若是你只是但願選擇一種可以幫助你快速更迭原型設計想法的設計方式，紙上原型會是不錯的選擇。若是你是但願選擇一種可以快速呈現想法，並將其轉化成高保真，動效豐富，且專業美觀的原型，相似簡單快速的Mockplus之類的桌面原型工具會是很好的選擇。