在產品設計中擁抱插畫

研發與設計專欄

在產品設計中擁抱插畫

前往目錄

插畫增強使用者體驗是客觀存在的，它是提高吸引力的一種形式。雖然插畫的運用沒有太多硬性的規定，但是務必記住:插畫在網頁或系統的風格選擇是依賴於品牌內容形象的，在實行前必須確保插畫的可用性，因為最終還是要應用到產品當中，成為產品和品牌的一部分。

在過去幾年，我們可以發現不僅是網頁、UI介面和動態設計中，插畫開始以一種堅挺的姿勢站在設計潮流風口，此趨勢讓插畫在網頁及UI中的使用及變化也越來越多元。

“「插圖是另一種溝通工具，它能很好地說服人們喜歡你的產品，同時向人們解釋你的產品有的多強大」─shopify的插畫領導MegRobichaud”
在2018年的設計趨勢中，插畫風格已經成為重點，預計到了2019年，插畫設計會繼續上升到一個新的高度，根據調查，插畫風格的視覺效果對比普通攝影照片的轉化高達7倍之多。品牌、產品甚至具高識別度的人物，也越來越趨向於尋找充滿活力和獨特風格的插畫作品，藉以體現自己的品牌調性，使品牌、產品或個人形象更脫穎而出。

1.獨特性與客製化

插畫為品牌添加個性、彰顯其獨特性。舉例來說，VirginAmerica維珍美國航空公司在2014年與被評選為世界最具創新力的設計公司Work&Co合作，為使用者打造了一個有趣的飛行體驗。不僅是網頁及手機App，整體的視覺設計及使用者流程都重新規劃。這樣的改變不僅讓他們榮登iOSAppStore和GooglePlay的App排行榜第一，同時也榮獲2015TheWebbyAwards、PIXELAWARDS⋯⋯等

18個獎項，最重要的是，透過重新規劃的視覺設計和使用者流程，讓維珍美國航空公司增加14%的轉換率，有效提升公司盈利。

2.透過圖像描述抽象的概念

眾人皆知的線上儲存服務品牌Dropbox，在營運初期「雲端儲存服務」概念尚未被大眾所理解，因此Dropbox透過簡單的插圖來解釋他們的產品核心、服務，在當時的時空背景下，這種做法是非常前衛大膽的，但Dropbox也成功地運用這種方式，讓使用者們對他們產生興趣，進而達到品牌認識與認同。

3.拉近使用者距離

插畫風格有許多種，即使是較硬性的產品，透過適合的視覺設計，是能帶給人溫暖的，而各種風格的轉變，所帶給使用者的氛圍與感受也都有所不同，舉例來說，甫獲2018年全球金融科技排名第6名的美國健康保險公司OscarHealth，其產品對消費者而言不是那種會令人興奮的產品。但透過插畫，OscarHealth獨特的風格不僅將自己與其他競爭對手區分開來，也讓使用者印象深刻。

綜合上述，插畫的圖像式溝通是非常強大且直接的，一張插圖甚至就能代表許多文字，他能快速傳達複雜的信息和感受給你的使用者。但是，在使用插畫前，必須清楚了解產品的目的性、想傳達給使用者們的概念是什麼，若沒有詳細規劃插畫的使用類型、方式及比例，那可能會帶來反效果，舉凡說讓人分心、傳達了錯誤信息甚至是感到煩躁。而我們在系統或是App中經常使用插畫的情境分別有:

1.引導頁

大多數民眾對陌生與不熟悉的事物都會有警戒、害怕甚至恐懼的負面情緒，所以在接觸新品牌、產品或服務型態時，過程中難免會產生緊張與不安，而引導頁的作用就是在短時間內讓使用者對產品有一個大概的了解，緩解使用者的焦慮與不安，並能更快地進入使用環境。使用視覺元素能創造一種有趣而清晰的體驗，展示我們的產品多易於使用，並也能在其過程中提高使用者的保留率。

2.空狀態頁

當使用者剛使用產品或新型態服務，肯定會遇到很多還未涉及的功能。以系統解決方案的系統頁面為例，空蕩蕩的介面對於使用者過於冷漠及不友善，容易造成學習及使用意願下降甚至不再使用，這時候就須要去引導使用者或說明狀況，讓使用意願不中斷。

3.出錯頁

消費者使用過程中，難免會遇到一些無法預測的情況打斷使用者，例如斷線、404等。這3.出錯頁消費者使用過程中，難免會遇到一些無法預測的情況打斷使用者，例如斷線、404等。這

4.Loading刷新設計

當我們瀏覽網站時，如有時時發生變化的網頁及加載新頁面時，都不可避免地會出現加載動畫來緩衝。若加入有趣的loading便能體現產品的差異性，同時可以減少使用者在等待過程中的負面情緒。

5.結果通知

為了能盡快讓使用者體驗新功能，及不斷優化使用者體驗，產品一般會不斷更新升級。想要使用者乖乖升級也並不是那麼容易，一般來說使用者看到滿是文字的視窗，根本沒有動力去了解內容，若搭配插圖讓畫面看起來活潑一些，便能讓使用者的停留時間得以延長。