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