|
最近一陣有些難以抑制的腦癢手癢，思維的片段時(shí)不時(shí)的從深處飄逸而出，閱讀和碼字的欲望也漸增；卻受時(shí)間精力等絕對(duì)客觀因素所限，不得不維系一周一篇譯文的頻率，感覺多少有那么點(diǎn)沮喪和無奈。
關(guān)于本文，其實(shí)在標(biāo)題上猶豫了蠻久。這篇內(nèi)容是新書A Practical Guide to Web App Success的第15章；主題顯然應(yīng)該在Web應(yīng)用方面，但是本章單獨(dú)拎出來看的話，卻又適用于各種常見類型的Web產(chǎn)品。whatever，不矛盾。作者Dan Zambonini在本文中將向我們闡述Web應(yīng)用在原型階段的設(shè)計(jì)與測(cè)試工作的重要性，并從實(shí)際執(zhí)行的角度出發(fā)，介紹了一些經(jīng)驗(yàn)方法和常用工具。走著。
產(chǎn)品在原型階段的設(shè)計(jì)與測(cè)試工作是決定一款移動(dòng)應(yīng)用能否成功的重要因素。提到原型設(shè)計(jì)和用戶測(cè)試，人們往往容易產(chǎn)生厭倦與回避的感覺。這也不奇怪，在很多實(shí)際項(xiàng)目中，這方面的工作似乎就是“隨意性強(qiáng)”，“耗時(shí)”，“高成本”一類的代名詞。
不過在我看來，原型階段的設(shè)計(jì)與測(cè)試，其實(shí)是整個(gè)設(shè)計(jì)流程里最重要的一環(huán)。無論你或你的團(tuán)隊(duì)在用戶界面視覺設(shè)計(jì)等方面有多高的造詣，我都建議各位對(duì)原型環(huán)節(jié)的相關(guān)工作提高重視。基于可視化原型的用戶測(cè)試，可以讓很多關(guān)于需求、功能、界面設(shè)計(jì)等方面的潛在問題盡早暴露出來；這類問題往往直接關(guān)乎著產(chǎn)品的成敗。
另外，原型階段的工作非但不代表“耗時(shí)”與“高成本”，實(shí)際上正相反。從整個(gè)項(xiàng)目的角度講，在原型的設(shè)計(jì)與測(cè)試過程中發(fā)現(xiàn)問題并加以解決，比將問題留到視覺設(shè)計(jì)和開發(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è)職能角度提出意見和建議。如果你們?cè)跒榭蛻糸_發(fā)移動(dòng)應(yīng)用，那么在這個(gè)階段要與他們盡可能多的進(jìn)行需求溝通，保證及時(shí)有效的反饋與迭代。
不過有一點(diǎn)需要注意，在參與原型設(shè)計(jì)的人員范圍方面要做好把握。參與者應(yīng)該包括與產(chǎn)品功能決策相關(guān)的產(chǎn)品及設(shè)計(jì)等上下游職能人員。我在實(shí)際項(xiàng)目中碰到過很多次這樣的情況，就是開發(fā)部門的技術(shù)人員在原型設(shè)計(jì)階段進(jìn)行了過多的介入，除了常規(guī)的需求技術(shù)評(píng)審之外，還提出了很多以技術(shù)開發(fā)為中心的原型設(shè)計(jì)建議，這顯然是本末倒置的。
1.選擇最重要的視圖界面
如果你有足夠多的時(shí)間及技術(shù)資源去為每個(gè)視圖界面都創(chuàng)建對(duì)應(yīng)的線框原型，這也不壞。不過通常情況下，你只需要搞幾個(gè)最重要的、最具代表性的界面就OK了；其他多數(shù)可以通過同一張?jiān)蛨D去代表。
舉例說，Twitter和Facebook的首頁(yè)動(dòng)態(tài)與用戶個(gè)人界面在形式上是很相似的，用一個(gè)原型就可以解決了。對(duì)這兩個(gè)應(yīng)用來說，真正必要的關(guān)鍵視圖界面原型只有大約4個(gè)的樣子，包括用戶注冊(cè)、動(dòng)態(tài)列表、用戶搜索和用戶搜索結(jié)果等。
如果你正在打造“最簡(jiǎn)化可實(shí)行產(chǎn)品”(最小可用產(chǎn)品，Minimum Viable Product,MVP)，那么4到5個(gè)關(guān)鍵屏已經(jīng)足夠多了。在后續(xù)的功能開發(fā)和迭代的過程中，可以再繼續(xù)為那些相對(duì)獨(dú)立的、非最簡(jiǎn)化核心的功能界面設(shè)計(jì)新的原型。
2.列出視覺元素
接下來，列出所有需要用到的視覺元素，包括文本、按鈕、表單、圖形、菜單等；不要忘記那些默認(rèn)不會(huì)顯示出來的元素，比如警告和出錯(cuò)信息、狀態(tài)提示、操作反饋等。對(duì)于簡(jiǎn)單的項(xiàng)目，使用紙和筆來完成這步工作就夠了。
由于這些UI元素是需要被復(fù)用的，所以在使用它們構(gòu)建原型的時(shí)候，我們可以從最重要的視圖界面入手，也就是包含了最多內(nèi)容結(jié)構(gòu)和功能的、用戶會(huì)花很多時(shí)間進(jìn)行瀏覽和操作的界面。這樣可以盡早確保UI元素的功能合理性。
回到我們的烹調(diào)app上(貫穿本書前幾章的演示案例)，從“最簡(jiǎn)化可實(shí)行產(chǎn)品”的角度，我們只需要一個(gè)主要功能：查找食材。在主界面中，包含的視覺元素及模塊大致有：
- 搜索框
- 搜索失敗的提示
- 熱門搜索關(guān)鍵詞
- 隨用戶輸入而顯示的搜索建議
- 飲食分類，包括素食、健康、低糖等
- app的功能服務(wù)簡(jiǎn)述
- 添加食材的入口鏈接
- 用戶的最近搜索關(guān)鍵詞
- logo
出處：Be For Web
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 原型設(shè)計(jì)與用戶測(cè)試 [2]
|
第 1 頁(yè) 原型設(shè)計(jì)與用戶測(cè)試 [1]
第 2 頁(yè) 
