提到原型設計，人們往往容易產生厭倦與回避的感覺。這也不奇怪，在很多實際項目中，這方面的工作似乎就是“隨意性強”，“不靠譜”一類的代名詞。

不過中培偉業《用戶體驗與UI設計開發》培訓專家劉老師認為，它們其實是整個設計流程里最重要的環節。無論你或你的團隊在用戶界面視覺設計等方面有多高的造詣，他都建議各位對原型環節的相關工作提高重視。基于高保真原型的用戶測試，可以讓很多關于需求、功能、界面設計等方面的潛在問題盡早暴露出來；這類問題往往直接關乎著產品的成敗。

另外，原型階段的工作非但不代表“耗時”與“高成本”，實際上正相反。從整個項目的角度講，在原型的設計與測試過程中發現問題并加以解決，比將問題留到視覺設計和開發流程中再處理，要省時省力的多。

原型設計

原型設計工作需要相關人員具備交互設計、構圖、網格系統、風格繼承等方面的知識技能。如果你在一個小團隊內工作，盡量讓相關同事也參 與到原型設計的工作中，從每個職能角度提出意見和建議。如果你們在為客戶開發移動應用，那么在這個階段要與他們盡可能多的進行需求溝通，保證及時有效的反 饋與迭代。

不過有一點需要注意，在參與原型設計的人員范圍方面要做好把握。參與者應該包括與產品功能決策相關的產品及設計等上下游職能人員。劉老師在實際項目中碰到過很多次這樣的情況，就是開發部門的技術人員在原型設計階段進行了過多的介入，除了常規的技術評審之外，還提出了很多以技術開發為 中心的原型設計建議，這顯然是本末倒置的。

1.選擇最重要的視圖界面

如果你有足夠多的時間及技術資源去為每個視圖界面都創建對應的線框原型，這也不壞。不過通常情況下，你只需要搞幾個最重要的、最具代表性的界面就OK了；其他多數可以通過同一張原型圖去代表。

對于“最小可用產品”(Minimum Viable Product,MVP)，那么4到5個關鍵屏已經足夠多了。在后續的功能開發和迭代的過程中，可以再繼續為那些相對獨立的、非最簡化核心的功能界面設計新的原型。

2.列出視覺元素

接下來，列出所有需要用到的視覺元素，包括文本、按鈕、表單、圖形、菜單等；不要忘記那些默認不會顯示出來的元素，比如警告和出錯信息、狀態提示、操作反饋等。對于簡單的項目，使用紙和筆來完成這步工作就夠了。

由于這些UI元素是需要被復用的，所以在使用它們構建原型的時候，我們可以從最重要的視圖界面入手，也就是包含了最多內容結構和功能的、用戶會花很多時間進行瀏覽和操作的界面。這樣可以盡早確保UI元素的功能合理性。

3.將視覺元素分組并進行優先級排序

從功能及內容的角度，將上面列表中的元素條目進行分組，并按照優先級從高到低的順序排列。

對于最簡化可實行產品來說，分組和排序的工作會很容易進行。如果app的功能比較復雜，視覺元素和模塊過多，你可以嘗試卡片排序的方式。將每個元素條目寫在卡片上，使形式更加實體化、獨立化，便于操作。讓團隊相關人員參與進來，征詢分組建議，最終達成一種統一的模式。

4.為每組視覺元素制作低保真原型

草圖時間，開始動手吧。低保真階段，不需要任何藝術美化方面的因素介入。

不必介意能否一開始就把所有元素畫的得當和到位，這是一個創 作的過程，完全可以多嘗試嘗試你頭腦中不同的方案。而且我們之前的分組方案也不是絕對的，在制作草稿的過程里，如果你覺得最近“搜索關鍵詞”在邏輯上與搜 索框更加貼近，那么就修改一下分組，沒問題。要記得，在原型設計的整個過程里，我們有一個大原則，就是讓迭代與更新發生的盡量早些。

目前還不用考慮各元素在“一致性”方面的問題，不必為他們之間的位置和尺寸關系牽扯精力；現在我們只要關注每個元素獨立的個體。

5.線框圖

是時候把這些UI元素的低保真原型撮合到線框原型中了；不要忘記我們之前對它們進行分組時的優先級排序。在這期間仍然會頻繁的發生迭代，所以不必過 多考慮精確的網格對齊、配色或字體一類。線框原型的設計制作過程，就是評估UI元素之間的平衡性、優先級和互動關系的過程。

在之前的低保真原型階段，紙和筆就足夠了；但是在線框原型的制作過程中，我們通常需要對模塊化、可復用的UI元素集合進行布局規劃和調整。這時，我們可以使用一些工具來提高效率；試試看下面這些：

便簽貼紙

恩，最基本的方法，并且仍然沒有脫離紙筆，但不失靈活性與可行性。在每張便簽貼紙上畫一個UI元素，或是一組已經模塊化的UI元素集合，根據需求隨意調整組合方案及布局位置。如果某元素或模塊本身需要調整，重新畫一枚即可，無需調整全局。

PowerPoint(PPT)或Keynote

首先說明，劉老師表示個人很討厭使用此類作演示用的軟件工具進行設計方面的工作，不過必須承認，在快速草圖和分組歸類設計元素等方面，它們還算好用。

Google文檔的繪圖工具

Google文檔工具套裝中的繪圖應用也不錯。雖然它并非專為Web設計而打造，但它的基本功能可以滿足我們制作線框圖的需求，而且遠程多人協作等方面的功能特色也相當實用。

獨立Web應用

可以試試那些專門用來制作線框圖的基于瀏覽器的Web應用。有的還不錯，比如Mockingbird，很容易上手，基本功能一應俱全。Pencil Project也是一個選擇，它是一款Firefox擴展。

桌面應用軟件

Balsamiq Mockups是一款不錯的線框原型設計工具，它是商業軟件。當然，如果你已經有Microsoft Visio或是OmniGraffle的話，也可以使用它們提供的網頁線框模板。

劉老師個人比較喜歡那些提供了低保真草圖風格的軟件，這種風格的線框圖可以顯得更加原始和自然，避免摻雜過多的視覺美化方面的因素。對于以上幾種類型的工具，劉老師傾向于Web應用或是桌面應用軟件，因為它們多數都內置了很全面的GUI組件庫。