火星网校
案例研究:一款助眠APP的UI设计分析
发布时间：2023-12-28 17:43:23 浏览量：202次
本文主要分享一款助眠APP——Slumber的UI 设计案例，该项目由UI / UX设计师Ernest Asanov主导。
现在，我们发现健康类APP越来越多了：健身应用程序、跟踪器、卡路里计算器、水和食物日记、活动提醒等等，这些APP的确对我们保持日常健康提供了帮助。
今天我们就来分享一款助眠APP——Slumber的UI 设计案例，该项目由UI / UX设计师Ernest Asanov主导。
项目
一款助眠APP的UI 设计。
目标
Slumber是为有睡眠问题的人设计的，里面包含故事和冥想的内容。通过这些内容，Slumber希望能够让用户放松，从而睡个好觉。
界面设计的主要任务是：
- 清晰直观的导航，用户使用这个APP主要是为了放松，而不是花几个小时获取信息；
- 时尚的视觉图形，为产品营造适当的氛围；
- 高可读性和引人入胜的动画，以支持轻松的交互。
整个APP非常简洁，一共有三个Tab，分别是首页、睡眠库、我的，下面分别来看一下具体的设计思路。
首页
至于颜色和背景的选择，移动用户的界面是根据APP的功能来设计的。Slumber采用的是深色调，传递灯光柔和的夜晚氛围。屏幕上还有一些相应的图形，整体看起来时尚、深沉。
首页上有新剧集和热门播放列表，标签栏将用户链接到APP的核心功能区域：主页、睡眠库和我的。鉴于Slumber的目标用户群体十分广泛，一些用户可能不太熟悉技术，因此设计师采用了标签+图标的方式，以便为每个人提供清晰的导航。
屏幕上另一个漂亮而引人注目的点是自定义插图，它与预加载器一起制作成动画，使得等待的过程不但不乏味，还充满了美的吸引力。
睡眠库
睡眠库中有大量轻松的内容可供选择，为了能够让用户快速的进行略读，每个选项都配了相应的主题图片。
简单明了的过滤器系统，使得用户可以选择最舒适的设置和声音组合，以完善冥想或睡眠的体验。用户可以自己调整背景效果，创建个性化的声音。在用户调整和聆听音乐的过程中，背景图片一直存在，不会消失，整个体验很完整。
Slumber上的动画并不引人注目，但是在过渡的过程中为界面添加了风格和自然外观。选择的字体可读性很高，排版层次结构非常清晰，用户可以在短时间内浏览屏幕。
睡眠库中的配图质量都非常高，不但让用户在视觉上看起来非常舒服，也创造了很好的使用氛围。
我的
“我的”类目下面有用户所有的关键性信息，用户可以自己设置就寝时间提醒，获取睡眠耳机，定价屏幕显示用户如何达到高级模式。在这个模块里，UI设计也是采用的深色背景和鲜艳的图案，容易吸引用户的注意力。
这个项目是一个有趣的挑战，在整个设计过程中，既要考虑与“健康睡眠这个主题的对应性，也要注意视觉元素的时尚型，要在二者之间取得平衡。
作者：Tubik Studio
原文地址：
https://uxplanet.org/case-study-slumber-mobile-app-design-for-healthy-sleeping-83b0acb454b0
翻译：熊小熊
本文由 @熊小熊 翻译发布于人人都是产品经理。未经许可，禁止转载
题图来自 Pexels，基于 CC0 协议
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
最新文章
