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

一、IP 的定義

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

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

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

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

三、項(xiàng)目背景

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

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

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

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

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

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

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

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

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

如何定位 IP 的人格呢？需要明白的是這個(gè) IP 角色是什么，為誰而設(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ā)散的過程，下面就需要進(jìn)行提煉。

1. 根據(jù)角色職能定位角色類型：IP 設(shè)計(jì)角色類型設(shè)定主要分為 2 種，一種是“自我投射型”，一種是“寵物伙伴類型”。B 端產(chǎn)品用戶角色涉及較多，包含小哥、司機(jī)、分揀、倉儲、以及商家、承運(yùn)商等多個(gè)角色，難以提煉出“自我投射型”共通人格，且產(chǎn)品定位主要是輔助用戶進(jìn)行線上操作，因此選用“伙伴型”角色設(shè)定。結(jié)合其本身的智能特點(diǎn)，決定了其基礎(chǔ)人格定位為「服務(wù)、陪伴類」。
2. 分析目標(biāo)用戶的需求：AI 智能客服的出現(xiàn)主要用于解決當(dāng)前由于人工客服人工客服溝通效率低、問題解決質(zhì)量低，用戶負(fù)面情緒多的問題。
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ǔ)類型，客服、問答類工作就是典型的情感型工作，即 ISFJ 照顧者:安靜和善對細(xì)節(jié)事物很有耐心致力于創(chuàng)建和諧有序的工作和家庭環(huán)境(像巨蟹)。

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

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

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

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

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

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

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

1. 草圖方案

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

2. 色彩方向

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

3. 建模

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

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

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

②材質(zhì)簡化

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

③打光調(diào)整

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

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

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

⑤最終呈現(xiàn)

4. 動態(tài)延展

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

六、應(yīng)用

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

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

①趣味互動

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

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

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

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

③動態(tài)吸引

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

總結(jié)

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