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

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

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

“美感”真的是UI設(shè)計的唯一評判標準嗎？ 在UX六項基本原則中，我們怎么做才能在保證美感的同時讓頁面中每個元素都“運作良好”，用視覺的手段去促進用戶目標和商業(yè)目標的雙贏？

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

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

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

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

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

提問

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

在車主福利中心的測試中，我們主要針對參與者的職業(yè)，愛好、車型、代駕場景等問題進行了一些提問。

界面瀏覽

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

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

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

Q1: 這個頁面中什么地方最吸引您？

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

Q2: 您認為這個頁面的作用是什么？

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

Q3: 當您使用這個頁面的時候，您會用它提供的哪些功能或服務(wù)？

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

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

任務(wù)測試

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

問題排查

由于是針對視覺設(shè)計進行的用戶測試，我們首先要按照一定的順序?qū)撁嬷械囊曈X元素進行逐一梳理。

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

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

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

在問題梳理時，可以使用FreeMind對頁面視覺元素及對應(yīng)功能按照自上而下的順序去做梳理，猜測每個元素可能給用戶帶來怎樣的誤解，每個誤解背后對應(yīng)的是怎樣的視覺問題。

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

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

在任務(wù)設(shè)計的時候需要注意以下幾點：

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

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

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

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

仍舊以頂部會員的UI測試為例，首先我們對每個可能存在的問題都進行了羅列。

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

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

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

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

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

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

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

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

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

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

4、可以說的是“好的”“可以”或者是對參與者話的附屬

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

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

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

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

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

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

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

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

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

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

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

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

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

步驟拆解分析

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

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

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

知覺：重要文字或圖標過小，用戶難以察覺或直接忽略；

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

其中對于出錯頻率大的操作，還需要配以具體截屏及輔助說明。

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

優(yōu)化方向分析

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

總結(jié)

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

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

希望那一天快點到來吧，哈哈。

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

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

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

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

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