編者按：上次給同學(xué)們科普一個產(chǎn)品的誕生過程，今天繼續(xù)深聊第二節(jié)，你可以了解到交互設(shè)計師在產(chǎn)品成型前要具體干哪些活兒，中間又有什么不為人知的技巧與規(guī)則，當然，作為上節(jié)課的續(xù)集，我們將手把手帶你全面認識高保真原型，趕緊來補充知識咯。 上一篇好文在這里喲！《漲姿勢！超細致的產(chǎn)品設(shè)計流程技巧全科普》 在第一節(jié)中，我們共同探討了草圖、線框圖、模型和低保真度原型等早期設(shè)計成果。隨著你設(shè)計的深入，視覺的保真度將自然地隨之提高，功能也會隨之完善。 雖然表面上看這一過程可能紛雜瑣碎，好像是一堆紙片和亂七八糟的屏幕畫面堆積在一起，但你心里明白最后終會有方法從雜亂中找到蹊徑。在本篇文章中，我們將為大家講解各種不同的文檔編制方法，以便大家在將創(chuàng)意融入設(shè)計時使用。下面我將為大家介紹概念草圖繪畫和線框圖繪制、低保真和高保真原型，以及產(chǎn)品設(shè)計規(guī)格。

原型設(shè)計原則 如果說線框圖注重的是結(jié)構(gòu)，那么原型就更加注重體驗。線框圖或模型可以使用Invision或UXPin等應(yīng)用相互聯(lián)系從而創(chuàng)建可以實際點擊的原型。 如上圖所示，保真度和工作流有各種不同的維度。HubSpot的前任用戶體驗總監(jiān)Josh Porter喜歡從草圖繪制直接過渡到原型創(chuàng)作階段（跳過線框圖）這一比較簡單的工作流程。對于他來說，草圖耗時少，但能夠回答“頁面上呈現(xiàn)哪些物體、這些物體能執(zhí)行哪些操作”等功能性的問題，而建立原型則需要投入更多精力。這并不意味著線框圖和模型沒有用，相反，其說明可以將時間從開發(fā)靜態(tài)資源上轉(zhuǎn)移到交互資源上。 原型制作的真正強項在于其能夠讓團隊把思考的中心從交付作品轉(zhuǎn)移到實用性上來。有關(guān)線框圖和原型設(shè)計的完整原則和實操，請閱讀《線框圖繪制指南》。

高保真度原型 高保真度原型比較適合于用戶體驗設(shè)計后期階段幫助你思考品牌塑造、外觀和感覺等等細節(jié)問題。高保真原型可以讓你以比較低的成本盡量貼近真是產(chǎn)品。和低保真原型一樣，你也可以使用在線應(yīng)用或HTML代碼創(chuàng)建高保真原型。 據(jù)Silicon Valley Product Group的合伙人Marty Cagan介紹，高保真原型能夠刺激產(chǎn)品經(jīng)理、設(shè)計師和工程師更深入地開展協(xié)作并共同探索可行產(chǎn)品所需的各方面內(nèi)容。保真度較高的原型能夠帶來下列好處： 較早地呈現(xiàn)出完整產(chǎn)品 營銷、銷售和業(yè)務(wù)開發(fā)團隊能夠盡早理解產(chǎn)品，以便做出正確響應(yīng)。 縮短開發(fā)時間 高保真原型更加精致，可以方便你在早期解決很多可能困擾開發(fā)人員的具體問題，另外，使用高保真原型進行用戶驗證可以大幅縮短開發(fā)時間。 方便估計項目范圍 高保真原型可以提供較為詳細的信息，方便在流程早期（高保真原型作用最大的階段）準確估計工程成本。如果你的產(chǎn)品引入了新技術(shù)，那么高保真原型將尤其有幫助。 Smashing Magazine的作者Lyndon Cerjeo建議不論保真度如何，原型都應(yīng)循序漸進地搭建，而不應(yīng)反復(fù)更新?lián)Q代。一個比較有效果的方法就是先從泛泛的層面開始原型設(shè)計，然后深入設(shè)計的特定部分提高保真度。舉例來說，一個網(wǎng)站原型的初代可以先搭建出主要的登陸頁面，在之后的迭代期間逐漸提高保真度并細化網(wǎng)站的各個部分（例如下載時的各個步驟等）。

