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

2015-11-28

3346

在本篇文章中，來自UXPin —— 用戶體驗(yàn)設(shè)計(jì)應(yīng)用的Chris Bank將為大家詳細(xì)講解在產(chǎn)品初步成型階段需要打造的各種草圖、原型以及設(shè)計(jì)規(guī)格。更多在產(chǎn)品設(shè)計(jì)階段提升用戶體驗(yàn)的小技巧請(qǐng)見我們的《用戶體驗(yàn)設(shè)計(jì)與流程文檔編制指南》。這一領(lǐng)域的專家和專業(yè)公司包括Aarron Walter、Ian McAllister、Vurb、MailChimp和Apple等。

從簡(jiǎn)單的拉鏈到Dropbox for iOS等移動(dòng)應(yīng)用，每件產(chǎn)品在產(chǎn)生之前都要經(jīng)歷“紙上”（或屏幕上）的階段。這一設(shè)計(jì)階段是所有產(chǎn)品必不可少的階段——不論是合格的產(chǎn)品還是達(dá)不到標(biāo)準(zhǔn)的產(chǎn)品。

產(chǎn)品設(shè)計(jì)的定義固然簡(jiǎn)單，但在當(dāng)今社會(huì)，要做出一件完美的產(chǎn)品需要無窮無盡的反復(fù)思考：產(chǎn)品是否能幫助用戶？是否簡(jiǎn)單易用？首次使用后能否給用戶帶來熟悉感？有鑒于此，產(chǎn)品設(shè)計(jì)師肩負(fù)著重大責(zé)任，其產(chǎn)品需要讓用戶覺得簡(jiǎn)單、有用。所謂產(chǎn)品，實(shí)際上是傳遞難忘體驗(yàn)的媒介。

雖然表面上看這一過程可能紛雜瑣碎，好像是一堆紙片和亂七八糟的屏幕畫面堆積在一起，但你心里明白最后終會(huì)有方法從雜亂中找到蹊徑。在本篇文章中，我們將為大家講解各種不同的文檔編制方法，以便大家在將創(chuàng)意融入設(shè)計(jì)時(shí)使用。下面我將為大家介紹概念草圖繪畫和線框圖繪制、低保真和高保真原型，以及產(chǎn)品設(shè)計(jì)規(guī)格。

反復(fù)進(jìn)行草圖和線框圖繪制

草圖大概算得上是用戶體驗(yàn)設(shè)計(jì)過程中最為常見的文檔類型了。正如《用戶體驗(yàn)設(shè)計(jì)與流程文檔編制指南》中所詳細(xì)探討的一樣，這一項(xiàng)工作的一般流程是繪制模型，然后進(jìn)行可用性測(cè)試（既包括內(nèi)部測(cè)試也包括面向特選測(cè)試人員的測(cè)試），再然后是反反復(fù)復(fù)的更換迭代。

不過你使用何種工具繪制草圖，最重要的是牢記用戶的特性。在繪制草圖時(shí)，應(yīng)當(dāng)參考分析階段時(shí)設(shè)定的用戶特性，時(shí)刻以用戶為重。下面，我們來看看粗創(chuàng)草圖和線框圖的繪制。

1. 粗創(chuàng)草圖繪制

鉛筆、鋼筆、馬克筆、蠟筆、紙張應(yīng)用，甚至經(jīng)典的Microsoft油漆刷等等等等，但凡是能在平面上留下痕跡的東西都可以拿來畫草圖。

Laura Busche（Smashing Magazine設(shè)計(jì)寫手）曾指出，手繪草圖具有延展記憶、幫助集中注意力和提高靈活性這幾項(xiàng)獨(dú)特的好處。手繪同時(shí)也是視覺呈現(xiàn)理念的最快方法，因此其應(yīng)作為你的常用備選方法。

產(chǎn)品設(shè)計(jì)公司ZURB非常重視通過紙繪草圖來呈現(xiàn)產(chǎn)品的功能和流程。他們偏好于使用記號(hào)筆，因?yàn)槠淠軌蛳拗萍?xì)節(jié)的程度，讓草圖更加側(cè)重于表現(xiàn)整體概念。對(duì)于他們來說，紙繪更快、更專注并且更靈活，但可擴(kuò)展性和交互性不太強(qiáng)，因?yàn)槟銦o法使用模板，而且也無法把不同的草圖相互聯(lián)系起來。

