气泡设计
的奥义

作者:纳尼 2016.11.01

返回到动态 返回到动态

天公不作美,然而倾盆大雨都阻挡不了我们的阿Lu老师来给大家讲解气泡设计的奥义!!【教练我想学做气泡!!】

 

本次教学分享课程依然定在美丽的广东科贸职业学院里进行~

 

那么问题来了,挖掘技术哪家强?气泡到底是什么鬼?浴室那些肥皂泡泡吗?NONONO,本文所讲的气泡绝非一般的气泡,而是跟我们网络生活息息相关的气泡。

还是坚持说没见过的童鞋请你过来,我和你谈一谈人生

什么?这坨黄黄的对话框就是气泡?什么是气泡?为什么要有气泡?气泡有什么卵用?莫方,带着这些疑问乖乖坐好,EID的首席设计师——Lu爷来带你开启新世界的后门♂。

对气泡设计抱有很多疑问吗?接下来一一为你解答!

叮叮叮~!来吧认认真真地开始上课了!

什么是气泡?

讲多无谓,放图!【没错就是这么豪迈!】

气泡聊天的概念跟日本漫画的对白框一样,为迎合年轻用户群体网络社交软件采用气泡对话的形式成为主流。

这些网络聊天中的对话框,就是本次课程要设计的气泡。

看着这些色彩缤纷造型可爱有趣的气泡,大家有没有想过,为什么要有多彩气泡呢?找个同学问一下!

看你笑得那么甜,就你了!

为什么要有多彩气泡?

总结了一下大家的回答:因为好看啊!这样显得很有个性啊!跟人聊天也变得有趣了。

没错,同学们都说到了一点,除了好看、有趣之外,更重要的是——

 

“有个性”。

 

随着移动社交应用产品的用户日趋年轻化,社交产品在使用场景上也更加追求个性化展现。个性聊天气泡,充分满足了年轻用户彰显自我、表达自我的需求。

用个性化、情感化、趣味化的表达方式,可以缩短用户沟通的生硬感和距离感。

 

讲那么多语言上的描述可能大家都还是会一脸懵逼吧,接下来我们举个栗子相信大家会清晰很多。

看着上面几个气泡,大家觉得这几个气泡能传达什么情绪呢?

 

比如这个可爱的幽灵造型的气泡,你很容易就会想到“万圣节”、“幽灵”、“搞怪”等这些万圣节气氛,在聊天中也会提醒了对方万圣节的到来,搞怪的造型也会让聊天更加有趣味性;再比如粉红色那个有蕾丝边的可爱气泡,你很容易就会觉得想到“可爱”、“少女心”、“恋爱”等词语,很容易就会觉得跟你聊天的是一个有少女心的可爱妹子【当然在这个雌雄莫辨的年代,对方也极有可能是个“可爱的”蓝孩子。

常见气泡类型有哪些?

1、整体型:

&以某种物体的形态为基础跟气泡的几何形态做基因结合。

举个例子,这个方形的小蝙蝠是如何设计出来的呢?

方法分为三个步骤:

一、用几何形体作为主躯干(立方体);

二、通过观察添加四肢与头部特征(如:翅膀、尖耳朵、牙齿等);

三、提取物体本身的色彩特征(黑暗系)。

因此,我们就得出了一只基因结合成功的立方体蝙蝠!!

 

套用这三个步骤,我们可以通过气泡“我是大猫猫”这个例子来尝试自己分析一下:

首先气泡是一个有尾巴带圆角的矩形,结合方法分析:

一、气泡的主形是圆角矩形,尾巴是附形,因此把猫的躯干定位定为一个圆角矩形;

二、猫是四脚爬行动物,耳朵是竖起的,还有一点就是气泡有尾巴猫咪也有尾巴;

三、参考的猫咪毛色偏暖黄色。

 

——所以,我们最终就可以得出这样可爱的设计啦!

2、素材型:

