品牌行銷

banner 底圖風格選擇:照片和插畫怎麼選?

「照片給人真實感,插畫給人想像空間」,這句話在設計圈流傳很久,沒有人考證得出它最早出自哪個人或哪個機構,但它描述的現象確實存在,照片和插畫天生就對應著不同的說服邏輯。做網站首頁橫幅、社群貼文封面圖的時候,很多人常卡在同一個關卡,這張底圖該找攝影師拍實景,還是找插畫師畫一張風格圖?

這其實就是 banner 底圖風格選擇最容易卡關的地方。照片和插畫不是誰比較高級、誰比較過時的選項,而是各自對應不同的品牌調性,也對應不同的素材條件。選錯的代價很具體,花錢請了攝影師,拍出來的畫面卻讓品牌顯得比實際生硬;或砸錢做了一整套插畫系統,讀者看完卻感覺不到「這家是真的」。搞懂兩者各自的優勢與限制,才不會花了預算,卻換來一張說服力不足的底圖。

先從照片和插畫各自的第一印象講起,再一路拆到實際的判斷維度、適用情境,最後看兩者能不能混搭著用。

banner 底圖選照片還是插畫,本質是兩套說服邏輯:照片靠「這是真的」真實感,插畫靠可客製的想像空間,沒有高下之分
照片的說服力來自「這是真的」,插畫的彈性來自「這是被設計過的」,選擇看的是適不適合品牌,不是誰比較高級。

照片底圖給人的第一印象是什麼?

照片底圖最直接的效果,是讓人覺得「這是真的」。真人、真實產品、真實場景組成的畫面,能讓讀者在幾秒內建立信任感,尤其品牌想強調產品實際樣貌、真實空間氛圍,或帶著溫度的人物情境時,照片幾乎是首選。

Nielsen Norman Group 創辦人 Jakob Nielsen 在 2010 年發表的一份眼動研究發現,使用者確實會認真注視畫面裡的真人與真實產品,尤其是那些真的在這家公司工作的人;但只要照片是明顯擺拍、套版感重的公版素材,使用者的眼睛幾乎直接跳過,不會停留。換句話說,照片的說服力不是來自「這張照片好不好看」,而是來自「這個場景、這個人是不是真的」,一張構圖再漂亮的公版擺拍照,一樣拿不到這個加分。

MarketingExperiments 有一項實測案例也印證了同樣的方向。一家提供免費諮詢的債務服務網站,把首頁原本的公版客服人員圖庫照片,換成真實創辦人的照片後,願意註冊免費諮詢的訪客比例提升了 35%。這個結果背後的邏輯很直白,讀者看到的是一個有名有姓、真實存在的人,而不是一張隨處都能買到的臉孔。

插畫底圖能做到照片做不到的事

插畫底圖真正厲害的地方,在於它能處理照片處理不了的抽象溝通任務。服務、軟體、還沒發生的情境,這些東西本來就沒有一個現成畫面可以拍,插畫卻可以直接把抽象概念畫出來,不管是資料同步、團隊協作,還是安全防護,插畫師都能設計一組角色與場景把它具象化,不需要等到有實體產品或真實場景才能開始製作。

色彩、線條、角色風格也是插畫的強項。這些元素可以完全客製,直接綁進品牌識別系統,色票、線條粗細、角色比例都能寫進規範裡,往後不管出現在哪個版位,都是同一套語言,不會因為換了拍攝地點或找不到同一個模特兒而跑掉。

雲端儲存服務 Dropbox 的品牌指南就示範了這種分工邏輯。攝影負責說顧客的故事,把產品放進真實使用情境裡;插畫則負責處理產品內部的功能說明與新手引導流程,甚至用來緩和錯誤訊息帶來的挫折感。這個分工背後的邏輯很清楚,行銷素材要打動人心、建立情感連結,適合照片的真實感;產品內部要把抽象的操作流程講清楚,插畫反而更直覺。

照片和插畫的差異,藏在這四個地方

前面兩節看的是照片和插畫各自能做到什麼,這一節換個角度,把兩者的差異收斂成四個實際可以拿來核對的判斷維度。這四個維度彼此獨立,各自對應不同的決策考量,讀完可以逐項比對,看自己的品牌落在哪一邊。

從真實感、品牌調性、製作成本、族群代表性四個維度比較,照片贏在信任感,插畫贏在調性彈性與多元兼顧,成本則各有邏輯
四個判斷維度攤開看:真實感與信任感照片較強,品牌調性與族群代表性插畫較有彈性,製作成本則兩者各有邏輯。

真實感與信任感,照片比較有說服力

人對真實影像的信任反應,天生比對插畫角色來得快。這在牽涉「這家公司是不是真的、這個服務靠不靠得住」的情境裡特別明顯,像是互動密集的服務業、教育機構,或需要快速建立信任感的產業,照片通常比插畫更有立即的說服力。以顧問服務或補教業為例,一張真人講師或真人顧問的照片,往往比一張畫風可愛的插畫角色,更快讓潛在客戶相信這裡真的有人在提供服務。

