@小魔女HOHO ：UXD是最近很火的一個(gè)詞，我也總是在想怎么做才能把自己在交互用研上積累的一些知識(shí)融匯貫通到視覺(jué)設(shè)計(jì)領(lǐng)域。嘗試著做了一些摸索，很樂(lè)意把這些經(jīng)驗(yàn)寫(xiě)出來(lái)同大家分享。作為最初期的探索，可能有很多不成熟的地方，歡迎大家留言，我們一切探討學(xué)習(xí)。

可能很多UI設(shè)計(jì)同學(xué)都有過(guò)這樣的疑慮： 我們作為整個(gè)產(chǎn)品設(shè)計(jì)的最后一環(huán)，很容易受到一些局限，冷不丁就成為了交互稿的“填色工具”。越來(lái)越多的UI設(shè)計(jì)師也更傾向于轉(zhuǎn)崗去“話語(yǔ)權(quán)”更大的交互崗位（對(duì)，我一定是個(gè)奇葩）。

很多人都會(huì)認(rèn)為UI設(shè)計(jì)是一件簡(jiǎn)單的事：美術(shù)。關(guān)于設(shè)計(jì)方案的討論也總會(huì)歸結(jié)到個(gè)人偏好上。當(dāng)“從用戶角度出發(fā)”在視覺(jué)設(shè)計(jì)嘴里蹦出，總顯得有那么點(diǎn)力度不足。我們總在強(qiáng)調(diào)用戶體驗(yàn)，但在實(shí)際工作中卻發(fā)現(xiàn)各種各樣的測(cè)試調(diào)研都會(huì)較多的落地到流程和操作面，關(guān)乎視覺(jué)的部分少之又少。

“美感”真的是UI設(shè)計(jì)的唯一評(píng)判標(biāo)準(zhǔn)嗎？ 在UX六項(xiàng)基本原則中，我們?cè)趺醋霾拍茉诒ＷC美感的同時(shí)讓頁(yè)面中每個(gè)元素都“運(yùn)作良好”，用視覺(jué)的手段去促進(jìn)用戶目標(biāo)和商業(yè)目標(biāo)的雙贏？

在這里我打算結(jié)合一些經(jīng)驗(yàn)和探索，用實(shí)際案例，從調(diào)研分析的角度向大家介紹一款適合UI設(shè)計(jì)師的調(diào)研方法－DIY可用性測(cè)試。

Guerrilla Test（又稱DIY可用性測(cè)試）是一種被國(guó)外UE（在Airbnb的官網(wǎng)上就有他們的相關(guān)案例）廣泛認(rèn)同并使用的測(cè)試方法，它屬于小樣本定性測(cè)試，僅需3～5名用戶,每人大約15～20分鐘即可完成。它的目的并不要證實(shí)什么，而是找出并修復(fù)最關(guān)鍵問(wèn)題，同時(shí)捕捉用戶的真實(shí)情感。

調(diào)研目的：針對(duì)滴滴代駕車主福利中心，從視覺(jué)設(shè)計(jì)的角度出發(fā)，找到用戶在產(chǎn)品使用過(guò)程中存在的問(wèn)題，確定后續(xù)視覺(jué)優(yōu)化方向。

和傳統(tǒng)招募方式不同，在DIY test中可以使用人脈招募的方式，通過(guò)朋友、朋友的朋友去找到相關(guān)的產(chǎn)品用戶。在車主福利中心的測(cè)試中，我們通過(guò)人脈招募的方式聯(lián)系到不同等級(jí)的代駕會(huì)員共4名。

在具體測(cè)試中，我們分成提問(wèn)－瀏覽－任務(wù)－分析這幾大步驟。

提問(wèn)

首先，我們需要對(duì)參與者的一些個(gè)人情況進(jìn)行詢問(wèn)，使他們放松并對(duì)其做發(fā)聲思維引導(dǎo)。同時(shí)通過(guò)這些基本信息，我們能夠更好的判斷測(cè)試用戶對(duì)產(chǎn)品目標(biāo)用戶而言處于一個(gè)怎樣的水平。

