EID聊天气泡设计小课堂：气泡设计的奥义

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

什么？这坨黄黄的对话框就是气泡？什么是气泡？为什么要有气泡？气泡有什么卵用？莫方，带着这些疑问乖乖坐好，EIDcenter设计师来带你开启新世界的后门♂。

什么是气泡？

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

为什么要有多彩气泡？

——“有个性”。

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

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

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

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

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

常见气泡类型有哪些？

1、整体型：

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

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

方法分为三个步骤：

一、用几何形体作为主躯干（立方体）；

二、通过观察添加四肢与头部特征（如：翅膀、尖耳朵、牙齿等）；

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

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

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

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

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

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

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

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

2、素材型：

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

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

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

我们可以从两方面下手：

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

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

3、装饰型：

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

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

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

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

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

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

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

气泡设计规范：

如何构思动画？

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

一、风格统一：

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

二、元素合理：

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

教练我不满足于基本功，教练我要发大招！

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

一、场景化：

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

二、情绪化：

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

欢迎关注我们的微信获取更多设计教程：EID_center