大廠實戰案例！京東B端智能客服IP設計復盤

推薦閱讀

IP 形象能夠可以迅速拉近與用戶的距離，串聯產品操作與運營活動，形成產品與用戶間的情感紐帶。本文闡述了 IP 的定義與 B 端 IP 形象在 UI 設計中的作用，從明確內外在定義、到設計過程中的細化延展、以及實際的應用呈現，全方位復盤 B 端 IP 設計方法。

一、IP 的定義

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

二、IP 在 UI 設計中的作用

IP 形象常見于 C 端場景，作為品牌 IP 符號對各個場景進行滲透，例如運營活動頁、海報宣傳頁、缺省圖、指引說明等場景。可以迅速拉近與用戶的距離，串聯產品操作，形成產品與用戶間的情感紐帶。

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

三、項目背景

業務層面：在 B 端幫助體系中 AI 智能問答可以作為智能助手、知識問答，承接到各個中臺能力中，需要有承載的入口以及對話的對象，通過 AI 智能客服的形式實現智能問答，陪伴激勵增加引導與情感化表達，提升問答體驗；

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

效率層面：設計師在以往的對話類、智能機器人的設計中，設計形象不統一，設計時投入時間長周期較長，通過 IP 形象設計，統一設計內容，拓展設計資產。

設計目標：

1. 打造智能客服 IP 形象：塑造受人喜愛的幫助引導服務 IP；
2. 增強設計感知：生動表達，情感化互動
3. 規范化幫助使用：提升智能客服幫助形式一致性；

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

四、內在-人格定義

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

1. 關鍵詞發散

如何定位 IP 的人格呢？需要明白的是這個 IP 角色是什么，為誰而設計、設計的價值是什么，并進行發散聚攏。

可根據主題關鍵詞進行隨意發散并記錄，但需要注意的一點是發散始終是是圍繞主點發散支點，而不是主點-支點-支點，不能偏離主題。

2. 人格聚攏提煉

上面是一個自由發散的過程，下面就需要進行提煉。

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

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

基于以上分析，將發散的關鍵詞聚攏，即可得出 IP 角色的基礎人格。

五、外在-形象設計

基于用戶角色和應用場景，在具有吸引力的審美前提下設計。

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

基于內在人格的外在體現-友好：IP 的造型是人格的體現，其外形需要與內核呼應，即需要通過造型的設計體現角色內在性格，因此在設計上需要注重“友好”感的角色塑造。

符合實際應用場景的視覺風格-輕量化：需要考慮具體的應用場景，與產品風格保持一致。在 C 端場景中，IP 主要用于傳遞品牌印象，達到吸引和留存的目標，主要用于營銷類的場景，因此著重突出設計風格的個性化、著重視覺表現力等。在 B 端場景里，尤其是具體到智能客服 IP 服務，其主要統一用戶心智，增加亮點，提升用戶體驗，圍繞功能為主，主要應用于 UI 界面。因此需要輕量化設計，才能更好地與系統界面相融合。

圖片來源于網絡

1. 草圖方案

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

2. 色彩方向

確認完基礎造型后，由于目前產品存在紅藍兩種主題色，需要調整色彩以適配不同主題色頁面的效果。最終確認白色為主，易于搭配不同色彩的產品，藍調能保留機器人專業特征，同時點綴紫色、亮綠色點綴，增強智能科技感。

3. 建模

在實際建模階段，持續對發現的問題進行優化。

①調整頭身比適用于端內呈現：

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

②材質簡化

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

③打光調整

渲染固定光源，不同角度通過調整模型以適配光源，達到視覺上光源的一致；正面和頂部為主光源，用于點亮整體畫面，左側右側分別為科技藍和柔和紫的色彩補光，豐富顏色質感，背光用途凸顯輪廓，強化立體感。

④細節強化，造型雕刻

1. 增加手部細節，在姿態變化，動態效果中更加生動；
2. 身體紋飾簡化處理，弱化身體視覺比重，造型更簡潔；
3. 耳機簡化；

⑤最終呈現

4. 動態延展

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

六、應用

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

通過話術引導對操作進行引導，親切的問候語言和可愛的動作拉近與用戶的距離感；

①趣味互動

趣味引導，通過打招呼的形式引導用戶操作，并在操作過程中及時對不同的狀態進行動態反饋，更加生動有趣。

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

②空狀態不再無聊

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

③動態吸引

通過微動效，增加 icon 動態效果，達到功能吸引的目的，動態同時增加功能陪伴屬性；

總結

通過對 IP 形象設計，拉近與用戶的距離，引導并串聯操作實現動態溝通，更具有趣味性，實現情感化互動。統一設計資產，為設計師提供了效率支持。從目前使用情況上來看，已經應用到 3 個需求中，未來會更多，但面對新的需求，仍要不斷拓展與升級，以適應更多場景。

參考

1. http://www.czdes.cn/alibaba-ip-design
2. http://www.czdes.cn/alibaba-ip-design
3. https://www.woshipm.com/ai/5886778.html

歡迎關注「JellyDesign」的小程序：