品牌设计插画-为什么UI设计师的加分技能是插画

1、搭建风格

一个好的插画作品可以为产品带来极佳的辨识度。

波兰3D艺术家彼得·塔卡,服务过Apple、LG、Airbnb、ATT、Adobe等诸多国际公司。他将简单的几何体以微妙的方式排列组合,并赋予不同材质以及质感,创造出抽象而明快的视觉体验。从作品中能够看出,他在建筑学中吸取了很多灵感。所以我给他的作品命名为「搭建风格」。

2、拥抱差异

Airbnb的插画风格,是品牌系统中的一个关键组成部分。作为一个全球性的社区,它的房东、客人和员工遍布在世界的各个角落。那么插画人物就会面临种族、年龄、残疾、宗教的问题。可以看到的是,左边是改版之前的插画,线条勾勒出的白色块,很容易很为他们是白种人。

3、扁平人物

运用扁平色块,将几何形状组合变化(椭圆、三角形、矩形)表现形体轮廓,看似细节较少,实则简约大方。另外,非标准比例的夸张形体,让人物更加出彩、富有张力。

4、拼贴

插画可以改变品牌形象,并为用户带来忠诚度。Dropbox 运用特色的插画传达品牌价值,基于产品的使用场景,将文字内容以故事视觉话的方式应用在App的欢迎页,可以很轻松地理解产品特点。在技法上,使用铅笔的笔触,来描绘外形,透过大胆饱和的色彩、不同形状的材质拼贴,展示一种其乐融融的视觉效果。

5、超现实主义插画

超现实主义插画有着天马星空的想象力,它介于现实和想象之间。奇幻的、谧静的图形,使画面增加一丝怪诞的神秘感。

6、品牌吉祥物

品牌吉祥物与产品的结合,可以很好的打破产品同质化,创造属于自身特点的风格界面,同时彰显独特性。

Snapchat的页面用了很多情感化设计和品牌形象。包括开启通知引导动画、查找好友landing page、下拉刷新页、照片回忆等等。从品牌的个性化设计,寻找一种基于插画的设计语言,把产品塑造成一个高辨识度的ID。

7、3D角色

3D的引入,可以让角色获得更好的人物细节、情感和传播。Cabeza Patata 工作室受到 Spotify 的委托,他们的创意团队开发了角色系列作品,其中包含11个视频和25个插图,主题是音乐和不断变化的情绪。Spotity 作为一个全球化的音乐应用,需要在几十个国家和市场运作。那么它就必须是一个容易识别、现代、性别中立的角色,没有特定的年龄或种族。这正符合前面提到的拥抱差异,做更具包容性的设计。在最新的Keep应用程序界面中,“打开小分队”功能也加入了3D角色,从而提升用户的参与度。

插图(画)是运用图案表现的形象,本着审美与实用相统一的原则,尽量使线条,形态清晰明快,制作方便。插图是世界都能通用的语言,其设计在商业应用上通常分为人物、动物、商品形象。

商品形象

商品形象是动物拟人化在商品领域中的扩展,经过拟人化的商品给人以亲切感。个性化的造型,有耳目一新的感觉,从而加深人们对商品的直接印象。

分类

以商品拟人化的构思来说,大致分为两类:

第一类为完全拟人化,即夸张商品,运用商品本身特征和造型结构作拟人化的表现。

第二类为半拟人化,即在商品上另加上与商品无关的手、足、头等作为拟人化的特征元素。

以上两种拟人化塑造手法,使商品富有人情味和个性化。通过动画形式,强调商品特征,其动作、言语与商品直接联系起来,宣传效果较为明显。

插图画家经常为图形设计师绘制插图或直接为杂志、报纸等媒体配画。他们一般是职业插图画家或自由艺术家,像摄影师一样具有各自的表现题材和绘画风格。对新形式、新工具的职业敏感和渴望,使他们中的很多人开始采用电脑图形设计工具创作插图。电脑图形软件功能使他们的创作才能得到了更大的发挥,无论简洁还是繁复绵密,无论传统媒介效果,如油画、水彩、版画风格还是数字图形无穷无尽的新变化、新趣味,都可以更方便更快捷地完成。数字摄影是摄影的最新发展。摄影师用数字照相机拍摄对象或通过扫描仪将传统的正片扫描进电脑,然后在电脑屏幕上调整、组合、创作新的视觉形象,最后通过胶片记录仪输出正片或负片。这种新的摄影技术完全改变了摄影的光学成像的创作概念,而以数字图形处理为核心,又称“不用暗房的摄影”。它模糊了摄影师、插图画家及图形设计师之间的界限,现今只要有才能,完全可以在同一台电脑上完成这三种工作。

人是高度视觉化的生物,能够即时处理大量的视觉信息,据统计我们所获取的90%的信息都是视觉化的。单一图像比起大块的文本对于用户而言更容易消化吸收。

