步步為營(yíng)的用戶體驗(yàn)設(shè)計(jì)

之前搞了兩篇響應(yīng)式Web設(shè)計(jì)方面的譯文，包括響應(yīng)式Web設(shè)計(jì)的概念、組成要素及基本的實(shí)現(xiàn)思路，以及怎樣通過(guò)CSS3 Media Query進(jìn)行設(shè)計(jì)開(kāi)發(fā)； 今天換個(gè)口味，來(lái)點(diǎn)兒務(wù)虛的。本文作者從一名用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)leader的角度出發(fā)，簡(jiǎn)要介紹了UX設(shè)計(jì)相關(guān)工作在公司內(nèi)部是怎樣步步為營(yíng)的從無(wú)到有展 開(kāi)的。沒(méi)有不切實(shí)際的大道理，也沒(méi)有什么技術(shù)細(xì)節(jié)的講解，通篇更像是作者對(duì)工作中典型階段的回顧與總結(jié)，包括團(tuán)隊(duì)組建、理念及影響力的培養(yǎng)、部門(mén)協(xié)作、項(xiàng)目介入方式等方面。廢話不多說(shuō)，走著。

多數(shù)時(shí)候，新的方式方法不會(huì)被很容易的付諸實(shí)踐。特別是在舊有習(xí)慣已經(jīng)根深蒂固的情況下，前行過(guò)程中 的每一個(gè)階段，在參與者看來(lái)，都好像是一種很新奇的玩意兒。不是所有人都喜歡新鮮事物，但是作為確切目標(biāo)的執(zhí)行者，大家必須學(xué)會(huì)新的思維方式與實(shí)踐方法， 并貫徹到實(shí)際工作中。

在本文中，我(英文原文作者)將以公司網(wǎng)站的改版項(xiàng)目作為思路梗概，進(jìn)行工作的回顧總結(jié)，并分析我們的團(tuán)隊(duì)是怎樣在整個(gè)改版過(guò)程中步步為營(yíng)的貫徹用戶體驗(yàn)設(shè)計(jì)思路的。下面的插圖展示了改版前后兩個(gè)版本之間的顯著變化。

UX設(shè)計(jì)團(tuán)隊(duì)(UED)組建伊始

最近，我被法國(guó)的一家主流電子商務(wù)網(wǎng)站聘請(qǐng)去組建一個(gè)用戶體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)。在我赴職之前，這里的UX團(tuán)隊(duì)基本就是一個(gè)愿望良好但組織松散的項(xiàng)目委員 會(huì)，成員包括一名項(xiàng)目經(jīng)理、一名功能及技術(shù)規(guī)范撰寫(xiě)人員，以及一位自稱(chēng)是人機(jī)工程專(zhuān)家的自由職業(yè)平面設(shè)計(jì)師。當(dāng)這個(gè)委員會(huì)無(wú)法就某個(gè)最終設(shè)計(jì)方案達(dá)成一致 時(shí)，他們會(huì)投票；通常的結(jié)果是，他們會(huì)接受全盤(pán)接受彼此的方案，因?yàn)橥镀苯Y(jié)束時(shí)，開(kāi)發(fā)周期所剩下的時(shí)間已經(jīng)不允許他們做任何的修改和迭代了。本質(zhì)上說(shuō)，這 個(gè)UX團(tuán)隊(duì)對(duì)于所謂的“以用戶為中心的設(shè)計(jì)(UCD，user-centered desgin)”或是交互測(cè)試等沒(méi)有任何實(shí)際的進(jìn)程規(guī)劃。

“用 戶體驗(yàn)”的概念適用于任何地方，但要使這個(gè)概念有足夠的吸引力和影響力，以至于可以在組織或公司內(nèi)部形成這樣一個(gè)令人尊敬的部門(mén)，你首先要解決一筐的問(wèn) 題。無(wú)論這個(gè)團(tuán)隊(duì)中是否有真正意義上的管理角色存在，用戶體驗(yàn)設(shè)計(jì)的相關(guān)工作其實(shí)一直存在于整個(gè)組織中，只是在執(zhí)行方式與注意力是否集中等方面，會(huì)有很大 差異。組建UX團(tuán)隊(duì)、樹(shù)立精神與目標(biāo)并將其作為團(tuán)隊(duì)核心價(jià)值焦點(diǎn)——這需要一個(gè)緩慢而穩(wěn)健的過(guò)程，我們不能寄希望于所有的問(wèn)題都能在一夜之間被解決。

