提到原型設(shè)計(jì)，人們往往容易產(chǎn)生厭倦與回避的感覺(jué)。這也不奇怪，在很多實(shí)際項(xiàng)目中，這方面的工作似乎就是“隨意性強(qiáng)”，“不靠譜”一類的代名詞。

不過(guò)中培偉業(yè)《用戶體驗(yàn)與UI設(shè)計(jì)開(kāi)發(fā)》培訓(xùn)專家劉老師認(rèn)為，它們其實(shí)是整個(gè)設(shè)計(jì)流程里最重要的環(huán)節(jié)。無(wú)論你或你的團(tuán)隊(duì)在用戶界面視覺(jué)設(shè)計(jì)等方面有多高的造詣，他都建議各位對(duì)原型環(huán)節(jié)的相關(guān)工作提高重視。基于高保真原型的用戶測(cè)試，可以讓很多關(guān)于需求、功能、界面設(shè)計(jì)等方面的潛在問(wèn)題盡早暴露出來(lái)；這類問(wèn)題往往直接關(guān)乎著產(chǎn)品的成敗。

另外，原型階段的工作非但不代表“耗時(shí)”與“高成本”，實(shí)際上正相反。從整個(gè)項(xiàng)目的角度講，在原型的設(shè)計(jì)與測(cè)試過(guò)程中發(fā)現(xiàn)問(wèn)題并加以解決，比將問(wèn)題留到視覺(jué)設(shè)計(jì)和開(kāi)發(fā)流程中再處理，要省時(shí)省力的多。

原型設(shè)計(jì)

原型設(shè)計(jì)工作需要相關(guān)人員具備交互設(shè)計(jì)、構(gòu)圖、網(wǎng)格系統(tǒng)、風(fēng)格繼承等方面的知識(shí)技能。如果你在一個(gè)小團(tuán)隊(duì)內(nèi)工作，盡量讓相關(guān)同事也參 與到原型設(shè)計(jì)的工作中，從每個(gè)職能角度提出意見(jiàn)和建議。如果你們?cè)跒榭蛻糸_(kāi)發(fā)移動(dòng)應(yīng)用，那么在這個(gè)階段要與他們盡可能多的進(jìn)行需求溝通，保證及時(shí)有效的反 饋與迭代。

不過(guò)有一點(diǎn)需要注意，在參與原型設(shè)計(jì)的人員范圍方面要做好把握。參與者應(yīng)該包括與產(chǎn)品功能決策相關(guān)的產(chǎn)品及設(shè)計(jì)等上下游職能人員。劉老師在實(shí)際項(xiàng)目中碰到過(guò)很多次這樣的情況，就是開(kāi)發(fā)部門(mén)的技術(shù)人員在原型設(shè)計(jì)階段進(jìn)行了過(guò)多的介入，除了常規(guī)的技術(shù)評(píng)審之外，還提出了很多以技術(shù)開(kāi)發(fā)為 中心的原型設(shè)計(jì)建議，這顯然是本末倒置的。

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

如果你有足夠多的時(shí)間及技術(shù)資源去為每個(gè)視圖界面都創(chuàng)建對(duì)應(yīng)的線框原型，這也不壞。不過(guò)通常情況下，你只需要搞幾個(gè)最重要的、最具代表性的界面就OK了；其他多數(shù)可以通過(guò)同一張?jiān)蛨D去代表。

對(duì)于“最小可用產(chǎn)品”(Minimum Viable Product,MVP)，那么4到5個(gè)關(guān)鍵屏已經(jīng)足夠多了。在后續(xù)的功能開(kāi)發(fā)和迭代的過(guò)程中，可以再繼續(xù)為那些相對(duì)獨(dú)立的、非最簡(jiǎn)化核心的功能界面設(shè)計(jì)新的原型。

2.列出視覺(jué)元素

接下來(lái)，列出所有需要用到的視覺(jué)元素，包括文本、按鈕、表單、圖形、菜單等；不要忘記那些默認(rèn)不會(huì)顯示出來(lái)的元素，比如警告和出錯(cuò)信息、狀態(tài)提示、操作反饋等。對(duì)于簡(jiǎn)單的項(xiàng)目，使用紙和筆來(lái)完成這步工作就夠了。

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

3.將視覺(jué)元素分組并進(jìn)行優(yōu)先級(jí)排序

從功能及內(nèi)容的角度，將上面列表中的元素條目進(jìn)行分組，并按照優(yōu)先級(jí)從高到低的順序排列。

對(duì)于最簡(jiǎn)化可實(shí)行產(chǎn)品來(lái)說(shuō)，分組和排序的工作會(huì)很容易進(jìn)行。如果app的功能比較復(fù)雜，視覺(jué)元素和模塊過(guò)多，你可以嘗試卡片排序的方式。將每個(gè)元素條目寫(xiě)在卡片上，使形式更加實(shí)體化、獨(dú)立化，便于操作。讓團(tuán)隊(duì)相關(guān)人員參與進(jìn)來(lái)，征詢分組建議，最終達(dá)成一種統(tǒng)一的模式。

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

草圖時(shí)間，開(kāi)始動(dòng)手吧。低保真階段，不需要任何藝術(shù)美化方面的因素介入。

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

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

5.線框圖

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

在之前的低保真原型階段，紙和筆就足夠了；但是在線框原型的制作過(guò)程中，我們通常需要對(duì)模塊化、可復(fù)用的UI元素集合進(jìn)行布局規(guī)劃和調(diào)整。這時(shí)，我們可以使用一些工具來(lái)提高效率；試試看下面這些：

便簽貼紙

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

PowerPoint(PPT)或Keynote

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

Google文檔的繪圖工具

Google文檔工具套裝中的繪圖應(yīng)用也不錯(cuò)。雖然它并非專為Web設(shè)計(jì)而打造，但它的基本功能可以滿足我們制作線框圖的需求，而且遠(yuǎn)程多人協(xié)作等方面的功能特色也相當(dāng)實(shí)用。

獨(dú)立Web應(yīng)用

可以試試那些專門(mén)用來(lái)制作線框圖的基于瀏覽器的Web應(yīng)用。有的還不錯(cuò)，比如Mockingbird，很容易上手，基本功能一應(yīng)俱全。Pencil Project也是一個(gè)選擇，它是一款Firefox擴(kuò)展。

桌面應(yīng)用軟件

Balsamiq Mockups是一款不錯(cuò)的線框原型設(shè)計(jì)工具，它是商業(yè)軟件。當(dāng)然，如果你已經(jīng)有Microsoft Visio或是OmniGraffle的話，也可以使用它們提供的網(wǎng)頁(yè)線框模板。

劉老師個(gè)人比較喜歡那些提供了低保真草圖風(fēng)格的軟件，這種風(fēng)格的線框圖可以顯得更加原始和自然，避免摻雜過(guò)多的視覺(jué)美化方面的因素。對(duì)于以上幾種類型的工具，劉老師傾向于Web應(yīng)用或是桌面應(yīng)用軟件，因?yàn)樗鼈兌鄶?shù)都內(nèi)置了很全面的GUI組件庫(kù)。