美文网首页设计教程
EID聊天气泡设计小课堂:气泡设计的奥义 (原创)

EID聊天气泡设计小课堂:气泡设计的奥义 (原创)

作者: EIDcenter | 来源:发表于2017-01-17 11:46 被阅读83次

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

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

    什么是气泡?

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

    为什么要有多彩气泡?

    “有个性”

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

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

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

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

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

    常见气泡类型有哪些?

    1、整体型:

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

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

    方法分为三个步骤:

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

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

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

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

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

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

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

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

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

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

    2、素材型:

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

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

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

    我们可以从两方面下手:

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

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

    3、装饰型:

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

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

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

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

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

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

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

    如何构思动画?


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

    一、风格统一:

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

    二、元素合理:

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

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

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

    一、场景化:

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

    二、情绪化:

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

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

    相关文章

      网友评论

        本文标题:EID聊天气泡设计小课堂:气泡设计的奥义 (原创)

        本文链接:https://www.haomeiwen.com/subject/hbsmbttx.html