在本篇文章中，來(lái)自UXPin —— 用戶體驗(yàn)設(shè)計(jì)應(yīng)用的Chris Bank將為大家詳細(xì)講解在產(chǎn)品初步成型階段需要打造的各種草圖、原型以及設(shè)計(jì)規(guī)格。更多在產(chǎn)品設(shè)計(jì)階段提升用戶體驗(yàn)的小技巧請(qǐng)見(jiàn)我們的《用戶體驗(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)品需要無(wú)窮無(wú)盡的反復(fù)思考：產(chǎn)品是否能幫助用戶？是否簡(jiǎn)單易用？首次使用后能否給用戶帶來(lái)熟悉感？有鑒于此，產(chǎn)品設(shè)計(jì)師肩負(fù)著重大責(zé)任，其產(chǎn)品需要讓用戶覺(jué)得簡(jiǎn)單、有用。所謂產(chǎn)品，實(shí)際上是傳遞難忘體驗(yàn)的媒介。

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

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

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

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

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

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

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

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

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í)際形式和功能，以便說(shuō)服相關(guān)人員，則可以提高設(shè)計(jì)的保真度。高保真線框圖雖然更 耗費(fèi)時(shí)間而且在快速收獲反饋方面不太理想，但是更易于明確展現(xiàn)界面，讓相關(guān)人員和用戶能夠明晰哪些內(nèi)容是表單，哪些是按鈕。

詳細(xì)模型

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

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

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

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

原型制作原則

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

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

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

低保真原型

人們?cè)谡劦娇焖僭椭谱骱途?jiǎn)用戶體驗(yàn)時(shí)，通常指的就是低保真原型。低保真原型重視對(duì)交互的精煉而不是視覺(jué)或技術(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)過(guò)編程的或高保真度的原型， 其能幫助你進(jìn)行快速迭代更新，保證你所推出的產(chǎn)品就是自己想要的產(chǎn)品（不考慮迭代）。對(duì)此，他總結(jié)出了低保真原型的4項(xiàng)好處，具體如下：

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

對(duì)于圖片精美的原型，人們可能會(huì)將注意力更多集中在視覺(jué)效果而不是價(jià)值主張上。他們可能會(huì)覺(jué)得難以深入你的理念，因?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ù)過(guò)往經(jīng)驗(yàn)，建議你將精力集中到占比為20%但實(shí)際使用時(shí)間為80%的功能上。

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

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

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

新聞名稱：超細(xì)致的產(chǎn)品設(shè)計(jì)流程技巧全科普
標(biāo)題路徑：http://jinyejixie.com/news/172673.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、Google、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、企業(yè)建站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)