然 而，很多人都希望，正式組建起來(lái)的UX團(tuán)隊(duì)可以為那些一直以來(lái)困擾著他們的問(wèn)題帶來(lái)答案。其實(shí)，“用戶體驗(yàn)設(shè)計(jì)”并非用來(lái)獲取答案，它應(yīng)該為項(xiàng)目執(zhí)行方式 的選擇提供建議，或是為更好的設(shè)計(jì)開(kāi)發(fā)流程創(chuàng)建架構(gòu)。所以，一開(kāi)始，我做了很多“傾聽(tīng)”的工作，去了解各方面的問(wèn)題和意見(jiàn)——比如參加了一些項(xiàng)目評(píng)審會(huì)， 或是與設(shè)計(jì)師進(jìn)行交流。在這些傾聽(tīng)與交流的過(guò)程中，有一點(diǎn)我需要清楚，就是在項(xiàng)目的實(shí)際進(jìn)程里，到底是哪些角色對(duì)設(shè)計(jì)方案有最終決策權(quán)。我還要了解目標(biāo)市 場(chǎng)，了解有哪些潛在因素會(huì)使正確的方案在經(jīng)濟(jì)上缺乏可行性；在項(xiàng)目中期，我還必須與IT及軟件架構(gòu)等相關(guān)團(tuán)隊(duì)有效配合。

做過(guò)傾聽(tīng)與交流的工 作之后，我就可以寫(xiě)自己的“腳本”了：我和那些會(huì)與UX團(tuán)隊(duì)密切配合的上下游團(tuán)隊(duì)做了進(jìn)一步的深入交流，特別是產(chǎn)品部以及前端開(kāi)發(fā)人員；在了解了他們?cè)陧?xiàng) 目中的實(shí)際作用和角色后，我開(kāi)始從公司內(nèi)部挖人…我招募到一名人機(jī)工程顧問(wèn)，專(zhuān)門(mén)做眼動(dòng)跟蹤及其他的可用性研究；從市場(chǎng)部搞來(lái)一名有標(biāo)準(zhǔn)化UI設(shè)計(jì)實(shí) 踐經(jīng)驗(yàn)的實(shí)習(xí)生。有了這些人才，我們的UX團(tuán)隊(duì)開(kāi)始吸引人們的目光了；我們收到了越來(lái)越多的關(guān)于提升產(chǎn)品用戶體驗(yàn)的研究需求，并且開(kāi)始逐的步集約規(guī)范內(nèi)部 的設(shè)計(jì)流程。

三大職能要素：信息架構(gòu)、人機(jī)工程、視覺(jué)設(shè)計(jì)

對(duì)于電子商務(wù)網(wǎng)站來(lái)說(shuō)，有三個(gè)重要的方面將成為整個(gè)用戶體驗(yàn)設(shè)計(jì)相關(guān)工作的支柱：信息架構(gòu)、人機(jī)工程和視覺(jué)設(shè)計(jì)。正如前面所說(shuō)，我已經(jīng)挖到后面兩方面的相應(yīng)人員了，并著手招募信息架構(gòu)方面的人才。

我 做了一個(gè)幻燈片，對(duì)相關(guān)部門(mén)進(jìn)行了宣講，描述了UX團(tuán)隊(duì)在補(bǔ)充進(jìn)信息架構(gòu)方面的人員之后會(huì)怎樣有效的改善設(shè)計(jì)流程。我將很多與市場(chǎng)需求相關(guān)的內(nèi)容文案、媒 體文件等作為信息碎片，向大家描述信息架構(gòu)的職能是怎樣將這些重要信息通過(guò)線框圖原型有效的組織起來(lái)的；而人機(jī)工程交互設(shè)計(jì)方面，又是怎樣基于有效組織的 信息架構(gòu)去提升可用性，改進(jìn)交互的；最后，我們的視覺(jué)設(shè)計(jì)師又是怎樣將所有這些整合起來(lái)呈現(xiàn)在頁(yè)面上的。

在招募到了信息架構(gòu)師之后，我就得到了一條完整的設(shè)計(jì)角色鏈條。

