能讓人會(huì)心一笑的圖標(biāo)，是如何設(shè)計(jì)出來(lái)的？

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

本篇文章將以被窩家裝的線上百科產(chǎn)品——“被窩知道”的icon設(shè)計(jì)項(xiàng)目為例，分享情感化設(shè)計(jì)的思考及創(chuàng)意過(guò)程，探索如何以視覺(jué)手段幫助品牌和用戶建立起友好的溝通。

項(xiàng)目背景

在眾多生活服務(wù)中，裝修應(yīng)當(dāng)算是相對(duì)低頻但流程復(fù)雜的一項(xiàng)了：不論是老房翻新還是新房美化，前期準(zhǔn)備的疏忽往往會(huì)為后期施工帶來(lái)各種隱患。在裝前缺少清晰易懂的家裝科普，正是大多業(yè)主的痛點(diǎn)之一。基于這樣的背景，被窩家裝推出了自己的線上百科產(chǎn)品——被窩知道：其配合工藝介紹、家裝案例等板塊，補(bǔ)齊了用戶的裝修知識(shí)系統(tǒng)，幫助業(yè)主規(guī)避潛在問(wèn)題，提升家裝體驗(yàn)。

本次需求為設(shè)計(jì)一套 icon，用生動(dòng)、有趣的形式展現(xiàn)百科中的 80 余個(gè)知識(shí)場(chǎng)景。對(duì)裝修疑問(wèn)的解答過(guò)程，正是品牌同用戶的一次交流互動(dòng)。如何讓溝通交流的過(guò)程專業(yè)但不枯燥，是本次設(shè)計(jì)需要解決的問(wèn)題。

切入點(diǎn)：讓 IP 成為溝通的入口

在被窩 app1.5 版本中，被窩設(shè)計(jì)團(tuán)隊(duì)結(jié)合用戶調(diào)研梳理出了品牌傳達(dá)的關(guān)鍵詞：專業(yè)與溫暖。為構(gòu)建這樣的品牌調(diào)性，在設(shè)計(jì)探索的過(guò)程中，我們格外注重品牌 IP——Mr.Wo的融入。

Mr.Wo 是隨被窩品牌一起誕生的人物形象，他繼承了被窩 Logo 那雙炯炯有神的大眼睛，并延續(xù)了被窩品牌積極、正面的情感內(nèi)核：他可愛(ài)逗趣、充滿好奇，對(duì)生活品質(zhì)有著自己的追求和小執(zhí)拗，也是努力實(shí)現(xiàn)美好居住的夢(mèng)想家。

△ 圖 1 被窩品牌與 Mr.Wo

作為品牌的“代言人”，我們?cè)俅芜x擇 IP 形象作為視覺(jué)創(chuàng)意的切入點(diǎn)，讓其成為與用戶溝通的入口，幫助復(fù)雜的百科內(nèi)容變得專業(yè)卻不枯燥，溫暖且更加有趣。

確立風(fēng)格：從產(chǎn)品特征發(fā)散創(chuàng)意

確定了以 IP 為載體進(jìn)行設(shè)計(jì)，但 icon 風(fēng)格如何選擇、溫暖有趣要怎樣體現(xiàn)等問(wèn)題，還需要回到產(chǎn)品本身進(jìn)行思考。結(jié)合產(chǎn)品功能進(jìn)行分析，“被窩知道”有以下兩點(diǎn)特征：

1. 問(wèn)答形式展開(kāi)敘述

在每個(gè)知識(shí)點(diǎn)中，“被窩知道”均采用一問(wèn)一答的方式進(jìn)行講解。比起教科書似的陳述結(jié)構(gòu)，聊天式的溝通過(guò)程更加具有親和力，這也奠定了該產(chǎn)品輕松的氛圍基調(diào)；

2. 內(nèi)容多樣場(chǎng)景具體

本次需要設(shè)計(jì)的 icon 約 80 余個(gè)，雖然部分知識(shí)點(diǎn)標(biāo)題存在重復(fù)現(xiàn)象，但均針對(duì)了特定的生活場(chǎng)景及家裝體驗(yàn)。舉例來(lái)說(shuō)，施工避坑章節(jié)中的“衛(wèi)生間”知識(shí)點(diǎn)更加側(cè)重常見(jiàn)隱患的解決方式；而空間功能板塊中的“衛(wèi)生間”知識(shí)點(diǎn)則更加聚焦主材的選擇技巧。場(chǎng)景存在差異，所描繪的故事便也各不相同。

