陌北默

上海时时乐全天计划:手把手教你做表情包

陌北默 话题讨论 8358浏览

上海时时乐开奖时间 www.q4bq.com.cn to-do-facial-packs (31)

创作背景

@立斌 6月17号是全国大学生四六级的考试日,也是对沪江“开心词场”这款英语词汇量学习产品做推广的一次好时机。因此在5月中旬开始,我们跟运营一起策划了这次H5推广活动,从前期创意到最后上线总历时三周完成本次项目。

创意策划

说到大学生考试,往往免不了临时抱佛脚的现象。本次H5的创意便是取材于学生之间普遍流行的考前拜神的仪式。以“抽签“的名义,对用户进行词汇量测试,最后给到用户四六级成绩预测,以此来诱导用户进入开心词场学习或者分享。

to-do-facial-packs(1)

本次H5的测试方法具备一定的专业性,但为了保证用户能够耐着性子完成测试,产品经理在交互稿中给到了大量的表情包来丰富画面以弥补趣味不足的问题。

to-do-facial-packs(3)

[承载着满满表情包的H5玩法的交互稿]

 

作为视觉设计师,如何在相对枯燥的测试流程中,通过视觉手段让用户觉得有趣好玩是本次设计的难点。因此在设计之前我总结了三个问题:

  1. “考神”的形象如何体现?
  2. 什么表情能让人觉得有趣?
  3. 怎样让表情动起来?

to-do-facial-packs (34)

设计阶段

-“考神”形象的定位

所谓“考神”,必然要具备“学霸“的属性以及”神仙“的气质。综合网上大家对考神形象的描述,我发现学士服博士帽可以表达出“考”的学习特征。而依赖文曲星,财神爷等传统神仙给人的固定印象,利用长胡须,鬓角以及富态长者的形象得以呈现“神”的气质。

to-do-facial-packs(5)

[研究“考神”形象的参考图]

 

在画风的构思上,考虑到本次H5的设计目的是增加趣味,因此考神的形象必须要表现得有识别性。市面上的卡通形象从萌到贱风格不一,但流行的大多都是贱中带萌的搞怪形象。随着互联网对吐槽文化的接受程度越来越高,“贱”的气质很好的传达出一种特立独行的态度。但同时考虑到开心词场还是一款以教育为主的产品,气质不宜太夸张。因此最后在“萌”与“贱”的分寸上进行了一定的斟酌。

to-do-facial-packs(9)

综合以上的形象参考以及画风把握,最后确定了考神造型的设计方向。

to-do-facial-packs(10)

在人物的绘制上有几点需要注意。在线稿绘制时,需要对线条的粗细进行区分,外轮廓线条简洁但要相对粗,细节线条丰富但要相对细?;娴暮诎坠叵翟谙吒褰锥我3志?。为了让画面更加充实,上色的过程中每个局部都会采用“亮部-本色-暗部”三个层次去塑造人物的立体感。

to-do-facial-packs (8)

 

-“考神”表情的绘制

由于本次H5的重点是刻画考神的表情,以此直观表达出对测试结果的态度。因此为了能为考神量身定做一套逗趣的表情,我汇总了市面上大部分喜闻乐见表情包,并且对他们的背景进故事进行分别了解。

to-do-facial-packs (2)

[这些表情包的故事你都知道吗?]

 

研究过程中我发现,画一个能够准确表义的表情并不容易。

