淺析移動APP原型設(shè)計的類型和制作方法

北京信息職業(yè)技術(shù)學院

原型，是交互設(shè)計師、產(chǎn)品設(shè)計師、產(chǎn)品經(jīng)理溝通的最好方式。通俗來講，就是在正式制作真實的APP產(chǎn)品之前，通過原型給大家一個產(chǎn)品的模型展示，就像設(shè)計一座建筑，不能畫完草圖就直接讓工人開始施工，而是要先制作出等比例的精致的模型，甚至渲染上光線、綠化、人群等環(huán)境因素，能在正式蓋樓前讓大家非常直觀地看到，這個建筑完工之后是什么樣子。APP的原型也是同一個道理，制作出原型，團隊成員進行討論、測試，認為沒有問題了，才會正式開始制作，避免了走彎路。

本文將會依據(jù)一款A(yù)PP產(chǎn)品的設(shè)計流程，把原型分為四類，并且是依次遞進的關(guān)系，從第一類到第四類，產(chǎn)品的完成度逐漸增高。

一、信息分類原型

信息分類原型也可以叫作信息架構(gòu)，是一款A(yù)PP最初的原型形式，信息分類即把一個構(gòu)思好的APP所需功能列出來，進行分類，再把這些列出的功能做成一級一級分類的樹狀圖，一級頁面、二級頁面等，所有功能按主次分為幾個層級。以我們熟悉的微信為例，一級頁面上有最主要的功能即微信、通訊錄、發(fā)現(xiàn)、我，每一個再往下是二級頁面，如通訊錄點開后有新的朋友、群聊、標簽等功能，是次要一級的功能，依次往下還會有第三層級甚至第四層級。這就是一個APP的信息架構(gòu)，就是在構(gòu)思好APP之后，正式制作界面原型之前，必須確定的事情，簡單概括就是把我們想設(shè)計的功能都列出來，進行分類和劃分層級。如果沒有它，這款A(yù)PP是混亂的，層級不清晰的，也就很難做出進一步的設(shè)計。信息分類原型有個很好的訓練方法，就是參考一款A(yù)PP，把它的信息架構(gòu)列出來，加以借鑒，有助于我們對APP層級關(guān)系的理解。

二、線框設(shè)計原型

線框原型就是用線條去畫界面的大致排版，甚至不需要填色，黑白即可，它不需要漂亮，只要體現(xiàn)出排版即可。在這一步的目標不是傳達視覺效果，而是把功能、層級和部分交互表達清晰。線框原型是對一款A(yù)PP產(chǎn)品在設(shè)計階段的可視化呈現(xiàn)，主要傳達一個產(chǎn)品的信息架構(gòu)、內(nèi)容、功能和交互形式。

（一）原型的繪制形式

繪制的形式從介質(zhì)上劃分可分為紙質(zhì)和電子。首先是紙上原型，需要特別強調(diào)的是，紙上原型不是手繪草圖，兩者之間不能完全畫等號，手繪草圖應(yīng)該是我們在畫原型之前的一些想法的簡單勾畫，或是團隊頭腦風暴的記錄等，比較隨意，更多的是記錄想法，不具有展示作品的功能。而紙上原型，應(yīng)該是更為正式的、明確的、可以向他人清晰展示的方案。我們繪制紙上原型常用的工具，主要是紙張、卡片，用來寫和畫，鉛筆、尺子、水性筆、馬克筆用來繪寫，橡皮用來修改，文件夾或信封用來保存原型素材。這種紙上原型的優(yōu)點是更自由、更個性化、不受模板束縛、節(jié)約成本。另外還有電子原型，它主要是借助電子軟件完成的原型，可以是Photoshop做的視覺原型，也可以是制作交互效果的軟件制作的交互原型。

（二）原型的繪制內(nèi)容

我們使用以上工具，要繪制哪些內(nèi)容呢？線框原型的設(shè)計繪制主要分為兩部分，一是整體信息架構(gòu)的表現(xiàn)，也就是表現(xiàn)產(chǎn)品的整體結(jié)構(gòu)。在以上寫到的第一類原型即信息分類原型部分已經(jīng)畫出了信息架構(gòu)，現(xiàn)在要用線框原型去實現(xiàn)成一個一個頁面，如表現(xiàn)出導(dǎo)航、菜單里有哪些內(nèi)容、每個頁面之間的交互關(guān)系、產(chǎn)品的布局排版是怎樣的，等等。下面會著重說明布局排版形式這一點。

（三）原型中的頁面布局形式

