交互設計師是如何思考一個問題的?

交互設計師是如何思考一個問題的?

交互設計師是如何思考一個問題的? ,觀點,呆總丶,原創文章站酷網,中國設計師互動平台。

最近,有讀者發來一個問題,內容大概是這樣:

呆總,這個頁面裡我畫圈的模塊現在只有2 個選項,如果有15 個選項的話,那我要怎麼設計呢?

這類問題其實不難回答,但業務不明確,以至於無法給出符合問題本身的答案。這位讀者這麼問,應該是想要我直接給出形式上的設計建議。

但是,我不知道這個模塊的作用,頁面缺少上下文的聯繫,也就不知道它要解決用戶什麼問題,更不知道選項變多至15 個的原因。只能大致猜測是選擇其中一種福利,但不知道是在什麼情況下的一種選擇,以及選擇之後,對下面模塊內容的影響。

比如,當我看到福利選擇,先入為主的會認為如果餐補福利價值800,交通優惠價值1000,那所有人應該都會選擇交通優惠的額度為15%,期限選3 個月吧?

這是我在這個問題中無法理解的部分,導致我給不出明確的方案,所以也就不想隨便就給出一些形式上的建議了。

因為我很可能通過上下文的聯繫與業務的理解,從而去推翻目前這個界面的設計形式,採用另一種更合理的方案。

所以,如果要回答讀者這種具有不確定性的問題,幾乎就要把所有可能性提出來發給對方,這基本不可能。

而各種業務情況所面對的方案可能性都是不一樣的,甚至可能導致產出的方案是相互矛盾的。所以在解決這個問題前,得先知道功能的作用,用戶的目的,解決的問題與場景等,也就是業務內容得知曉。

否則,就沒辦法給出一個清晰的答案,到最後更多就只能是形式上的討論了。而純粹形式的考量有時候缺少背後的依據,會浪費掉不必要的時間。

這是許多人如今都存在的一個問題,類似於發一個界面,問交互形式如何改進。

在不知道業務情況與產品功能信息的前提下,一個界面的修改,只能從佈局上做優化,而佈局的設計通常要知道界面元素的優先級,以及功能所要傳遞的信息,什麼都沒有,最終只能討論形式,是非常表面的。類似於在dribbble 找設計靈感一樣,浮於表面。

這是我在後台收到的絕大多數無法回答的問題的原因之一—— 問題不夠明確。

舉個例子。

我常常看到一類讀者會去分析某個設計形式的優劣,類似於截一張這樣的圖,說:

這個搜索設計的形式不錯,會根據用戶搜索的內容通過搜索發現給用戶推薦相似的商品。

這一類內容的學習,如果只是這樣去做功課,就會陷入跟上面那個問題一樣的困境—— 浮於表面。

一個產品功能,需要搜索發現的時候,當然會放一個搜索發現,也知道它是用來給用戶做推薦的。這樣的案例收集與說明,幾乎沒有任何學習的價值。

想要對產品功能做詳細的了解,至少要知道,它們依附於某個產品背後的一些規則是怎麼樣的。

比如,在淘寶裡,它是幫用戶找到更多匹配的信息,那它的推薦邏輯是怎麼樣的呢?搜索上限有多少個?是根據目前的搜索行為做推薦還是根據搜索的歷史記錄做推薦?或者是根據平時瀏覽的商品做相應的推薦?還要比對搜索前中後,關鍵詞出現的差異。等等。

那如果是在知識付費類產品裡做這個功能呢?沒有海量數據的支撐,如何給用戶的搜索進行另外的內容推薦?怎麼通過用戶搜索行為去綁定已有課程與搜索發現的規則?

這樣深入的去了解,使用,才可能獲知這類功能存在的邊界情況,對它有一個更全面的了解。

往後如果自己的產品要加入類似的功能,那考量的點就可以有很多,規則的定義具體都是要根據實際的業務情況來看的,不能只留戀於形式。

我通常會在網上看到這樣一類文章,大概是「解決問題的通用方法論」,或者「思考問題的通用性法則」類似的內容,一般來說不會去多看幾眼,原因是我始終秉承「具體問題,肯定得具體分析」的原則。

可能有許多人會認為,解決問題就是有一種方法的,於是把時間與精力都放在找方法上。

不說這類內容完全沒用,但至少就這麼去按照別人給出的路徑思考問題,重心一定是在路徑上,而不是問題本身,這是大多數這類方法論所存在的問題。

類似於番茄工作法,工作25 分鐘,休息5 分鐘…我常常因為深入去思考一個問題,而不知不覺就過去幾小時。如果按照這樣的工作方法,25 分鐘就要被干擾一次,效率反而會下降。

這跟上面聊的內容其實是一樣的道理。對於功能設計的思考,也是需要具體考量的,不存在所謂的統一方法去解決問題。

愛因斯坦說過的一句話很符合現在聊的內容,他說:“如果我有20 天來解決一個問題,我就會用19 天來定義它,最後1 天去得出最終的方案。”

但是如今許多設計師往往拿到問題的第一時間,就會打開sketch,開始表達呈現方式,而不是對問題本身進行思考,或者希望有一個具體的方法,能幫自己想到所謂正確的方案,直接去產出。

要知道,設計是一種「視覺化的思考」,而不是單純的「視覺化」。當我們打開軟件開始畫稿時,大部分的研究工作就應該已經完成了,呈現出來的結果是通過嚴謹地推導所得到的,而不是僅僅為了好看。

但是,現在大多數設計師的工作方式並不是這樣。

於是,當我們開始思考它的呈現方式時,應該先回溯一下問題本身的背景與各種情況。

譬如,開頭那個問題。

案例:直播間送禮面板的設計差異

讀者提問:

