一、背景概述

插圖的使用已有 10,000 年的歷史。最早的圖畫之一是西班牙發(fā)現(xiàn)的手部輪廓圖，距今已有 66,000 多年歷史。隨著互聯(lián)網(wǎng)的出現(xiàn)，大約在 1997 年，插圖的使用逐漸增多，谷歌的每日涂鴉和紅牛能量飲料就是其中的典型例子，包括國內的百度，它們都在將具有特殊意義的插圖融入產(chǎn)品中。

在過去插圖通常使用鉛筆、粉筆、鋼筆、蝕刻畫和顏料完成，但現(xiàn)在經(jīng)過技術的發(fā)展我們可以通過更智能的方式來呈現(xiàn)插圖；

一個好的插圖還可以更好地生動地傳達信息，我們如何確定最合適的插圖風格？插圖怎么才能體現(xiàn)品牌感？怎么能引起用戶群體的共鳴？對于內容，哪種類型的插圖最能強調產(chǎn)品特性，本篇內容分享了相關的案例，并解析如何針對不同用戶群體確定產(chǎn)品插圖風格。

更多干貨：

1. 當代產(chǎn)品設計中插圖的戰(zhàn)略價值

品牌差異化

以互聯(lián)網(wǎng)產(chǎn)品為例，現(xiàn)在市場上隨便拿出來個產(chǎn)品都會有一堆競品出現(xiàn)，那如何在眾多產(chǎn)品中體現(xiàn)自己產(chǎn)品的特性呢，除了功能層的差距外，無非就是“看和用”這個方面了，我們以看為例，像 Ant Design 的「科技溫度」風格、Discord 的「夜光貼紙」風格，都展現(xiàn)了產(chǎn)品的個性化，甚至說從插圖風格就能 get 到產(chǎn)品是做什么行業(yè)的；

信息傳達

當情況挺復雜的時候，要是全靠大段大段的文字去講清楚，用戶可能得費不少勁才能弄明白。這時候，要是有插圖來幫忙，往往就能直接把意思給展現(xiàn)出來，讓用戶能更快地抓住信息的核心意思，例如醫(yī)療類 APP 用插圖替代專業(yè)術語；

情感化連接量化

好的插圖不僅起到美化視覺信息傳達的作用，也能夠對業(yè)務起到數(shù)據(jù)方面的提升，例如多鄰國的插圖表情，他們在 2023 年的調研數(shù)據(jù)上顯示 ip 系統(tǒng)提升用戶學習時長 28%，Headspace 冥想插圖動效減少用戶焦慮指數(shù)；

二、如何設計出好的插圖

1. 受眾群體

不同的群體對于認知和喜好不同，首先就要明確是給誰做，每個產(chǎn)品都有自己用戶畫像，拿到用戶畫像去進行拆解設計目標，例如年齡在 18-25 歲，這就決定了設計風格偏年輕化，女性用戶群體占比 70%，決定了色系不能使用過多的冷色系（產(chǎn)品主色如果不是按照群體來的，那當我沒說），在例如是一線還是二線三線，職業(yè)分布如何，這些拆解出來后，方向不就確定了嗎，無非就是通過受眾群體做減法，減少無用的腦暴；

2. 設計原則體系

搭建插圖系統(tǒng)和設計規(guī)范流程是一致的，都需要在最基礎的設計原則框架下完成，否則就脫離了基本的體驗；

信息傳達的精準性

1. 視覺降噪原則：構圖簡單，突出核心表達信息，避免過渡裝飾干擾用戶
2. 語言符號化：使用行業(yè)共識的符號做為基礎形象進行設計，降低認知成本以及適配國際化，例如網(wǎng)絡中斷使用 wifi、球形網(wǎng)絡；

情感共鳴的層次化

1. 場景關聯(lián)：除了基礎的插圖，在特定場景下的插圖也要預判用戶在當前場景下的情緒變化，通過插圖來提升用戶情緒峰值，例如社區(qū)產(chǎn)品中，用戶成功發(fā)布一個帖子，給用戶反饋的插圖應當是開心、活躍讓用戶感受到產(chǎn)品的情緒價值；
2. 動態(tài)情感曲線：在新手引導中通過每一步的交互流程來變化插圖表達的情緒，例如開始引導時突出表達信息，在一個流程結束時強化氛圍鼓勵用戶，用戶情緒進度期待→奮斗→高昂，促進用戶進一步操作；

品牌基因滲透

1. 視覺原子構建：提取品牌色彩、標志性符號，形成基礎的插圖基因庫；
2. 品牌故事元素貫穿全場景，例如茶顏悅色將古風和現(xiàn)代插圖風格結合，創(chuàng)造了獨特的品牌調性，并且每個插圖場景都在傳達品牌故事；

適配原則

1. 多端一致性：能夠三端自適應適配尺寸，在小尺寸屏幕下插圖的識別性是否會出現(xiàn)問題；
2. 擴展性：在各大節(jié)日時插圖是否能夠結合當前節(jié)日擴展，例如春節(jié)時插圖是否可以添加燈籠煙花相關元素；

3. 風格系統(tǒng)構建

風格定位