不過,這個優勢有個前提,也就是照片必須真的是自家實拍。前面提過,公版感重的圖庫照片一樣拿不到這個加分,讀者一眼認出這是隨便找的素材,信任感反而會被打折扣。

品牌調性搭配,插畫的彈性比較大

品牌想被讀者感覺成什麼樣子,插畫幾乎可以完全對應。想走親切路線,插畫可以用圓潤線條與暖色調;想走科技感、前衛感,插畫可以換成銳利線條與高飽和撞色,這些選擇不需要遷就實際場景長什麼樣子,插畫師畫得出來就能用。攝影反而受限於現實,想拍出某種調性,得先找到符合這種調性的場地、人物與光線,拍不到就是拍不到。

史丹佛大學商學院行銷學教授 Jennifer Aaker 在 1997 年提出的「品牌個性五維度」(真誠、活力、能力、優雅、粗獷),是判斷這件事很好用的框架。想像自己的品牌落在這五個維度的哪一邊,插畫在造型與色彩上比較容易精準對到某一種調性,不必等現實世界剛好長出那個樣子。

製作成本與後續擴充,兩者邏輯不一樣

照片和插畫的成本結構,邏輯完全不一樣。照片通常是一次性成本較高:找攝影師、租場地、請模特兒、付授權金,如果改用付費圖庫省下這筆錢,又要另外避開一看就是公版的風險。而且照片完成之後修改彈性很低,換一句文案、換一個尺寸,構圖往往就會跑掉或變形,想調整常常得重新拍一次。

插畫則是反過來,前期建置成本可能比較高,畢竟設計師得先建立一套角色與風格系統,才有辦法往下延伸。但這套系統一旦建好,後續要擴充,新增角色、新增尺寸、新增用途,成本會一路往下降,而且向量圖不會因為放大縮小就失真,特別適合需要做多尺寸 banner 系列,或長期得不斷更換版位的品牌。

Webflow 一篇談插畫風格演變的文章,梳理了 2017 年 Facebook 插畫系統「Alegria」的設計過程,這套系統由洛杉磯的設計工作室 BUCK 操刀。文章指出,這類向量插畫可以無限縮放不失真,也方便被大量複製到不同版位與尺寸,這正是後來各大科技公司幾乎在同一段時間都採用類似風格的原因之一,因為能用比較低的成本快速產出大量素材。

面對不同族群或情境,插畫比較容易兼顧代表性

banner 需要呈現不同性別、年齡、外型與情境的使用者時,插畫通常比照片更容易兼顧代表性。想找一組真人照片同時涵蓋多元族群,實務上很難一次到位,顧了這個族群,往往漏了另一個;插畫因為造型本來就可以抽象化,能用中性、去識別化的角色設計,一次涵蓋比較多元的情境。

不過這裡也有個提醒,完全同質化的插畫風格,如果套版感太重,角色長得千篇一律、缺乏辨識度,一樣會讓品牌變得模糊,沒有記憶點。近幾年就有某種扁平插畫風格,從爆紅到被詬病「認不出品牌差異」,原因就在於每個品牌用的都是同一種瞇眼、無關節、長手長腳的角色設計,讀者自然分不出誰是誰。Airbnb 的插畫設計師 Jennifer Hom 就談過,她原本擔心把多元族群畫得不夠到位,後來發現用真實照片當插畫參考,反而能確保角色設計不落入刻板印象,這也是避免各家插畫看起來都一樣的做法之一。

什麼情境選照片比較保險?

把前面四個判斷維度放回實際情境,可以整理出幾種選照片通常比較保險的狀況。

  • 品牌賣的是看得到、摸得到的實體商品或空間:像是強調在地手作的甜點品牌,或講究空間氛圍的餐飲、旅宿,讀者要看的就是這個東西、這個空間實際長什麼樣子,插畫再精美也代替不了真實畫面帶來的說服力。
  • 品牌強調真人服務帶來的信任感:顧問、教育、照護類的服務,讀者做決定前最在意的往往是「這個人靠不靠得住」,一張真實的人物照片,比任何插畫都更快建立這層信任。
  • banner 目的是展示作品或實績本身:攝影或設計類的作品集、案例牆,要呈現的就是成品的實際樣貌,這時候插畫反而會模糊掉重點,照片才是唯一合理的選擇。

這三種情境有個共同前提,就是照片必須是自家實拍。Webflow 一篇談首頁橫幅設計原則的文章,也把避免使用公版圖庫列為重點提醒之一,理由跟前面提到的信任感邏輯一致,讀者一旦認出這是隨處可見的素材,好不容易建立起來的真實感就會被打折扣。

