IP 形象能夠可以迅速拉近與用戶的距離，串聯(lián)產(chǎn)品操作與運(yùn)營(yíng)活動(dòng)，形成產(chǎn)品與用戶間的情感紐帶。本文闡述了 IP 的定義與 B 端 IP 形象在 UI 設(shè)計(jì)中的作用，從明確內(nèi)外在定義、到設(shè)計(jì)過(guò)程中的細(xì)化延展、以及實(shí)際的應(yīng)用呈現(xiàn)，全方位復(fù)盤(pán) B 端 IP 設(shè)計(jì)方法。

一、IP 的定義

IP 是 Intellectual Property 的簡(jiǎn)寫(xiě)，即知識(shí)產(chǎn)權(quán)。IP 從廣義上泛指利用知識(shí)產(chǎn)權(quán)在多渠道、媒介、平臺(tái)中用授權(quán)的方式進(jìn)行應(yīng)用，最大限度通過(guò)發(fā)掘內(nèi)容，取得流量，具有多元化特征和再創(chuàng)造屬性的內(nèi)容。IP 的形式可以是人也可以是世界觀、故事、文化等非物質(zhì)性內(nèi)容，在設(shè)計(jì)領(lǐng)域所說(shuō)的 IP 主要是指 IP 形象設(shè)計(jì)。

二、IP 在 UI 設(shè)計(jì)中的作用

IP 形象常見(jiàn)于 C 端場(chǎng)景，作為品牌 IP 符號(hào)對(duì)各個(gè)場(chǎng)景進(jìn)行滲透，例如運(yùn)營(yíng)活動(dòng)頁(yè)、海報(bào)宣傳頁(yè)、缺省圖、指引說(shuō)明等場(chǎng)景?？梢匝杆倮c用戶的距離，串聯(lián)產(chǎn)品操作，形成產(chǎn)品與用戶間的情感紐帶。

1. 多感官性：IP 形象可通過(guò)文字、聲音、動(dòng)作表達(dá)等方式產(chǎn)生互動(dòng)，達(dá)到傳遞信息的目標(biāo)。相對(duì)于單一形式的表達(dá)更為豐滿，具有趣味性，也更易于理解。
2. 可延展性：作為一種形象，能夠以符號(hào)的形式拓展出不同的造型、風(fēng)格以適用不同的場(chǎng)景需求。
3. 情感化特征：結(jié)合業(yè)務(wù)場(chǎng)景，通過(guò)機(jī)智可愛(ài)的 IP 形象向用戶傳遞正向情緒價(jià)值，與用戶建立情感連接，增加情感觸點(diǎn)，提供更溫馨友好的服務(wù)。

三、項(xiàng)目背景

業(yè)務(wù)層面：在 B 端幫助體系中 AI 智能問(wèn)答可以作為智能助手、知識(shí)問(wèn)答，承接到各個(gè)中臺(tái)能力中，需要有承載的入口以及對(duì)話的對(duì)象，通過(guò) AI 智能客服的形式實(shí)現(xiàn)智能問(wèn)答，陪伴激勵(lì)增加引導(dǎo)與情感化表達(dá)，提升問(wèn)答體驗(yàn)；

視覺(jué)層面：IP 形象在功能上具備典型的符號(hào)性，對(duì)于功能的識(shí)別、記憶、喚醒、推廣都十分有利，目前對(duì)幫助類功能缺少統(tǒng)一的視覺(jué)符號(hào)；

效率層面：設(shè)計(jì)師在以往的對(duì)話類、智能機(jī)器人的設(shè)計(jì)中，設(shè)計(jì)形象不統(tǒng)一，設(shè)計(jì)時(shí)投入時(shí)間長(zhǎng)周期較長(zhǎng)，通過(guò) IP 形象設(shè)計(jì)，統(tǒng)一設(shè)計(jì)內(nèi)容，拓展設(shè)計(jì)資產(chǎn)。