因為布局排版決定了每個功能模塊的位置，所以這里需要詳細說明的是移動設(shè)備中常見的布局形式，以提供參考，我們在設(shè)計APP的時候，可以思考一下，采用哪種布局形式更適合呢？

一是大平移式的布局，一次只顯示全景圖中的一部分內(nèi)容，通過上下左右拖動查看，這種布局可以減少不必要的跳轉(zhuǎn)，比如谷歌地圖中查看地圖的界面就是最典型的大平移式布局；二是宮格式布局，簡單直觀，符合大部分用戶的使用習慣，也是主流的布局形式，常見的有六宮格、九宮格，比如美圖秀秀中的界面，但是這種布局層級不能太多，否則就會給人混亂的感覺；三是側(cè)滑式布局，可以減少跳轉(zhuǎn)，延展性強，但是對于用戶本身要求較高，因為它屬于隱藏信息，對客戶本身來講要對APP有一定的了解和較豐富的使用經(jīng)驗，比如QQ中“我”這個界面就屬于側(cè)滑式；四是列表式布局，它的信息延展性比較強，但是查找信息比較麻煩，一般是結(jié)合了標簽式的布局，比如淘寶網(wǎng)中搜索某樣物品后出現(xiàn)的物品展示界面就是最典型的列表式布局；五是標簽式布局，標簽多用于底部或頂部，減少界面的跳轉(zhuǎn)層級，沒有太多的隱藏信息，信息量較大，比如滴滴出行是典型的底部標簽布局；六是混合式布局，是比較常見的一種界面布局形式，符合用戶的使用習慣和操作習慣，有宮格和標簽式的混合應(yīng)用，比如攜程網(wǎng)。

以上說的是線框原型中整體結(jié)構(gòu)的表現(xiàn)，另外，還有局部功能的交互設(shè)計，比如按鈕點擊的效果、頁面切換等展示效果，這些如果用紙上原型繪制的話可用文字標注清楚，或者直接用原型制作軟件去做。所以，綜上所述，從工具的選擇到界面的布局再到交互形式的設(shè)計，這就是整個線框原型階段需要做的事，雖然是簡潔的線框圖，但是界面功能和交互形式的表達要條理清晰，這樣整個原型草圖才能讓他人讀懂。

三、交互設(shè)計原型

原型制作軟件可以讓我們通過比較簡單的方式制作原型。比如Mockplus是原型制作工具中的后起之秀，學習成本較低，操作簡單，功能也十分齊全，擁有豐富的組件和圖標，自帶流程圖和腦圖功能，能建立自己的組件庫和自定義樣式庫等，它適合設(shè)計熱愛者但是卻無從下手的設(shè)計新手。但如果是一個樂于探索新事物并有一定設(shè)計基礎(chǔ)的設(shè)計師，Axure可能是最適合的移動產(chǎn)品原型設(shè)計工具，可以被喻為圖片界的PS，文字界的Word。它最大特點是專業(yè)的設(shè)計師都在用它，原型設(shè)計中復(fù)雜的交互設(shè)計是它的強項，難點是需要使用者有一點編程邏輯思維，稍加學習，就能制作出想要的任何交互演示效果。Axure作為一款成熟的交互原型設(shè)計工具，無論是它的基礎(chǔ)功能還是團隊協(xié)作功能，都是值得一試的。但是由于界面設(shè)置比較專業(yè)，對于新手來說操作起來并不是那么容易，需要花費一定的時間去熟悉它。

四、視覺設(shè)計原型

如果說線框原型屬于低保真原型，那么交互原型結(jié)合視覺原型就是高保真原型了。視覺的設(shè)計，也就是通常使用Photoshop，根據(jù)前期的線框圖和設(shè)計創(chuàng)意做出的比較完整的界面。視覺的設(shè)計包括了配色方案的確定、字體的選擇、圖片素材的使用、各功能控件的繪制以及APP圖標的設(shè)計等，在視覺上呈現(xiàn)出一款A(yù)PP的最終形態(tài)。

五、結(jié)語

綜上所述，一款A(yù)PP產(chǎn)品原型的設(shè)計制作，有著這如此詳細的分類，每一種原型各司其職，一步步完善著產(chǎn)品。所以，如果說一款A(yù)PP的設(shè)計大部分時間都花在原型上也不為過。按照文中所述的方法制作完成，之后還需要反復(fù)被打磨，直到團隊成員都認可，并通過了可用性測試，才會正式制作和發(fā)布APP。原型的制作保障了一款A(yù)PP產(chǎn)品的質(zhì)量，并幫助設(shè)計團隊少走彎路，是APP設(shè)計至關(guān)重要的一環(huán)。