需要用到特定的素材形象,提取与其相关的元素进行设计。(素材多以明星、卡通为主,这类素材基本不能做整体变形)

素材型气泡的制作方法也有两个步骤:

 

假设我们接到下面这样的一个素材图,我们应该从何下手??

我们可以从两方面下手:

一、首先了解一下素材背景(不熟悉先问问度娘,还可以浏览官网、论坛等),需要提取的方向包括角色的存在背景、身份、气质、特色配件、主要色调等;

二、提取信息以后还要注意一点就是重要元素主要放在左上角或左下角(即气泡外部)。【为什么呢?!因为当我们发送气泡的时候,头像会出现在右边即气泡尾部(客态水平翻转头像依然在尾巴后方)。】

为了避免气泡元素遮挡住头像,一般重要元素应该尽量放在气泡左边。

3、装饰型:

主题比较抽象或主要元素比较零散琐碎的,如:少女情怀、素食主义。(多注意画面的平衡,可以做对角处理,气泡尾部尽量简单)

那么,我们在主体抽象的情况下要如何进行装饰型的气泡设计呢?我们其实可以进行联想,做一个简单的头脑风暴。

 

进行头脑风暴大概可以分为两个方法:

一、吃老本!靠自己的经验与生活体会做快速联想与提取;

二、抄捷径,找度娘!利用搜索引擎,搜索关键词,根据搜索结果延伸搜索更多关键词,还可以浏览相关网站、论坛等。

举个栗子,例如“少女情怀”,我们对少女的印象一般是粉色、蕾丝、花、可爱。从年龄分析能想到学生时代,可以联想到青涩的学生情窦初开的初恋。如何体现初恋!?甜甜的、粉粉的、爱心、情侣杯。那最后就总结一下,气泡主体用蕾丝做装饰,重要元素用情侣杯,配色采用粉色调。

 

了解了几种气泡的类型以及创作思路,那么,我们平时在手机上的聊天气泡,到底是怎么的实现原理?接下来Lu老师就会给同学们简单地介绍一下我们的设计规范。

气泡设计规范:

好了,了解了那么多后,是时候进入实操环节了!

练习时间:

来吧拿起你们的笔,发挥你们小宇宙的时刻到了!

同学们正在认真地奋笔疾书,Lu老师亲自给同学们讲解提出建议

不知道同学们是否有留意过,我们在使用手机QQ的时候如果输入一些特定关键词是会触发一些动画效果的呢?其实我们在制作气泡的时候,是有给它们设计一些关键词动画效果的。

那么,当同学们构思的草图确定好后,我们就可以开始构思我们的动画了!

如何构思动画?

动画的设计我们可以遵循两点:

 

一、风格统一:

“羊毛是长在羊身上的”,气泡就是羊,动画就是羊毛;动画的风格必须与气泡的主风格保持一致。

二、元素合理:

动画元素一定跟气泡本身要存在逻辑关系,戴耳机的女孩自然能联想到音乐,因此动画随韵律飘动的音符。

教练我不满足于基本功,教练我要发大招!

好好好,那么如何给我们的动画加分呢?教练我这里也有两个方法哦!拿着笔乖乖记下吧!

一、场景化:

把动画融入到气泡所凝造的场景里面,如“鲨鱼出没”气泡本身的设定是一个海洋,一只手伸出水面,是一个呼救的场面。那为什么要呼救!?遇到什么要呼救!?溺水、有鲨鱼,这就合理了;

二、情绪化:

分析一下气泡的情绪,如“穷吃土”描述的是一个很穷的人,已经穷得要吃土了,这么惨的状况,那肯定是泪眼汪汪,吃着土,这样才能传达苦逼悲惨的情绪。

本次课程结束 !【撒花~】

今天Lu老师的气泡教程结束了,同学们是否对气泡有更多有创意的想法呢?希望大家能有所收获,我们下周的课程见!