在車主福利中心的測(cè)試中，我們主要針對(duì)參與者的職業(yè)，愛(ài)好、車型、代駕場(chǎng)景等問(wèn)題進(jìn)行了一些提問(wèn)。

界面瀏覽

提問(wèn)之后，我們正式進(jìn)入界面測(cè)試環(huán)節(jié)。界面瀏覽的目的是通過(guò)一系列問(wèn)題去了解用戶對(duì)界面的感知是否符合設(shè)計(jì)預(yù)期。

在車主福利中心的測(cè)試中，我們針對(duì)車主福利中心首頁(yè)的設(shè)計(jì)，就三個(gè)問(wèn)題對(duì)用戶進(jìn)行了提問(wèn)：

（注：該圖為設(shè)計(jì)效果圖，實(shí)際金卡會(huì)員的等級(jí)、活動(dòng)、工具等依線上具體環(huán)境而定）

Q1: 這個(gè)頁(yè)面中什么地方最吸引您？

目的：測(cè)試頁(yè)面視覺(jué)呈現(xiàn)是否做到了主次分明，對(duì)于產(chǎn)品戰(zhàn)略的重點(diǎn)部分，是否給予了足夠的視覺(jué)比重？

Q2: 您認(rèn)為這個(gè)頁(yè)面的作用是什么？

目的：測(cè)試頁(yè)面視覺(jué)設(shè)計(jì)是否向用戶傳遞了正確功能引導(dǎo)？

Q3: 當(dāng)您使用這個(gè)頁(yè)面的時(shí)候，您會(huì)用它提供的哪些功能或服務(wù)？

目的：測(cè)試頁(yè)面的視覺(jué)設(shè)計(jì)是否很好符合了我們的商業(yè)預(yù)期，用戶對(duì)此是歡迎還是排斥？

在每一個(gè)提問(wèn)環(huán)節(jié)，設(shè)計(jì)師都要做到刨根問(wèn)底，鼓勵(lì)用戶說(shuō)出最真實(shí)的想法和原因，最后很有可能獲取到完全出乎意料的結(jié)果。

任務(wù)測(cè)試

任務(wù)測(cè)試是DIY test的重點(diǎn)，也是從前期準(zhǔn)備到后期數(shù)據(jù)整理花費(fèi)時(shí)間最多的部分, 主要分為問(wèn)題排查－任務(wù)設(shè)計(jì)－任務(wù)執(zhí)行三個(gè)環(huán)節(jié)。

問(wèn)題排查

由于是針對(duì)視覺(jué)設(shè)計(jì)進(jìn)行的用戶測(cè)試，我們首先要按照一定的順序?qū)?yè)面中的視覺(jué)元素進(jìn)行逐一梳理。

以車主福利中心為例，該頁(yè)面自上而下分為：會(huì)員板塊、特權(quán)／福利板塊、專屬福利板塊、小工具板塊及活動(dòng)板塊。每個(gè)板塊都由一系列視覺(jué)元素構(gòu)成，我們需要測(cè)試的就是每一個(gè)視覺(jué)元素能否各司其職去完成自己的使命。

在針對(duì)這些視覺(jué)點(diǎn)準(zhǔn)備問(wèn)題時(shí)，我們可以把自己想象成用戶，跳出UI設(shè)計(jì)的框去思考：如果我是用戶，我在使用這個(gè)界面的時(shí)候會(huì)對(duì)每個(gè)視覺(jué)元素有什么不同的看法？我知道什么地方可點(diǎn)，什么地方不可點(diǎn)嗎？我會(huì)先閱讀文字還是圖形？我能正確理解這些圖形元素的意思嗎？它們向我提供了正確的引導(dǎo)還是反而讓我更加迷惑？

