聊聊 UI 設計中的潛臺詞

8 評論 7560 瀏覽 94 收藏 15 分鐘

編輯導語:對一個產品而言,除了自身的內容之外最重要的便是設計了。對于設計每個人都有自己不同的審美和想法,那么該如何做出好的設計呢?本文從潛臺詞這一角度來介紹如何搞好設計,讓我們一起來看看吧!

在設計工作中,我常常會聽到各種各樣對于設計的建議,包括但不限于:

  • “這個頁面的感覺不太對”
  • “需要再加一些氛圍感”
  • “這段信息有點干”

這些問題就像五顏六色的黑一樣讓人難以捉摸。本文嘗試從另一個角度觀察這些看似捉摸不定的問題,和大家一起聊聊“潛臺詞”在 UI 設計中的作用。

文章提綱:

  • 為什么思考設計中的潛臺詞
  • 何為設計中的潛臺詞
  • 潛臺詞的作用
  • 寫在最后

一、為什么思考設計中的潛臺詞

我對潛臺詞的思考起源于“微信游戲名片”的設計 ——微信游戲名片是在游戲 app 中展示玩家游戲信息的名片,讓玩家可以在不同的游戲中查看其他人的微信游戲信息,以此來方便玩家間的社交活動。

當時的設計采用了和微信客戶端風格一致的設計語言,強化微信的渠道認知,界面的信息結構也簡單清晰。

但是,這個設計在上線后卻沒能得到很好的反饋:有用戶說感覺太生硬,像小廣告;有用戶表示正在玩游戲的時候不想點開這個東西。

聊聊 UI 設計中的潛臺詞

為什么簡單清晰的設計會有問題,這讓我開始思考:我們在做設計的時候是不是漏了些什么?想要知道漏了什么,就要搞清楚UI 設計是在設計什么。

聊聊 UI 設計中的潛臺詞

UI 設計是在設計什么,從書上和網絡資料上不難得到如下的回答:

  • 設計信息的包裝與排布
  • 設計是整理信息的藝術
  • 設計的本質是交流,也就是信息的交換

其中繞不開的一個詞就是“信息“。

“信息”是視覺設計最基礎的元素,設計師通過整合文字、照片、聲音等信息,來吸引用戶的注意力,讓用戶更輕松地注意到頁面里的核心內容。

我發現很多時候,除了文字、照片等直觀可讀的信息之外,用戶的注意力常常會被其他東西吸引,我覺得可以把它們歸納為 —— UI 中的潛臺詞。

聊聊 UI 設計中的潛臺詞

二、何為設計中的潛臺詞

在工業設計界很早就有類似“物品潛臺詞”的討論,比如大家都很熟悉的唐·諾曼說過:

物品能夠表現出兩種示能 (affordance),一是物件實際上承擔的物理特質,二是使用者察覺到物件的提示性特質?!?/p>

這里的提示性特質,也就是物品所傳達出的潛臺詞。

舉兩個例子,都來自深澤直人的設計:左圖沒有任何文字說明也能讓人知道這是一瓶香蕉汁,因為它就畫成香蕉的樣子,傳遞出“這是一瓶香蕉汁”的提示性。右圖是一盞臺燈,使用者會自然而然把鑰匙、手表等隨身小物件在燈的底座上,因為底座的造型像一個托盤,傳遞出“可以盛放小物件”的提示性。

聊聊 UI 設計中的潛臺詞

就像物品的信息可以分“物理特質”和“提示性特質”,我覺得 UI 計中的信息也可以用同樣的維度分為“直接信息”和“潛臺詞信息”。

設計師通過顏色、形狀、圖案、質感等手法構建出視覺的潛臺詞,以此來營造氛圍、喚起用戶情緒、或者引發用戶的回憶和思考。

聊聊 UI 設計中的潛臺詞

三、潛臺詞的作用

這里主要想探討我在日常工作中感受到的潛臺詞的三個作用:傳遞隱藏信息、建立情感連接、減少認知成本。

