恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
EID聊天气泡设计小课堂:气泡设计的奥义
0.0°
2017-01-17 原创文章 教程 举报 12939 152 206 9

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

Image title

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


什么是气泡?

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

Image title

Image title

Image title


为什么要有多彩气泡?

“有个性”。


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

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


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

Image title

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


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


常见气泡类型有哪些?

1、整体型:

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

Image title

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

Image title

方法分为三个步骤:

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

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

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

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


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

Image title

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

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

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

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


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


2、素材型:

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

Image title

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


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

Image title

我们可以从两方面下手:

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

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

Image title

3、装饰型:

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

Image title

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


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

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

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

Image title

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


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


气泡设计规范:

Image title

如何构思动画?

Image title

Image title

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


一、风格统一:

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

二、元素合理:

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



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

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

Image title

Image title

一、场景化:

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

二、情绪化:

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

Image title

欢迎关注我们的微信获取更多设计教程:EID_center  官网:http://www.eidcenter.com/


更新:2017-01-17

收藏

152人已收藏

EID_UX_DESIGN

提供优质用户体验与品牌设计服务 微信号:EID_center

  • 42

    作品

  • 828

    粉丝

  • 0

    关注

  • 智能手机ROM设计中趋势分析及概念创新
  • 活动回顾|“GLSI品牌终端本土化设计”工作坊
  • 现代汽车第二代仪表盘标准量产设计
  • 慧动未来官网设计| 突破传统行业

    猜你喜欢

      2017-01-17 原创文章 教程 举报 12939 152 206 9

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

      0.0°

      你确定要举报EID聊天气泡设计小课堂:气泡设计的奥义

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年01月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      206
      152
      9

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录