以會(huì)員板塊為例，它包含的視覺(jué)元素有用戶頭像，用戶等級(jí)，用戶姓名、代駕頻次、升級(jí)進(jìn)度以及最右頁(yè)面跳轉(zhuǎn)引導(dǎo)箭頭。我們?cè)趩?wèn)題梳理的時(shí)候這么詢問(wèn)自己：如果我是用戶，我能清楚判斷出當(dāng)前等級(jí)嗎（對(duì)應(yīng)元素：背景圖及對(duì)應(yīng)icon／文字）？我清楚大概還要多久才能晉升到下一等級(jí)嗎（對(duì)應(yīng)視覺(jué)元素：中間文字信息及進(jìn)度條）？我知道如何查看到關(guān)于會(huì)員等級(jí)的更多信息嗎（對(duì)應(yīng)視覺(jué)元素：最右跳轉(zhuǎn)箭頭）？

在問(wèn)題梳理時(shí)，可以使用FreeMind對(duì)頁(yè)面視覺(jué)元素及對(duì)應(yīng)功能按照自上而下的順序去做梳理，猜測(cè)每個(gè)元素可能給用戶帶來(lái)怎樣的誤解，每個(gè)誤解背后對(duì)應(yīng)的是怎樣的視覺(jué)問(wèn)題。

任務(wù)設(shè)計(jì)

問(wèn)題梳理完畢后，我們對(duì)相關(guān)部分進(jìn)行整合，組織成一個(gè)個(gè)包含情景及限制條件的小任務(wù)，同時(shí)每個(gè)任務(wù)在實(shí)際完成的過(guò)程中又可以拆分成一個(gè)一個(gè)的子任務(wù),通過(guò)用戶完成任務(wù)的過(guò)程對(duì)每一視覺(jué)元素的運(yùn)作問(wèn)題進(jìn)行分析判斷。

在任務(wù)設(shè)計(jì)的時(shí)候需要注意以下幾點(diǎn)：

1、不要給出任何相關(guān)的線索

2、不要使用專業(yè)術(shù)語(yǔ)

3、?添加有用的情景，去除無(wú)用的情景細(xì)節(jié)。

在任務(wù)設(shè)計(jì)時(shí)，需避免使用頁(yè)面中的文字提示，以防用戶不是去完成任務(wù)，而是去尋找相關(guān)詞語(yǔ)。而添加情景是為了讓用戶自主的去利用我們提供的視覺(jué)元素完成任務(wù)，而不是像機(jī)器人一樣，在接到指令之后“尋找”相關(guān)的視覺(jué)元素：添加合適的情景是在DIY Test測(cè)試中是一個(gè)非常重要的環(huán)節(jié)。

仍舊以頂部會(huì)員的UI測(cè)試為例，首先我們對(duì)每個(gè)可能存在的問(wèn)題都進(jìn)行了羅列。

在這所有問(wèn)題中，我們覺(jué)得用戶可能對(duì)不同等級(jí)的感知較弱（icon和對(duì)應(yīng)的背景），同時(shí)右側(cè)箭頭的引導(dǎo)可能不是很明顯。這兩點(diǎn)會(huì)成為該板塊引起較差用戶體驗(yàn)最主要的部分。因此我們?cè)卺槍?duì)會(huì)員板塊的任務(wù)設(shè)置中將主要就這兩點(diǎn)疑慮進(jìn)行測(cè)試。

測(cè)試目的：判斷會(huì)員等級(jí)設(shè)計(jì)是否明確，頁(yè)面跳轉(zhuǎn)引導(dǎo)是否正確

任務(wù)執(zhí)行

在任務(wù)執(zhí)行環(huán)節(jié)，首先設(shè)計(jì)師要做到不去打擾到參與者，鼓勵(lì)他們做每一步操作的時(shí)候都盡可能說(shuō)出自己心中的想法。如果遇到參與者提問(wèn)，可以巧妙的將問(wèn)題重新拋還回去，切忌不要給予任何的提示。

