电商资讯

2018 网页设计流行趋势:插图的力量

日期: 2018-07-27 09:05 访问量: 类型:

【本文适合对产品设计、设计趋势有兴趣的读者】

在科技公司称霸的年代,我们的生活充斥着数位产品、软体服务,Google, Netflix, Facebook似乎带给人们方便、增加沟通效率,但我们每天面对的是冰冷的萤幕、间接的人际互动。

「许多科技公司专注于提升产能,但工作并不是一直这么有趣。」Slack的艺术总监Russell Shaw说:「是的,这虽然是工作,但工作也可以很有趣。因此,插画是一个很棒的媒介,让用户感受到友善及温暖的人性。」

Slack与Ueno合作,运用温暖色调、柔性的笔触带给观看者正向团结的亲和形象

于2017下半年起, Slack ,  Dropbox 及 Invision 等知名科技公司陆陆续续运用特色的插画传达品牌价值、表现产品特点,先前的文章 2017网页设计趋势Web Design Trend 我们提过插画风格的兴起,在此会更深入的探讨。以下是本文的大纲:

1.插画的定义什么是插图?

2.在产品设计中运用插画的优点 

3.运用插画的时机?

4.2018 插画流行风格?

5.总结。

6.参考资料。

https://medium.com/uxeastmeetswest/2017-%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E6%B5%81%E8%A1%8C%E8%B6%A8%E5%8B%A2-f27eabbdb5cb 

1. 插画的定义What is Illustration? 

插画是将文字内容、故事或思想以视觉化的方式呈现。 

插画源自于拉丁文「illustraio」,意指照亮之意,也就是说插画可以使文字意念变得更清晰、有趣。插画作为现代设计的一种重要视觉传达形式(visual representation),可以由各种媒介创造。包含书籍封面、杂志内页、广告看板、说明手册、电影海报,甚至衣服、节庆卡片等。 

一张好的插画,是不需要使用文字在上面作为补充的。而插画不只如同文字般有叙述性,往往还有商业市场用途,所以插画有着视觉传达与大众交流的功能性。

补充资料:

The Art of Illustration | Off Book | PBS Digital Studios

Types of Illustration — Styles and Techniques

插画是用来协助阅读者了解内容及意象

2. 在产品设计中运用插画的优点

添加个性、彰显独特性。

2014年 Virgin America维京航空公司 与Work & Co合作,从使用者经验、流程到视觉设计,重新规划网页及手机App。不但荣获2015  The Webby Awards 、被Google Play选为最受喜爱的手机App,最重要的是,增加14%的转换率,提升公司盈利。 

Virgin America维京航空公司,运用色彩及插画强化年轻活泼的正面形象

述抽象概念

「一张图胜过千言万语」虽然是老生常谈,但这就是图画最特别、强大的魅力,与其用一长篇的文字段落说明,不如一张插画来的清晰易懂。

早期云端储存服务还不是十分盛行时,Dropbox利用一张简单的插画传达抽象概念,无需文字,让用户可以清楚的了解产品内容。

Dropbox早期使用插画说明云端储存的抽象概念

拉近与用户的距离

卡通、童话故事书,都是我们儿时的回忆,插画带给人温暖的正面能量。鲜明的色彩、有趣的形状,不论男女老幼,插画是全世界共通的语言。

WealthFront是自动化投资软体,利用插画介绍不同的使用情境,舒缓用户对财务控制的恐惧

Headspace运用温和的色调与可爱的人物,让使用者不自觉地放松、会心一笑

3. 运用插画的时机

插画是非常强大的沟通方式,但使用前,必须清楚了解 产品的目的、品牌想传达给用户的概念及特性,运用适当的视觉语言( visual voice  ),例如:颜色、故事设定、文案、字型等去呈现 ,使用不当有可能让使用者分心,或是成为多余的累赘。

在Shopify的 设计规范 中,特别说明运用插画的情境及目的:

3.1 常使用插画的情境

