最近一陣有些難以抑制的腦癢手癢，閱讀和碼字的慾望也漸增；卻受時間精力等絕對客觀因素所限，不得不維繫一周一篇譯文的頻率，感覺多少有那麼點沮喪和無奈。
關於本文，其實在標題上猶豫了蠻久。這篇內容是新書a practical guide to web app success的第15章；主題顯然應該在web應用方面，但是本章單獨拎出來看的話，卻又適用於各種常見型別的web產品。whatever，不矛盾。
作者dan zambonini在本文中將向我們闡述web應用在原型階段的設計與測試工作的重要性，並從實際執行的角度出發，介紹一些經驗方法和常用工具。走著。
產品在原型階段的設計與測試工作，是決定一款移動應用能否成功的重要因素。提到原型設計和使用者測試，人們往往容易產生厭倦與迴避的感覺。這也不奇怪，在很多實際專案中，這方面的工作似乎就是「隨意性強」，「耗時」，「高成本」一類的代名詞。
不過在我看來，它們其實是整個設計流程裡最重要的環節。無論你或你的團隊在使用者介面視覺設計等方面有多高的造詣，我都建議各位對原型環節的相關工作提高重視。基於高保真原型的使用者測試，可以讓很多關於需求、功能、介面設計等方面的潛在問題盡早暴露出來；這類問題往往直接關乎著產品的成敗。
另外，原型階段的工作非但不代表「耗時」與「高成本」，實際上正相反。從整個專案的角度講，在原型的設計與測試過程中發現問題並加以解決，比將問題留到視覺設計和開發流程中再處理，要省時省力的多。
原型設計
原型設計工作需要相關人員具備互動設計、構圖、網格系統、風格繼承等方面的知識技能。如果你在乙個小團隊內工作，盡量讓相關同事也參與到原型設計的工作中，從每個職能角度提出意見和建議。如果你們在為客戶開發移動應用，那麼在這個階段要與他們盡可能多的進行需求溝通，保證及時有效的反饋與迭代。
不過有一點需要注意，在參與原型設計的人員範圍方面要做好把握。 參與者應該包括與產品功能決策相關的產品及設計等上下游職能人員。我在實際專案中碰到過很多次這樣的情況，就是開發部門的技術人員在原型設計階段進行了過多的介入，除了常規的技術評審之外，還提出了很多以技術開發為中心的原型設計建議，這顯然是本末倒置的。
1.選擇最重要的檢視介面
如果你有足夠多的時間及技術資源去為每個檢視介面都建立對應的線框原型，這也不壞。不過通常情況下，你只需要搞幾個最重要的、最具代表性的介面就ok了；其他多數可以通過同一張原型圖去代表。
舉例說，twitter和facebook的首頁動態與使用者個人介面在形式上是很相似的，用乙個原型就可以解決了。對這兩個應用來說，真正必要的關鍵檢視介面原型只有大約4個的樣子，包括使用者註冊、動態列表、使用者搜尋和使用者搜尋結果等。
對於「最小可用產品」(minimum viable product,mvp)，那麼4到5個關鍵屏已經足夠多了。在後續的功能開發和迭代的過程中，可以再繼續為那些相對獨立的、非最簡化核心的功能介面設計新的原型。
2.列出視覺元素
接下來，列出所有需要用到的視覺元素，包括文字、按鈕、表單、圖形、選單等；不要忘記那些預設不會顯示出來的元素，比如警告和出錯資訊、狀態提示、操作反饋等。對於簡單的專案，使用紙和筆來完成這步工作就夠了。
由於這些ui元素是需要被復用的，所以在使用它們構建原型的時候，我們可以從最重要的檢視介面入手，也就是包含了最多內容結構和功能的、使用者會花很多時間進行瀏覽和操作的介面。這樣可以盡早確保ui元素的功能合理性。
回到我們的烹調app上(貫穿本書前幾章的演示案例)，從「最小可用產品」的角度，我們只需要乙個主要功能：查詢食材。在主介面中，包含的視覺元素及模組大致有：
搜尋框搜尋失敗的提示
熱門搜尋關鍵詞
隨使用者輸入而顯示的搜尋建議
飲食分類，包括素食、健康、低糖等
app的功能服務簡述
新增食材的入口鏈結
使用者的最近搜尋關鍵詞
logo
3.將視覺元素分組並進行優先順序排序
從功能及內容的角度，將上面列表中的元素條目進行分組，並按照優先順序從高到低的順序排列：
搜尋框、搜尋失敗提示、搜尋建議
熱門關鍵詞、飲食分類、最近搜尋關鍵詞
logo、app的功能服務簡述
新增食材的入口鏈結
對於最簡化可實行產品來說，分組和排序的工作會很容易進行。如果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的話，也可以使用它們提供的網頁線框模板。
我個人比較喜歡那些提供了低保真草圖風格的軟體，這種風格的線框圖可以顯得更加原始和自然，避免摻雜過多的視覺美化方面的因素。下圖左側為手繪草圖，右側為omnigraffle的線框原型輸出。
對於以上幾種型別的工具，我傾向於web應用或是桌面應用軟體，因為它們多數都內建了很全面的gui元件庫。
低保真原型可以用於產品相關部門內部進行小規模的評審和測試。
6.高保真原型
該建立用於測試的高保真原型了。雖然高保真原型中的介面在接下來的流程中還需要被多次迭代，但是目前我們已經可以盡量加入視覺風格及涉及使用者體驗的相關要素了。
高保真原型通常分為兩類，一類是可以通過photoshop、 fireworks等設計工具來建立的**檔案，純粹用以展示介面效果。另外一類是真正意義上的互動原型。在使用高保真互動原型進行測試的過程中，不必加入人工解說或行為路徑引導，對於被測試者來說，體驗更加流暢，操作感更接近於實際產品。
高保真原型的互動功能並不需要基於真正生產級別的**，我們只要保證頁面元素可以根據使用者行為進行必要的反饋即可。這種反饋可以通過硬編碼或指令碼來實現。
通常，我們可以通過以下幾種方法來建立高保真互動原型：
將介面效果圖嵌入html，通過map和area標籤，在**上新增熱點鏈結，用以響應使用者的點選。
使用photoshop或fireworks將介面效果圖快速切片，並直接生成html靜態頁面，實現簡單的響應功能。
如果你的前端能力ok，手頭夠快，不妨**伺候，直接上html、css、j**ascript，或使用blueprint css和ixedit這樣的前端框架。
使用更專業的原型工具軟體，如axure rp或serena prototype composer等，建立原型並匯出成為可互動的頁面集合。
最後一種，希望不會與你的價值觀產生衝突…我們可以直接使用dreamwe**er、 microsoft expression web或adobe muse等軟體的所見即所得(wysiwyg)設計模式來快速建立原型。反正目的在於快速製作並測試原型的互動方式；再說高保真原型的**通常也不會被用作接下來的前端或後台開發。
使用者測試
通過使用者測試，我們可以直接和有效的洞察到產品在使用者行為、介面可用性、使用者期望與功能契合程度等方面的表現。本文所側重的原型階段的測試，更是可以幫助我們在專案初期就能達到以下幾方面的目標：
在產品進入開發流程之前，發現並解決那些需求和功能設計合理性方面的問題。
辨識並去除那些多餘的功能，節省接下來的開發成本。
盡早發現結構布局和互動方式等方面的問題，在接下來的迭代過程中，有針對性的優化使用者體驗，提公升最終產品的使用者滿意度，推動產品在市場中口碑的樹立。
使用者測試的大致方式及流程其實並不複雜：選擇合適的使用者作為測試物件，向他們提出一系列需要使用app原型來完成的目標，記錄他們的行為及口頭陳述反饋。需要花些時間和心思去琢磨的的是整個測試工作的計畫與執行過程中的細節問題。
當然，你可以雇用那些可用性測試方面的***理，由他們打包搞定所有的問題，比如使用者選擇、任務設計、會話時長的規劃、調查結果分析等；只要你的團隊有足夠多的經費預算用來支付外包費用。
幸運的是，有一些實踐性強、成本低廉的方法和原則可供我們參考借鑑，自己解決問題。另外，雖然多數的第三方**在專業水準方面值得信賴(並且**昂貴)，但他們畢竟無法像我們自己一樣可以從頭到尾的了解我們的產品和需求，他們最終提供的分析報告往往無法達到能夠指引我們立刻採取反應措施的程度。
國際市場營銷策劃的成功之路
優勢互補 出奇制勝 聯想集團是國內最大的計算機產業集團,於1984年底由中科院計算機技術研究所創辦。聯想集團進軍國際市場取得成功,主要得益於 瞎子背瘸子 式的優勢互補策略。1988年北京聯想集團投資30萬港幣在香港創辦了聯想電腦公司,由北京聯想集團 香港導遠 和中國 香港 技術轉讓公司聯合組成。聯想...
「三無」學生的自主招生成功之路
所以事實證明，家長眼裡的 三無 一樣可以贏得自主招生。無論如何，要對自己的孩子要有信心，父母在心理上真正對考生的支援也是考生奮發學習的動力。下面我們節選一些2011年關注度比較高的自主招生大學招生簡章，做有關學生沒有獎項和特長的情況下報考自主招生的說明。背景資料 北京航空航天大學2011年自主選拔錄...
非師範生的福建教師招考成功之路
我差不多是在大三下學期決定要走教師這條道路的，那時候就有開始了解一些關於招聘的資訊，但了解不多。開始準備教師招聘的筆試，是在大四一開學的時候，翻開 教育綜合知識大綱解析 第一頁，我自己寫下的時間是2013年9月6日，閩試教育是今年才出版這本書的，之前我就有在書店裡多次對比了多種版本的書，內容參差不齊...