2018 網頁設計流行趨勢：插畫的力量 Web Design Trend: The Power of Illustrations

【本文適合對產品設計、設計趨勢有興趣的讀者】

在科技公司稱霸的年代，我們的生活充斥著數位產品、軟體服務，Google, Netflix, Facebook似乎帶給人們方便、增加溝通效率，但我們每天面對的是冰冷的螢幕、間接的人際互動。

「*許多科技公司專注於提升產能，但工作並不是一直這麼有趣。」Slack的藝術總監Russell Shaw說：「是的，這雖然是工作，但工作也可以很有趣。因此，插畫是一個很棒的媒介，讓用戶感受到友善及溫暖的人性。」

於2017下半年起，Slack, Dropbox及Invision等知名科技公司陸陸續續運用特色的插畫傳達品牌價值、表現產品特點，先前的文章 2017網頁設計趨勢 Web Design Trend 我們提過插畫風格的興起，在此會更深入的探討。以下是本文的大綱：

插畫的定義 What is Illustrations?
在產品設計中運用插畫的優點
Why we should embrace illustrations in product design?
運用插畫的時機 When to Use Illustrations
2018 插畫流行風格 Illustration Trends of 2018
總結 Conclusion
參考資料 References

2017 網頁設計流行趨勢Web Design Trend
【本文適合對網頁設計與開發有興趣的讀者】medium.com

*出自Connecting the Dots: Why Tech Brands Are Embracing Illustration

1. 插畫的定義 What is Illustration?

Illustration is creating an image to communicate a message or an idea.

插畫是將文字內容、故事或思想以視覺化的方式呈現

插畫源自于拉丁文「illustraio」，意指照亮之意，也就是說插畫可以使文字意念變得更清晰、有趣。插畫作為現代設計的一種重要視覺傳達形式(visual representation)，可以由各種媒介創造。包含書籍封面、雜誌內頁、廣告看板、說明手冊、電影海報，甚至衣服、節慶卡片等。

一張好的插畫，是不需要使用文字在上面作為補充的。而插畫不只如同文字般有敘述性，往往還有商業市場用途，所以插畫有著視覺傳達與大眾交流的功能性。

補充資料：

2. 在產品設計中運用插畫的優點
Why we should embrace illustrations in product design?

在品牌中添加個性、彰顯獨特性 Enhance the brand identity
2014年 Virgin America維京航空公司與Work & Co合作，從使用者經驗、流程到視覺設計，重新規劃網頁及手機App。不但榮獲2015 The Webby Awards、被Google Play選為最受喜愛的手機App，最重要的是，增加14%的轉換率，提升公司盈利。

適合敘述抽象概念 Simplify a complex idea
「一張圖勝過千言萬語 A picture is worth a thousands words」雖然是老生常談，但這就是圖畫最特別、強大的魅力，與其用一長篇的文字段落說明，不如一張插畫來的清晰易懂。
早期雲端儲存服務還不是十分盛行時，Dropbox利用一張簡單的插畫傳達抽象概念，無需文字，讓用戶可以清楚的了解產品內容。

拉近與用戶的距離 Create emotional connection
卡通、童話故事書，都是我們兒時的回憶，插畫帶給人溫暖的正面能量。鮮明的色彩、有趣的形狀，不論男女老幼，插畫是全世界共通的語言。

3. 運用插畫的時機 When to Use Illustrations

插畫是非常強大的溝通方式，但使用前，必須清楚了解產品的目的、品牌想傳達給用戶的概念及特性，運用適當的視覺語言 (visual voice)，例如：顏色、故事設定、文案、字型等去呈現，使用不當有可能讓使用者分心，或是成為多餘的累贅。

在Shopify的設計規範中，特別說明運用插畫的情境及目的：

3.1 常使用插畫的情境 Common Places to Use Illustrations

空白狀態 Empty Space
新用戶引導 On-boarding
產品宣布 Announcements (新功能、維修等)
進度指標 Progress indicators

3.2 該使用插畫的跡象 Signs that you should use illustrations

使用者感到挫折，不知道下一步是什麼
Your users are frustrated, or don’t know what to do next
未被充分利用、被忽略、誤用的功能
A feature is being bypassed, misused, or underused
太多文字，或是這些文字未被閱讀、了解
There’s too much text or the text is not being read and understood
你希望透過別的方式與使用者溝通
You want another way to speak directly to your user
你想要與使用者一同慶祝、恭喜他們
You want to congratulate or celebrate with your user

礙於篇幅關係，我們在此不深入探討Branding及插畫技巧。

以下是我個人很喜歡的產品插畫家Alice Lee，她在2016年MixiniConf分享設計創作的歷程，著名的作品包含Slack與WordPress的首頁插畫設計。

影片1. Pencil Mileage – Alice Lee介紹自己設計創作歷程

4. 2018 插畫流行風格 Illustration Trends

接下來會介紹從2017下半年到2018上半年流行的插畫風格，在這裡舉的例子都是已在線上推出的網頁，並非只是在Dribble 或 Behance的作品，希望大家可以開心地盡情欣賞、一同學習。