什麼情境插畫更合適?

換成另外幾種情境,插畫通常會是更合適的選擇。

  • 品牌賣的是抽象的服務、軟體或概念:沒有實體、看得到的東西可以拍,插畫可以直接把資料同步、效率提升這類抽象概念畫出來,照片在這種題目上反而無從下手。
  • 品牌還在草創階段,沒有可用的實拍素材:還沒有正式的辦公空間,也還沒累積客戶案例可以拍,插畫可以先撐起整套視覺系統,等日後有素材再逐步補上照片。
  • 想強調品牌的個性與想像空間,勝過寫實:活潑、療癒、未來感這類調性,插畫的造型與色彩更容易精準對應,寫實照片反而會被實際場景綁住。
  • 需要在大量不同尺寸與版位間重複使用同一套視覺系統:像是要同時做網站首頁、社群貼文、廣告素材等多種尺寸,插畫的向量特性可以直接縮放沿用,不必每個尺寸都重新拍一次。
賣實體商品、真人服務、展示實績的品牌選照片較保險;抽象服務、草創期、重視個性或需多尺寸沿用的品牌選插畫更合適
把四個維度放回情境:實體商品、真人服務、作品實績類選照片;抽象服務、草創、多尺寸沿用類選插畫,前提是照片得自家實拍。

照片和插畫可以混搭嗎?

兩者不是非選一個不可的單選題。前面提到的 Dropbox 品牌指南就是混搭的示範,攝影負責說故事、插畫負責處理功能說明與引導流程,同一個品牌系統裡兩者並存,只是各自負責不同的任務。

除了依用途切換,也可以在同一張圖裡混搭。比較常見的做法是以照片為底,疊加插畫元素做點綴,像是在實拍畫面上加一層手繪風的線條、圖標或色塊遮罩,用來強化重點;或是反過來,以插畫當主視覺,搭配一張真實產品的小圖佐證「這個東西真的存在」。

混搭最容易出問題的地方,是風格兜不起來。同一張圖或同一套視覺系統裡,插畫元素的色系、線條粗細如果跟整體品牌不一致,畫面很容易顯得拼貼凌亂,讀者反而抓不到重點。混搭之前,先把品牌的色票與線條規範定下來,插畫元素才有個依循的框架,不會各畫各的。

不管最後選照片還是插畫,判斷的核心問題只有一個,這張圖是不是真的代表這個品牌。照片的說服力來自「這是真的」,插畫的彈性來自「這是被設計過的」,兩種邏輯沒有誰比較高明,只有適不適合眼前這個品牌與情境。

近年 AI 生成圖像工具讓「像照片」與「像插畫」的界線越來越模糊,同一句提示詞,就能同時生成擬真的攝影感畫面,或風格統一的插畫感畫面。當製作技術上的門檻不再是問題,底圖風格的選擇,終究會回到最初那個問題,也就是品牌想被感覺成什麼樣子。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

照片底圖為什麼容易讓人產生信任感?

因為真人、真實產品組成的畫面能讓讀者在幾秒內建立信任感;但如果是明顯擺拍的公版素材,信任感就會消失,讀者視線幾乎會直接跳過不看。

插畫底圖最擅長表現什麼樣的內容?

插畫最擅長把服務、軟體,或還沒發生的情境等抽象概念直接畫出來;這些內容沒有實體畫面可拍,插畫卻不必等到有實體產品或真實場景,就能先畫出來呈現。

插畫在搭配品牌調性上為什麼比照片有彈性?

插畫的線條與色彩可以完全依品牌調性客製,不必遷就真實場景;攝影卻受限於現實,得先找到符合這種調性的場地、人物與光線才拍得出來,找不到就沒辦法呈現。

做多種尺寸版位時,插畫為什麼比較適合?

插畫具有向量特性,同一套視覺系統可以直接縮放沿用到不同版位與尺寸,不必每個尺寸都重新拍一次;因此很適合需要同時製作首頁、社群貼文、廣告素材等多種尺寸的品牌。

照片和插畫混搭時,最容易出現什麼問題?

最常見的問題是風格搭不起來,插畫元素的色系與線條粗細如果跟整體品牌不一致,畫面就容易顯得拼貼凌亂;混搭前先定好品牌的色票與線條規範,插畫元素才會有依循的框架。

資料來源
  1. Photos as Web Content — Nielsen Norman Group
  2. This Just Tested: Stock images or real people? — MarketingExperiments
  3. Imagery - Dropbox Brand Guidelines — Dropbox
  4. Your Face Here: Creating illustration guidelines for a more inclusive visual identity — Jennifer Hom
  5. Blue people and long limbs: How one illustration style took over the corporate world — Webflow
  6. Dimensions of Brand Personality — Jennifer Aaker
  7. Hero image best practices: How to design high-impact hero sections — Webflow