插圖風格系統(tǒng)是品牌視覺語言的延伸，需通過基因提煉-規(guī)則制定-動態(tài)迭代的三層框架實現(xiàn)規(guī)模化應用；提到喜茶能想到的是描邊黑白風格插圖，茶顏悅色就能想到古風，而提到飛書我們就能想到極簡具有規(guī)則的形狀插圖，這就是通過插圖風格提升用戶對產(chǎn)品認知；

風格系統(tǒng)四個緯度

前面每一步的分析都是為執(zhí)行輔助

三、插圖應用場景

1. 核心功能

通過視覺表達降低用戶認知負荷，引導用戶關注或操作核心功能；

新手引導

這個比較常見，很多產(chǎn)品在新功能或者復雜功能的時候會建立新手引導的流程，這時候使用單一的箭頭引導會比較單一，就需要添加一些插圖做為情緒化引導，提升用戶趣味性；

狀態(tài)可視化

在一些上傳、加載的場景其實也可以融入插圖來緩沖用戶焦慮，現(xiàn)在大多產(chǎn)品都是使用比較簡單的加載方式，實際上可以將品牌插圖融入進去；

2. 品牌價值傳達層

將品牌 DNA 轉化為可感知的視覺敘事，建立情感化認知錨點

超級符號 ip 滲透

在登錄頁/加載頁/404 頁等全鏈路重復品牌標志性元素，提升用戶對品牌的記憶；

價值觀場景化表達

用插圖隱喻傳遞品牌主張（如環(huán)保產(chǎn)品用樹木生長插圖替代口號式文案）

節(jié)日儀式感表達

在特殊節(jié)日疊加一些裝飾元素，提升儀式感，上面有提到融入節(jié)日元素；

3. 用戶體驗優(yōu)化層

解決體驗斷點，通過情感化設計提升用戶容忍度與愉悅感

負向場景安撫設計

出現(xiàn) bug 的頁面通過插圖傳遞「可控感」，用修復工具插圖+明確解決步驟緩解用戶焦慮；

降低學習成本

在新功能上線時或者改版功能時，用插圖對比新舊流程差異，這個主要在 b 端場景使用會比較多

情感峰值制造

在用戶完成某項任務或完成某個階段流程時給用戶反饋出高成就感的插圖，例如 keep 的成就解鎖，學習軟件種每日學習打卡成功等；

四、案例分析

分析三個不同行業(yè)的插圖，來看看他們的插圖差異化

1. 金融類 APP 的信任感構建

首先看看金融類產(chǎn)品如何在專業(yè)與用戶情感傳遞之間進行平衡

符號系統(tǒng)化

顏色方面圍繞穩(wěn)重復合色（深藍+淺金），避免高飽和色彩帶來的廉價感；

場景克制表達

僅在低風險場景（如教育科普頁）使用輕度擬人化角色，而核心功能涉及到數(shù)據(jù)方面的則使用抽象的數(shù)據(jù)的可視化插圖；

文化兼容

在出海的一些國家涉及到文化沖突，例如在中東區(qū)域就刪除了動物形象用植物和建筑符號代替；

2. 社交產(chǎn)品的年輕化表達

小紅書通過潮流涂鴉的風格建立 z 時代圈層共鳴，為用戶提供固定的模板，降低用戶創(chuàng)作成本，提升產(chǎn)品的品牌主張，同時能夠營造出社區(qū)統(tǒng)一的氛圍感。

視覺特點

以線稿為主，為用戶提供自由創(chuàng)意的涂鴉玩法。

五、未來趨勢

實時渲染的個性化插圖

動態(tài)生成：根據(jù)實時數(shù)據(jù)改變插圖元素，如不同的天氣、心率的高低、運動的步數(shù)等等；

天氣軟件中可以根據(jù)不同的天氣變化背景，當然這個目前已經(jīng)廣泛應用了，但未來也是不變的一個趨勢；

AI 效率性插圖

可通過 ai 流程來制作統(tǒng)一的插圖風格進行應用，并且風格的局限性相較于之前也更靈活了，在前幾年只能通過 mj 喂圖抽卡來生成統(tǒng)一的插圖，并且時間成本非常高；

在前兩年只能通過訓練大模型的方式訓練具有產(chǎn)品特點的模型，并且訓練周期非常長，配置要求高，隨著現(xiàn)在的技術更新，線上出現(xiàn)了很多訓練模型的方式，不在依賴本地配置，通過線上訓練的 lora 模型，內存比較小也方便調用，時間上相對之前大大提高；

六、聊一聊

上面的模型是之前訓練的，曾經(jīng)工作中有一部分需求需要大量的插圖和 3d 圖標（除了小女孩模型），之后為了提升效率干脆直接自己訓練了，從模型可以看出風格不太一樣，但是對于應用的場景都是同一個場景。

我對之前的那些需求的做法其實很不認可，花費了人力物力，最后做出這么些圖標，最后的收益是什么，難道只是為了視覺上的好看，對于業(yè)務的收益，對于品牌的收益呢，在風格都沒統(tǒng)一的情況下，連最基礎的品牌一致性都沒達到，并且我已經(jīng)離開這么久了，需求還是沒上線；難以想象某些大廠所謂的設計到底在設計什么哦，天下本無事，庸人自擾之。