拿qq表情来说,qq表情中的“微笑”尽管属于笑的范畴,却往往给人不友好的感受。究其原因是因为,自然微笑会在苹果肌的带动下让眼睛变小,而假笑时并不会。因此“微笑”表情中瞪圆的眼睛明显符合假笑的特征。此外微笑时视线下移是一种负面情绪的体现——承受,愧疚,不同意(但无可奈何),生气(但隐忍不发作),羞涩(害怕看到对方反?。?。抑制负面情绪下的笑容会给人满满的嘲讽气息和寒意逼人的高冷感觉。由此可见一个表情处理不到位,便会产生“词不达意”的后果。

to-do-facial-packs (7)

在我们生活中,人们常见的表情一共是7中:快乐,愤怒,悲伤,恐惧,厌恶以及轻蔑。但是我们平时常用的表情远不止这7种。将基本表情混合之后,我们还能额外产生15种复合表情,而这些表情表达了我们生活中的各种情绪。

to-do-facial-packs (35)

[美剧便是讨论关于微表情的话题]

 

在绘制表情包的时候,我们可以尝试“表情融合法”来画出复杂的情感:从基本表情中随意选出两种,保留面部最能体现其特征的局部进行组合,从而将会形成一种全新的表情。比如喜悦的笑容,配上哀伤的八字眉,就形象地表达出苦笑的情绪。

to-do-facial-packs

总结了市面上各种表情包,我发现在脸部五官上,最能体现贱贱的情感色彩的部位有三处:眉毛,嘴巴以及鼻翼边法令纹。

to-do-facial-packs (29)

to-do-facial-packs (28)

to-do-facial-packs (20)

眉毛的高低变化能表现出惊讶道鄙夷的感受,嘴巴的收抿与撅翘配合法令纹同样能表现出很多有意思的情绪。而这些表情的出现归根结底是通过五官的打开与关闭组合呈现。产生厌恶的且对自身无威胁的时候表情就全部关闭,反之便全部打开,通过一张一合的局部组合,形成了如今网络上丰富多彩的表情素材。

通过以上对表情的研究,并根据H5上每个测试结果页给到的文案,最后我绘制了九种“考神”的表情。

to-do-facial-packs (22)

[表情草稿]

 

to-do-facial-packs (18)

[表情线稿]

 

to-do-facial-packs (16)

[表情色稿]

 

-动态的绘制?

H5上实现动态效果的途径很多:gif,svg,JavaScript,css3,flash以及视频拍摄等。针对本次h5的大部分画面是以表情的方式出现,我们最后选择了gif关键帧动画的方式体现动效。

to-do-facial-packs (4)

关键帧动画就是在在绘制两个关键状态后,将中间不关键的过程补齐的一种逐帧动画。对于表情这类体量小,时间短的动画,通常我们只要考虑一个表情的起始和结束状态,再将中间过程补充1-2张,便可以完成一个简单gif表情。

物体的运动都有加速和减速的过程, ? 不会突然停止和瞬间加速,。在制作gif动画中,运动遵循物理定律会更容易让人们接受。此外如果想让角色细微的动作引起观众的注意,只需要将该动作进行停格处理,也就是说给到关键动作更多的时间来强调这一部分的情绪,上图惊讶的表情便是如此。

绘制表情的方法有几种,除了重新绘制局部以外,也可以通过缩放,旋转,液化等方式进行调整。将每个局部分开进行分析处理,会让表情的制作的效率大大提高。

最后奉上整个H5的完整形态,看看你是否能独自解锁所有的表情包呢?

[H5线上传送门]

设计总结

本次H5上线宣传时间为一周,从数据上看题目测试流程顺畅,完成率、重测率均平稳且较高。专题分享率可提升空间较高,但分享后带来的二次传播数高于预期。

本次项目是我们团队第一次在H5领域做的一次设计尝试。由于开发时间紧张,加上资源配置有限,在流程和交互上很多有趣的想法也没能得到实现。为此我们也作了以下几点总结:

  1. 在项目开始之前一定要明确在这次活动的目的是什么。导流?建立形象?还是实现功能?前期定位要明确,娱乐向还是专业向不可模凌两可。
  2. 音乐是能弥补H5趣味性上很有效的途径?;疃绻芘渖虾鲜实囊衾忠粜Щ嵩黾佑没Ф圆返暮酶卸?。
  3. 测试型的H5如果在测试内容上有所局限的话,在背景设定上应该要更下功夫。有趣的故事策划讲引起用户的共鸣从而增加运营活动的分享率及转化率。

最后奉上一张工作照,证明在公司画表情真的是一件…很尴尬的事情!

——By ?食草的立斌

 

原文地址:沪江UED(公众号)

作者:立斌

 

转载请注明:上海时时乐开奖时间 » 手把手教你做表情包

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网上海时时乐开奖时间 www.q4bq.com.cn?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.www.q4bq.com.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.www.q4bq.com.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.www.q4bq.com.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
不要只设计页面,开始设计用户流程吧不要只设计页面,开始设计用户流程吧
「译文」减轻用户记忆负担-识别与回忆在人机交互中的应用「译文」减轻用户记忆负担-识别与回忆在人机交互中的应用
MD和iOS设计规范差异化思考MD和iOS设计规范差异化思考
「译文」设计规范限制了设计创造力吗?「译文」设计规范限制了设计创造力吗?
像做产品一样对Design System进行前期规划像做产品一样对Design System进行前期规划
从设计有趣的寿司开始思考视觉设计从设计有趣的寿司开始思考视觉设计
两个交互设计鸿沟-评估与执行两个交互设计鸿沟-评估与执行
如何规避Design System架构设计中的逻辑陷阱如何规避Design System架构设计中的逻辑陷阱
从「帝国时代」论如何自学成为 UX Design从「帝国时代」论如何自学成为 UX Design
【只言片语04】体验设计杂谈【只言片语04】体验设计杂谈
?
  • 孙岩的专栏作者中国国家地理网 2018-12-12
  • 那你就写个帖子驳呀!告诉你,我是普通老百姓就是错了也没有啥,你可是论坛“真理化身”呀! 2018-12-05
  • 专家共议粤港澳大湾区发展(声音) 2018-12-05
  • “陪堂妈妈”上课3000多节 班主任:她去中考没问题 2018-11-14
  • 新时代 新气象 新作为 学习宣传贯彻党的十九大精神 2018-11-14
  • 好莱坞环球影城“功夫熊猫”主题剧院开放 2018-10-24
  • 女性之声——全国妇联 2018-10-19
  • 【学习时刻·经济实说①】清华大学国情研究院胡鞍钢:伟大的发展实践产生伟大的思想 2018-10-19
  • 成果转化重要平台 创交会三年落地项目超过140项 2018-10-02
  • 美国在强化国内的经济发展,贸易战只有美国改变的战略方向才会停止,不然就会面对一切有损国家利益的项目打贸易战 2018-09-30
  • 阎良“堵路”神秘机身引猜测 或是运20原型机? 2018-09-11
  • 其中最糟糕的是;以外币收支作为本国货币之“锚”,再加以大开门的资本市场,这为国际资本周期性收割开了方便之门。 2018-09-09
  • 各地又出现狂犬伤人,政府必须做好监管,确保安全。 2018-09-09
  • 港珠澳大桥跨境私家车澳门配额接受申请 2018-08-26
  • 詹皇通知骑士队 准备与其续约 2018-08-26
  • 307| 611| 579| 190| 208| 683| 292| 852| 289| 276| 519| 452| 388| 151| 399|