產(chǎn)品設(shè)計規(guī)格 原型的作用是展示交互和外觀，而設(shè)計規(guī)格的作用則是說明產(chǎn)品成型所需的流程和藝術(shù)創(chuàng)作。 設(shè)計規(guī)格主要包括用戶流程和任務(wù)流程圖，這兩個流程圖將規(guī)劃出產(chǎn)品的功能以及內(nèi)容和樣式要求，進而說明其視覺表現(xiàn)上的創(chuàng)意和技術(shù)細節(jié)。有關(guān)用戶故事和任務(wù)故事的建議，請閱讀 《用戶體驗設(shè)計與流程文檔編制指南》。 1. 用戶流程圖 用戶流程或者叫用戶旅程，是指所有會影響用戶實現(xiàn)某一目標的場景和決策。用戶流程圖應(yīng)當高度全面，并包含從用戶形成概念直到其目標達成這一過程的全部時點。
用戶流程圖能夠表現(xiàn)出用戶總體上的目標（例如安排旅游，或者像上圖中所示的雇傭員工等）。例如，現(xiàn)在有兩名用戶需要在線購買CD，他們各自可能體驗到完全不同的旅程。其中一個可能會通過地址欄打開Amazon.com，搜索要買的專輯，然后添加到購物車。另一個可能會先Google搜索，打開第一個結(jié)果，瀏覽比較一番，然后查看一些細節(jié)，最后才進入具體購買環(huán)節(jié)。因此，你的用戶流程圖應(yīng)該非常復(fù)雜才對。 根據(jù)Wireframes Magazine所介紹，上面所展示的對話氣泡用戶流程能夠在你設(shè)計產(chǎn)品交互時有效地幫助你將側(cè)重點放到用戶的真實想法和需求上。隨著項目不斷進展，你很可能會迷失在產(chǎn)品的復(fù)雜技術(shù)當中。對話氣泡用戶留出可以讓你始終專注于分析階段所確立的產(chǎn)品特性上。 2. 任務(wù)流程圖 如果說用戶流程側(cè)重于整體戰(zhàn)略，那么任務(wù)流程就注重微觀執(zhí)行。任務(wù)流程的作用是對一系列具體、可重復(fù)的操作進行說明，例如使用鬧鈴應(yīng)用、設(shè)定鬧鈴響起時間等。 如上例所示，任務(wù)流程圖展現(xiàn)的基本全部是運算過程，因此相比用戶流程顯得比較枯燥。但任務(wù)流程能夠幫助你捋清完成產(chǎn)品預(yù)期可實現(xiàn)目標所需執(zhí)行的全部步驟。 3. 設(shè)計資源與樣式要求 產(chǎn)品樣式指南通常用于說明產(chǎn)品感官上的審美和技術(shù)規(guī)格。產(chǎn)品樣式指南中包含的內(nèi)容包括：用于說明產(chǎn)品預(yù)期實現(xiàn)情感狀態(tài)的品牌規(guī)范、具體像素、文件格式等技術(shù)規(guī)格、設(shè)計資源的整體尺寸/大小等多種內(nèi)容。這一指南可以像Mozilla的品牌工具包一樣簡短松散，只追求推動創(chuàng)意，也可以像Apple的人機界面指南一樣精確繁復(fù)。 Salesforce的產(chǎn)品設(shè)計師Brad Haynes選擇圍繞產(chǎn)品而非概念打造出了Salesforce的樣式指南。面對自己團隊反復(fù)提出的問題，Brad成功地將Salesforce的外觀和感覺塑造成了一款移動應(yīng)用，從而實現(xiàn)了品牌感官的一致化。其新產(chǎn)品樣式指南的核心內(nèi)容包含下列要素： 原則 明確列出有關(guān)層級關(guān)系、標準和簡約性的指導(dǎo)原則，說明產(chǎn)品設(shè)計背后的道理。 顏色 通過展示調(diào)色板的截圖給出充足但又不會讓設(shè)計團隊困惑的信息。 排版 限用一種字體和給定的幾種字體粗細，保證設(shè)計簡單。 圖標 提供全套圖標體系和庫（同時提供像素等技術(shù)細節(jié)）。 Yelp的樣式指南則更進一步，其使用了更為方設(shè)計師和開發(fā)人員使用的文檔。其樣式指南甚至包含了很多小段的代碼以幫助減輕技術(shù)上的負擔。最后，由于設(shè)計和開發(fā)團隊能夠直接使用很多現(xiàn)成的代碼和經(jīng)過更新的設(shè)計樣式庫，其高效協(xié)作有效減少了實現(xiàn)新功能所需花費的時間。 有關(guān)其他最佳實踐，建議你閱讀Google、MailChimp和Salesforce的產(chǎn)品樣式指南。

定義、設(shè)計、再定義 無論你選擇低保真還是高保真，草圖、線框圖和原型制作的根本目標都是交付出優(yōu)秀的產(chǎn)品理念，而不是簡單的產(chǎn)品。