設(shè)計(jì)目標(biāo)：

1. 打造智能客服 IP 形象：塑造受人喜愛(ài)的幫助引導(dǎo)服務(wù) IP；
2. 增強(qiáng)設(shè)計(jì)感知：生動(dòng)表達(dá)，情感化互動(dòng)
3. 規(guī)范化幫助使用：提升智能客服幫助形式一致性；

接下來(lái)就是對(duì) IP 的具體打造過(guò)程，首先要明確我們需要一個(gè)什么樣的 IP？

四、內(nèi)在-人格定義

每個(gè)人都是唯一的個(gè)體，由內(nèi)在精神和外在實(shí)體構(gòu)成，外在是內(nèi)在的體現(xiàn)，IP 形象同理，受人喜愛(ài)的的 IP 形象需要具有“人格魅力”。通過(guò)對(duì) IP 形象的職業(yè)、星座、特點(diǎn)、愛(ài)好等方面進(jìn)行定義，將 IP 形象打造成具有自己世界觀的立體鮮活形象，更加真實(shí)立體。

1. 關(guān)鍵詞發(fā)散

如何定位 IP 的人格呢？需要明白的是這個(gè) IP 角色是什么，為誰(shuí)而設(shè)計(jì)、設(shè)計(jì)的價(jià)值是什么，并進(jìn)行發(fā)散聚攏。

可根據(jù)主題關(guān)鍵詞進(jìn)行隨意發(fā)散并記錄，但需要注意的一點(diǎn)是發(fā)散始終是是圍繞主點(diǎn)發(fā)散支點(diǎn)，而不是主點(diǎn)-支點(diǎn)-支點(diǎn)，不能偏離主題。

2. 人格聚攏提煉

上面是一個(gè)自由發(fā)散的過(guò)程，下面就需要進(jìn)行提煉。

1. 根據(jù)角色職能定位角色類型：IP 設(shè)計(jì)角色類型設(shè)定主要分為 2 種，一種是“自我投射型”，一種是“寵物伙伴類型”。B 端產(chǎn)品用戶角色涉及較多，包含小哥、司機(jī)、分揀、倉(cāng)儲(chǔ)、以及商家、承運(yùn)商等多個(gè)角色，難以提煉出“自我投射型”共通人格，且產(chǎn)品定位主要是輔助用戶進(jìn)行線上操作，因此選用“伙伴型”角色設(shè)定。結(jié)合其本身的智能特點(diǎn)，決定了其基礎(chǔ)人格定位為「服務(wù)、陪伴類」。
2. 分析目標(biāo)用戶的需求：AI 智能客服的出現(xiàn)主要用于解決當(dāng)前由于人工客服人工客服溝通效率低、問(wèn)題解決質(zhì)量低，用戶負(fù)面情緒多的問(wèn)題。
3. 確定產(chǎn)品目標(biāo)：其產(chǎn)品目標(biāo)在與能利用 AI 技術(shù)進(jìn)行快速響應(yīng)，高質(zhì)量回答，同時(shí)安撫用戶的負(fù)面情緒。

人格特征推導(dǎo)方式：主要是在 IP 設(shè)計(jì)中，常用的塑造人格的推導(dǎo)公式包含星座、MBTI 人格等。角色職能決定了角色的基礎(chǔ)類型，客服、問(wèn)答類工作就是典型的情感型工作，即 ISFJ 照顧者:安靜和善對(duì)細(xì)節(jié)事物很有耐心致力于創(chuàng)建和諧有序的工作和家庭環(huán)境(像巨蟹)。

基于以上分析，將發(fā)散的關(guān)鍵詞聚攏，即可得出 IP 角色的基礎(chǔ)人格。

五、外在-形象設(shè)計(jì)

基于用戶角色和應(yīng)用場(chǎng)景，在具有吸引力的審美前提下設(shè)計(jì)。

