UI設計測試題如何做？

產(chǎn)品設計師工作到?3年，設計水平幾乎沒(méi)有差異，那么在求職過(guò)程中，什么才是讓自己脫穎而出的關(guān)鍵呢？本文作者列舉了一個(gè)求職案例，對此展開(kāi)了分析，與你分享。

大環(huán)境：最近一兩年找工作的小伙伴應該深刻感受到互聯(lián)網(wǎng)寒氣逼人，各個(gè)大廠(chǎng)裁員及AI技術(shù)的席卷而來(lái)，對普通設計師來(lái)說(shuō)亞歷山大。

到個(gè)人：聚焦到我們個(gè)人找工作時(shí)，經(jīng)常面試過(guò)程中就被要求做測試題。現在僧多粥少情況下，我們沒(méi)得選。測試題常常是現有產(chǎn)品改版之類(lèi)，那么我們改版到底是如何做呢？

?最近在網(wǎng)上看到一個(gè)求職的設計師提交一份關(guān)于作業(yè)幫的測試題，該求職設計師工作六年，由于測試題沒(méi)過(guò)，他發(fā)出來(lái)想聽(tīng)聽(tīng)大家的修改意見(jiàn)。我在前面一篇《設計師這樣復盤(pán)成長(cháng)更快》提到設計師工作到?3年，設計水平幾乎沒(méi)有差異，在這位求職者身上得到充分證實(shí)，他在設計能力上沒(méi)有任何問(wèn)題。

我們可以看到該設計稿的優(yōu)點(diǎn)：

瓷片區色彩差異明顯，功能訴求清晰，可點(diǎn)擊感強

球區及tab欄圖標繪制規范，視覺(jué)統一，特征明顯，符合目標用戶(hù)審美

banner設計整體設計融入IP形象，加強用戶(hù)對品牌的形象感知

這些優(yōu)點(diǎn)放在三四年前找份工作信手拈來(lái)。但如今市場(chǎng)變了。在設計資源過(guò)剩的情況下，期望得到一份不錯薪水，僅憑「沒(méi)有問(wèn)題」競爭力似乎稍弱了些。

品定位：工具性產(chǎn)品、內容推薦性產(chǎn)品

目標用戶(hù)：小學(xué)、初中、高中學(xué)生及其家長(cháng)

學(xué)生用戶(hù)特征：大腦、身體發(fā)展階段、有強烈好奇心、積極正向的社交、情感需求、個(gè)性化需求

前面分析一直到這里我都感覺(jué)沒(méi)什么問(wèn)題，下面問(wèn)題就來(lái)了~

01 問(wèn)題一：現狀問(wèn)題待深挖

「設計現狀：品牌感知弱；設計樣式陳舊；一致性差、信息層級關(guān)系不明確」

在我司這樣寫(xiě)設計現狀估計被懟，我司一直強調結果導向，也就是說(shuō)這個(gè)設計現狀解決了之后能給產(chǎn)品帶來(lái)什么實(shí)質(zhì)性的好處，如果有如何證明？如果沒(méi)有還有必要花資源去做嗎？

工具性產(chǎn)品特性就是用完即走，內容型產(chǎn)品主要以UGC和PGC為主，品牌感知、設計樣式、一致性問(wèn)題本質(zhì)上是不影響用戶(hù)使用產(chǎn)品的，那么這3個(gè)問(wèn)題其實(shí)對產(chǎn)品來(lái)說(shuō)無(wú)關(guān)痛癢。

如果這里設計師向前走一步深挖一下，以身邊的用戶(hù)做個(gè)定性調研或問(wèn)卷，最后得出具體的3個(gè)問(wèn)題，再根據得出的問(wèn)題推導設計目標，最后把這整個(gè)過(guò)程寫(xiě)到測試題上是非常加分的，每一步合理且嚴謹。

以上是我之前寫(xiě)的設計如何提升話(huà)語(yǔ)權中的設計工作流程，感興趣的同學(xué)可以翻來(lái)看看，其中挖掘問(wèn)題這塊非常重要，直接影響后面的設計目標。

由于前面設計現狀提出的問(wèn)題可能根本不是解決產(chǎn)品真正的問(wèn)題，所以得出的設計目標其實(shí)也是錯誤的推導。單擰出這里設計目標的3個(gè)點(diǎn)，其實(shí)非常套路，因為這3點(diǎn)放在任何產(chǎn)品上都成立。

比如針對電商產(chǎn)品：強化品牌認知、視覺(jué)語(yǔ)言升級、簡(jiǎn)化層級，提升易用性，好像也沒(méi)毛病，面試官看到這里后面不用看都知道你的答案了，那么在視覺(jué)部分如果如果不夠出彩，那么結果可想而知。

02 問(wèn)題二：頁(yè)面布局交互方式

方案A：

方案A和設計改版前布局上幾乎沒(méi)有差異，僅設計樣式上的更新

方案A活動(dòng)區1膠囊banner使用IP形象沒(méi)有考慮拓展，如果換一個(gè)活動(dòng)怎么做出2個(gè)活動(dòng)之間的差異？沒(méi)有給出解決方案

方案A弱化活動(dòng)區2模塊，可以看出是突出瓷片區和球區，解決信息層級關(guān)系不明確這個(gè)問(wèn)題，但是整個(gè)底部色彩明顯就暗沉了，是否符合小初高學(xué)生用戶(hù)的審美？或者說(shuō)有沒(méi)有更合適的方案？或者改版前靠運營(yíng)活動(dòng)拉新，這樣改版造成數據下降怎么解決？

