本文将在此分享一个全新的UI设计实战：帮助用户更好睡眠的应用 Slumber 的UI设计的过程。enjoy~

现代人对于健康越来越重视，而移动端APP 在这方面为用户提供了多种多样的帮助。无论是系统化的健身应用，还是卡路里计算器，饮食日记，运动提醒，用户可以借由多种不同的渠道和方式来保持健康的生活和良好的体型。

今天，我们想分享一个全新的UI设计实战：帮助用户更好睡眠的应用 Slumber 的UI设计的过程。这个项目被分配给我们的主力UI/UX设计师 Ernest Asanov，之前他还负责过 Vinny’s Bakery 和 Home Budget 两个著名的设计案例，想必你还记得。

项目概述

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

处理过程

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

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

主界面

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

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

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

资源库

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

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

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

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

个人页面

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

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

原文作者 : Tubik Studio

译者/编辑 : 陈子木

译文地址：https://www.uisdc.com/case-study-slumber-ui-design

本文由 @陈子木 授权发布于人人都是产品经理，未经作者许可，禁止转载。

题图来源于原文作者