2026-5-15 清陽 設(shè)計(jì)資源
插圖的使用已有 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)插圖；
一個(gè)好的插圖還可以更好地生動(dòng)地傳達(dá)信息，我們?nèi)绾未_定最合適的插圖風(fēng)格？插圖怎么才能體現(xiàn)品牌感？怎么能引起用戶群體的共鳴？對(duì)于內(nèi)容，哪種類型的插圖最能強(qiáng)調(diào)產(chǎn)品特性，本篇內(nèi)容分享了相關(guān)的案例，并解析如何針對(duì)不同用戶群體確定產(chǎn)品插圖風(fēng)格；
1、當(dāng)代產(chǎn)品設(shè)計(jì)中插圖的戰(zhàn)略價(jià)值
以互聯(lián)網(wǎng)產(chǎn)品為例，現(xiàn)在市場上隨便拿出來個(gè)產(chǎn)品都會(huì)有一堆競品出現(xiàn)，那如何在眾多產(chǎn)品中體現(xiàn)自己產(chǎn)品的特性呢，除了功能層的差距外，無非就是“看和用”這個(gè)方面了，我們以看為例，像Ant Design的「科技溫度」風(fēng)格、Discord的「夜光貼紙」風(fēng)格，都展現(xiàn)了產(chǎn)品的個(gè)性化，甚至說從插圖風(fēng)格就能get到產(chǎn)品是做什么行業(yè)的；
當(dāng)情況挺復(fù)雜的時(shí)候，要是全靠大段大段的文字去講清楚，用戶可能得費(fèi)不少勁才能弄明白。這時(shí)候，要是有插圖來幫忙，往往就能直接把意思給展現(xiàn)出來，讓用戶能更快地抓住信息的核心意思，例如醫(yī)療類APP用插圖替代專業(yè)術(shù)語；
好的插圖不僅起到美化視覺信息傳達(dá)的作用，也能夠?qū)I(yè)務(wù)起到數(shù)據(jù)方面的提升，例如多鄰國的插圖表情，他們?cè)?023年的調(diào)研數(shù)據(jù)上顯示ip系統(tǒng)提升用戶學(xué)習(xí)時(shí)長28%，Headspace冥想插圖動(dòng)效減少用戶焦慮指數(shù)；
不同的群體對(duì)于認(rèn)知和喜好不同，首先就要明確是給誰做，每個(gè)產(chǎn)品都有自己用戶畫像，拿到用戶畫像去進(jìn)行拆解設(shè)計(jì)目標(biāo)，例如年齡在18-25歲，這就決定了設(shè)計(jì)風(fēng)格偏年輕化，女性用戶群體占比70%，決定了色系不能使用過多的冷色系（產(chǎn)品主色如果不是按照群體來的，那當(dāng)我沒說），在例如是一線還是二線三線，職業(yè)分布如何，這些拆解出來后，方向不就確定了嗎，無非就是通過受眾群體做減法，減少無用的腦暴；
|
用戶特征 |
設(shè)計(jì)切入點(diǎn) |
|
18-25歲 |
年輕化風(fēng)格、新穎、趣味性 |
|
男性70% |
減少暖色使用，冷色為主 |
|
一線城市居多 |
避免營銷化、低端風(fēng)格 |
|
對(duì)科技、技術(shù)感興趣 |
冷色系、極客風(fēng)、極簡... |
搭建插圖系統(tǒng)和設(shè)計(jì)規(guī)范流程是一致的，都需要在最基礎(chǔ)的設(shè)計(jì)原則框架下完成，否則就脫離了基本的體驗(yàn)；
視覺降噪原則：構(gòu)圖簡單，突出核心表達(dá)信息，避免過渡裝飾干擾用戶
語言符號(hào)化：使用行業(yè)共識(shí)的符號(hào)做為基礎(chǔ)形象進(jìn)行設(shè)計(jì)，降低認(rèn)知成本以及適配國際化，例如網(wǎng)絡(luò)中斷使用wifi、球形網(wǎng)絡(luò)；
場景關(guān)聯(lián)：除了基礎(chǔ)的插圖，在特定場景下的插圖也要預(yù)判用戶在當(dāng)前場景下的情緒變化，通過插圖來提升用戶情緒峰值，例如社區(qū)產(chǎn)品中，用戶成功發(fā)布一個(gè)帖子，給用戶反饋的插圖應(yīng)當(dāng)是開心、活躍讓用戶感受到產(chǎn)品的情緒價(jià)值；
動(dòng)態(tài)情感曲線：在新手引導(dǎo)中通過每一步的交互流程來變化插圖表達(dá)的情緒，例如開始引導(dǎo)時(shí)突出表達(dá)信息，在一個(gè)流程結(jié)束時(shí)強(qiáng)化氛圍鼓勵(lì)用戶，用戶情緒進(jìn)度期待→奮斗→高昂，促進(jìn)用戶進(jìn)一步操作；
視覺原子構(gòu)建：提取品牌色彩、標(biāo)志性符號(hào)，形成基礎(chǔ)的插圖基因庫；
品牌故事元素貫穿全場景，例如茶顏悅色將古風(fēng)和現(xiàn)代插圖風(fēng)格結(jié)合，創(chuàng)造了獨(dú)特的品牌調(diào)性，并且每個(gè)插圖場景都在傳達(dá)品牌故事；
多端一致性：能夠三端自適應(yīng)適配尺寸，在小尺寸屏幕下插圖的識(shí)別性是否會(huì)出現(xiàn)問題；
擴(kuò)展性：在各大節(jié)日時(shí)插圖是否能夠結(jié)合當(dāng)前節(jié)日擴(kuò)展，例如春節(jié)時(shí)插圖是否可以添加燈籠煙花相關(guān)元素；
插圖風(fēng)格系統(tǒng)是品牌視覺語言的延伸，需通過基因提煉-規(guī)則制定-動(dòng)態(tài)迭代的三層框架實(shí)現(xiàn)規(guī)模化應(yīng)用；提到喜茶能想到的是描邊黑白風(fēng)格插圖，茶顏悅色就能想到古風(fēng)，而提到飛書我們就能想到極簡具有規(guī)則的形狀插圖，這就是通過插圖風(fēng)格提升用戶對(duì)產(chǎn)品認(rèn)知；
前面每一步的分析都是為執(zhí)行輔助
|
品牌基因提取 |
從品牌色、logo中提取顏色標(biāo)志性符號(hào)，上面提到過 |
|
用戶認(rèn)知匹配 |
例如年輕用戶偏高飽和，小眾獨(dú)特風(fēng)格，但銀行類的產(chǎn)品就需要體現(xiàn)出權(quán)威、安全、穩(wěn)重的風(fēng)格 |
|
組件化拆解 |
代入組件化思維，從小到大進(jìn)行搭建，例如原子層→分子層→模塊，也可以根據(jù)場景搭建基礎(chǔ)層→裝飾層→插圖 |
|
情感化分類 |
按照?qǐng)鼍扒榫w進(jìn)行分類，成功、錯(cuò)誤、失敗 |
通過視覺表達(dá)降低用戶認(rèn)知負(fù)荷，引導(dǎo)用戶關(guān)注或操作核心功能；
這個(gè)比較常見，很多產(chǎn)品在新功能或者復(fù)雜功能的時(shí)候會(huì)建立新手引導(dǎo)的流程，這時(shí)候使用單一的箭頭引導(dǎo)會(huì)比較單一，就需要添加一些插圖做為情緒化引導(dǎo)，提升用戶趣味性；
在一些上傳、加載的場景其實(shí)也可以融入插圖來緩沖用戶焦慮，現(xiàn)在大多產(chǎn)品都是使用比較簡單的加載方式，實(shí)際上可以將品牌插圖融入進(jìn)去；
將品牌DNA轉(zhuǎn)化為可感知的視覺敘事，建立情感化認(rèn)知錨點(diǎn)
在登錄頁/加載頁/404頁等全鏈路重復(fù)品牌標(biāo)志性元素，提升用戶對(duì)品牌的記憶；
用插圖隱喻傳遞品牌主張（如環(huán)保產(chǎn)品用樹木生長插圖替代口號(hào)式文案）
在特殊節(jié)日疊加一些裝飾元素，提升儀式感，上面有提到融入節(jié)日元素；
解決體驗(yàn)斷點(diǎn)，通過情感化設(shè)計(jì)提升用戶容忍度與愉悅感
出現(xiàn)bug的頁面通過插圖傳遞「可控感」，用修復(fù)工具插圖+明確解決步驟緩解用戶焦慮；
在新功能上線時(shí)或者改版功能時(shí)，用插圖對(duì)比新舊流程差異，這個(gè)主要在b端場景使用會(huì)比較多
在用戶完成某項(xiàng)任務(wù)或完成某個(gè)階段流程時(shí)給用戶反饋出高成就感的插圖，例如keep的成就解鎖，學(xué)習(xí)軟件種每日學(xué)習(xí)打卡成功等；
分析三個(gè)不同行業(yè)的插圖，來看看他們的插圖差異化
首先看看金融類產(chǎn)品如何在專業(yè)與用戶情感傳遞之間進(jìn)行平衡
顏色方面圍繞穩(wěn)重復(fù)合色（深藍(lán)+淺金），避免高飽和色彩帶來的廉價(jià)感；
僅在低風(fēng)險(xiǎn)場景（如教育科普頁）使用輕度擬人化角色，而核心功能涉及到數(shù)據(jù)方面的則使用抽象的數(shù)據(jù)的可視化插圖；
在出海的一些國家涉及到文化沖突，例如在中東區(qū)域就刪除了動(dòng)物形象用植物和建筑符號(hào)代替；
小紅書通過潮流涂鴉的風(fēng)格建立z時(shí)代圈層共鳴，為用戶提供固定的模板，降低用戶創(chuàng)作成本，提升產(chǎn)品的品牌主張，同時(shí)能夠營造出社區(qū)統(tǒng)一的氛圍感。
以線稿為主，為用戶提供自由創(chuàng)意的涂鴉玩法。
動(dòng)態(tài)生成：根據(jù)實(shí)時(shí)數(shù)據(jù)改變插圖元素，如不同的天氣、心率的高低、運(yùn)動(dòng)的步數(shù)等等；
天氣軟件中可以根據(jù)不同的天氣變化背景，當(dāng)然這個(gè)目前已經(jīng)廣泛應(yīng)用了，但未來也是不變的一個(gè)趨勢(shì)；
可通過ai流程來制作統(tǒng)一的插圖風(fēng)格進(jìn)行應(yīng)用，并且風(fēng)格的局限性相較于之前也更靈活了，在前幾年只能通過mj喂圖抽卡來生成統(tǒng)一的插圖，并且時(shí)間成本非常高；
在前兩年只能通過訓(xùn)練大模型的方式訓(xùn)練具有產(chǎn)品特點(diǎn)的模型，并且訓(xùn)練周期非常長，配置要求高，隨著現(xiàn)在的技術(shù)更新，線上出現(xiàn)了很多訓(xùn)練模型的方式，不在依賴本地配置，通過線上訓(xùn)練的lora模型，內(nèi)存比較小也方便調(diào)用，時(shí)間上相對(duì)之前大大提高；
轉(zhuǎn)載：
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.rhtd16ji.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.rhtd16ji.cn