睡眠应用 Sleep Cycle 重设计

一位 Shopify 的设计师在 Medium 上启动每周 redesign 一个 app 的计划，一位前端工程师想要学习 Ruby on Rails 于是在十二周时间里每周完成一个小软件并做成视频教程发表出来。陆续地，开始看到不少国内外的设计师/程序员/产品经理也开始了自己的每周挑战。

这么有趣的事情我也是要参与一份的。所以，从现在开始的二十周里我决定每周完成一个 redesign 或概念设计，领域以用户界面为主，不限于交互、视觉。并且将设计思考在每周末晚更新到我的各个社交平台上。希望在完成这个挑战的期间：

• 保持好奇心和坚持性，将课程、项目中的经验和平时的想法转化成实践。

• 能独立用英语写每次的设计思考，而不再是由中文翻译过去。

下面是第一周的设计：

---

Sleep Cycle 重设计

Sleep Cycle 是一款能够监测睡眠质量的应用，曾经达到 App Store 美区的 2013 年度付费应用排行榜的前十。晚上睡觉的时候打开应用、将手机连接充电器并放在枕头隔壁，Sleep Cycle 就会把睡眠质量记录下来，并以「醒着」、「睡眠」、「深度睡眠」三个维度、以折线图的方式记录下来。

Sleep Cycle 四个主页面

iTunes App Store 中的「Sleep Cycle」

除了监测睡眠质量外，它还有一些特色功能：

• 如果设置闹钟，能在监测到自己接近醒来的时候提前叫醒自己，防止在深度睡眠时被叫醒，影响白天的精神。

• 在数据页面中，能以横屏的方式、柱状图或折线图展示不同时间段的睡眠数据。

• 带有心率监测功能，并且可以统计对生活习惯对睡眠质量的影响（需要一定样本量）。

闹钟功能的使用流程

闹钟交互的思考

Sleep Cycle 的「提前唤醒」功能相信是最实用也是最有特色的。如果我们在深度睡眠时被叫醒，白天的精神状态可能会比较糟糕。而 Sleep Cycle 则将睡眠质量监测和闹钟结合起来，当监测到自己从深度睡眠状态中退出、接近醒来时，便提前唤醒使用者。想稍微赖床的时候，只需要稍微碰一下手机，闹钟便关闭，直到最后一次闹钟开启。

Sleep Cycle 和普通闹钟的交互流程对比

对比普通闹钟，我们通常有两种方式：

1. 设定多个闹钟。

2. 设定一个闹钟，在赖床时不断延迟闹铃时间。

而 Sleep Cycle 给出的方案是，提前响铃，直到最后一次闹钟，最后只能选择关闭。

Sleep Cycle 利用数据进行提前唤醒固然很好，但在正式闹钟响起时只能关闭、无法继续延迟，这容易发生严重误掉起床的情况。这个情况，也是 Sleep Cycle 在 App Store 用户评论区收到负反馈最多的问题。

闹钟交互流程的重新思考

带来这个问题的主要原因是在最后一次闹钟无法延迟、只能关闭。我们有两个特点可以运用：

1.关闭提前闹钟的交互动作是触碰手机，而在正式闹钟响起时，我们可以用不同的交互动作进行延时。

2.既然 Sleep Cycle 的监测睡眠功能可以知道用户将要醒来，那么它也能够知道用户将要进入睡眠—— 在正式闹钟响起进行延时，应用依然处于运行状态。

因此，我带来的解决方案是：在正式闹钟响起时可以通过点击按钮进行延时，当用户将要重新进入睡眠时，再次闹铃。

重新设计数据展示方式

Sleep Cycle 除了在睡眠监测状态下，最主要的功能便是数据展示。在数据页面，普通的竖屏模式展现每天的睡眠质量，横屏模式则展现在不同时间段的多个数据情况。

原有的数据展示方式

但是，数据展示方式存在的问题较多：

• 在普通模式，重点数据不突出，用户获取关键信息比较困难。

• 在横屏模式，时间段繁杂，「每周」、「十天/三个月/全部」被分隔成两个页面，对应的柱状图、折线图没有规律（有的数据只有柱状图、有的数据在长时间段时才出现折线图）。

• 数据分类不清晰。

两个模式下的数据分类

可以看出，数据的主要记录形式是数字，并混杂有一些文字、时间点、时间段。

所有的「数字」数据，都可以根据不同的场景，以数字、柱状图、折线图的方式展示。而针对 Sleep Cycle，除了睡眠质量图表，最主要的就是睡眠质量和睡眠时间。

数据展示方式重新设计

被重新设计的数据展示方式，成为了应用的主页，原先的闹钟、设置都通过按钮来打开。

• 在普通模式下，关键数据被突出，直接以条形图展示，并可以直观对比平均数。

• 在横屏模式下，所有数据被分为「每周」、「每月」、「所有」三个时间段；数据类型在左侧列表中切换。

• 左右翻页对应着该时间区间的前后区间，横屏模式和普通模式保持统一（比如在普通模式便是前/后一天，在横屏模式便是前/后一周、前/后一月）。

并且，将数据页面作为主页，打开应用便可以通过切换手机握持方向来查看数据，不再需要让当前页面停在数据页面时才能触发横屏模式。

闹钟时间设定的改善

针对周末，Sleep Cycle 可以关闭闹钟，只记录睡眠质量数据。这个「自然醒」的设定，原先需要到设置中进行设定。这是一个贴心的功能，因为并非每天都需要一个固定的闹钟，监测睡眠质量才是 Sleep Cycle 的核心。

周末的闹钟页面

而是否选择关闭闹钟，我认为并不需要预先设定好，关闭闹钟的日期也不应该在设置页面中才能调整。

并且配合应用主页的调整，我将闹钟时间设定的界面进行了重新设计。在闹钟时间设定的界面中，我们就可以选择是否关闭闹钟。

重新设计的闹钟时间设定界面

整合的设置页、使用引导页

设置页并非 Sleep Cycle 的常用功能，而使用引导页在学会操作后更是没有再次打开的理由。将设置页作为基础页面并不舒服，将以文字为主的使用引导页作为基础页面更是不太合理。

设置页、使用引导页改动前后

配合主页的调整，使用引导页被整合到设置页中，而设置页将作为拓展按钮被放置在主页的右上角。

Sleep Cycle 重设计

---

本文系 Weekly Design Challenge 系列，第一周

Click here to see the English version.