設計翻譯

產品插畫 V.S. 行銷插畫

插畫語言＆如何把他們分別運用在產品跟行銷上。

插畫只是可愛討喜而已嗎？運用在產品上，跟用在宣傳行銷上又有什麼不同呢？來看看負責產品插畫的設計師 Meg Robichaud 怎麼說。

此文翻譯自的產品插畫家兼設計師的 Meg Robichaud，本篇除封面圖片之內文及圖片，版權皆為作者所有。原文連結

這裡沒有很難或是速成的規則可以給你參考。你可以在這裡找到一種插畫風格可以同時符合你的產品核心概念以及行銷的聲音。特別是小型的新創公司 — 這兩者基本上都是試著在表達“我們覺得這個想法有辦法傳遞理念，給我們一點時間來秀給你看。” 然而在像我們 Shopify 這麼大型的公司，就像重力理所當然一樣，我們必須讓人們全心相信我們，所以產品跟行銷跟聲音應該要是不一樣的。

用在產品時，是需要很莊重認真的。我們也想讓他很有趣，並且當你成功時 — 甚至可能每次使用都很好笑。但是大部分的時候，我們只是想讓你知道，當爛事擊中你的風扇時，我們會在你後面支持你。不是啦等等，我是想讓你知道我們會積極的建造一個新方法，建造更好的風扇，讓爛事不在發生。我們想變成更值得信賴、正向跟有信心。我們想用摩根費里曼的聲音說「我總是知道你可以做到，繼續前進吧！」然後退到背景裡面，當稱職的看守者的角色。

用在行銷時，必須是熱情、有熱忱跟清楚的。Shopify 的行銷不是摩根費里曼，而是阿拉丁。他站在魔法飛毯上，飛到茉莉公主那邊，在他還沒展現整個世界給她看之前，就要她相信他（一個閃亮輝煌的世界啊～）。我們幫你發現了一個更明亮的未來。我們不是希望而已，我們很有自信我們已經會為使用產品的你感到驕傲。我們在幫你繪製一個我們幫你看到的美好願景，並且遞上筆刷讓你自己填上空白。

Icons:可互動的

一個 Icon 就是一個象徵 — 通常是 16x16px 的倍數 — 並且代表一個更大的想法。這是一件當你做得很好的時候，你不應該會注意到它的事。但是當你做的很爛的時候，你總是會忍不住注意到它（而且這是大部分的狀況）。更重要的是，一個 icon 應該是你可以輕鬆與它互動的東西，它應該要是很直覺的。它應該要很精確的捕捉到你想傳達的想法，並且超越文化跟語言。他需要是很清楚的讓你知道 —— 這是可以點擊的，還有當你跟它互動時會發生什麼事。一組 icon 的連續性會經過漫長的討論過程，完成時應該會有「我們很明確的知道我們正在做什麼」的感覺，並且為我們的產品建立信任感。

為了確保你的 icon 們保持連續性，你需要需要檢查一些簡單項目：