空白状态

新用户引导

产品宣布 (新功能、维修等)

进度指标。

3.2 该使用插画的迹象

使用者感到挫折,不知道下一步是什么

未被充分利用、被忽略、误用的功能

太多文字,或是这些文字未被阅读、了解

你希望透过别的方式与使用者沟通

你想要与使用者一同庆祝、恭喜他们。

碍于篇幅关系,我们在此不深入探讨Branding及插画技巧。 

以下是我个人很喜欢的产品插画家Alice Lee,她在2016年MixiniConf分享设计创作的历程,著名的作品包含 Slack 与 WordPress 的首页插画设计。

4. 2018插画流行风格 

接下来会介绍从2017下半年到2018上半年流行的插画风格,在这里举的例子都是已在线上推出的网页,并非只是在Dribble 或Behance的作品,希望大家可以开心地尽情欣赏、一同学习。 

4.1 扁平色块Vector graphics 

扁平色块风格插画十分常见,画家不会画出线条,运用形状与纯色表现形体轮廓,带给观看者现代的俐落感 

其中翘楚就是 Invision ,在苏格兰插画家 Jack Daly 的带领下,设计出一系列独特的风格。从2017年八月推出的设计指南 DesignBetter.Co ,到今年三月发表的设计团队研究专案 The Design Genome Project ,一气呵成的视觉飨宴。

Shopify 是电子商务平台,使用者可以利用Shopify建立客制化网站、库存管理、客户追踪、金流服务、数据分析等。有兴趣的朋友可以阅读Meg Robichaud的文章,详细纪录品牌风格建立的过程,包含视觉与文案发想。

Shopify的插畫設計規範十分清楚實用 (2017.07)

Gmail 新改版的launch視窗運用插畫讓使用者感到親切 (2018.04)

Facebook近來常使用插畫來當作Placeholder (2018)

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

Malika Favre為The New Yorker設計的封面

其他例子:

Salesforce: Agent Console

Lyft: Year in Review

Eventbrite — Efficiency Chatbot

Evernote: Web Illustrations

4.2 拼貼技法 Collage

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

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

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

Dropbox and Collins: Dropbox Rebrand new illustration style (2017.10)

大家熟悉的Medium平台運用柔和的粉彩及拼貼的虛實交錯,呈現低調溫吞的獨特風格

4.3 等距視角 Isometric / Perspective

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

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

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

Atlassian首頁 (2017.09)

Mixpanel是產品分析的工具,大量運用漸層色及isometric插畫 (2017.08)

AgenceMe今年四月網站重新改版,大膽顏色與isometric視覺風格呈現現代感 (2018.04)

4.4 上色輪廓 Coloring Outline

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

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

Seatgeek於2018年推出新的視覺風格 (2018)

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

Red Antler協助床墊公司Casper定義視覺風格及設計一系列的形象廣告,十分玩味有趣

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

Seamless 紐約地鐵廣告 (2017.10)

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

Curated Restaurants — Airbnb (2017.09)

5. 總結

设计即是沟通。

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

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

扁平色塊 Vector graphics

拼貼技法 Collage

等距視角 Isometric / Perspective

上色輪廓 Coloring Outline

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

6. 參考資料 References

Connecting the Dots: Why Tech Brands Are Embracing Illustration

Types of Illustration — Styles and Techniques

Product Illustration for people who don’t know anything about product illustration

Shopify Illustrations Principles

10 inspirational graphic design trends for 2018

Illustration trends in web design for 2018

Make ’Em Shine: How To Use Illustrations To Elicit Emotions

8 New Graphic Design Trends That Will Take Over 2018

Innovation By Design Awards 2017

Make ’Em Shine: How To Use Illustrations To Elicit Emotions

Pattern 4: Use illustration to emphasize messages and emotions

转载自 Shandy Tsai 。

淘宝网合作伙伴奖

商家后台金牌淘拍档

年度金服务合作伙伴