靠着吉祥物,这款闹钟APP成功俘获了用户的心 - 优设网 - UISDC

靠着吉祥物,这款闹钟APP成功俘获了用户的心

2017/09/19 10853评论区

产品和用户之间,通过界面和交互来进行沟通,沟通的方式是每个设计师都需要深入思考的事情。不同的界面元素发挥着不同的功能,而其中最特殊的大概就是和品牌有着紧密关联的吉祥物了。

在Tubik Studio 设计和开发闹钟应用 Toonie Alarm 的过程当中,吉祥物赋予了这款应用以足够的情感元素,将这款APP 从可用和易用的层面上,向上拉伸到有个性,有特色有品牌气质的层次。

吉祥物对于产品而言无疑是有用的,它的作用超越了单纯的可用性,在品牌策略和后续的持续发展中,有着独特的价值和非一般的作用。吉祥物可以反映产品的性格,形成风格和氛围,通过视觉化和体验化的设计,强化和用户的沟通。和其他的元素最根本上的不同,吉祥物有着人格化的特征,替代产品发声,构建情感联系,创造意想不到的效果。

上一篇文章《可爱炸!人家的闹钟APP为何设计得如此有意思》当中,我们完整阐述了Toonie Alarm 这款应用的设计过程,现在还是以这个闹钟应用为例,我们来聊聊吉祥物在 UI和APP中是怎么设计出来的。

任务

为 Toonie Alarm 这款 APP设计吉祥物。

工具

Wacom Intuous Pen Tablet,AI,PS

设计过程

对吉祥物的需求

吉祥物是用户和产品之间产生情感关联的纽带。吉祥物将会被集成到界面当中,尽量深入到日常的交互当中,成为核心。

在UI设计当中融入吉祥物,优点很明显:

  • 记忆性。相比于抽象的概念和特征,具象化的形象在用户大脑中所存在的时间更长。
  • 可识别性。相比于产品的其他特征,吉祥物更容易被用户识别并记住。
  • 视觉标识。吉祥物能够更好地将产品各方面的特点传递出来,充满人性化的形象视觉化的表现手法,能让用户更加难忘。
  • 个性化。吉祥物是品牌呈现其视觉特质和个性的渠道之一,用户会很容易了解产品的特质。
  • 风格化。吉祥物通常能够让界面随之拥有独特的风格。
  • 一致性。吉祥物贯穿整个产品不同的界面,创造出一致的体验。
  • 情感化。正如同前文所说,吉祥物大多会以拟人的形象出现,能容易触发用户的情感反馈。
  • 美感。吉祥物可以承载更加复杂的艺术和设计元素,满足用户的审美需求,从而让产品具备以用户为中心的特征。
  • 长期策略。吉祥物通常让产品和品牌的长期运营具备了可行性,团队可以在此基础上改善体验,但是又不会失去其独特的识别性。

通过深入的调研,我们发现一个真正优秀的吉祥物通常需要通过分析目标受众的需求、愿望和期望之后,结合市场环境,适当地加入原创性来完成设计方案。所以,它应该具备下面的特征:

  • 难忘
  • 易于识别
  • 原创
  • 拥有一致的设计
  • 灵活的适应性
  • 适宜于不同的任务
  • 兼容不同的屏幕和分辨率
  • 风格协调
  • 对用户友好

Toonie 是一只快乐的小鸟

对于 Toonie Alarm 而言,这只快乐的小鸟吉祥物是整个产品设计中的核心。作为和用户沟通的焦点,Toonie 还是一个很好的品牌形象,足以营造风格独特,个性突出的APP。既然这只小鸟想让世界变的更加明亮,那么它应该和闹钟之间有足够的互动,传递信息,提供降低,提示错误,在日常生活中发挥作用。

创建吉祥物的第一步并非是构建形象,而是要在战略上对这个角色有足够的认知,在功能上有完整的策略。考虑到APP本质上只是一个闹钟,所以,这个吉祥物要能够高效而鲜明地反映这一特征。另一方面,设计师还需要考虑市场竞争的问题。其他许多同类产品没少花心思通过不同的风格来吸引用户了,所以这个吉祥物不仅要看起来足够原创以应对竞争,而且要能够快速清晰地传递信息,服务于APP和用户。

在吉祥物的具体设计上也不能偷懒。多数情况下,设计师会选取一种动物作为吉祥物,但是作为主要的吉祥物,我们认为生造的形象并不如传统的概念更加吸引人,常言道早期的鸟儿有虫吃,于是我们为Toonie创造了一只可爱的蓝色小鸟。

另外一方面,Tubik Studio在创造Toonie Alarm的时候,和其他的应用还有一些不一样的地方,它额外选取了大量的动物形象制作成了小贴纸,在你完成特定任务,达成成就的时候,作为奖励提供给你。这些可爱的贴纸,赋予这款APP比较强的娱乐性。

接下来,我们看看 Toonie 的蓝色小鸟吉祥物有着什么突出的功能。

吉祥物在UI中的功能

打开应用之后,首屏是一个漂亮的动画,风格颇为可爱而有趣 Toonie 字母逐个跳出,整个应用活泼的基调在此可见一斑。

接下来就是新用户引导教程,这个部分只有在初次使用的时候会出现。Toonie 会在教学界面当中,扮演不同的角色,搭配着动效,帮用户更好地了解这款应用的几个基本的功能。教学界面不多,3屏简明地介绍了其中的主要功能和特征。

在用户使用过程中,Toonie的蓝色小鸟吉祥物会伴随着通知或者提醒时常出现,文案也常常会设计得如同从小鸟嘴中说出一样,营造出和用户的对话感,这是将吉祥物人格化的设计策略。

在下面的空状态界面中,用户还没设置闹钟,蓝色小鸟降落抱头,让界面不至于空置,营造出有趣的氛围,结合顶部的提醒,引导用户开始设置闹钟和提醒。

整个APP的导航主要通过底部3个按钮来实现,第二个是用来搜集成就贴纸的界面,这也是通过奖励机制来鼓励用户多使用Toonie 完成成就,获得贴纸。

当用户搜集了所有贴纸,获得成就得到祝贺的时候,同样会有蓝色小鸟吉祥物前来道贺。

正如同前面所说的,吉祥物在开发和设计上有着巨大的潜力和持续的价值,比如在万圣节这样的节日就能推出特殊版本的贴纸~

在圣诞节到来的时候,通过吉祥物来通知用户搜集特别版的贴纸。

Toonie Alarm 这款APP 将吉祥物的常见使用策略都展现了出来,你可以从中了解到如何使用吉祥物来提升APP使用的效率,如何从不同的层面提升整体的多样性。如果能够合理运用,吉祥物比起文字和普通的UI控件,拥有更强的影响力和生命力。

【这些设计实战同样来自Tubik Studio】

  1. 《富有未来感的柏林之夜APP,是这样设计出来的》
  2. 《设计实战!城市指南网站着陆页是这样设计出来的》
  3. 《这款给医生的专业APP,设计上有着怎样不同的要求?》
  4. 《帮你策划盛大婚礼的APP,设计思路是这样的》
  5. 《这款面向大众的理财APP,设计过程是这样的》
  6. 《一款真正让人专注的效率应用,应该这么设计》

原文地址:uxplanet
原文作者:Tubik Studio
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/case-study-toonie-mascot-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 用户体验设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里