在科技公司称霸的年代，我们的生活充斥着数位产品、软件开发服务，百度, netflix, facebook似乎带给人们方便、增加沟通效率，但我们每天面对的是冰冷的萤幕、间接的人际互动。
「*许多科技公司专注于提升产能，但工作并不是一直这么有趣。」slack的艺术总监russell shaw说：「是的，这虽然是工作，但工作也可以很有趣。因此，插画是一个很棒的媒介，让用户感受到友善及温暖的人性。」
图1. slack与ueno合作，运用温暖色调、柔性的笔触带给观看者正向团结的亲和形象
于2017下半年起，slack, dropbox及invision等知名科技公司陆陆续续运用特色的插画传达品牌价值、表现产品特点，先前的文章2017网站设计趋势web design trend 我们提过插画风格的兴起，在此会更深入的探讨。以下是本文的大纲：
插画的定义
在产品设计中运用插画的优点
运用插画的时机
2018 插画流行风格
总结
参考资料
1. 插画的定义illustration is creating an image to communicate a message or an idea.
插画是将文字内容、故事或思想以视觉化的方式呈现
插画源自于拉丁文「illustraio」，意指照亮之意，也就是说插画可以使文字意念变得更清晰、有趣。插画作为现代设计的一种重要视觉传达形式(visual representation)，可以由各种媒介创造。包含书籍封面、杂志内页、广告看板、说明手册、电影海报，甚至衣服、节庆卡片等。
一张好的插画，是不需要使用文字在上面作为补充的。而插画不只如同文字般有叙述性，往往还有商业市场用途，所以插画有着视觉传达与大众交流的功能性。
补充资料：
the art of illustration | off book | pbs digital studios
types of illustration — styles and techniques
图2. 插画是用来协助阅读者了解内容及意象
2. 在产品设计中运用插画的优点在品牌中添加个性、彰显独特性enhance the brand identity
2014年virgin america维京航空公司与work & co合作，从使用者经验、流程到视觉设计，重新规划网站及手机app。不但荣获2015 the webby awards、被google play选为最受喜爱的手机app，最重要的是，增加14%的转换率，提升公司盈利。
图3. virgin america维京航空公司，运用色彩及插画强化年轻活泼的正面形象
适合叙述抽象概念simplify a complex idea
「一张图胜过千言万语a picture is worth a thousands words」虽然是老生常谈，但这就是图画最特别、强大的魅力，与其用一长篇的文字段落说明，不如一张插画来的清晰易懂。早期云端储存服务还不是十分盛行时，dropbox利用一张简单的插画传达抽象概念，无需文字，让用户可以清楚的了解产品内容。
图4. dropbox早期使用插画说明云端储存的抽象概念
拉近与用户的距离create emotional connection
卡通、童话故事书，都是我们儿时的回忆，插画带给人温暖的正面能量。鲜明的色彩、有趣的形状，不论男女老幼，插画是全世界共通的语言。
图5. wealthfront 是自动化投资软件开发，利用插画介绍不同的使用情境，舒缓用户对财务控制的恐惧
图6. headspace运用温和的色调与可爱的人物，让使用者不自觉地放松、会心一笑
3. 运用插画的时机插画是非常强大的沟通方式，但使用钱，必须清楚了解产品的目的、品牌想传达给用户的概念及特性，运用适当的视觉语言(visual voice)，例如：颜色、故事设定、文案、字型等去呈现，使用不当有可能让使用者分心，或是成为多余的累赘。
在shopify的设计规范中，特别说明运用插画的情境及目的：
3.1 常使用插画的情境common places to use illustrations
空白状态
新用户引导
产品宣布
进度指标
3.2 该使用插画的迹象signs that you should use illustrations
使用者感到挫折，不知道下一步是什么
未被充分利用、被忽略、误用的功能
太多文字，或是这些文字未被阅读、了解/li>
你希望透过别的方式与使用者沟通
你想要与使用者一同庆祝、恭喜他们
4. 2018 插画流行风格接下来会介绍从2017下半年到2018上半年流行的插画风格，在这里举的例子都是已在线上推出的网站，并非只是在dribble 或behance的作品，希望大家可以开心地尽情欣赏、一同学习。
4.1 扁平色块vector graphics扁平色块风格插画十分常见，画家不会画出线条，运用形状与纯色表现形体轮廓，带给观看者现代的俐落感
其中翘楚就是invision，在苏格兰插画家jack daly的带领下，设计出一系列独特的风格。从2017年八月推出的设计指南designbetter.co，到今年三月发表的设计团队研究专案the design genome project，一气呵成的视觉飨宴。
图7. the design genome project by invision, jack daly (2018.03)
shopify是电子商务平台，使用者可以利用shopify建立客制化网站、库存管理、客户追踪、金流服务、数据分析等。有兴趣的朋友可以阅读meg robichaud的文章，详细纪录品牌风格建立的过程，包含视觉与文案发想。
图8. shopify的插画设计规范十分清楚实用(2017.07)
图9. gmail 新改版的launch视窗运用插画让使用者感到亲切(2018.04)
图10. facebook近来常使用插画来当作placeholder (2018)
在这里不得不提到的大师级法国插画家malika favre，运用流畅曲线、有机自然形状(organic shapes)、大胆色彩、巧妙利用负空间(negative)的极简风格，非常具有识别性。作品在媒体杂志vogue, vanity fair及sephora大放异彩，2018被the new yorker选为周年封面插画家(“the butterfly effect”)。可以看到近期的产品插画风格深受malika影响。
图11. malika favre为the new yorker设计的封面
其他例子：
salesforce: agent console
lyft: year in review
eventbrite — efficiency chatbot
evernote: web illustrations
4.2 拼贴技法collagecollage源自法语papiers collés，指的是沾有胶水的纸张(glued paper)。一种透过浇水、剪刀等工具，将不同大小、形状的纸质碎片、布料、照片等材料粘在纸面或布面形成画作的技法，创造出其不意、有趣却又和谐的冲突感。
近来最著名的例子即是dropbox在2017年成立十周年，内部团队与设计咨询公司collision一同宣布rebrand的品牌形象，希望能将dropbox从功能导向的云端储存软件开发的温和印象，升华成“living workspace朝气生动的工作空间”，不但跟其他竞争对手做出品牌区隔，更希望吸引更多创意工作者使用服务。
大胆饱和的色彩、丰富的图像及多元的字型，招来正反两极的评价。在插画风格，运用铅笔的笔触，对比不同材质拼接的的形状色块，呈现一种朴实、野性、冲撞、玩味有趣的视觉效果。
图12. dropbox and collins: dropbox rebrand new illustration style (2017.10)
图13. intercom客服系统于2017年底重新设计插画风格
图14. 大家熟悉的medium平台运用柔和的粉彩及拼贴的虚实交错，呈现低调温吞的独特风格
4.3 等距视角isometric / perspectiveisometric在中文翻译是等距，在此指的是用平面绘画方式呈现3d立体空间。最熟悉的例子包含国中数学老师将x, y, z轴画在黑板上表示三度空间。
从2017下半年开始，许多大公司在首页直接用isomteric插画传达公司理念，此风格充满现代科技感。为了避免太过写实生硬，多数公司会利用较强烈、饱和的色彩，让画面更活泼亮眼。
atlassian是软件开发开发专案管理的系统，于2017年九月重新包装品牌，鲜明活泼的色调，多元人物刻划，以及巧妙运用isomteric style，呈现积极、团结、实用的形象。有兴趣的朋友十分推荐阅读atlassiam illustration style guide。
图15. atlassian首页(2017.09)
图16. mixpanel是产品分析的工具，大量运用渐层色及isometric插画(2017.08)<