18801051825的个人主页

http://www.qtcn.org/bbs/u/185984  [收藏] [复制]

18801051825

  • 2

    关注

  • 11

    粉丝

  • 142

    访客

  • 等级:新手上路
  • 身份:禁止发言
  • 总积分:0
  • 男,2011-01-01

最后登录:2021-03-12

更多资料

日志

案例研究:一款助眠APP的UI设计分析

2018-07-13 09:25

本文主要分享一款助眠APP——Slumber的UI 设计案例,该项目由UI / UX设计师Ernest Asanov主导。
现在,我们发现健康类APP越来越多了:健身应用程序、跟踪器、卡路里计算器、水和食物日记、活动提醒等等,这些APP的确对我们保持日常健康提供了帮助。
今天我们就来分享一款助眠APP——Slumber的UI 设计案例,该项目由UI / UX设计师Ernest Asanov主导。


项目

一款助眠APP的UI 设计。


目标

Slumber是为有睡眠问题的人设计的,里面包含故事和冥想的内容。通过这些内容,Slumber希望能够让用户放松,从而睡个好觉。
界面设计的主要任务是:
  1. 清晰直观的导航,用户使用这个APP主要是为了放松,而不是花几个小时获取信息;
  2. 时尚的视觉图形,为产品营造适当的氛围;
  3. 高可读性和引人入胜的动画,以支持轻松的交互。
整个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 协议
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 cs界面设计 ipad界面设计 包装设计 图标定制 用户体验 、交互设计、 网站建设 平面设计服务


相关文章:
------------------

创意设计的方法—无穷关联法
多伦多订餐APP-懒洋洋
UI设计师的日常——UI设计师平常都干些什么
帮助您做出漂亮版式设计的八个实用技巧

标签:    用户体验    iphone    UI设计欣赏    app    产品    APP界面设计欣赏    可用性    符号    设计iPhone
分享到: 新浪微博 腾讯微博 微信 微信 更多




阅读全文
分类:默认分类|回复:0|浏览:629|全站可见|转载
 

Powered by phpwind v8.7 Certificate Copyright Time now is:03-28 22:08
©2005-2016 QTCN开发网 版权所有 Gzip disabled