4.1 扁平色塊 Vector graphics

扁平色塊風格插畫十分常見，畫家不會畫出線條，運用形狀與純色表現形體輪廓，帶給觀看者現代的俐落感

其中翹楚就是Invision，在蘇格蘭插畫家Jack Daly的帶領下，設計出一系列獨特的風格。從2017年八月推出的設計指南DesignBetter.Co，到今年三月發表的設計團隊研究專案The Design Genome Project，一氣呵成的視覺饗宴。

Shopify是電子商務平台，使用者可以利用Shopify建立客製化網站、庫存管理、客戶追蹤、金流服務、數據分析等。有興趣的朋友可以閱讀Meg Robichaud的文章，詳細紀錄品牌風格建立的過程，包含視覺與文案發想。

Building a New Illustration Style for Shopify
Over at Shopify, the illustrators have been busy. We’ve been working hard to find a new visual voice for Shopify. (And…ux.shopify.com

在這裡不得不提到的大師級法國插畫家Malika Favre，運用流暢曲線、有機自然形狀(organic shapes)、大膽色彩、巧妙利用負空間(negative)的極簡風格，非常具有識別性。作品在媒體雜誌 Vogue, Vanity Fair及Sephora大放異彩，2018被The New Yorker選為週年封面插畫家 (“The Butterfly Effect”)。可以看到近期的產品插畫風格深受Malika影響。

其他例子：

4.2 拼貼技法 Collage

Collage源自法語papiers collés ，指的是沾有膠水的紙張 (glued paper)。一種透過澆水、剪刀等工具，將不同大小、形狀的紙質碎片、布料、照片等材料粘在紙面或布面形成畫作的技法，創造出其不意、有趣卻又和諧的衝突感。

近來最著名的例子即是Dropbox在2017年成立十週年，內部團隊與設計諮詢公司Collision一同宣布Rebrand的品牌形象，希望能將Dropbox從功能導向的雲端儲存軟體的溫和印象，昇華成“living workspace朝氣生動的工作空間”，不但跟其他競爭對手做出品牌區隔，更希望吸引更多創意工作者使用服務。

大膽飽和的色彩、豐富的圖像及多元的字型，招來正反兩極的評價。在插畫風格，運用鉛筆的筆觸，對比不同材質拼接的的形狀色塊，呈現一種樸實、野性、衝撞、玩味有趣的視覺效果。

4.3 等距視角 Isometric / Perspective

Isometric在中文翻譯是等距，在此指的是用平面繪畫方式呈現3D立體空間。最熟悉的例子包含國中數學老師將X, Y, Z軸畫在黑板上表示三度空間。

從2017下半年開始，許多大公司在首頁直接用Isomteric插畫傳達公司理念，此風格充滿現代科技感。為了避免太過寫實生硬，多數公司會利用較強烈、飽和的色彩，讓畫面更活潑亮眼。

Atlassian是軟體開發專案管理的系統，於2017年九月重新包裝品牌，鮮明活潑的色調，多元人物刻劃，以及巧妙運用isomteric style，呈現積極、團結、實用的形象。有興趣的朋友十分推薦閱讀Atlassiam Illustration Style Guide。

4.4 上色輪廓 Coloring Outline

最後，在2018年還是可以看到近幾年流行的扁平簡潔風格，特別的是，大部分的公司都運用簡單的色調，減少過於可愛、流行的漫畫感，提升層次。

美國售票平台Seatgeek於2018年推出新的視覺風格，單一色調與簡單的線條，捉住出人們參加活動的生動姿態。

Red Antler品牌公司協助床墊公司Casper定義視覺風格及設計一系列的形象廣告，讓寢具也可以十分青春活潑、玩味有趣。

在紐約競爭激烈的點餐運送服務市場，BHH創意諮詢公司協助Seamless平台創造品牌獨特的個性。以紐約經典餐廳的招牌為發想，生動的顏色、幽默的口吻，提升Seamless的品牌印象、點閱率及點餐率。

2017年九月Airbnb與Resy合作，推出餐廳預約功能Curated Restaurant，Jonas Mosesson運用生動活潑的插畫說明使用情境。

5. 總結 Conclusions

設計，即是溝通 Design is communication。

在先前的文章，我們介紹過不同的視覺傳達方式，包含資料視覺化、圖表設計、視覺層級等。此文我們介紹了另一種手法 — 插畫。於2017下半年起，Slack, Dropbox, Shopify及Invision等知名科技公司陸陸續續運用特色的插畫傳達品牌價值、表現產品特點。

2018網頁產品設計中流行的插畫風格，包括：

扁平色塊 Vector graphics
拼貼技法 Collage
等距視角 Isometric / Perspective
上色輪廓 Coloring Outline

插圖不但是一種美觀、充滿藝術感的表達方式，適當的運用插畫，可以傳達非常清楚、有力的產品訊息，用溫暖的人性轉變冰冷科技的形象。

希望大家喜歡這次的文章！我們下個月見：）

6. 參考資料 References