1. 傳遞隱藏信息

回到前文提到的微信游戲名片,通過潛臺詞的角度看這個界面,發現頭部幾款游戲的界面大多是暗色風格,潛臺詞就像是在說:開始專注的玩耍吧。想要給玩家帶來一種專注、沉浸的心流體驗。

而游戲名片的設計明亮清晰,潛臺詞是高效冷靜的平臺功能。兩者之間潛臺詞的差異,可能就是用戶覺得奇怪的原因。

聊聊 UI 設計中的潛臺詞

若想要玩家的心流體驗不被擾亂,就需要讓名片傳遞與游戲 UI 連貫的視覺潛臺詞。因此我添加了通用的游戲元素點綴,并且將卡片整體改為暗色模式,得到了新版游戲名片的設計。

聊聊 UI 設計中的潛臺詞

如下是新舊兩個方案的對比,新的游戲名片通過傳遞和游戲主頁面一致的潛臺詞(專注、沉浸),減弱了突兀的插入感,兼容大部分的游戲風格,讓玩家在游玩和社交的過渡中有更連貫的體驗。

聊聊 UI 設計中的潛臺詞

從這個項目中可以看到,潛臺詞會傳遞隱藏的信息,對這些潛臺詞信息加以運用,可以讓體驗路徑更加流暢。

2. 建立情感連接

這里的案例是游戲禮品站的設計 —— 禮品站是一個支持玩家之間贈送游戲道具和游戲周邊的小程序。

在負責禮品站設計的時候,產品經理常常會問這樣一個問題:這個頁面能不能更有氛圍感?

什么是氛圍感?這問題就像五顏六色的黑一樣難以琢磨。從潛臺詞的角度來看,問題似乎簡單了一些:就是在傳達“直接信息”之余,通過視覺語言傳遞給用戶更多的情感信息。那么我就有了一個相對明確的設計目標:通過視覺潛臺詞讓用戶情感升溫。

第一步,梳理頁面,尋找發力點。

情感升溫不是讓所有頁面都大紅大紫,我們需要梳理禮品站的使用路徑,找到設計切入點。

按承載的情感濃度,禮品站的頁面可以分為以效率優先的工具頁面,還有贈送禮物等用來完成用戶情感傳遞的頁面。后者顯然是完成情感化設計的關鍵。

聊聊 UI 設計中的潛臺詞

以下是舊版本主要頁面的截圖,我以最核心的“拆禮物”頁面入手設計。

聊聊 UI 設計中的潛臺詞

第二步,挖掘情感連接,完成潛臺詞的傳遞。

回到現實生活,我們會怎樣去包裝禮物?不會是包個塑料袋就把禮物放進去,但也不是一層又一層過分精致的包裝。

我覺得好包裝是恰如其分的,在表達我的心意同時,不讓對方覺得簡陋或者太繁瑣華而不實。簡單整潔的禮盒加上寫著我心意的卡片往往是不錯的選擇。

我嘗試把“禮盒”和“卡片”抽象成 UI 元素,禮盒表達送禮的行為,寫著雙方名字的卡片連接了兩個人的關系,把這兩個核心元素放在頁面里,就得到了新的「拆禮物」頁面。就像前面提到的那瓶深澤直人的香蕉汁,即便不看界面文字,也知道是這個頭像的朋友送了我一份有心的禮物。

聊聊 UI 設計中的潛臺詞

最后一步,利用曝光效應統一視覺語言。

確定禮盒這個情感象征后,我拓展了三種不同維度的圖形表現:扁平、微擬物、強擬物。在不同頁面采用不同重量感的圖形,利用曝光效應,讓“禮盒”“卡片”的視覺元素在禮品站各個頁面反復出現,以此讓用戶對禮品站產生記憶點。

聊聊 UI 設計中的潛臺詞

小結一下,通過挖掘核心的情感元素來傳遞潛臺詞,可以放大用戶間的情感連接,增強用戶代入感,進而讓送禮行為物有所值。

