聊聊 UI 設計中的潛臺詞
編輯導語:對一個產品而言,除了自身的內容之外最重要的便是設計了。對于設計每個人都有自己不同的審美和想法,那么該如何做出好的設計呢?本文從潛臺詞這一角度來介紹如何搞好設計,讓我們一起來看看吧!
在設計工作中,我常常會聽到各種各樣對于設計的建議,包括但不限于:
- “這個頁面的感覺不太對”
- “需要再加一些氛圍感”
- “這段信息有點干”
- …
這些問題就像五顏六色的黑一樣讓人難以捉摸。本文嘗試從另一個角度觀察這些看似捉摸不定的問題,和大家一起聊聊“潛臺詞”在 UI 設計中的作用。
文章提綱:
- 為什么思考設計中的潛臺詞
- 何為設計中的潛臺詞
- 潛臺詞的作用
- 寫在最后
一、為什么思考設計中的潛臺詞
我對潛臺詞的思考起源于“微信游戲名片”的設計 ——微信游戲名片是在游戲 app 中展示玩家游戲信息的名片,讓玩家可以在不同的游戲中查看其他人的微信游戲信息,以此來方便玩家間的社交活動。
當時的設計采用了和微信客戶端風格一致的設計語言,強化微信的渠道認知,界面的信息結構也簡單清晰。
但是,這個設計在上線后卻沒能得到很好的反饋:有用戶說感覺太生硬,像小廣告;有用戶表示正在玩游戲的時候不想點開這個東西。
為什么簡單清晰的設計會有問題,這讓我開始思考:我們在做設計的時候是不是漏了些什么?想要知道漏了什么,就要搞清楚UI 設計是在設計什么。
UI 設計是在設計什么,從書上和網絡資料上不難得到如下的回答:
- 設計信息的包裝與排布
- 設計是整理信息的藝術
- 設計的本質是交流,也就是信息的交換
- …
其中繞不開的一個詞就是“信息“。
“信息”是視覺設計最基礎的元素,設計師通過整合文字、照片、聲音等信息,來吸引用戶的注意力,讓用戶更輕松地注意到頁面里的核心內容。
我發現很多時候,除了文字、照片等直觀可讀的信息之外,用戶的注意力常常會被其他東西吸引,我覺得可以把它們歸納為 —— UI 中的潛臺詞。
二、何為設計中的潛臺詞
在工業設計界很早就有類似“物品潛臺詞”的討論,比如大家都很熟悉的唐·諾曼說過:
物品能夠表現出兩種示能 (affordance),一是物件實際上承擔的物理特質,二是使用者察覺到物件的提示性特質?!?/p>
這里的提示性特質,也就是物品所傳達出的潛臺詞。
舉兩個例子,都來自深澤直人的設計:左圖沒有任何文字說明也能讓人知道這是一瓶香蕉汁,因為它就畫成香蕉的樣子,傳遞出“這是一瓶香蕉汁”的提示性。右圖是一盞臺燈,使用者會自然而然把鑰匙、手表等隨身小物件在燈的底座上,因為底座的造型像一個托盤,傳遞出“可以盛放小物件”的提示性。
就像物品的信息可以分“物理特質”和“提示性特質”,我覺得 UI 計中的信息也可以用同樣的維度分為“直接信息”和“潛臺詞信息”。
設計師通過顏色、形狀、圖案、質感等手法構建出視覺的潛臺詞,以此來營造氛圍、喚起用戶情緒、或者引發用戶的回憶和思考。
三、潛臺詞的作用
這里主要想探討我在日常工作中感受到的潛臺詞的三個作用:傳遞隱藏信息、建立情感連接、減少認知成本。
1. 傳遞隱藏信息
回到前文提到的微信游戲名片,通過潛臺詞的角度看這個界面,發現頭部幾款游戲的界面大多是暗色風格,潛臺詞就像是在說:開始專注的玩耍吧。想要給玩家帶來一種專注、沉浸的心流體驗。
而游戲名片的設計明亮清晰,潛臺詞是高效冷靜的平臺功能。兩者之間潛臺詞的差異,可能就是用戶覺得奇怪的原因。
若想要玩家的心流體驗不被擾亂,就需要讓名片傳遞與游戲 UI 連貫的視覺潛臺詞。因此我添加了通用的游戲元素點綴,并且將卡片整體改為暗色模式,得到了新版游戲名片的設計。
如下是新舊兩個方案的對比,新的游戲名片通過傳遞和游戲主頁面一致的潛臺詞(專注、沉浸),減弱了突兀的插入感,兼容大部分的游戲風格,讓玩家在游玩和社交的過渡中有更連貫的體驗。
從這個項目中可以看到,潛臺詞會傳遞隱藏的信息,對這些潛臺詞信息加以運用,可以讓體驗路徑更加流暢。
2. 建立情感連接
這里的案例是游戲禮品站的設計 —— 禮品站是一個支持玩家之間贈送游戲道具和游戲周邊的小程序。
在負責禮品站設計的時候,產品經理常常會問這樣一個問題:這個頁面能不能更有氛圍感?
什么是氛圍感?這問題就像五顏六色的黑一樣難以琢磨。從潛臺詞的角度來看,問題似乎簡單了一些:就是在傳達“直接信息”之余,通過視覺語言傳遞給用戶更多的情感信息。那么我就有了一個相對明確的設計目標:通過視覺潛臺詞讓用戶情感升溫。
第一步,梳理頁面,尋找發力點。
情感升溫不是讓所有頁面都大紅大紫,我們需要梳理禮品站的使用路徑,找到設計切入點。
按承載的情感濃度,禮品站的頁面可以分為以效率優先的工具頁面,還有贈送禮物等用來完成用戶情感傳遞的頁面。后者顯然是完成情感化設計的關鍵。
以下是舊版本主要頁面的截圖,我以最核心的“拆禮物”頁面入手設計。
第二步,挖掘情感連接,完成潛臺詞的傳遞。
回到現實生活,我們會怎樣去包裝禮物?不會是包個塑料袋就把禮物放進去,但也不是一層又一層過分精致的包裝。
我覺得好包裝是恰如其分的,在表達我的心意同時,不讓對方覺得簡陋或者太繁瑣華而不實。簡單整潔的禮盒加上寫著我心意的卡片往往是不錯的選擇。
我嘗試把“禮盒”和“卡片”抽象成 UI 元素,禮盒表達送禮的行為,寫著雙方名字的卡片連接了兩個人的關系,把這兩個核心元素放在頁面里,就得到了新的「拆禮物」頁面。就像前面提到的那瓶深澤直人的香蕉汁,即便不看界面文字,也知道是這個頭像的朋友送了我一份有心的禮物。
最后一步,利用曝光效應統一視覺語言。
確定禮盒這個情感象征后,我拓展了三種不同維度的圖形表現:扁平、微擬物、強擬物。在不同頁面采用不同重量感的圖形,利用曝光效應,讓“禮盒”“卡片”的視覺元素在禮品站各個頁面反復出現,以此讓用戶對禮品站產生記憶點。
小結一下,通過挖掘核心的情感元素來傳遞潛臺詞,可以放大用戶間的情感連接,增強用戶代入感,進而讓送禮行為物有所值。
3. 減少認知成本
這里以“和平精英賽季戰報”為例,在和平精英 S12 賽季結束時我們制作了一期賽季戰報,用來回顧玩家在這個賽季的精彩表現。
在設計和平精英賽季戰報時,面臨的挑戰是:如何用更加直觀簡明的方式來表達復雜的游戲數據,進而產生分享欲望。
同樣從潛臺詞的角度思考這個問題,可以通過視覺潛臺詞將冰冷的賽季數據類比成用戶熟悉的事物,用熟悉事物的潛臺詞來解釋陌生的數據,以此來方便用戶認知。
比如在賽季總擊殺人數的頁面中,為了能直觀展示玩家在這個賽季擊殺的總人數,我們找到了“樓層高度”這個現實中被人熟知的概念來具像化游戲數據,用盒子推起來的高度等于“幾層樓”來替換擊殺人數,凸顯擊敗的人很多。(在和平精英的游戲中,被消滅的玩家會變成一個存放裝備的小木盒)
在最后的分享卡片中,為了更明顯地展示玩家的實力水平,采用了游戲玩家們耳熟能詳的裝備等級顏色體系:灰色代表普通、綠色代表優秀,藍色代表稀有,紫色代表史詩,金色代表傳說。通過不同的顏色在游戲語境中表示不同等級的潛臺詞,區分出不同分享卡片的稀有程度,以此來展現玩家在這個賽季的綜合游戲表現。
小結一下這個案例:當我們要解釋一個陌生概念的時候,可以把它具象成用戶熟悉的事物,用熟悉的潛臺詞來喚起用戶的記憶,以此來加快用戶的認知。
以上就是我常常用到的潛臺詞的三個作用:
四、寫在最后
思考設計中可能暗含的潛臺詞,可以幫助我們用更多的維度來看待界面中的信息。有時候,最精簡的界面并不一定才是最好的,運用圖形、顏色等設計手段更直觀地描繪頁面故事,傳遞出準確的視覺潛臺詞,也許能夠幫助我們更好的和用戶溝通。
最后,我嘗試回答最開始困擾我的那個疑惑:為什么簡單清晰的設計會有問題?
目前我能給到的答案是:我們追求的“簡單”并不是圖形排布的簡單,是用戶感知的簡單。設計不只是建立秩序,而是用有限的資源給人更美好的感受和體驗。
作者:微信游戲設計;公眾號:微信游戲設計
原文鏈接:https://mp.weixin.qq.com/s/vOsw7Lul7ujnWnY-mF2ERA
本文由 @微信游戲設計 授權發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
信息的傳遞需要合適有效的表達載體,減少用戶的理解成本
我們追求的“簡單”并不是圖形排布的簡單,是用戶感知的簡單。認同作者這句話,讓用戶感到簡潔好用才是關鍵。
UI設計很看感覺,但其實全是學問,這篇學到很多,要不斷通過用戶視角去進行優化
潛臺詞原來是門大學問,UI設計里營造整體的氛圍和進行情感情緒連接真的很重要
原來這些潛臺詞有這么多學問啊,之前一直忽略了,這下學到了,感恩
內容十分詳細,淺顯易懂,干貨滿滿,我受益很大。
ui設計是一個新世界,最開始那些新名詞確實是聽不太懂的,現在學到了。
居然還可以這樣,學到了!傳遞出準確的視覺潛臺詞,能夠幫助我們更好的和用戶溝通。