- 圓角半徑
- 線重的設定（ 線粗度；大小寫設定等等）
- 整體的重量 (例如：如果每個像素都是畫中的一點，當它們混合在一起時，它們應該要多增加一點或是降低一點色調呢？）
- 用色選擇
- 它們都以相同的角度傾斜（或是不傾斜）了嗎？
- 它們是否以同樣方式處理連接處（是透過留白還是用其他方式連接多個物件呢）？
- 它們有一樣的陰影嗎（例如：全部都包含在圓形中）還是各自有特別的陰影設定呢？

在產品中:
icon 是產品非常依賴的資源。他們用可讀、能被快速消化的工具，展現產品能力跟可用的功能。他們可以被壓縮成一組工具列，就像是 Adobe Illustrator 跟 Photoshop 之類裡的強大工具，或是更小規模的工具像是文字編輯器或電箱裡的打字工具。他們可以是一個產品特有的符號，期待使用者去學習這個符號代表什麼功能，或是仰賴大家都知道、約定成俗的功能符號。

它們應該跟使用者介面一起被設計 — 盡可能的簡化它，並且融合在使用者介面裡。這不是一個注入個性化的時機。它仍然可以是很特別的、漂亮的或是很獨特，但只有當使用者介面需要的時候 — 而不是只為了設計讓人興奮的 icon 。

在行銷上:
Icons 很少出現在行銷上。他們可以被用在導覽使用手冊的頁面，特別是在複雜的產品裡。他們可以放大，或是比在產品 icon 時多增加一些裝飾。只要你不吸他的 XX，或是做太超過的事，你可以利用這個機會來注入一些品牌個性。但他們應該要是普遍易懂的，不要期待使用者去思考學習這個 icon 是什麼意思。為對產品完全零知識的人做設計，讓他們很容易的就能在不同頁面上穿梭。

物件插畫: 可讀性高

物件插畫是用來閱讀的。它們不是為了解釋、或是呼應個人背景或故事。它們是要說“嘿，來看一下這個東西”，並且直接展示文字上的東西給你看。（我知道物件插畫這個專業術語在心理的領域理用法不同，放下它，讓我來解釋在我的領域裡該怎麼使用它）人們通常會搞混物件插畫跟 icon ，也許這是因為物件插畫有時候有會長得像 icon 一樣簡單，並且能用來傳達事情。我用來辨別兩者不同的地方是「功能性」。如果它不是使用者介面的一部分，如果你不打算用它來做任何功能，那就不算是 icon。不該有個東西是「過度複雜的 icon 」 — 夥伴，那是物件插畫。

在產品裡:
更新、聲明、導覽 — “嘿，聽我說一下，我知道你只是想開始使用，但你還不知道如何使用我的產品” 的地方都很適合放物件插畫。他們可以用來快速說明一小部分的選擇，比如說選擇信用卡、 Paypal、或是任何美國人可以用但加拿大人不行的付款方式。它們也可以是插畫的使用者介面、簡單的物件或是簡單的動態。它們通常是“漂浮的”而不是固定在某個空間裡。它們不需要很低調，但也不應該太顯眼 — 最好是會第二會被注意到的東西。就像 icon 一樣，icon 應該像是使用者介面的一部分，物件插畫則像是它的複製品。

在行銷上:
行銷插畫應該說的是 “欸你知道這個嗎？”而不是“來聽我說一下”。
我們並不想說服你來閱讀，我們很確信你已經知道這個了。行銷插畫是被用來強調功能，或是以更簡潔的方式解釋文字。它們可以是簡單的物體或動作。它們往往比產品插畫更加強調，例如產品中代表安全的插畫可能是一個鎖，在行銷時，可能會展示所有與安全相關的東西。借此機會不僅僅是解釋它是什麼，應該展現你為什麼對這個產品感到興奮、同時也分享這份興奮感。

場景插畫：可解釋的

場景是一種很強的暗示。他們通常被用來解釋複雜的（和/或決定性且無趣的）想法，並且用你會想要繼續了解的方式來傳達。換個方式來說， app 商店就像你的數位冰淇淋店。我們會給你一勺香草冰淇淋，你還想加什麼呢？它們會跟你說一個小故事。它可以是字面上的意思，也可以是比喻性的。它們會包含一些物件、動作跟角色，有時會也會包含文字來傳達更細微的想法。

在產品裡:
場景插畫在產品說明中變得越來越重要了。隨著一切都移到雲端，暗喻迅速地變成了一種最有說服力的工具，找到一種易於消化和與使用者相關的表達方式。它被用來填滿留白跟空缺、傳達動作失敗時的狀態，並快速解釋發生了什麼事，引導使用者回到正向積極的體驗中。它被用在登陸頁，用講故事的方式闡述產品功能，以及產品能如何融入使用者的生活中。

在行銷上:
對照產品中暗示的需求，行銷通常會試著傳達更複雜的過程，不僅僅是表現使用產品後能輕易設想到的部分，也會用來解釋跟使用者相關且會讓他們感到興奮的氛圍。他們用“如何使用”或是分享使用者範例來展現產品。當使用得當，它們就可以減少我們需要一再重複這些訊息的次數。它們通常會傾向用人物來展現使用產品後的特殊感覺。

編輯插畫: 有相關性的

編輯插畫是給 — 你猜看看 —編輯刊物。 它們有自己各自負責的部分，因為每則都有不同目標。其他類型的插畫有很大的機會是功能性的，用於增加內容，但編輯插畫補充了內容。它們並沒有給你任何新的訊息，但它用插畫捕捉了你的視線，並在開始閱讀之前就幫使用者準備好了心情。它們不一定要跟產品其他的插畫風格一致，應該要往藝術的方向前進。想想看紐約客雜誌 （The New Yorker） — 他們在同一篇文章裡用了好幾個不同的藝術家，但仍然不失紐約客雜誌的風格。與其他人的創作方向一致，只是規則有點不一樣罷了。

在產品中:
我真的想不到我在哪個產品中看過有編輯插畫。Medium 或 Dropbox Paper 可能會有一些，那些插畫看起來很接近，但我實在不明白為什麼他們會想放。

在行銷上:
比較明顯的應用是部落格。一個公司的部落格可以偏離產品核心，但仍然讓大家覺得它還是相同的品牌。整體來說，部落格應該具有凝聚力，你可以從一篇一篇的文章探索相關的主題。你也可能從電子報、信箱跟社群媒體看到相同的編輯手法。對於這類型的插畫，比較典型的是傳統媒體跟手繪效果的肖像。特別是肖像插畫是一個特別耗費時間跟效果，用以代表某個人、建立特殊風格跟展現個人故事的手法。使用這種插畫比過度倚賴照片更令人難忘、也更有記憶度。

主頁插畫（Hero illustration）: 發人深省的

主頁插畫包含所有東西。他們是全幅寬、填滿顏色、填滿身體（等等，這聽起來不太對。酒才應該是填滿身體的東西，才不是插畫呢。）它們充滿了任何你想充滿的感覺。它們可以是異想天開的、美麗的或是開門見山的。它們讓你想要成為什麼的一份子。它們闡述了一種可能性，讓你相信自己可以達成更高的目標。

在產品中:
在大多數情況下，主頁插畫在產品中沒有地位。一個產品應該要是有功能的。它不是關於“讓你每天都想要回來”，而是關於你在任何時候都無縫的使用它，你會找它、並且在一年裡的每天都使用它。主頁插畫可能會阻礙這件事發生。這裡有一個例外，一個歡迎的畫面應該是漂亮而且他媽的開心看到你，所以我覺得應該會生氣吧。在大型產品可能會在上市促銷頁面找到它，基本上就是產品中包含使用手冊的頁面，所以 — — 請直接參閱行銷的部分吧。

在行銷上:
對，我的意思是你知道這是怎麼回事了吧。主頁插畫是一個行銷工具。行銷主頁插畫必須是一個迷人的介紹圖。有一個執行上很大的重點是，你需要了解發生了什麼事，並且想要了解更多。

接下來呢

離線行銷
一但決定你要如何使用可以在產品跟行銷都適用、並且反映他們的需求的插畫風格。你也可以將風格離線帶到平面。除了使用手冊外，主頁插畫還符合廣告或是攤位所需，是其他插畫分類沒辦法做的。

品牌資產和說明元素
我討厭沒有特定一對一的問題解決方案的事情發生，但是隨著你的插畫風格變得更強大且固定，很顯然地要開始跟品牌緊密的合作。尋找品牌可以重複使用的元素，並且開始用插畫建立識別度是很酷的下一步。

手機版
在桌機和手機之間創造一個無縫的過渡是非常重要的。不要懶惰，不要只是將產品解決方案複製並貼到手機尺寸上：確定哪些內容不同、它跟你處理插圖的方式有什麼連結，並讓插圖風格適應不同的尺寸。

就是這樣！就只有這樣啦！ 我已經把話說完了，大家開心地畫畫吧。