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

现代人对于健康越来越重视，而移端APP 在这方面为户供了多种多样的帮助。无论是系统的健身应，还是卡路里计算器，饮食日记，醒，户可借由多种同的渠道和方式来保持健康的生和良好的体。今天，我们想分享一个全的UI设计实战：帮用户好睡眠的应用 Slumber 的UI设的过程。这项目被分配给我们的主力UI/UX设计师 Ernest Asanov，前他负责过 Vinny’s Bakery 和 Home Budget 两个著名设计案例，想必你记。

项目概述

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

处理过程

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

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

主界面

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

主界面将包含最新的助眠音轨和最流行的播放列表。底部的标签栏将用户导向到 APP 的核心功能区域，也就是主页、资源库和个人页面。由款 APP 的目标受众非常泛，其中许用户不乏技术素相对比低的普通用户，因此设计师需要将应用的易用和理提升到一个非常高的面，通明确的导航和简单的界面让每个用户能够轻松使用。

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

资源库

APP 中包含了大量的来促眠的音频素材，户可在资源库中寻自己觉得错的音轨。

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

微妙的效将会在户的整个交互过程中升体验的愉悦，又会影响操作。择了可读性优良的字体，结合清晰的层次结构，户可在短时间快速获取屏幕中的信息。

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

个人页面

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

这项目趣的挑战，相对独特的需求小众的主题需设师设过程中仔细衡，作出加深思熟虑的设决策。