另 外，我算了筆帳，并決定再引進(jìn)一名平面設(shè)計(jì)。還記得前面提到過(guò)的那個(gè)自由設(shè)計(jì)師嗎，公司付給他的薪水幾乎與全職設(shè)計(jì)師持平了，但限于兼職的性質(zhì)，我們幾乎 不能與他面對(duì)面溝通，這使得視覺(jué)方面的工作進(jìn)度很難與新團(tuán)隊(duì)的步伐保持一致。一個(gè)全職的、優(yōu)秀的視覺(jué)設(shè)計(jì)師，除了在工作職能中的貢獻(xiàn)之外，對(duì)塑造用戶體驗(yàn) 設(shè)計(jì)團(tuán)隊(duì)的氣質(zhì)、性格和影響力等方面也會(huì)起到重要的作用。

改變團(tuán)隊(duì)觀念

UX團(tuán)隊(duì)的人員到位了，接下來(lái)要進(jìn)入一個(gè)相對(duì)困難的階段了——改變團(tuán)隊(duì)觀念。這里所說(shuō)的團(tuán)隊(duì)不是指UX方面，而是整個(gè)公司內(nèi)部與項(xiàng)目設(shè)計(jì)開(kāi)發(fā)相關(guān)的 組織團(tuán)隊(duì)。我們需要改變的，是其他部門(mén)對(duì)于用戶體驗(yàn)團(tuán)隊(duì)在項(xiàng)目每一個(gè)階段中的產(chǎn)出成果的預(yù)期方式。正如前面講到的，當(dāng)我剛剛赴職時(shí)，UX團(tuán)隊(duì)內(nèi)部的角色劃 分是相當(dāng)模糊的，在其他部門(mén)看來(lái)，其中任何一員都應(yīng)該是全能角色。當(dāng)時(shí)，視覺(jué)設(shè)計(jì)師在產(chǎn)品開(kāi)發(fā)的每個(gè)階段都必須提供完整的“最終”視覺(jué)稿，然后其他相關(guān)部 門(mén)會(huì)根據(jù)這個(gè)“原型”進(jìn)行接下來(lái)的評(píng)審等流程。

我知道，對(duì)于其他相關(guān)部門(mén)的那些多數(shù)沒(méi)有設(shè)計(jì)經(jīng)驗(yàn)的人來(lái)說(shuō)，要讓他們拿著一份未完成的草稿或 是線框圖來(lái)進(jìn)行分析和反饋，確實(shí)不是一件容易的事。但我嘗試著讓他們知道這些初稿和線框圖的價(jià)值——這些原型可以幫助整個(gè)團(tuán)隊(duì)盡快完成初期設(shè)計(jì)方案及后續(xù) 迭代，而不必被那些與當(dāng)前階段無(wú)關(guān)的因素牽扯精力，譬如配色、元素的精確布局等。他們慢慢的明白了，線框圖并不等同于最終的視覺(jué)設(shè)計(jì)稿，它只是一種抽象， 其大的作用是幫助項(xiàng)目相關(guān)人員以及參與可用性測(cè)試的用戶在短時(shí)間內(nèi)針對(duì)最主要的問(wèn)題進(jìn)行反應(yīng)和回饋，而無(wú)需等待視覺(jué)設(shè)計(jì)師花費(fèi)時(shí)間和資源去將大量尚未確 定的元素呈現(xiàn)在高保真視覺(jué)稿中。

交互設(shè)計(jì)與可用性測(cè)試

正如下圖左側(cè)所示，線框圖不需要將頁(yè)面元素精確定位，不需要豐富多樣的配色，不需要看上去像任何最終稿。在進(jìn)入復(fù)雜且耗時(shí)的視覺(jué)設(shè)計(jì)流程之前，我們 使用線框圖進(jìn)行了一些可用性測(cè)試，發(fā)現(xiàn)了很多潛在的障礙與缺陷，有效的避免了這些問(wèn)題遺留到視覺(jué)稿中才被發(fā)現(xiàn)。公司曾經(jīng)的做法是，將可用性測(cè)試環(huán)節(jié)放在進(jìn) 入開(kāi)發(fā)階段之前的倒數(shù)第二部，也就是最終視覺(jué)設(shè)計(jì)流程之前；而我則將它向上游進(jìn)行了推進(jìn)，包括需求討論、評(píng)審等階段，因?yàn)槲覀€(gè)人覺(jué)得可用性測(cè)試更重要的作 用是告訴你哪些東西不OK，而不是哪些東西OK；越早介入，越能發(fā)現(xiàn)問(wèn)題，而不至于到即將進(jìn)入開(kāi)發(fā)環(huán)節(jié)才告訴大家壞消息。

