Нимакс Стратегия Веб-разработка Брендинг Интернет-реклама Видеопроизводство Справочник клиента Вакансии English

YotaHub

Клиент

Yota Devices — автор двухэкранного смартфона YotaPhone. К релизу новой версии уже успевшему нашуметь устройству требовалось отдельное приложение — программа для настройки второго дисплея. Продукту дали имя YotaHub и решили разрабатывать большой командой: визуализацию клиент доверил нам, а внедрение взял на себя.

Задача

UX и UI дизайн первой версии приложения YotaHub. Чтобы решить задачу, мы изучили функции чёрно-белого экрана, разобрались с контекстом использования и отработали сценарии взаимодействия. Команда дизайнеров Yota Devices стала арт-директором нашим ребятам: они ставили задачи, делились идеями, правили и принимали результат.

Первый экран

Светодиодный дисплей с высоким разрешением Full HD. Лицевая часть устройства — классический смартфон на Android с известным набором мобильных приложений.

Второй экран

Чёрно-белый дисплей, выполненный по технологии E-ink. Экран транслирует только важные данные и состоит из небольших информационных блоков — виджетов.

Достоинства
второго экрана

Обратная сторона YotaPhone2 хороша для чтения, медленно расходует энергию и служит телефону красивой обложкой. При этом главным преимуществом дисплея называют информативность. На одной панели он способен уместить часы, температуру, последние новости, твиты и письма, пропущенные звонки, встречи и напоминания.

Приложение
YotaHub

Второй дисплей пользователь настраивает с лицевой стороны устройства, через приложение YotaHub. Система состоит из обложек и панелей с виджетами — YotaCovers и YotaPanels. Именно с выбора объекта для редактирования начинается интерфейс.

Настройка YotaPanels

YotaPanels состоит из четырёх редактируемых панелей с виджетами. Как будет выглядеть каждая, решит пользователь. Приложение предложит два пути: выбрать готовые панели или скомпоновать каждую самостоятельно.

Наша задача: подать обе возможности и ловко провести пользователя по обоим сценариям — процесс должен быть понятным и даже интересным.

Решение задачи

Android любят за функциональность и особую гибкость. Систему изучают, осваивают, кропотливо настраивают. Помня об этой особенности, мы предложили несколько способов управления чёрно-белыми панелями: для простых пользователей и гиков.

Следуя главному сценарию, пользователь войдёт в интерфейс YotaPanels, выберет панель, нажмёт на кнопку «Редактировать» и получит список готовых решений (вкладка Presets открыта по умолчанию). Для тех, кого не удовлетворят заготовки, есть альтернативные сценарии. Например: в режиме редактирования панели, перейти во вкладку Grids, выбрать подходящую сетку, а затем вручную наполнить каждый блок.

Выбор готовых панелей

Нажатие на кнопку «Редактировать панель» проводит пользователя
к списку готовых решений.

Конструктор панелей

Во вкладке Grids пользователь выберет сетку
и вручную заполнит пустые области виджетами.

Замена панелей

Повторное нажатие на опцию «Редактировать панель»
снова приведёт пользователя к выбору: Presets или Grids.

Редактирование виджетов

Нажатие на виджет вызовет диалоговое окно
с двумя возможностями: «Удалить»и «Настроить».
Опция «Настроить» прилагается к некоторым виджетам. Например, специальные настройки «Погоды» нужны, чтобы уточнить город.

Удаление и очистка панелей

Редкие, скорее нежелательные функции, которые мы поместили
под кнопку в правом верхнем углу экрана.

YotaCovers

Другая часть приложения — YotaCovers, интерфейс для управления обложками. Они выполняют две функции: преображают внешний вид устройства и оберегают персональные данные владельца. В YotaCovers доступны фотографии с телефона, социальных сетей и специальной папки с чёрно-белыми иллюстрациями YotaCast.

На второй экран пользователь выведет одно статичное изображение или создаст слайд-шоу из нескольких картинок.

Выбор фотографий для обложки

Чтобы создать статичную обложку, пользователь выберет одно изображение.
Чтобы создать слайд-шоу, пользоватеть отметит несколько изображений.

Выбор альбома для обложки

Долгим нажатием на альбом пользователь создаст слайд-шоу автоматически.

За первой версией приложения последует обновление. Для того чтобы упростить и отладить управление вторым экраном, все новые функции и элементы интерфейса мы строим на отзывах пользователей YotaPhone2. О результате расскажем отдельно.


Образователь­ные проекты Mail.Ru
Курсы для разработчиков от Mail.Ru и технических вузов России.
архитектура, тексты, дизайн, разработка
Технополис
Образовательный проект Mail.Ru Group и Политеха в Санкт-Петербурге.
архитектура, дизайн, разработка
Zehnder-online
Магазин отопительных приборов немецкого бренда Zehnder.
сайт, дизайн, разработка
Hotel Schools
Учёба в швейцарских институтах гостеприимства.
концепция, дизайн, разработка