有趣的靈魂萬里挑一,人們對正面情緒的向往使“有趣”成為溝通交流中不可或缺的情感特征。隨著越來越多的品牌涌入市場,用戶對產品或服務的訴求逐漸上升至心理層面,而人格化、趣味化作為共情設計的重要思路,對于品牌能否脫穎而出、提升用戶認同感,發揮著不容小覷的作用。

本篇文章將以被窩家裝的線上百科產品——“被窩知道”的icon設計項目為例,分享情感化設計的思考及創意過程,探索如何以視覺手段幫助品牌和用戶建立起友好的溝通。

能讓人會心一笑的圖標,是如何設計出來的?

項目背景

在眾多生活服務中,裝修應當算是相對低頻但流程復雜的一項了:不論是老房翻新還是新房美化,前期準備的疏忽往往會為后期施工帶來各種隱患。在裝前缺少清晰易懂的家裝科普,正是大多業主的痛點之一。基于這樣的背景,被窩家裝推出了自己的線上百科產品——被窩知道:其配合工藝介紹、家裝案例等板塊,補齊了用戶的裝修知識系統,幫助業主規避潛在問題,提升家裝體驗。

本次需求為設計一套 icon,用生動、有趣的形式展現百科中的 80 余個知識場景。對裝修疑問的解答過程,正是品牌同用戶的一次交流互動。如何讓溝通交流的過程專業但不枯燥,是本次設計需要解決的問題。

切入點:讓 IP 成為溝通的入口

在被窩 app1.5 版本中,被窩設計團隊結合用戶調研梳理出了品牌傳達的關鍵詞:專業與溫暖。為構建這樣的品牌調性,在設計探索的過程中,我們格外注重品牌 IP——Mr.Wo的融入。

Mr.Wo 是隨被窩品牌一起誕生的人物形象,他繼承了被窩 Logo 那雙炯炯有神的大眼睛,并延續了被窩品牌積極、正面的情感內核:他可愛逗趣、充滿好奇,對生活品質有著自己的追求和小執拗,也是努力實現美好居住的夢想家。

能讓人會心一笑的圖標,是如何設計出來的?

△ 圖 1 被窩品牌與 Mr.Wo

作為品牌的“代言人”,我們再次選擇 IP 形象作為視覺創意的切入點,讓其成為與用戶溝通的入口,幫助復雜的百科內容變得專業卻不枯燥,溫暖且更加有趣。

確立風格:從產品特征發散創意

確定了以 IP 為載體進行設計,但 icon 風格如何選擇、溫暖有趣要怎樣體現等問題,還需要回到產品本身進行思考。結合產品功能進行分析,“被窩知道”有以下兩點特征:

1. 問答形式展開敘述

在每個知識點中,“被窩知道”均采用一問一答的方式進行講解。比起教科書似的陳述結構,聊天式的溝通過程更加具有親和力,這也奠定了該產品輕松的氛圍基調;

2. 內容多樣場景具體

本次需要設計的 icon 約 80 余個,雖然部分知識點標題存在重復現象,但均針對了特定的生活場景及家裝體驗。舉例來說,施工避坑章節中的“衛生間”知識點更加側重常見隱患的解決方式;而空間功能板塊中的“衛生間”知識點則更加聚焦主材的選擇技巧。場景存在差異,所描繪的故事便也各不相同。

能讓人會心一笑的圖標,是如何設計出來的?

△ 圖 2 從產品特征發散創意

結合以上特征,本次視覺創意發散的關鍵詞為“輕松”與“故事感”。“輕松”對應產品本身的語言調性,目的是營造輕松、友好的閱讀氛圍;而“故事感”則是為了更好地區分場景,通過貼近生活的畫面吸引用戶,引發情緒共鳴。

注入靈魂:用趣味打動人心

基于以上分析,我們通過三個步驟來營造輕松、生動的視覺體驗:

Step1. IP 融入-建立情緒觸點

從產品入口到文章分享,IP 融入的目的是讓風趣幽默的態度在產品內貫穿始終,增加情緒觸點,賦予產品人格魅力。

能讓人會心一笑的圖標,是如何設計出來的?

△ 圖 3 通過 IP 建立情緒觸點

Step2. 調性把控-延續情緒氛圍

在體驗過程中,icon 需要做到視覺統一,以保證整體氛圍穩定、連續。在本次需求中,我們從風格、色彩、復雜程度等不同維度對 icon 進行規范。

風格上,icon 統一使用線性+色塊的視覺語言進行表現,其中線條用于勾勒基礎場景,色塊用于強調重點元素。色彩上,我們精簡了圖標顏色的選擇,在品牌黃之外僅以藍、橙這組撞色來輔助情感信息的表達。為營造“輕松”的視覺氛圍,整套 icon 嘗試使用斷線風格來幫助頁面創造呼吸感,避免復雜圖案帶來的擁堵與不適感。對于 IP 人物的使用,為簡化細節并保證形象特征在小尺寸下依舊能被清晰識別,對人物比例進行了 Q 版處理,并規范本次需求中的最小使用尺寸。

能讓人會心一笑的圖標,是如何設計出來的?

△ 圖 4 調性把控:延續情緒氛圍

Step3. 升溫共情-傳遞喜悅與樂趣

仔細分析,“被窩知道”中對各種裝修疑問的解答,其實也是在回應用戶各式各樣的情緒:有期待的、興奮的、激動的,也有焦慮的、猶豫的、不安的。在 icon 的設計過程中,我們可以通過詼諧、幽默的方式來強化正面情感、弱化負面情感:比如通過描繪 Mr.Wo 在飄窗上仰望星空的場景來放大對浪漫生活的憧憬之情;又或是用淡定清掃房間的 Mr.Wo 來緩解對衛生問題的憂慮之情。這樣一來,家裝百科所傳達的便不只是嚴肅認真的科普,更表達了被窩愿意與用戶一同打造美好新家的意愿。

能讓人會心一笑的圖標,是如何設計出來的?

△ 圖 5 強化正面情感

此外,巧妙利用場景中的不同情緒,也能夠拉大圖標間的差異性、增加視覺的趣味性。之前有舉例提到,同樣是以“衛生間”作為標題,兩篇百科內容中一篇側重規避裝修隱患、一篇側重提升居住體驗,分別對應用戶的潛在痛點與爽點。在設計過程中回想衛生間里代表“爽”與“不爽”的元素,最先想到的便是廁紙與馬桶搋子:能賤兮兮的翹著小拇指抽取廁紙,必然代表這位朋友順利完成了今日的“健康指標”;而手足無措的握住馬桶搋子,則表明廁所一定發生了什么不妙的事情。將兩種場景具象化的描繪出來,既成功區分了標題重復帶來的難題,也表達了品牌積極、陽光的性格。

能讓人會心一笑的圖標,是如何設計出來的?

△ 圖 6 巧用幽默打造差異

小結

在家裝領域的設計探索中,我們發現共情設計的核心目標是為用戶帶來美好的感受,喚起其對美好居住的向往。以幽默、風趣的設計手法持續尋找產品中的情感發力點,除了換來人們的會心一笑,也能夠通過不斷的情感累加,提升大眾對于品牌的認同感與依賴感。

目前“被窩知道”已在被窩 APP 中上線,雖然目前我們僅從 icon 設計的角度對品牌的情感融入進行了探索,但在未來迭代及其他項目中,我們將嘗試更加多元、靈活的創意方式來探索共情設計的方法路徑。

歡迎關注作者微信公眾號:「貝殼KEDC」

能讓人會心一笑的圖標,是如何設計出來的?

收藏 89
點贊 35

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。