不 僅要早，而且要盡量多的進(jìn)行可用性測(cè)試。強(qiáng)大靈活的設(shè)計(jì)工具可以保證對(duì)原型進(jìn)行迅速修改，為頻繁的測(cè)試奠定基礎(chǔ)。正像多數(shù)同行一樣，我們使用Axure。 在一些成功的項(xiàng)目中，我們使用Axure設(shè)計(jì)交互模型，直接對(duì)這些原型進(jìn)行評(píng)審，驗(yàn)證了很多設(shè)想中的方案，從而為后面的視覺(jué)設(shè)計(jì)流程爭(zhēng)取了大量時(shí)間。

現(xiàn) 在，我們甚至可以在對(duì)兩個(gè)用戶進(jìn)行可用性測(cè)試之后，就立刻調(diào)整和修改那些有問(wèn)題的交互模型與設(shè)計(jì)元素——就在第三名測(cè)試者上手之前。當(dāng)有兩名用戶在頁(yè)面上 的同一個(gè)地方產(chǎn)生了迷惑并停止操作流程時(shí)——他們通常會(huì)說(shuō)“我不知道…我不太清楚需要怎樣做才能完成這一步…”——你就應(yīng)該知道這個(gè)地方一定是存 在著什么問(wèn)題的。

在實(shí)際項(xiàng)目中，我們 有一個(gè)小原則小手段：搞清楚誰(shuí)是當(dāng)前項(xiàng)目中高級(jí)別的決策制定者，尤其是那些對(duì)視覺(jué)相關(guān)問(wèn)題有最終決策權(quán)的人——不要將視覺(jué)稿過(guò)早的交給他們?nèi)ピu(píng)審，他們 會(huì)對(duì)很多在設(shè)計(jì)流程初期無(wú)關(guān)大局的細(xì)節(jié)部分提出過(guò)多的意見(jiàn)，這會(huì)嚴(yán)重打亂設(shè)計(jì)師在流程初期的節(jié)奏。舉個(gè)例子，如果頁(yè)面里有很多的文字內(nèi)容，而設(shè)計(jì)師還沒(méi)有 進(jìn)行到處理這部分內(nèi)容的階段，他們看到當(dāng)前的設(shè)計(jì)稿，多半會(huì)說(shuō)：“在這里多做些圖標(biāo)來(lái)代替文字吧！”…優(yōu)秀的圖標(biāo)設(shè)計(jì)其實(shí)是一項(xiàng)很專(zhuān)業(yè)的工作，它需要 設(shè)計(jì)師投入大量時(shí)間；每一個(gè)圖標(biāo)都必須通過(guò)全部的評(píng)審階段，并且要作為可用性測(cè)試中的專(zhuān)門(mén)一項(xiàng)，保證用戶可以全部理解。本質(zhì)上說(shuō)，圖標(biāo)設(shè)計(jì)工作就好像是巫術(shù)——你要?jiǎng)?chuàng)造很多小巧的象形圖文，并保證他們能夠表達(dá)出正確的含義(下圖展示了設(shè)計(jì)師在制作圖標(biāo)時(shí)的一些手稿)。反饋意見(jiàn)所來(lái)自的決策者的級(jí)別越高，你 就越難把它擱置下，哪怕它會(huì)打亂你的正常流程與步驟。

標(biāo)準(zhǔn)化

創(chuàng)建了風(fēng)格化的線框圖原型，謹(jǐn)慎的使用紙質(zhì)原型——甚至在產(chǎn)品經(jīng)理還在完善需求文檔的時(shí)候，我們就已經(jīng)一步一個(gè)腳印的取得了一些小成果。用戶體驗(yàn)設(shè) 計(jì)的相關(guān)工作在項(xiàng)目早期就介入進(jìn)來(lái)是很重要的，否則，你就很可能必須沿著錯(cuò)誤的早期規(guī)劃路線進(jìn)行跟進(jìn)，更有甚者，產(chǎn)品部門(mén)甚至是開(kāi)發(fā)人員會(huì)交給你一份他們 自己做的、“已經(jīng)通過(guò)評(píng)審和確認(rèn)”的設(shè)計(jì)原型要你去跟進(jìn)，縱使這些原型在多數(shù)時(shí)候根本沒(méi)有可取之處，縱使你拿著設(shè)計(jì)指南與UI規(guī)范向他們指出錯(cuò)誤。

