🇷🇺
Приложение для отслеживания сна
Автор создавал проект 4 месяца, 4 раза перерисовывал и переосмыслял дизайн с нуля. После новости о приложении для отслеживания сна, разрабатываемом Apple, начал создание собственного концепта, который отражал бы видение этого приложения. Во время работы над дизайном изучил предостаточное количество научных статей (будут приведены далее). Информация о факторах, которые влияют на сон, приводится из источников: "Sleep Research Society", "Oxford Academic", "SleepFoundation.org" и другие. Скрипты на языке Java Script написал для создания реалистичных данных сердечного ритма и промежутков стадий сна. Проект "Приложение для отслеживания сна" — показатель принципов и подходов автора к работе. Начинаем.
Главный экран
🔎 Анатомия главного экрана
1-й и 2-й элементы
В центре главного экрана приложения - будильник, который отображает следующее время пробуждения пользователя. Над ним красуется "линейка", - шкала времени, на которой отмечены ближайшие минуты относительно заданного пользователем интервала умного будильника. Интервал по умолчанию - 30 минут, т.е. часы с помощью датчиков будут будить человека в оптимальное для подъёма время с запасом ±15 минут. Например, если будильник установлен на 12:30, то прозвенит в оптимальное время с 12:15 до 12:45. Чтобы определить, какой из режимов установлен, посмотрите на рулетку. Если подсвечено одно число (допустим, 30), значит установлен "обычный" режим будильника, если же подсвечены два числа (например, 15 и 45), а 30 остаётся в тени - режим умного будильника готовится творить чудеса.
3-й элемент
Третий элемент интерфейса, "Умная кнопка", меняется относительно факторов: время, предпочтения пользователя, расписание дня и т.д. Умная кнопка учится по мере использования пользователем приложения "Сон", взаимодействия с часами и добавления новых аксессуаров в приложение "Дом". Кнопка не покидает места, но меняет действие, рекомендуемое пользователю, поэтому её невозможно потерять. Удобство и максимум полезности - это не только об умной кнопке, но и о всём приложении.
Меню Force Touch на главном экране
Force Touch в watchOS 6* - не только предоставляет возможность переключить настройку или стиль отображения элементов, но и способ навигации. Технология при повседневном использовании часов становится родной, поэтому "нажать сильно" - становится интуитивно понятным действием. Сильное нажатие на главном экране приложения "Сон" открывает меню из трёх пунктов: "Установить время подъёма", "Переключить в умный режим" (если установлен умный - "... в обычный режим") и "Настройки приложения".
* - для этой версии операционной системы прорабатывался дизайн, ведь работа начиналась ещё до выхода 7-й версии
📅 Установить расписание подъёма
При нажатии на "Установить время подъёма", открывается список будильников. Пользователь сразу видит время и расписание, по которому будильник будет звонить. Инструкция выше показывает, как легко создать новый будильник и выбрать его расписание. О расписании будильника позже, но важно помнить, что будильники устанавливаются как на повторение, так и на одно срабатывание. Быстро и без напряжения выбрать нужное расписание помогут пункты "Завтра", "По выходным", "По будням", т.п. Для ликвидации путаницы будильники не создаются с одинаковыми расписаниями, однако переопределяют друг друга. Например, пользователь устанавливает будильник "на 9:45, по выходным", а затем создаёт "в следующую субботу, на 7:00". Будильник прозвенит в 9.45 в следующее воскресенье, ровно как и в каждые последующие выходные, но в следующую субботу - в 7:00.
Выбор дней в расписании подъёма
Во время установки расписания будильника, пользователю доступен пункт "По выбранным дням". На создание понятного принципа установки будильников ушла не одна головная боль 🤯, эта функция - пример правильно и прогрессивно решённых задач. Небольшие кружочки представляют каждый из дней недели, по нажатию кружочки включаются или выключаются. Как только нужные дни выбраны, достаточно прокрутить вниз колёсико Digital Crown или свайпнуть пальцем по экрану, чтобы нажать кнопку "Сохранить". Некоторые пользователи войдут в ступор после выбора дней, если не подсказать, где кнопка. Часть кнопки "Сохранить" торчит снизу экрана, чтобы не слишком навязчиво намекнуть: "ещё не всё".
Установить время подъёма
Настройка времени у будильника не менее интуитивна. После нажатия на существующий будильник или создания нового кнопкой "Добавить", нужно выбрать поле с часами. Компания Apple разработала базовый элемент ввода чисел для экрана часов Apple Watch с вниманием к деталям. Колёсико Digital Crown точное, поэтому легко установить нужный час или минуту, настройка которых переключается нажатием на соответствующий контейнер.
Два режима
- "Переключить в умный режим" (если установлен умный - "... в обычный режим").
Второй пункт меню Force Touch на главном экране переключает режимы, а умная рулетка напомнит, какой режим установлен.
Настройки приложения
Перейти к настройкам приложения возможно по сильному нажатию через Меню Force Touch на главном экране. Аккуратный список с красочными и визуально узнаваемыми иконками помогает быстро выбрать нужную опцию.
Настройки приложения - подробно
Уведомления
Пользователь будет видеть 2 уведомления: до сна и чуть позже подъёма, например ходьбы по квартире. Первое уведомляет за 5 минут до времени покоя о времени подъёма и приглушении звонков и уведомлений. Второе сообщает о качестве и продолжительности сна, уведомление отправится после начала активности, т.е. ходьбы, подъёма или спуска, которая фиксируется с помощью датчиков Apple Watch, iPhone и Home Kit устройств.
Уведомления отображают минимальное количество информации, чтобы не отвлекать пользователя от дня. На каждом уведомлении находится одна кнопка, которая лучше подойдёт для конкретной ситуации. До сна - "Настроить время подъёма", после подъёма - "Посмотреть полный отчёт".
Авторский подход уже прослеживается через каждый экран приложения. Каждая кнопка на нужном месте, каждый элемент обоснован. Тяжело выдержать грань между навязчивостью и своевременным информированием пользователя. По этой причине в приложении уведомления настраиваются.
Команды
Быстрая команда - удобный способ решения задач, состоящих из произвольного количества шагов. Эти шаги могут задействовать приложения, искать информацию, сохранять данные и многое другое. С помощью приложения «Команды» пользователь может создавать собственные быстрые команды, объединяя действия в последовательности. Некоторые команды доступны для запуска и использования с часов Apple Watch.
Круто, если бы часы могли выполнять быструю команду в момент отхода ко сну или пробуждения, открывать или закрывать шторы, выключать свет, ставить музыку - расслабляющий альбом или заряжающий на целый день трек. Приложение может это, достаточно в меню настроек выбрать нужный раздел ("До отхода ко сну" / "После пробуждения") и выбрать нужную команду среди созданных. ✨
Интервал умного режима
🔖 Давайте вспомним механику работы:
Интервал по умолчанию - 30 минут, т.е. часы с помощью датчиков будут будить человека в оптимальное для подъёма время с запасом ±15 минут. Например, если будильник установлен на 12:30, то прозвенит в оптимальное время с 12:15 до 12:45.
Интервал настраивается в два шага. Пользователь нажимает в настройках приложения кнопку "Интервал умного режима" и встречает знакомый элемент ввода, крутит колёсико Digital Crown, выбирает нужный интервал и нажимает "Сохранить". Мини-рулетка справа покажет, как это влияет на минуты пробуждения относительно 30 минут. Для интервала в 40 минут числа будут 10 и 50.
Мелодия подъёма
Пользователь в соответствующем пункте настроек выбирает понравившуюся мелодию 🎶. Каждая мелодия проигрывается при нажатии на название, а потом будит пользователя по утрам. Заметили кое-что? 🤫
Будильник
🔎 Анатомия экрана будильника
Описание
Поговорили о главном экране приложения, нажимали сильнее для перехода в меню Force Touch и подробно разобрали пункты и подпункты. Пора уже и на главное в приложении для отслеживания сна посмотреть - на будильник ⏰. Экран будильника сдержанный и лаконичный: контрастные часы, кнопка для повтора будильника через 9 минут и кнопка остановки будильника. Если пользователь нажимает "Стоп", то отслеживание сна прекращается.
Идём глубже
Так лёгкий для восприятия будильник выглядит на часах Apple Watch. Пользователь останавливает будильник нажатием в самую нижнюю часть экрана, а нажатие колёсика Digital Crown переведёт будильник на 9 минут (дублирует функцию кнопки "Повтор") 💤. Дизайн будильника напоминает будильник на главном экране приложения. Такие детали и отличают 4-х месячный проект с получением тонны опыта от пустого фантика, созданного для лайков.
Обзор
Свайп вправо 👉
На главном экране приложения пользователь делает свайп вправо, открывается лаконичная и "выдержанная" страница, которая содержит: кнопку с некоторой информацией о предыдущем сне, открывающую подробный отчёт, блоки со средним временем и качеством сна за неделю, карточки с факторами, которые влияли на сон за неделю с информацией о влиянии. О возможности свайпа понимаем из двух точек - элементов управления страницами.
Карточки
Каждая карточка отражает фактор, который влияет на сон пользователя. Карточки формируются на основе данных, полученных сенсорами Apple Watch, iPhone и устройств Home Kit. На каждой карточке находится процент, который обозначает влияние этого фактора на качество сна. Надпись снизу указывает изменения в соответствующих единицах измерения. Зелёный цвет - для положительных факторов, оранжевый - для отрицательных, т.е. понизивших качество сна.
🔎 Анатомия карточки
Подробнее о карточках
Карточки практичны, способны в небольшом прямоугольнике показать всю нужную информацию, касающуюся соответствующих факторов. Важно показать и физическую величину - знакомую и понятную человеку систему измерений, чтобы пользователь мог проще исправить отрицательный фактор или ещё сильнее улучшить положительный. Карточка в примере выше читается 💬 так: "Громкий шум ухудшил качество сна примерно на 8%, при этом шум во время сна на 5 дБ громче, чем на предыдущей неделе".
Нажатие на карточку открывает описание фактора, влияющего на сон. О некоторых из этих факторов люди даже не задумываемся, но они важны. Иконка с размытой копией сзади соответствует фактору, а текст с достаточно большим размером шрифта легко читается на экране часов. Пользователю будет полезно потратить время, чтобы узнать о сне намного больше 🎓. Информация собрана из научных статей, источники, относящиеся к проекту, будут приведены в конце статьи.
Страница "Обзор" в реальной жизни
Предыдущий сон
Содержание
Свайп вправо на главном экране открывает доступ к кнопке "Предыдущий сон". После нажатия на эту кнопку откроется страница с подробным отчётом о предыдущем сне. Страница начинается с графика, на котором отображаются периоды сна в каждой стадии, ниже расположен блок с информацией о времени, дате сна и некоторых подробностях сбора информации. Следующий блок - качество сна, содержащий время начала и окончания сна. Ниже этого блока расположена кнопка, открывающая отчёт по данным сердца ❤️. Кнопка содержит информацию о среднем пульсе в течение сна и времени начала, окончания измерений. Последний элемент страницы - список факторов, повлиявших на качество сна. Прочитать подробно о дизайне и механике работы карточек можно в предыдущем пункте.
🔎 Анатомия графика
Описание графика
График отображает стадии сна пользователя и изменения стадий в течение сна. Небольшой размер экрана создаёт задачу - сделать график информативным и приятным глазу, а благодаря грамотному решению этой задачи, график выглядит потрясающе. На графике нет лишних элементов, крупный размер шрифта позволяет рассмотреть временную шкалу, а названия стадий сна различимы благодаря Retina-дисплею и прекрасной читабельности шрифта. Пользователь не должен пугаться 😱, что сон не начинается с первой стадии ("Быстрого сна"). Эта стадия является последней и самой "лёгкой", но сон начинается с первой стадии медленного сна. Кружочки отображают участки, где сон не был зафиксирован, проще говоря - "бодрствование".
Страница "Предыдущий сон" на экране часов
Отступление
Страница предыдущего сна содержит знакомые карточки, которые выглядят прекрасно. Перед тем, как поговорить об отчётах, составленных по данным сердца, прервёмся на мысли автора 🤔.
Важно понимать, что дизайн и технологии идут вместе. Уверен, что благодаря большому количеству сенсоров в Apple Watch, iPhone и устройствах умного дома Home Kit, такие отчёты реализуемы. Почему же тогда Apple не добавила столько информации о сне в уже выпущенном приложении? Так происходит при выпуске сложного приложения. За время тестирования не собрать столько данных для обучения нейронных сетей и более точного анализа данных, сколько требуется. После выпуска приложения с ограниченным количеством функций, можно выиграть время, собрать необходимые данные анонимно и безопасно 🔒 с часов по всему миру и добавить крутые, проверенные и точные новые функции. Я считаю, что именно это ждёт приложение для отслеживания сна от Apple. Этот концепт - в первую очередь размышления и отчёт о достижениях в UI/UX дизайне.
Отчёт по данным сердца 🫀
Инструкция на изображении выше - алгоритм открытия отчёта, составленного по данным сердечного ритма в течение сна. На странице предыдущего сна нужно пролистать до блока "Пульс" и нажать на карточку. Отчёт содержит в себе график сердечного ритма, средний пульс, максимальный и минимальный пульс. Дополнительная информация доступна при пролистывании отчёта, дизайн которого повторяет дизайн приложения "Пульс". График сердечного ритма читабельный, благодаря контрастным цветам, шрифтам системы watchOS и высокой чёткости дисплея часов Apple Watch ⌚️. Сердечный ритм во время сна меняется от стадии к стадии, поэтому, для лучшего контроля за состоянием здоровья, каждому пользователю будет полезно видеть подробную информацию о пульсе.
Небольшое отступление с большим значением ⚠️
Дизайн находится в рамках. Небольшие размеры экрана, ограниченное количество символов, предопределённый набор цветов. В этом и сложность его создания и его красота. Интерфейсы, помимо прочего, должны быть интуитивно понятными. Не только страница "Предыдущий сон", но и само приложение выглядит целостно и лаконично. Использование элементов единой стилистики, умение сочетать красоту и функциональность - инструменты, которыми необходимо пользоваться регулярно. Ведь благодаря им приложение ощущается, как само собой разумеющаяся вещь, дизайн не бросается в глаза, словно пропадает. Пользователь выполняет действие, нажимая на кнопку не глядя, ибо знает, "куда там надо нажать" и к чему это приведёт. По-настоящему крутой, готовый к проверке временем и сбалансированный дизайн приложения - это дизайн, который не вызывает вопросов. Пользователю просто хочется добиться желаемого результата. Он, возможно, даже не замечает некоторых фишек, оригинальных подходов, и это - круто, ибо значит, что дизайн сделан "на века" 🛠.
Меню Force Touch на графике сна
Если нажать сильно на графике сна, то откроется меню из 1 пункта. Задача этого меню - сделать возможным открытие подробного отчёта, составленного по стадиям сна, так как акцент на этой функции делать не нужно. Этот отчёт может пригодиться для врача 👩⚕️, или если пользователю будет интересно подробнее узнать про свой сон, но не так важен при повседневном использовании приложения.
Отчёт по стадиям сна 🛏
Отчёт состоит из карточек, каждая из которых по нажатию открывает страницу с нумерованным списком промежутков времени пребывания пользователя в соответствующей нажатой карточке фазе сна. В списке можно посмотреть и продолжительность каждого промежутка (чтобы пользователям не приходилось считать самим, "з" - значит "забота"). Карточки отображают суммарное время сна в каждой из стадий, количество интервалов, а для стадий сна с одним временным интервалом - сами интервалы. Реализованный вид таких списков и карточек - приятный способ подробно исследовать стадии сна. Точка 🥇
Отчёт по стадиям сна в реальной жизни
Мысли автора 🙋♂️
Мне не нравится, что разработчики бояться экранов умных часов. Нужно работать в 2, 3 раза больше, чтобы уместить самую важную, нужную информацию красиво и лаконично, при этом не причиняя неудобств в использовании приложения. От многого приходится отказываться, на одно «да!» придётся сказать тысячу раз «нет.», но это нужно сделать. На маленьком экран контент выходит на передний план так, как ни на одном другом устройстве. Каждый пиксель на счету, поэтому думайте, исследуйте, старайтесь, но не сдавайтесь. Верю в то, что приложения на часах не должны уступать по внешнему виду приложениям на других устройствах. Проект приложения для отслеживания сна призван не только доказать это, но и дать почву для размышлений другим дизайнерам. Без выдумок, без концептов супер-мега-технологичных часов 10.0 можно сделать крутое приложение. Для этого есть все необходимые инструменты.
Приложение к проекту 📦
График сна и стадии сна
Чтобы отчёт по стадиям сна был реалистичным, нужно было подробно изучить последовательность этих стадий в здоровом сне, затем написать специальный алгоритм, который генерирует временные промежутки для каждой стадии сна на основе времени начала и окончания сна, последовательности стадий и общем времени пребывания в каждой стадии.
Изученные статьи 🧑🔬
Дополнительная фишка
Выбор расписания подъёма будильника не ограничивается умными пунктами "Завтра" или "По выходным". Полезная фишка - возможность устанавливать расписание, основанное на событиях, напоминаниях и прочих вещах, интегрированных с приложением для отслеживания сна. На примере выше - предложение выбрать расписание для будильника "В день рождения Ксюши". Такой будильник будет предложен накануне дня рождения.
Пока всё 🎬
Приключение, длиною в несколько месяцев
Ссылки на автора:
© egsmrnv:
Другие лица не могут использовать эту работу для каких-либо целей без явного разрешения.