基于象征性的造型：提取 IP 定義中最典型的關(guān)鍵詞特征作為原型，在造型上需要體現(xiàn) AI“智能”感。

基于內(nèi)在人格的外在體現(xiàn)-友好：IP 的造型是人格的體現(xiàn)，其外形需要與內(nèi)核呼應(yīng)，即需要通過(guò)造型的設(shè)計(jì)體現(xiàn)角色內(nèi)在性格，因此在設(shè)計(jì)上需要注重“友好”感的角色塑造。

符合實(shí)際應(yīng)用場(chǎng)景的視覺(jué)風(fēng)格-輕量化：需要考慮具體的應(yīng)用場(chǎng)景，與產(chǎn)品風(fēng)格保持一致。在 C 端場(chǎng)景中，IP 主要用于傳遞品牌印象，達(dá)到吸引和留存的目標(biāo)，主要用于營(yíng)銷類的場(chǎng)景，因此著重突出設(shè)計(jì)風(fēng)格的個(gè)性化、著重視覺(jué)表現(xiàn)力等。在 B 端場(chǎng)景里，尤其是具體到智能客服 IP 服務(wù)，其主要統(tǒng)一用戶心智，增加亮點(diǎn)，提升用戶體驗(yàn)，圍繞功能為主，主要應(yīng)用于 UI 界面。因此需要輕量化設(shè)計(jì)，才能更好地與系統(tǒng)界面相融合。

圖片來(lái)源于網(wǎng)絡(luò)

1. 草圖方案

根據(jù)前期分析，輸出草圖方案，包含機(jī)器人、對(duì)話、聊天氣泡等多種符號(hào)的造型探索，并最終確定 2 版具有記憶點(diǎn)，且有優(yōu)化潛力的初稿方案進(jìn)行投票，并最終頭片為左側(cè)機(jī)器人方案。整體造型以機(jī)器人為原型，結(jié)合機(jī)械紋理體現(xiàn) AI 科技感，耳機(jī)代表了客服的職業(yè)屬性，獸耳造型增加輪廓細(xì)節(jié)，體現(xiàn)了智能客服的隨時(shí)聆聽(tīng)。

2. 色彩方向

確認(rèn)完基礎(chǔ)造型后，由于目前產(chǎn)品存在紅藍(lán)兩種主題色，需要調(diào)整色彩以適配不同主題色頁(yè)面的效果。最終確認(rèn)白色為主，易于搭配不同色彩的產(chǎn)品，藍(lán)調(diào)能保留機(jī)器人專業(yè)特征，同時(shí)點(diǎn)綴紫色、亮綠色點(diǎn)綴，增強(qiáng)智能科技感。

3. 建模

在實(shí)際建模階段，持續(xù)對(duì)發(fā)現(xiàn)的問(wèn)題進(jìn)行優(yōu)化。

①調(diào)整頭身比適用于端內(nèi)呈現(xiàn)：

2 頭身改為 1 頭身：所有正常的形象都由一個(gè)基礎(chǔ)的頭身比例得來(lái)，這是在畫(huà)人體中最常用的「頭身比」法則。一般來(lái)說(shuō)，我們平時(shí)常見(jiàn)的成年人是 7-9 頭身，青少年是 6-7 頭身，孩童是 3-5 頭身，Q 版一般是 2-3 頭身，頭身比越大，越成熟，越寫(xiě)實(shí)，反之亦然。由于在在實(shí)際界面應(yīng)用場(chǎng)景中，IP 形象所占尺寸較小，身體較長(zhǎng)的話會(huì)分散視覺(jué)注意力，導(dǎo)致看不清楚，因此由 2.5 頭身改為 2 頭身，應(yīng)用過(guò)程中視覺(jué)更聚焦，也更可愛(ài)軟萌。

②材質(zhì)簡(jiǎn)化

