最近一陣有些難以抑制的腦癢手癢，閱讀和碼字的欲望也漸增；卻受時間精力等絕對客觀因素所限，不得不維系一周一篇譯文的頻率，感覺多少有那么點沮喪和無奈。

關(guān)于本文，其實在標(biāo)題上猶豫了蠻久。這篇內(nèi)容是新書A Practical Guide to Web App Success的第15章；主題顯然應(yīng)該在Web應(yīng)用方面，但是本章單獨拎出來看的話，卻又適用于各種常見類型的Web產(chǎn)品。whatever，不矛盾。作者Dan Zambonini在本文中將向我們闡述Web應(yīng)用在原型階段的設(shè)計與測試工作的重要性，并從實際執(zhí)行的角度出發(fā)，介紹一些經(jīng)驗方法和常用工具。走著。

產(chǎn)品在原型階段的設(shè)計與測試工作，是決定一款移動應(yīng)用能否成功的重要因素。提到原型設(shè)計和用戶測試，人們往往容易產(chǎn)生厭倦與回避的感覺。這也不奇怪，在很多實際項目中，這方面的工作似乎就是“隨意性強”，“耗時”，“高成本”一類的代名詞。

不過在我看來，它們其實是整個設(shè)計流程里最重要的環(huán)節(jié)。無論你或你的團隊在用戶界面視覺設(shè)計等方面有多高的造詣，我都建議各位對原型環(huán)節(jié)的相關(guān)工作提高重視�；�于高保真原型的用戶測試，可以讓很多關(guān)于需求、功能、界面設(shè)計等方面的潛在問題盡早暴露出來；這類問題往往直接關(guān)乎著產(chǎn)品的成敗。

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

原型設(shè)計

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

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

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

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

舉例說，Twitter和Facebook的首頁動態(tài)與用戶個人界面在形式上是很相似的，用一個原型就可以解決了。對這兩個應(yīng)用來說，真正必要的關(guān)鍵視圖界面原型只有大約4個的樣子，包括用戶注冊、動態(tài)列表、用戶搜索和用戶搜索結(jié)果等。

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

2.列出視覺元素

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

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

回到我們的烹調(diào)app上（貫穿本書前幾章的演示案例），從“最小可用產(chǎn)品”的角度，我們只需要一個主要功能：查找食材。在主界面中，包含的視覺元素及模塊大致有：

搜索框

搜索失敗的提示

熱門搜索關(guān)鍵詞

隨用戶輸入而顯示的搜索建議

飲食分類，包括素食、健康、低糖等

app的功能服務(wù)簡述

添加食材的入口鏈接

用戶的最近搜索關(guān)鍵詞

logo

3.將視覺元素分組并進行優(yōu)先級排序

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

搜索框、搜索失敗提示、搜索建議

熱門關(guān)鍵詞、飲食分類、最近搜索關(guān)鍵詞

logo、app的功能服務(wù)簡述

添加食材的入口鏈接

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

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

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

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

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

5.線框圖

是時候把這些UI元素的低保真原型撮合到線框原型中了；不要忘記我們之前對它們進行分組時的優(yōu)先級排序。在這期間仍然會頻繁的發(fā)生迭代，所以不必過多考慮精確的網(wǎng)格對齊、配色或字體一類。線框原型的設(shè)計制作過程，就是評估UI元素之間的平衡性、優(yōu)先級和互動關(guān)系的過程。（可以參考閱讀我們之前關(guān)于線框原型的本質(zhì)及實踐應(yīng)用方面的文章）

標(biāo)簽： 用戶測試 產(chǎn)品設(shè)計 原型設(shè)計 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。