所以我們?cè)陧?xiàng)目任務(wù)之外，還花了不少時(shí)間去編寫(xiě)原型文檔；你至少可以用這些規(guī)范來(lái)向相關(guān)部門(mén)的人員解釋一些標(biāo)準(zhǔn)化模型的功能和流程，讓他們知道不需要重新發(fā)明輪子。

從 整個(gè)產(chǎn)品的角度來(lái)看，初期，你也許需要從UX團(tuán)隊(duì)中劃分出一小部分資源，去協(xié)助一些“低價(jià)值”項(xiàng)目，使功能盡快上線；而團(tuán)隊(duì)的主要精力，將集中放在接下來(lái) 的優(yōu)化與迭代的過(guò)程里，比如將全站的UI元素進(jìn)行風(fēng)格統(tǒng)一化。具有一定規(guī)模的網(wǎng)站中，通常會(huì)有這樣的情況：不同頁(yè)面的表單會(huì)有不同的設(shè)計(jì)，雖然他們的功能 基本一致，但往往會(huì)發(fā)生表單項(xiàng)順序不一致、字體規(guī)則和對(duì)齊方案不一致等等的現(xiàn)象；對(duì)于需要跨越幾個(gè)頁(yè)面的表單操作流程，有時(shí)相同的商品在不同頁(yè)面中的信息 呈現(xiàn)方式也不一致。更不用說(shuō)那些正處于改版狀態(tài)的網(wǎng)站，新舊風(fēng)格往往會(huì)混雜在同一個(gè)頁(yè)面中。我們需要花時(shí)間處理這些問(wèn)題，設(shè)計(jì)出全局化統(tǒng)一化的UI組件和 模塊模型，使用戶在不同頁(yè)面的操作體驗(yàn)保持一致。

UI設(shè)計(jì)規(guī)范

在我們著手對(duì)頁(yè)面UI進(jìn)行統(tǒng)一化的過(guò)程里，一個(gè)大項(xiàng)目順?biāo)浦鄣慕槿肓诉M(jìn)來(lái)——全站的視覺(jué)改版。這是個(gè)好事，我們可以在這個(gè)大項(xiàng)目里完善UI設(shè)計(jì)規(guī)范，還可以同時(shí)基于網(wǎng)站的UI風(fēng)格進(jìn)行企業(yè)識(shí)別(CI)方面的設(shè)計(jì)工作(什么是企業(yè)識(shí)別 / CI)。說(shuō)到CI，其實(shí)可以外包給其他設(shè)計(jì)代理公司，但是我們覺(jué)得他們未必可以很好的挖掘公司品牌深層的本質(zhì)，況且這筆開(kāi)銷(xiāo)也不小，所以還是自力更生了。最后，我們將統(tǒng)一化的UI元素設(shè)計(jì)模式與新的CI標(biāo)準(zhǔn)文檔整合了起來(lái)，包括配色方案、模板參考、圖標(biāo)選擇等方面。

規(guī) 范中，有一篇文檔涵蓋了很多技術(shù)細(xì)節(jié)，其中我們不必自己撰寫(xiě)全部的內(nèi)容，有很多實(shí)施要?jiǎng)t是鏈接到相關(guān)的wiki頁(yè)面的。我們的規(guī)范可以幫助我們有據(jù)可循的 向相關(guān)協(xié)作部門(mén)展示各種設(shè)計(jì)方案的道理，這些可以幫助我們逐步產(chǎn)生影響力，傳播我們的用戶體驗(yàn)設(shè)計(jì)理念與執(zhí)行方式，使我們的團(tuán)隊(duì)可以越來(lái)越多的在新項(xiàng)目初 期就介入其中發(fā)揮作用。

作為UX團(tuán)隊(duì)，我們并沒(méi)有在項(xiàng)目中壟斷設(shè)計(jì)思路，我會(huì)邀請(qǐng)項(xiàng)目中其他相關(guān)部門(mén)的同事按照我們提供的一些游戲規(guī)則去從他們的職能角度思考贗品用戶體驗(yàn)方面的問(wèn)題。

網(wǎng)頁(yè)標(biāo)題：步步為營(yíng)的用戶體驗(yàn)設(shè)計(jì)
文章源于：http://www.muchs.cn/news35/164585.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有用戶體驗(yàn)等

廣告

聲明：本網(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)