超全總結(jié)！6個章節(jié)深入聊聊插圖在產(chǎn)品中的應(yīng)用

一、背景概述

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

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

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

更多干貨：

1. 當(dāng)代產(chǎn)品設(shè)計(jì)中插圖的戰(zhàn)略價值

品牌差異化

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

信息傳達(dá)

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

情感化連接量化

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

二、如何設(shè)計(jì)出好的插圖

1. 受眾群體

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

2. 設(shè)計(jì)原則體系

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

信息傳達(dá)的精準(zhǔn)性

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

情感共鳴的層次化

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

品牌基因滲透

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

適配原則

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

3. 風(fēng)格系統(tǒng)構(gòu)建

風(fēng)格定位

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

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

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

三、插圖應(yīng)用場景

1. 核心功能

通過視覺表達(dá)降低用戶認(rèn)知負(fù)荷，引導(dǎo)用戶關(guān)注或操作核心功能；

新手引導(dǎo)

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

狀態(tài)可視化

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

2. 品牌價值傳達(dá)層

將品牌 DNA 轉(zhuǎn)化為可感知的視覺敘事，建立情感化認(rèn)知錨點(diǎn)

超級符號 ip 滲透

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

價值觀場景化表達(dá)

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

節(jié)日儀式感表達(dá)

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

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

解決體驗(yàn)斷點(diǎn)，通過情感化設(shè)計(jì)提升用戶容忍度與愉悅感

負(fù)向場景安撫設(shè)計(jì)

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

降低學(xué)習(xí)成本

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

情感峰值制造

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

四、案例分析

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

1. 金融類 APP 的信任感構(gòu)建

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

符號系統(tǒng)化

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

場景克制表達(dá)

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

文化兼容

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

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

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

視覺特點(diǎn)

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

五、未來趨勢

實(shí)時渲染的個性化插圖

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

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

AI 效率性插圖

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

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

六、聊一聊

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

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