其次，當(dāng)參與者無(wú)法順利完成任務(wù)，或者出現(xiàn)一些不良的情緒，比如暴躁，沮喪的時(shí)候，應(yīng)該立刻終止任務(wù)的繼續(xù)，表示感謝后進(jìn)入下一個(gè)任務(wù)或下一測(cè)試環(huán)節(jié)。

如果對(duì)參與者的某些操作有所疑慮，或者任務(wù)的部分無(wú)法覆蓋到所有需要測(cè)試的點(diǎn)，可以將有問(wèn)題的部分記下，待整個(gè)測(cè)試結(jié)束后再進(jìn)行詢問(wèn)。

提一下在做調(diào)研過(guò)程中的一些注意事項(xiàng)：

1、無(wú)論如何都不要向參與者提供任務(wù)相關(guān)的線索；

2、不能回答他們的任何關(guān)乎任務(wù)的問(wèn)題，而是用“您覺(jué)得呢”直接拋還回去；

3、不能透露出自己的觀點(diǎn)，如“這個(gè)功能很好用，這個(gè)部分很又吸引力”，也不要附和參與者的類似觀點(diǎn)；

4、可以說(shuō)的是“好的”“可以”或者是對(duì)參與者話的附屬

數(shù)據(jù)分析

完成整個(gè)測(cè)試之后，我們需要對(duì)所收集的數(shù)據(jù)進(jìn)行整理分析。

在車主福利中心測(cè)試中，我們分別統(tǒng)計(jì)了每個(gè)任務(wù)的完成情況，并針對(duì)完成度較弱的任務(wù)進(jìn)行操作步驟的拆解與進(jìn)一步分析。

任務(wù)完成情況統(tǒng)計(jì)

在任務(wù)完成情況統(tǒng)計(jì)中，橫向代表任務(wù)編號(hào)，縱向代表用戶編號(hào)。這里會(huì)涉及到3個(gè)不同分值：

1分:?參與者無(wú)法完成任務(wù)

2分:?參與者經(jīng)過(guò)一些試錯(cuò)和誤操作之后完成任務(wù)

3分:?參與者準(zhǔn)確、迅速的完成任務(wù)

（上圖表格僅為示例，并非實(shí)際調(diào)研結(jié)果）

假設(shè)任務(wù)與參與者的數(shù)量均為4，則每項(xiàng)任務(wù)的總分為4～12分，共分三個(gè)等級(jí)：

4～6分：任務(wù)完成度極低－急需改進(jìn)

7～9分：任務(wù)完成度低－需改進(jìn)

10～12分：任務(wù)完成度高－不需改進(jìn)

步驟拆解分析

在分析完任務(wù)完成率后，我們需要對(duì)那些分值較低，參與者出現(xiàn)問(wèn)題較大的任務(wù)做步驟拆解，去了解用戶究竟是在哪一步操作中出現(xiàn)問(wèn)題才導(dǎo)致的完成情況較差。

在這個(gè)分析中，我們把出現(xiàn)問(wèn)題的視覺(jué)點(diǎn)歸位三類：操作、知覺(jué)、認(rèn)知

操作：視覺(jué)上可點(diǎn)／不可點(diǎn)的狀態(tài)設(shè)計(jì)存在誤導(dǎo)，致使用戶進(jìn)行誤操作；

知覺(jué)：重要文字或圖標(biāo)過(guò)小，用戶難以察覺(jué)或直接忽略；

認(rèn)知：對(duì)圖標(biāo)圖形的理解出現(xiàn)歧異，有悖設(shè)計(jì)初衷；

其中對(duì)于出錯(cuò)頻率大的操作，還需要配以具體截屏及輔助說(shuō)明。

仍舊以頂部會(huì)員部分為例，下圖為會(huì)員部分一些操作問(wèn)題，錯(cuò)誤類型，頻次以及對(duì)應(yīng)的截圖解釋說(shuō)明。

優(yōu)化方向分析

