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