2. 線框圖繪制

數(shù)字線框圖繪制軟件放眼皆是，但其中只有少數(shù)幾個(gè)應(yīng)用值得大家仔細(xì)體驗(yàn)，例如UXPin、Balsamiq、Axure和Proto.io等。如果你選擇用紙，那么可以把紙張分成不同的部分繪制線框圖，然后在需要的地方添加網(wǎng)格線和圖框。線框圖繪制應(yīng)當(dāng)是一個(gè)產(chǎn)品的骨架。

Anthony Tseng，UX Movement的總編輯認(rèn)為，如果你的當(dāng)前的目標(biāo)是更好的反映出產(chǎn)品的實(shí)際形式和功能，以便說服相關(guān)人員，則可以提高設(shè)計(jì)的保真度。高保真線框圖雖然更耗費(fèi)時(shí)間而且在快速收獲反饋方面不太理想，但是更易于明確展現(xiàn)界面，讓相關(guān)人員和用戶能夠明晰哪些內(nèi)容是表單，哪些是按鈕。

詳細(xì)模型

根據(jù)你流程的不同，詳細(xì)模型既可以是高保真的線框圖，也可以是概念模型的升級(jí)版。

有些公司會(huì)完全跳過線框圖繪制這一階段，直接打造低保真度的概念模型，然后逐步增加保真度最后達(dá)到詳細(xì)模型程度。也有的公司會(huì)選擇循序漸進(jìn)的途徑，使用線框圖作為模型的骨架。有時(shí)你可能會(huì)聽到有人混用“線框圖”和“模型”這兩個(gè)詞，但其實(shí)這兩者是完全不同的兩個(gè)文檔類型。線框圖的作用是展現(xiàn)出結(jié)構(gòu)，隨后通過注入材質(zhì)和細(xì)節(jié)演變成模型作為應(yīng)用或網(wǎng)站的原型。

根據(jù)UXPin CEO Marcin Treder介紹，細(xì)節(jié)程度較高的模型通常就是設(shè)計(jì)初稿乃至實(shí)際的視覺設(shè)計(jì)。一個(gè)精心打造的模型可以達(dá)到貼近真實(shí)的程度，從而刺激人們關(guān)注項(xiàng)目的視覺面。線框圖中可能包含各種形狀、線條，也可能有一些細(xì)節(jié)（如果是高保真圖），但詳細(xì)模型卻專注于展現(xiàn)具體的字體、顏色方案和整體的最終外觀。

Treehouse的設(shè)計(jì)師Nick Pettit曾反復(fù)強(qiáng)調(diào)：詳細(xì)模型可以作為設(shè)計(jì)溝通的手段，但還不能就直接丟入開發(fā)階段。他解釋道：考慮到響應(yīng)式設(shè)計(jì)和靈活方法的出現(xiàn)，花費(fèi)幾個(gè)小時(shí)時(shí)間做出詳細(xì)模型作為產(chǎn)品規(guī)格然后丟給開發(fā)人員的方法已經(jīng)不再合適。另外，低保真度的線框圖更加方便迭代更新，因?yàn)槠鋵?shí)現(xiàn)簡(jiǎn)單，而且制作原型也能夠更加輕松的聯(lián)系不同功能。

原型制作原則

如果說線框圖注重的是結(jié)構(gòu)，那么原型就更加注重體驗(yàn)。線框圖或模型可以使用Invision或UXPin等應(yīng)用相互聯(lián)系從而創(chuàng)建可以實(shí)際點(diǎn)擊的原型。

如上圖所示，保真度和工作流有各種不同的維度。HubSpot的前任用戶體驗(yàn)總監(jiān)Josh Porter喜歡從草圖繪制直接過渡到原型創(chuàng)作階段（跳過線框圖）這一比較簡(jiǎn)單的工作流程。對(duì)于他來說，草圖耗時(shí)少，但能夠回答“頁(yè)面上呈現(xiàn)哪些物體、這些物體能執(zhí)行哪些操作”等功能性的問題，而建立原型則需要投入更多精力。這并不意味著線框圖和模型沒有用，相反，其說明可以將時(shí)間從開發(fā)靜態(tài)資源上轉(zhuǎn)移到交互資源上。

