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

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

2017/09/15 11095评论区

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

任务

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

设计思路

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

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

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

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

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

可爱的吉祥物

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

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

APP 使用教程

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

主界面

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

贴纸界面

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

时间选择器

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

动态贴纸

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

Logo样式

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

产品视频

从下面的视频当中,你可以对 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

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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