最后，我們需要將整個(gè)測(cè)試每個(gè)環(huán)節(jié)提取出來(lái)的優(yōu)化方向做一個(gè)匯總。依然是按照頁(yè)面自上而下的順序進(jìn)行羅列，將那些嚴(yán)重的問(wèn)題標(biāo)紅作為高優(yōu)先級(jí)進(jìn)行處理。在redesign的時(shí)候盡量通過(guò)微調(diào)的方式去解決，而不是推翻重來(lái)。

總結(jié)

Guerrilla Test 是一種比較簡(jiǎn)單的測(cè)試方法，較容易上手，同時(shí)也可以讓我們跳出設(shè)計(jì)的框架去更深入的了解用戶的思維。這里給大家列舉的是針對(duì)代駕車主福利中心的一個(gè)測(cè)試，但是相同的方法和步驟也可以用到其他的界面測(cè)試環(huán)節(jié)中。

當(dāng)然，一輪的測(cè)試和修改并不是終點(diǎn)，而是不斷優(yōu)化迭代的中的一步。在后面的設(shè)計(jì)中，我們也會(huì)按照這種不斷測(cè)試不斷改進(jìn)的步驟去更好的優(yōu)化滴滴代駕車主福利中心的設(shè)計(jì)，當(dāng)最終設(shè)計(jì)令我滿意的時(shí)候，也會(huì)再次把如何通過(guò)數(shù)據(jù)做再設(shè)計(jì)的這個(gè)過(guò)程分享給大家。

希望那一天快點(diǎn)到來(lái)吧，哈哈。

最后感謝靜靜同學(xué)全程和我一起腦暴、整理、調(diào)研。

「用一個(gè)案例教你學(xué)東西系列」

1. 智能對(duì)象丨《用一個(gè)實(shí)戰(zhàn)教程，讓你學(xué)會(huì)智能對(duì)象》
2. 直方圖丨《用一個(gè)后期教程，幫你學(xué)會(huì)利用直方圖破解圖像的方法》
3. 圖層樣式丨《做一個(gè)實(shí)戰(zhàn)教程，讓你學(xué)會(huì)圖層樣式9大技能》
4. 設(shè)計(jì)流程丨《用一個(gè)實(shí)戰(zhàn)案例，幫你認(rèn)識(shí)完整的設(shè)計(jì)流程》
5. 總監(jiān)思考方式丨《用一個(gè)簡(jiǎn)單的體重記錄功能，揭秘UI設(shè)計(jì)總監(jiān)的思考過(guò)程》
6. 交互思考方式《用一個(gè)文本框，讓你學(xué)到交互設(shè)計(jì)師的邏輯思考方法》
7. 交互面試題丨《用一個(gè)框架，幫你學(xué)會(huì)這個(gè)最常見(jiàn)的交互面試題》
8. 數(shù)據(jù)驗(yàn)證交互丨《用一個(gè)實(shí)戰(zhàn)案例，幫你學(xué)會(huì)用數(shù)據(jù)驗(yàn)證產(chǎn)品設(shè)計(jì)》
9. 復(fù)雜界面設(shè)計(jì)丨《用一個(gè)實(shí)戰(zhàn)案例，教你學(xué)會(huì)復(fù)雜界面的布局設(shè)計(jì)》
10. 視覺(jué)改版方法丨《用一個(gè)實(shí)戰(zhàn)案例，教你學(xué)會(huì)視覺(jué)改版的方法》
11. 用戶體驗(yàn)研究丨《用一個(gè)實(shí)戰(zhàn)案例，帶你從零開(kāi)始做用戶體驗(yàn)研究》
12. 設(shè)計(jì)沖刺法丨《用一個(gè)實(shí)戰(zhàn)案例，幫你快速學(xué)會(huì)現(xiàn)在最火的設(shè)計(jì)沖刺法！》
13. 交互思考方式丨《用一個(gè)實(shí)戰(zhàn)案例，帶你學(xué)習(xí)交互設(shè)計(jì)師的思考方式》
14. 重設(shè)計(jì)思路丨《用一個(gè)實(shí)戰(zhàn)案例，幫你學(xué)會(huì)講述重設(shè)計(jì)作品的思路》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com