超細致的產(chǎn)品設(shè)計流程技巧全科普

編者按：今天的好文節(jié)選自《用戶體驗設(shè)計與流程文檔編制指南》，這節(jié)給大家科普一個產(chǎn)品的誕生過程，從概念草圖、線框圖到原型稿，作者都有實實在在的干貨與技巧分享，特別是對于各類文檔的優(yōu)缺點以及編制原則都很明晰，產(chǎn)品設(shè)計師們都可以進來漲下姿勢咯。 在本篇文章中，來自UXPin —— 用戶體驗設(shè)計應(yīng)用的Chris Bank將為大家詳細講解在產(chǎn)品初步成型階段需要打造的各種草圖、原型以及設(shè)計規(guī)格。更多在產(chǎn)品設(shè)計階段提升用戶體驗的小技巧請見我們的《用戶體驗設(shè)計與流程文檔編制指南》。這一領(lǐng)域的專家和專業(yè)公司包括Aarron Walter、Ian McAllister、Vurb、MailChimp和Apple等。 從簡單的拉鏈到Dropbox for iOS等移動應(yīng)用，每件產(chǎn)品在產(chǎn)生之前都要經(jīng)歷“紙上”（或屏幕上）的階段。這一設(shè)計階段是所有產(chǎn)品必不可少的階段——不論是合格的產(chǎn)品還是達不到標準的產(chǎn)品。 產(chǎn)品設(shè)計的定義固然簡單，但在當今社會，要做出一件完美的產(chǎn)品需要無窮無盡的反復(fù)思考：產(chǎn)品是否能幫助用戶？是否簡單易用？首次使用后能否給用戶帶來熟悉感？有鑒于此，產(chǎn)品設(shè)計師肩負著重大責任，其產(chǎn)品需要讓用戶覺得簡單、有用。所謂產(chǎn)品，實際上是傳遞難忘體驗的媒介。 雖然表面上看這一過程可能紛雜瑣碎，好像是一堆紙片和亂七八糟的屏幕畫面堆積在一起，但你心里明白最后終會有方法從雜亂中找到蹊徑。在本篇文章中，我們將為大家講解各種不同的文檔編制方法，以便大家在將創(chuàng)意融入設(shè)計時使用。下面我將為大家介紹概念草圖繪畫和線框圖繪制、低保真和高保真原型，以及產(chǎn)品設(shè)計規(guī)格。

反復(fù)進行草圖和線框圖繪制 草圖大概算得上是用戶體驗設(shè)計過程中最為常見的文檔類型了。正如《用戶體驗設(shè)計與流程文檔編制指南》中所詳細探討的一樣，這一項工作的一般流程是繪制模型，然后進行可用性測試（既包括內(nèi)部測試也包括面向特選測試人員的測試），再然后是反反復(fù)復(fù)的更換迭代。 不過你使用何種工具繪制草圖，最重要的是牢記用戶的特性。在繪制草圖時，應(yīng)當參考分析階段時設(shè)定的用戶特性，時刻以用戶為重。下面，我們來看看粗創(chuàng)草圖和線框圖的繪制。 1. 粗創(chuàng)草圖繪制 鉛筆、鋼筆、馬克筆、蠟筆、紙張應(yīng)用，甚至經(jīng)典的Microsoft油漆刷等等等等，但凡是能在平面上留下痕跡的東西都可以拿來畫草圖。 Laura Busche（Smashing Magazine設(shè)計寫手）曾指出，手繪草圖具有延展記憶、幫助集中注意力和提高靈活性這幾項獨特的好處。手繪同時也是視覺呈現(xiàn)理念的最快方法，因此其應(yīng)作為你的常用備選方法。 產(chǎn)品設(shè)計公司ZURB非常重視通過紙繪草圖來呈現(xiàn)產(chǎn)品的功能和流程。他們偏好于使用記號筆，因為其能夠限制細節(jié)的程度，讓草圖更加側(cè)重于表現(xiàn)整體概念。對于他們來說，紙繪更快、更專注并且更靈活，但可擴展性和交互性不太強，因為你無法使用模板，而且也無法把不同的草圖相互聯(lián)系起來。 2. 線框圖繪制 數(shù)字線框圖繪制軟件放眼皆是，但其中只有少數(shù)幾個應(yīng)用值得大家仔細體驗，例如UXPin、Balsamiq、Axure和Proto.io等。如果你選擇用紙，那么可以把紙張分成不同的部分繪制線框圖，然后在需要的地方添加網(wǎng)格線和圖框。線框圖繪制應(yīng)當是一個產(chǎn)品的骨架。有關(guān)這方面的建議和練習(xí)，請看《線框圖繪制指南》。 Anthony Tseng，UX Movement的總編輯認為，如果你的當前的目標是更好的反映出產(chǎn)品的實際形式和功能，以便說服相關(guān)人員，則可以提高設(shè)計的保真度。高保真線框圖雖然更耗費時間而且在快速收獲反饋方面不太理想，但是更易于明確展現(xiàn)界面，讓相關(guān)人員和用戶能夠明晰哪些內(nèi)容是表單，哪些是按鈕。

