1. 程式人生 > >紙上原型設計 VS 桌面原型工具設計,你更喜歡誰?

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

原型設計 交互設計 界面設計 設計師 紙面原型

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

首先,什麽是紙上原型設計?

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

1.jpg

什麽是桌面原型工工具設計?

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

2.png

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

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

1). 紙上原型設計的優點:

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

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

*低成本,低投入

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

*易上手

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

紙上原型設計的缺點:

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

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

*不方便可行性測試

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

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

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

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

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

3.png

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都能滿足你的需求。

4.png

2). Balsamiq

支持平臺:Windows 和Mac OS

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

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

5.png

結語:

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

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