因此,在许多情况下,静态的图片能够传达出相当复杂多样的想法,尤其是在进行大范围展示的时候,它比文本的表现力要强的多。人的大脑对与图像信息的处理速度要比识别文本要快得多。

长期以来,图片都作为UI界面中最具有表现力的元素而存在,而最近几年,插画在UI中出现的比例越来越高,在许多地方都有替代图片的趋势。其实原因并不复杂,插画比起图片可控性更强,更容易发挥创意,营造氛围,传递信息。从内容到技术细节,插画都在某种程度上超过现成的图片。

插画的特点

实际上,现在我们所说的插画(illustration)的词根 illustrate

原本的含义是“澄清,说明”。在现代平面设计中,插画是颇为常用的展示性元素,是视觉传达的重要工具。插画在设计作品中,常常用来引导、启发和呈现信息,更有针对性地、视觉化地同用户进行交流。真正高效的插画一定是有针对性的,易于识别的,并且能够被不同的用户轻松理解的。

想要让插画最大化地为用户创造价值,你可以参考下面的四个范例:

1、首页插画

好的网页设计设计对于潜在用户的影响是巨大的。许多用户在判断一个企业、团队或者品牌的优劣的时候,他们的网站的优劣是一个重要的判据。这也是为什么现如今网页设计师们都在想尽一切办法提升网页的用户体验。

这一点,网页和现实世界是一样的,好的第一印象往往源自于优秀的视觉效果。吸引用户,激发想象力,这样才能和用户构建起紧密的关联。独特而传神的插画的价值就在这里,尤其是当这些独特的插画呈现在打开率最高的网页首页上的时候。和品牌气质所匹配的插画不仅能够帮网站筛选用户,而且能够强化品牌属性。

2、吉祥物

品牌所传递的感受、气质最好的落脚点就是品牌代言人和品牌吉祥物。吉祥物能够让虚拟的品牌调性更加真实,作为品牌的外化表现,吉祥物能够让品牌给人更加值得信赖的感觉,让品牌更加富有吸引力。

吉祥物的呈现形式很多,在网页上,它通常是以插画的形式出现的。吉祥物在UI界面中出现,能够赋予界面交互以生命力,保持用户持续的注意力,成为整个用户体验中无法忽略的重要元素,提升整体的参与度。

目前,电子邮件服务供应商 Mailchimp 可能是借助吉祥物来提升用户体验最成功的案例。Mailchimp

每个页面上都有黑猩猩吉祥物 Freddie 扮演不同的角色,搞笑,甚至替代某个元素来强化互动,它的存在让Mailchimp

的体验和用户黏度都有了不小的提升。

优秀的吉祥物是积极用户体验的基础。

3、新手教程和新用户引导流程

插画还有一个重要功能,就是提供视觉引导。插画能够将复杂的概念简化为易于理解的视觉信息,图片比文字的呐喊更加响亮,这也是为什么插画会常常运用到新手教程和新用户引导流程中来。

新手教程和新用户引导流程常常会介绍应用或网页的主要功能、优点,插画以图形化的形式为用户提供上下文环境,让界面所要传递的信息更加明朗,帮助用户明白如何执行当前步骤,怎么进入下一步。

当页面或者APP采用极简设计的时候,界面搭配一幅简单的插画来传递关键性的信息,不需要太多的文本就可以了。

富有吸引力的插画和强互动性的功能让刚刚进入新用户引导流程的用户对APP产生兴趣,从中感到快乐的用户会更加渴望使用APP。到了现在这个时间点,插画和动效往往会搭配起来使用,达到最大化的效果。

使用插画能将一个漫长无聊的教程变为一段有趣的旅程。相比于复杂的文本解释,图像、插画和动效能让用户更轻松吸收和理解。即使你不会绘制复杂的插画,简单的漫画也能够达到类似的效果。

4、奖励界面插画

对于游戏我们这代人应该有所接触,甚至非常熟悉。几乎每个游戏在达成成就、闯过关卡之后,都会出现奖励界面,“解锁成就”这个词就是由此而来的。解锁成就为什么对于用户这么重要呢?

一方面,紧张的游戏过程带来的成就感让用户感到快感,另一方面,解锁成就的奖励界面能够给用户一种屏幕背后有个真实的人在为他们庆贺。这是一种情感上的交互。

奖励机制的核心在于,通过积极的情绪刺激来建立情感联系。这种积极的情绪激励严格意义上算是情感化设计的范畴,情感上的引导会让用户关注到他们想看的内容,或者让他们看的内容,部分应用的缺陷甚至可以被用户所忽略。

成就徽章是成就系统中最常见的元素,一系列设计精巧的徽章图标加上游戏和用户互动,能够让用户逐步沉迷到这套体系当中。

精致的插画出现在成功状态的页面当中,能够让你的用户感觉到被重视。

结语

插画增强用户体验是客观存在的,它是提高UI吸引力的强大工具。虽然插画的运用并没有太多硬性的规定,但是务必记住一点:确保插画的可用性。插画最终是要应用到产品当中,成为产品和品牌的一部分。