这个帮你改善睡眠的APP,是这样设计出来的 - 优设网 - UISDC

这个帮你改善睡眠的APP,是这样设计出来的

2018/05/30 12886评论区

现代人对于健康越来越重视,而移动端APP 在这方面为用户提供了多种多样的帮助。无论是系统化的健身应用,还是卡路里计算器,饮食日记,运动提醒,用户可以借由多种不同的渠道和方式来保持健康的生活和良好的体型。今天,我们想分享一个全新的UI设计实战:帮助用户更好睡眠的应用 Slumber 的UI设计的过程。这个项目被分配给我们的主力UI/UX设计师 Ernest Asanov,之前他还负责过 Vinny’s Bakery 和 Home Budget 两个著名的设计案例,想必你还记得。

项目概述

为了帮助用户获得更好的睡眠,设计一个移动端应用和相应的UI界面。

处理过程

Slumber 这个应用其实是多个功能的集合,能够帮助用户通过聆听和冥想等多种方法缓解睡眠和放松等多方面的问题。应用中的睡眠音轨收集了一系列帮助用户在完善放松和提升睡眠质量的音频素材。在这个项目当中,设计师的任务也很清晰:

  • 设计清晰直观的导航:APP 的目标是让用户得到放松,而不是花上几个小时从一屏切到另外一屏来回翻看。
  • 界面要足够视觉化,让用户保持愉悦的心情。
  • 可读性要高,动画要引人入胜,交互要简单直观。

主界面

主界面的色彩和背景主要是基于功能和用户的使用场景来设计的,由于多数情况下用户是在晚上使用这一应用,所以需要传递出夜晚柔和的氛围。所以在 UI界面要使用深沉的色彩,时尚的风格和图形化的元素能够让人感到愉悦。

主界面将会包含最新的助眠音轨和最流行的播放列表。底部的标签栏会将用户导向到 APP 的核心功能区域,也就是主页、资源库和个人页面。由于这款 APP 的目标受众非常广泛,其中许多用户不乏技术素养相对比较低的普通用户,因此设计师需要将应用的易用性和可理解性提升到一个非常高的层面,通过明确的导航和简单的界面让每个用户都能够轻松使用。

另外一个颇为有吸引力的设计,是可以自定义的封面图,以及预加载好的动画,这使得 APP 的界面不会显得乏味或者缺乏吸引力。

资源库

APP 中包含了大量的用来促眠的音频素材,用户可以在资源库中寻找自己觉得不错的音轨。

简约而清晰的过滤系统能够帮助用户找到最舒适的声音组合,帮助用户进行冥想或者睡眠。用户可以通过调整背景音效来寻求个性化的组合,找到最适合自己的。背景图片将会始终显示,并不会在调整过程中消失,确保整个流程不会断掉。

微妙的动效将会在用户的整个交互过程中提升体验的愉悦度,又不会影响操作。选择了可读性优良的字体,结合清晰的层次结构,用户可以在短时间内快速获取屏幕中的信息。

高质量的图片是素材库中内容的重要支撑,它们确保整个视觉足够优秀,并且让用户在视觉上享受到了良好的氛围支撑。

个人页面

个人页面中包含了用户自身相关的关键信息,以及一些相关的交互,比如睡前提醒,耳机模式以及相关的一些设置。用户还可以选择包含更多功能和服务的进阶模式。同样的,个人页面也采用了深色系设计,沉稳优雅。

这个项目是个有趣的挑战,相对独特的需求和小众的主题需要设计师在设计过程中仔细衡量,作出更加深思熟虑的设计决策。

「2018年设计趋势,一个都不要错过」

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

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

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

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

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

微信扫码

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

把好文章收藏到微信

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