方案B：

1）交互方式

方案B中可以看出該同學(xué)想提升瓷片區和球區點(diǎn)擊率，但是首頁(yè)交互用一個(gè)不太常見(jiàn)的方式去擴充的內容承載能力。可以看到市場(chǎng)上大多數APP首頁(yè)都沒(méi)有加入很復雜的交互方式，對于低齡用戶(hù)是否越簡(jiǎn)單越好呢？當然我這僅是個(gè)猜想需要去證實(shí)。

這讓我想起工作中常常遇到一種情況，產(chǎn)品需求通常是一直加頁(yè)面上加內容，做上個(gè)需求時(shí)，設計需要重點(diǎn)突出模塊A，等到做下個(gè)需求時(shí)設計又要突出模塊B…這樣不停的累積疊加，重點(diǎn)內容越來(lái)越多，界面越來(lái)越花越來(lái)越?jīng)]重點(diǎn)，作為設計師的你是怎么解決呢？

2）頁(yè)面布局

為了創(chuàng )造出人眼遵循的正確途徑，我們需要了解眼睛是如何處理信息的。如果你能預測用戶(hù)的視線(xiàn)將會(huì )占有極大的優(yōu)勢，在布局頁(yè)面元素時(shí)前，你就可以知道優(yōu)先的該擺放在什么位置，一旦你知道你想要用戶(hù)先看到什么，你就能可以通過(guò)視線(xiàn)的規律將你的重點(diǎn)內容放在用戶(hù)的“熱點(diǎn)”里。

所以容易點(diǎn)擊 ≠ 點(diǎn)擊，所以改版前的方案瓷片區+球區放頁(yè)面上方也不能全盤(pán)否定。

頁(yè)面布局的核心——讓用戶(hù)快速獲取信息。不管是看拼多多還是美團，工具型產(chǎn)品更明顯，打開(kāi)APP的最初目的都在界面上尋找信息，找到后就操作，然后繼續找……如此循環(huán)。別說(shuō)你就逛逛，你逛著(zhù)逛著(zhù)為啥就買(mǎi)了，因為你潛意識逛就在判斷這個(gè)東西自己是否需要。

所以點(diǎn)擊流程應該是：訊息被看到 → 判斷是否需要 → 是否點(diǎn)擊。內容放在易點(diǎn)擊區域，只能說(shuō)明該內容容易被操作，那操作動(dòng)機是什么？你再怎么容易點(diǎn)擊，一個(gè)界面就一個(gè)按鈕，他不需要也不會(huì )點(diǎn)，俗話(huà)說(shuō)叫不醒一個(gè)裝睡的人一樣的道理，設計要做的應該是加大這個(gè)點(diǎn)擊動(dòng)機。

截圖右側是目前線(xiàn)上版本，可以看出該產(chǎn)品對不同年齡用戶(hù)精細化運營(yíng)。兩個(gè)版本比較可以看出拍照搜題是該產(chǎn)品核心功能，其它功能針對不同年齡用戶(hù)層設計，2個(gè)版本都遵循第一視覺(jué)區原則。

另外：頁(yè)面內容布局考慮了用戶(hù)習慣，但是我們需要觀(guān)察小孩子使用手機方式，用父母手機、自己手比較小，如果怕摔很可能是雙手去使用手機，而圖示是單手使用手機用戶(hù)的習慣，操作體驗合理性需要證明。

03 問(wèn)題三：內容差異性

在課程推薦這塊融入統一的IP形象，統一的品牌色，封面的差異性需求仔細讀文字才能區分，這個(gè)設計看著(zhù)就很不專(zhuān)業(yè)。

前面學(xué)生用戶(hù)特征：大腦、身體、心理發(fā)展階段強烈好奇，個(gè)性化需求，統一的模板完全違背了用戶(hù)特征，再不濟也可以用課程標題文字字數區分課程封面，3個(gè)字、5個(gè)字、*個(gè)字…不同字數設計不同排版的封面區分不同的課程。

我記得之前K12課程火爆的時(shí)候，封面通常是講課老師形象+不同的背景色區分，既可以傳達老師的專(zhuān)業(yè)性，又可以區分不同的課程，還是比較好的解決方式。

04 如何解決

說(shuō)了這么多相信看到這的同學(xué)肯定會(huì )說(shuō)BB了這么多，咋不看你動(dòng)個(gè)手啊，動(dòng)動(dòng)嘴皮子誰(shuí)不會(huì )??！其實(shí)還是我前面一句話(huà)，設計師工作到3年或以上，設計水平差異性很小，到這時(shí)候是設計思維的差異，是解決問(wèn)題的能力。

例如前面提到提高瓷片區的點(diǎn)擊率，該同學(xué)的解決辦法是改變交互方式放在易點(diǎn)擊區，如果是我，就現狀問(wèn)題這塊，我會(huì )深挖：

周?chē)鶮12用戶(hù)做個(gè)調研，聽(tīng)聽(tīng)用戶(hù)的聲音，及各種渠道的用戶(hù)反饋

競品分析，琢磨差異點(diǎn)背后邏輯

網(wǎng)上可以收集到的各渠道數據表現分析

結合自己使用體驗總結分析

至于如何做調研、做競品分析……這些資料網(wǎng)上很多，后面有機會(huì )可以和大家討論。我們只有在深入了解后重新定義要解決問(wèn)題，重塑設計目標，設計目標定下后就設計執行了。

注：以上僅個(gè)人觀(guān)點(diǎn)，歡迎討論。

本文由 @見(jiàn)賢設計筆記 原創(chuàng )發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。