△ 圖 2 從產(chǎn)品特征發(fā)散創(chuàng)意

結(jié)合以上特征，本次視覺(jué)創(chuàng)意發(fā)散的關(guān)鍵詞為“輕松”與“故事感”。“輕松”對(duì)應(yīng)產(chǎn)品本身的語(yǔ)言調(diào)性，目的是營(yíng)造輕松、友好的閱讀氛圍；而“故事感”則是為了更好地區(qū)分場(chǎng)景，通過(guò)貼近生活的畫面吸引用戶，引發(fā)情緒共鳴。

注入靈魂：用趣味打動(dòng)人心

基于以上分析，我們通過(guò)三個(gè)步驟來(lái)營(yíng)造輕松、生動(dòng)的視覺(jué)體驗(yàn)：

Step1. IP 融入-建立情緒觸點(diǎn)

從產(chǎn)品入口到文章分享，IP 融入的目的是讓風(fēng)趣幽默的態(tài)度在產(chǎn)品內(nèi)貫穿始終，增加情緒觸點(diǎn)，賦予產(chǎn)品人格魅力。

△ 圖 3 通過(guò) IP 建立情緒觸點(diǎn)

Step2. 調(diào)性把控-延續(xù)情緒氛圍

在體驗(yàn)過(guò)程中，icon 需要做到視覺(jué)統(tǒng)一，以保證整體氛圍穩(wěn)定、連續(xù)。在本次需求中，我們從風(fēng)格、色彩、復(fù)雜程度等不同維度對(duì) icon 進(jìn)行規(guī)范。

風(fēng)格上，icon 統(tǒng)一使用線性+色塊的視覺(jué)語(yǔ)言進(jìn)行表現(xiàn)，其中線條用于勾勒基礎(chǔ)場(chǎng)景，色塊用于強(qiáng)調(diào)重點(diǎn)元素。色彩上，我們精簡(jiǎn)了圖標(biāo)顏色的選擇，在品牌黃之外僅以藍(lán)、橙這組撞色來(lái)輔助情感信息的表達(dá)。為營(yíng)造“輕松”的視覺(jué)氛圍，整套 icon 嘗試使用斷線風(fēng)格來(lái)幫助頁(yè)面創(chuàng)造呼吸感，避免復(fù)雜圖案帶來(lái)的擁堵與不適感。對(duì)于 IP 人物的使用，為簡(jiǎn)化細(xì)節(jié)并保證形象特征在小尺寸下依舊能被清晰識(shí)別，對(duì)人物比例進(jìn)行了 Q 版處理，并規(guī)范本次需求中的最小使用尺寸。

△ 圖 4 調(diào)性把控：延續(xù)情緒氛圍

Step3. 升溫共情-傳遞喜悅與樂(lè)趣

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

△ 圖 5 強(qiáng)化正面情感

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

△ 圖 6 巧用幽默打造差異

小結(jié)

在家裝領(lǐng)域的設(shè)計(jì)探索中，我們發(fā)現(xiàn)共情設(shè)計(jì)的核心目標(biāo)是為用戶帶來(lái)美好的感受，喚起其對(duì)美好居住的向往。以幽默、風(fēng)趣的設(shè)計(jì)手法持續(xù)尋找產(chǎn)品中的情感發(fā)力點(diǎn)，除了換來(lái)人們的會(huì)心一笑，也能夠通過(guò)不斷的情感累加，提升大眾對(duì)于品牌的認(rèn)同感與依賴感。

目前“被窩知道”已在被窩 APP 中上線，雖然目前我們僅從 icon 設(shè)計(jì)的角度對(duì)品牌的情感融入進(jìn)行了探索，但在未來(lái)迭代及其他項(xiàng)目中，我們將嘗試更加多元、靈活的創(chuàng)意方式來(lái)探索共情設(shè)計(jì)的方法路徑。

歡迎關(guān)注作者微信公眾號(hào)：「貝殼KEDC」