3. 減少認知成本

這里以“和平精英賽季戰報”為例,在和平精英 S12 賽季結束時我們制作了一期賽季戰報,用來回顧玩家在這個賽季的精彩表現。

聊聊 UI 設計中的潛臺詞

在設計和平精英賽季戰報時,面臨的挑戰是:如何用更加直觀簡明的方式來表達復雜的游戲數據,進而產生分享欲望。

同樣從潛臺詞的角度思考這個問題,可以通過視覺潛臺詞將冰冷的賽季數據類比成用戶熟悉的事物,用熟悉事物的潛臺詞來解釋陌生的數據,以此來方便用戶認知。

聊聊 UI 設計中的潛臺詞

比如在賽季總擊殺人數的頁面中,為了能直觀展示玩家在這個賽季擊殺的總人數,我們找到了“樓層高度”這個現實中被人熟知的概念來具像化游戲數據,用盒子推起來的高度等于“幾層樓”來替換擊殺人數,凸顯擊敗的人很多。(在和平精英的游戲中,被消滅的玩家會變成一個存放裝備的小木盒)

聊聊 UI 設計中的潛臺詞

在最后的分享卡片中,為了更明顯地展示玩家的實力水平,采用了游戲玩家們耳熟能詳的裝備等級顏色體系:灰色代表普通、綠色代表優秀,藍色代表稀有,紫色代表史詩,金色代表傳說。通過不同的顏色在游戲語境中表示不同等級的潛臺詞,區分出不同分享卡片的稀有程度,以此來展現玩家在這個賽季的綜合游戲表現。

聊聊 UI 設計中的潛臺詞

小結一下這個案例:當我們要解釋一個陌生概念的時候,可以把它具象成用戶熟悉的事物,用熟悉的潛臺詞來喚起用戶的記憶,以此來加快用戶的認知。

以上就是我常常用到的潛臺詞的三個作用:

聊聊 UI 設計中的潛臺詞

四、寫在最后

思考設計中可能暗含的潛臺詞,可以幫助我們用更多的維度來看待界面中的信息。有時候,最精簡的界面并不一定才是最好的,運用圖形、顏色等設計手段更直觀地描繪頁面故事,傳遞出準確的視覺潛臺詞,也許能夠幫助我們更好的和用戶溝通。

最后,我嘗試回答最開始困擾我的那個疑惑:為什么簡單清晰的設計會有問題?

目前我能給到的答案是:我們追求的“簡單”并不是圖形排布的簡單,是用戶感知的簡單。設計不只是建立秩序,而是用有限的資源給人更美好的感受和體驗。

 

作者:微信游戲設計;公眾號:微信游戲設計

原文鏈接:https://mp.weixin.qq.com/s/vOsw7Lul7ujnWnY-mF2ERA

本文由 @微信游戲設計 授權發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 信息的傳遞需要合適有效的表達載體,減少用戶的理解成本

    來自廣東 回復
  2. 我們追求的“簡單”并不是圖形排布的簡單,是用戶感知的簡單。認同作者這句話,讓用戶感到簡潔好用才是關鍵。

    來自四川 回復
  3. UI設計很看感覺,但其實全是學問,這篇學到很多,要不斷通過用戶視角去進行優化

    來自貴州 回復
  4. 潛臺詞原來是門大學問,UI設計里營造整體的氛圍和進行情感情緒連接真的很重要

    來自廣東 回復
  5. 原來這些潛臺詞有這么多學問啊,之前一直忽略了,這下學到了,感恩

    來自江西 回復
  6. 內容十分詳細,淺顯易懂,干貨滿滿,我受益很大。

    來自河南 回復
  7. ui設計是一個新世界,最開始那些新名詞確實是聽不太懂的,現在學到了。

    來自江西 回復
  8. 居然還可以這樣,學到了!傳遞出準確的視覺潛臺詞,能夠幫助我們更好的和用戶溝通。

    來自湖北 回復