原型制作的真正強(qiáng)項(xiàng)在于其能夠讓團(tuán)隊(duì)把思考的中心從交付作品轉(zhuǎn)移到實(shí)用性上來。正如《最小化可用產(chǎn)品指南》中所述，很多成功的公司甚至把原型作為第一代產(chǎn)品直接發(fā)布。

低保真原型

人們?cè)谡劦娇焖僭椭谱骱途?jiǎn)用戶體驗(yàn)時(shí)，通常指的就是低保真原型。低保真原型重視對(duì)交互的精煉而不是視覺或技術(shù)執(zhí)行的細(xì)節(jié)，因此有助于避免視野受到局限。低保真原型可以使用很多在線應(yīng)用（Balsamiq、Invision或UXPin）制作，也可以用老辦法：HTML編程。

著名企業(yè)家Andrew Chen認(rèn)為，低保真原型是實(shí)現(xiàn)客戶驅(qū)動(dòng)型設(shè)計(jì)的最佳方法之一。使用在線應(yīng)用創(chuàng)作的低保真原型盡管可能外觀不怎么樣，但相比經(jīng)過編程的或高保真度的原型，其能幫助你進(jìn)行快速迭代更新，保證你所推出的產(chǎn)品就是自己想要的產(chǎn)品（不考慮迭代）。對(duì)此，他總結(jié)出了低保真原型的4項(xiàng)好處，具體如下：

反饋效果更佳也更真實(shí)

對(duì)于圖片精美的原型，人們可能會(huì)將注意力更多集中在視覺效果而不是價(jià)值主張上。他們可能會(huì)覺得難以深入你的理念，因?yàn)槿A麗的效果讓他們望而卻步。

適合于A/B測(cè)試

在能夠?qū)Ω鞣N細(xì)節(jié)變化進(jìn)行嘗試和優(yōu)化的UI層面，其多樣性推動(dòng)了A/B測(cè)試的興盛。因此，UI的10-20種粗獷變化比2-3種完美到像素級(jí)別的變化更具透徹性。

犯錯(cuò)誤的代價(jià)更低

低保真原型所涉及的資源較少，團(tuán)隊(duì)對(duì)于改變不會(huì)太較真，因此使用低保真原型作為工作核心相對(duì)更為容易。

專注于流程而不是頁(yè)面

頁(yè)面的外觀不是關(guān)鍵，真正重要的是頁(yè)面的前后聯(lián)系。低保真原型就像一個(gè)沙箱環(huán)境，在這里你可以畫出并聯(lián)系大量的小頁(yè)面、體驗(yàn)交互以及嘗試其他讓自己感到自然舒適的想法。

如果你要選擇低保真原型，根據(jù)過往經(jīng)驗(yàn)，建議你將精力集中到占比為20%但實(shí)際使用時(shí)間為80%的功能上。

定義、設(shè)計(jì)、再定義

正如我們前面所展示，產(chǎn)品設(shè)計(jì)的定義源自于多項(xiàng)技術(shù)技巧，這些技術(shù)技巧能幫助你把創(chuàng)意轉(zhuǎn)變成體驗(yàn)。無論你選擇低保真還是高保真，草圖、線框圖和原型制作的根本目標(biāo)都是交付出優(yōu)秀的產(chǎn)品理念，而不是簡(jiǎn)單的產(chǎn)品。

有關(guān)其他將文檔編制融入設(shè)計(jì)流程的好想法，請(qǐng)下載《用戶體驗(yàn)設(shè)計(jì)與流程文檔編制指南》。我們的專家意見來自Aarron Walter、Laura Klein、Ian McAllister等等等等。另外，該指南中還囊括了來自Vurb、MailChimp、Apple、Google等公司的視覺案例。

關(guān)注我們：在查找公眾號(hào)中搜索：zomsky1688，或者掃描下方二維碼快速關(guān)注。
廣州市縱天信息科技有限公司公眾號(hào)
本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-縱天
關(guān)鍵詞：廣州網(wǎng)站建設(shè),廣州網(wǎng)頁(yè)設(shè)計(jì),廣州網(wǎng)站設(shè)計(jì),廣州網(wǎng)站建設(shè)公司