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

北京信息職業技術學院

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

本文將會依據一款APP產品的設計流程，把原型分為四類，并且是依次遞進的關系，從第一類到第四類，產品的完成度逐漸增高。

一、信息分類原型

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

二、線框設計原型

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

（一）原型的繪制形式

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

（二）原型的繪制內容

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

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

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

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

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

三、交互設計原型

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

四、視覺設計原型

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

五、結語

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