詳細模型 根據(jù)你流程的不同，詳細模型既可以是高保真的線框圖，也可以是概念模型的升級版。 有些公司會完全跳過線框圖繪制這一階段，直接打造低保真度的概念模型，然后逐步增加保真度最后達到詳細模型程度。也有的公司會選擇循序漸進的途徑，使用線框圖作為模型的骨架。有時你可能會聽到有人混用“線框圖”和“模型”這兩個詞，但其實這兩者是完全不同的兩個文檔類型。線框圖的作用是展現(xiàn)出結(jié)構(gòu)，隨后通過注入材質(zhì)和細節(jié)演變成模型作為應(yīng)用或網(wǎng)站的原型。 根據(jù)UXPin CEO Marcin Treder介紹，細節(jié)程度較高的模型通常就是設(shè)計初稿乃至實際的視覺設(shè)計。一個精心打造的模型可以達到貼近真實的程度，從而刺激人們關(guān)注項目的視覺面。線框圖中可能包含各種形狀、線條，也可能有一些細節(jié)（如果是高保真圖），但詳細模型卻專注于展現(xiàn)具體的字體、顏色方案和整體的最終外觀。 Treehouse的設(shè)計師Nick Pettit曾反復(fù)強調(diào)：詳細模型可以作為設(shè)計溝通的手段，但還不能就直接丟入開發(fā)階段。他解釋道：考慮到響應(yīng)式設(shè)計和靈活方法的出現(xiàn)，花費幾個小時時間做出詳細模型作為產(chǎn)品規(guī)格然后丟給開發(fā)人員的方法已經(jīng)不再合適。另外，低保真度的線框圖更加方便迭代更新，因為其實現(xiàn)簡單，而且制作原型也能夠更加輕松的聯(lián)系不同功能。

原型制作原則 如果說線框圖注重的是結(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)移到實用性上來。正如《最小化可用產(chǎn)品指南》中所述，很多成功的公司甚至把原型作為第一代產(chǎn)品直接發(fā)布。

低保真原型 人們在談到快速原型制作和精簡用戶體驗時，通常指的就是低保真原型。低保真原型重視對交互的精煉而不是視覺或技術(shù)執(zhí)行的細節(jié)，因此有助于避免視野受到局限。低保真原型可以使用很多在線應(yīng)用（Balsamiq、Invision或UXPin）制作，也可以用老辦法：HTML編程。 著名企業(yè)家Andrew Chen認為，低保真原型是實現(xiàn)客戶驅(qū)動型設(shè)計的最佳方法之一。使用在線應(yīng)用創(chuàng)作的低保真原型盡管可能外觀不怎么樣，但相比經(jīng)過編程的或高保真度的原型，其能幫助你進行快速迭代更新，保證你所推出的產(chǎn)品就是自己想要的產(chǎn)品（不考慮迭代）。對此，他總結(jié)出了低保真原型的4項好處，具體如下： 反饋效果更佳也更真實 對于圖片精美的原型，人們可能會將注意力更多集中在視覺效果而不是價值主張上。他們可能會覺得難以深入你的理念，因為華麗的效果讓他們望而卻步。 適合于A/B測試 在能夠?qū)Ω鞣N細節(jié)變化進行嘗試和優(yōu)化的UI層面，其多樣性推動了A/B測試的興盛。因此，UI的10-20種粗獷變化比2-3種完美到像素級別的變化更具透徹性。 犯錯誤的代價更低 低保真原型所涉及的資源較少，團隊對于改變不會太較真，因此使用低保真原型作為工作核心相對更為容易。 專注于流程而不是頁面 頁面的外觀不是關(guān)鍵，真正重要的是頁面的前后聯(lián)系。低保真原型就像一個沙箱環(huán)境，在這里你可以畫出并聯(lián)系大量的小頁面、體驗交互以及嘗試其他讓自己感到自然舒適的想法。 如果你要選擇低保真原型，根據(jù)過往經(jīng)驗，建議你將精力集中到占比為20%但實際使用時間為80%的功能上。

定義、設(shè)計、再定義 正如我們前面所展示，產(chǎn)品設(shè)計的定義源自于多項技術(shù)技巧，這些技術(shù)技巧能幫助你把創(chuàng)意轉(zhuǎn)變成體驗。無論你選擇低保真還是高保真，草圖、線框圖和原型制作的根本目標都是交付出優(yōu)秀的產(chǎn)品理念，而不是簡單的產(chǎn)品。
有關(guān)其他將文檔編制融入設(shè)計流程的好想法，請下載《用戶體驗設(shè)計與流程文檔編制指南》。我們的專家意見來自Aarron Walter、Laura Klein、Ian McAllister等等等等。另外，該指南中還囊括了來自Vurb、MailChimp、Apple、Google等公司的視覺案例。