最近領導要求對直播間送禮面板做改版,我去找了一些競品做了分析,發現很多直播間開始支持橫屏模式。在橫屏模式下,有兩種禮物面板的佈局形式,第一種是以B 站為例的送禮面板,由下彈出;第二種是以Look 直播為例的右側滑出。是什麼原因導致這兩種設計的差異呢?

B 站禮物面板

網易Look 直播禮物面板

大家都知道,B 站文化的核心之一就是彈幕,甚至延伸出了一種彈幕文化類似的說法,雖然我對彈幕不是很了解,但是從中可以看出,彈幕對於B 站而言,或者說對於B 站用戶而言,是非常重要的。很多時候,它的重要性甚至與直播內容難分伯仲。類似於,一個很好看的視頻,少了彈幕,總覺得少點滋味。而一個內容一般的視頻,加上有趣的彈幕,也同樣能吸引用戶的注意。

不知道你是不是也這樣,我自己不看彈幕,感受不深,其他B 站的深度用戶是這麼跟我說的。大意是,沒有彈幕的B 站是沒有靈魂的。

在B 站,用戶對於彈幕的依賴性很強,從這個角度看來,它的直播間禮物面板從下方彈出就比較容易理解了—— 與彈幕信息互不干涉。

大概是,要設計一個送禮面板,不知道怎麼佈局,思考過後得出一個結論,一定不能擋住彈幕。那形式選擇就很清楚了。

即使和豎屏模式禮物面板設計差異較大也不得不接受這種形式。算是一種「因地制宜」的良策吧?

另外,還可以通過一個細節來驗證上面這個觀點。

如果去對比B 站直播間橫屏和豎屏的彈幕差異,會發現在豎屏狀態下,彈幕經常會撐滿整個直播畫面。其中送禮氣泡與互動區都在畫面下方,畫面中只有彈幕。

這時候再橫過來,會發現彈幕數量即使在很多的情況下,也會離畫面底部一段距離。包括送禮氣泡也會顯示在畫面中,但它與底部也會有一段距離。

這時候打開禮物面板,就能發現這個距離的尺寸,正好就是禮物面板的高度。

所以從這點也能看出,是特意分隔開彈幕與面板,為的就是不能讓面板擋住彈幕,同樣也不能讓彈幕影響送禮。

而互動區直接被去掉了,在畫面中沒有保留。因為互動區的互動信息會以彈幕的形式顯示在畫面中,至於系統消息,如「誰進入直播間」的提示,在B 站中的優先級,沒有彈幕高,所以在左下角提示,即使送禮面板將其蓋住也沒什麼影響。

這就是B 站在直播間如此設計送禮面板的原因。

而類似於Look 直播的橫屏模式,禮物面板則是從右側滑出。

同樣的道理,Look 這一類的秀場直播,無論是用戶發言還是系統信息,在橫屏模式下,都處於左下角的互動區裡,因為它沒有彈幕,所以側滑禮物面板是更好的選擇。

但是有一些產品,比如快手,會同時留有左下角的互動區與彈幕,那就要衡量自身產品的彈幕優先級,如果優先級不高,優先顯示左下角的整合互動區,反而是一種省力的方式。這時禮物面板從右側滑出,也不會影響整體的頁面佈局。

快手禮物面板及彈幕消息

而像抖音的部分直播間,在橫屏模式下,就只有彈幕,沒有互動區。如果仔細觀察甚至能發現,抖音的橫屏模式下,所有信息都會以彈幕形式出現於屏幕上,包括互動消息,系統提示等,數量多的情況下甚至會填充整個屏幕。這時候點擊送禮面板,竟然是右側滑出。

這樣的設計形式對比一下就知道B 站的橫屏模式設計的更為精緻,區分了系統提示、彈幕消息、送禮面板等,分佈非常明顯。而抖音的各個模塊相對就比較亂,送禮面板模塊的出現又影響了頁面內容的其他信息。就導致頁面中的信息層級與佈局都稍顯混亂。

這兩個案例有一個知識點,就是「信息優先級決定佈局形式」。

什麼叫做信息優先級?大致意思就是一個界面上的信息是根據從重要到次要的規則排序的。

比如在直播間,最重要的信息一定是直播內容,其他信息都是根據直播內容附帶產生的,正是因為直播內容引髮用戶打賞慾望,於是點擊送禮按鈕,彈出送禮面板。

而面板的展示形式還需要根據頁面中的其他內容平衡佈局,比如彈幕優先級,或互動區優先級等等,它們之間要有序排列,不能互相干擾。比如B 站與Look 直播這兩類產品的設計差異。

而抖音橫屏模式的送禮面板如此設計,將整個頁面內容的信息都打亂了,並不可取。

這叫內容聚焦點的缺失,各位要尤其註意。

另外,從內容聚焦點再引出一個知識點,是關於視覺體驗的,也就是UI 在設計類似頁面的過程中,需要注意的體驗性。

大家能看到上面這張圖,B 站的送禮面板高度,是小於半個屏幕的,包括透明度也是,依稀能穿透到直播畫面中,雖然有切割感,但還能接受。

而Look 的磨砂玻璃似的設計,使得畫面切割感很嚴重,導致送禮過程中,超過一半的直播畫面被遮擋了。我相信這個過程可能是會影響用戶送禮慾望的。比如產生送禮想法,但是精彩時刻,想到點擊送禮會遮擋畫面,那等會送好了,於是就忘了,或是算了。

像上面的例子中,快手的界面雖然也採用右側滑出的設計,但是它的送禮面板寬度設計的比較小,正是考慮了上面提到的這個原因。

所以各位在設計直播間類橫屏模式的送禮面板時,尤其需要注意文中提到的這幾點。

如果對你有幫助,記得三連:)

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。