可爱炸!人家的闹钟APP为何设计得如此有意思

在设计哪些服务于日常生活的产品之时,市场调研是绕不过去的,设计师需要仔细思考目标受众,并且仔细推敲产品应该以什么样的形态呈现。回过头来看看日常的工具类应用,无论是笔记类工具、闹钟、待办事项、计算器还是日历,它们都是围绕着用户、应用场景来进行设计,偶有产品会在这基础上增加一些独特的设计。Tubik Studio 也设计并最终开发完成了一款闹钟应用,名为 Toonie Alarm,产品上线后,发布在 Product Hunt 上,在短短4个小时内,上升来产品类列表前五。今天的文章,我们来分享一下这款产品的设计过程。

可爱炸!人家的闹钟APP为何设计得如此有意思

任务

为 iPhone 设计一款引人入胜的闹钟应用,进行完整的UI 和UX设计。

设计思路

Toonie Alarm 的设计过程和 Tubik Studio 其他的设计项目有着天然的不同,之前许多项目大多是由甲方提出需求甚至最初的概念设计,我们再根据需求来提出设计方案。Toonie Alarm 则是走的完全不同的道路,它是完完全全由我们自己提出需求、完成设计和开发的产品,我们的想法贯穿始终,没有受到第三方的影响和干扰。所以,以往甲方负责的事情,这次我们需要完全自己来做了。我们构思了它的整个功能和产品策略,思考卖点和营销计划,构建品牌,等等等等。

可爱炸!人家的闹钟APP为何设计得如此有意思

最初,我们的想法是创建一个简单的闹钟,加入有吸引力的设计和一致的元素,并且我们希望它能和其他闹钟一样,做到一些让人不那么愉快的事情:比如提醒人起床。在品牌气质上,我们定位为有趣、可爱、积极和明朗,在营销策划的时候,我们会有意识地将这些特点和概念融入进去。

通过用户研究和分析之后,我们的设计团队确定了整个产品设计和功能上具备下面的特征,或者说卖点:

  • APP中所有的功能都应该对于所有用户免费
  • 使用简单、清晰、直观的导航
  • 明亮而漂亮的界面
  • 大气漂亮的贴纸元素
  • 将闹钟唤醒功能和成就系统结合起来
  • 令人愉悦的交互动画
  • 动画化的时间选择器
  • 能和朋友即时分享成就

接下来,我们来看看 Tubik Studio 的设计师怎么实现这些功能的。

可爱的吉祥物

在之前的文章当中,我们探讨过吉祥物在品牌设计和UI设计中的重要作用,对于 Toonie Alarm 这款应用而言,吉祥物同样重要。在我们看来,吉祥物是用户和界面进行情感沟通的渠道,也是品牌形象的代表,可以强化产品的识别性。除此之外,它还能让设计师更好地营造氛围,打造个性,是让用户和产品之间建立自然交流的桥梁所在。

可爱炸!人家的闹钟APP为何设计得如此有意思

可爱炸!人家的闹钟APP为何设计得如此有意思

所以,我们为Toonie 创造了一只可爱而又快乐的小鸟作为吉祥物,它的使命是让用户的生活更加透亮,帮助用户管理时间和生活。它会为用户推送信息,提供奖励,提醒错误,为生活增加乐趣,给生活添彩。

APP 使用教程

教程是界面的重要组成部分,它可以帮助用户了解基本的交互和特色的功能。在 Toonie Alarm 当中,教程包含三屏内容,用来承载功能和交互的介绍。简短明了的介绍文案,加上平滑自然的过渡动画,结合吉祥物,营造出快乐的氛围。

可爱炸!人家的闹钟APP为何设计得如此有意思

主界面

作为一款闹钟应用,主屏幕自然是用来承载各色闹钟、设置闹钟时间的界面。当你被闹钟唤醒之后,就可以在主屏幕上收集各种各样有趣的贴纸。为何贴合起床这一特定的场景,闹钟的开关按钮被设计成为小太阳的样子。向左滑动,用户可以打开针对特定闹钟的更多功能。

可爱炸!人家的闹钟APP为何设计得如此有意思

贴纸界面

贴纸作为这款应用的奖励机制而存在,如果用户在特定的时候起床成功,它们会作为奖励,丰富你的收藏,而用户也能在收集过程中,获得成就感,逐步养成好习惯。这些贴纸都可以通过社交网络来分享,标记成就。

可爱炸!人家的闹钟APP为何设计得如此有意思

时间选择器

这款应用的另外一个突出的特色是带有动效的时间选择器。Toonie Alarm 的整个导航设计保持着简约直观地特点,当用户开始设置时间的时候,动效能够让这个过程足够愉悦。

可爱炸!人家的闹钟APP为何设计得如此有意思

动态贴纸

贴纸本身是用来强化APP本身的愉悦度的,而动画能让本身已经很可爱的形象更加生动活泼,对于用户体验的提升是明显的。

可爱炸!人家的闹钟APP为何设计得如此有意思

Logo样式

Toonie Alarm 在娱乐性上很强,从 LOGO设计上也应该凸显这一特质,可爱的漫画风字体让产品可爱的气息满溢出来。

可爱炸!人家的闹钟APP为何设计得如此有意思

产品视频

从下面的视频当中,你可以对 Toonie Alarm 有更多的了解。

【这些设计实战同样来自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

收藏 11
点赞 1

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。