材質(zhì)嘗試過(guò)使用金屬材質(zhì)、毛玻璃材質(zhì)增強(qiáng)細(xì)節(jié)，但考慮到與頁(yè)面適配度，最終選擇橡膠質(zhì)感。在材質(zhì)的比例上，大面積以極光白為主，簡(jiǎn)化模型復(fù)雜度，在裝飾/紋路上采用小面積金屬、發(fā)光色點(diǎn)綴細(xì)節(jié)，重色拉開(kāi)層次。

③打光調(diào)整

渲染固定光源，不同角度通過(guò)調(diào)整模型以適配光源，達(dá)到視覺(jué)上光源的一致；正面和頂部為主光源，用于點(diǎn)亮整體畫(huà)面，左側(cè)右側(cè)分別為科技藍(lán)和柔和紫的色彩補(bǔ)光，豐富顏色質(zhì)感，背光用途凸顯輪廓，強(qiáng)化立體感。

④細(xì)節(jié)強(qiáng)化，造型雕刻

1. 增加手部細(xì)節(jié)，在姿態(tài)變化，動(dòng)態(tài)效果中更加生動(dòng)；
2. 身體紋飾簡(jiǎn)化處理，弱化身體視覺(jué)比重，造型更簡(jiǎn)潔；
3. 耳機(jī)簡(jiǎn)化；

⑤最終呈現(xiàn)

4. 動(dòng)態(tài)延展

輸出一系列動(dòng)態(tài)效果，以適用于不同場(chǎng)景需求；

六、應(yīng)用

1. 情感傳遞，貼心智能客服

通過(guò)話術(shù)引導(dǎo)對(duì)操作進(jìn)行引導(dǎo)，親切的問(wèn)候語(yǔ)言和可愛(ài)的動(dòng)作拉近與用戶的距離感；

①趣味互動(dòng)

趣味引導(dǎo)，通過(guò)打招呼的形式引導(dǎo)用戶操作，并在操作過(guò)程中及時(shí)對(duì)不同的狀態(tài)進(jìn)行動(dòng)態(tài)反饋，更加生動(dòng)有趣。

（互動(dòng)過(guò)程中，IP 形象所傳遞的話語(yǔ)也符合人設(shè)，回答應(yīng)該是簡(jiǎn)潔的，口語(yǔ)化回應(yīng)，并盡量安撫用戶的情緒，可以增加語(yǔ)氣詞的設(shè)定，如:“嗯嗯”、“哇”、“親”、“哈”、“哦”等詞語(yǔ)，讓 IP 形象更加豐滿。）

②空狀態(tài)不再無(wú)聊

通過(guò)缺省圖等設(shè)計(jì)元素與用戶親切溝通，安撫無(wú)結(jié)果時(shí)的消極情緒，給用戶日常的一天帶來(lái)收獲的喜悅。

③動(dòng)態(tài)吸引

通過(guò)微動(dòng)效，增加 icon 動(dòng)態(tài)效果，達(dá)到功能吸引的目的，動(dòng)態(tài)同時(shí)增加功能陪伴屬性；

總結(jié)

通過(guò)對(duì) IP 形象設(shè)計(jì)，拉近與用戶的距離，引導(dǎo)并串聯(lián)操作實(shí)現(xiàn)動(dòng)態(tài)溝通，更具有趣味性，實(shí)現(xiàn)情感化互動(dòng)。統(tǒng)一設(shè)計(jì)資產(chǎn)，為設(shè)計(jì)師提供了效率支持。從目前使用情況上來(lái)看，已經(jīng)應(yīng)用到 3 個(gè)需求中，未來(lái)會(huì)更多，但面對(duì)新的需求，仍要不斷拓展與升級(jí)，以適應(yīng)更多場(chǎng)景。

參考

1. https://www.uisdc.com/alibaba-ip-design
2. https://www.uisdc.com/alibaba-ip-design
3. https://www.woshipm.com/ai/5886778.Html

作者：JellyDesign