Москва
123022, Москва,
ул. Рочдельская, д. 15, корп. 25, офис 6
Санкт-Петербург
190005, Санкт-Петербург,
Московский проспект, д. 55, 3 этаж
Мобильные приложения YotaHub и YotaSports
приложение
архитектура
дизайн
Клиент и задача

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

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

YotaHub

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

Настройка YotaPanels

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

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

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

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

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

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

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

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

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

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

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

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

YotaCovers

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

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

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

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

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

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

YotaSports

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

Силами двух команд создать базовую версию приложения, достаточную для любителя. Анонсы футбольных и хоккейных игр, участники, счёт и основные события матчей — первое время содержание YotaSports будет таким. В следующих версиях добавятся новые виды спорта и функции.

Управление с цветного экрана

YotaSports на лицевом дисплее отличается от заднего. У обратной стороны больше возможностей, и только она хранит подробности матчей. При этом без «цветного» приложения не обойтись — с него начинается настройка.

Управление с обратной стороны

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

Дизайн интерфейса

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

Интерфейс верхнего экрана мы построили по стандартам Material design от Google, а чёрно-белую часть создали по руководству от дизайн-команды Yota Devices.

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

Знакомство с приложением

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

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

Разработка приложения

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

Ваша заявка
отправлена
Свяжемся с вами в течение рабочего дня

Расскажите
о себе
и задаче

Имя
Телефон
Почта
Расскажите о проекте и задайте вопросы — мы скоро ответим
Загрузка
Ваша заявка
отправлена
Свяжемся с вами в течение рабочего дня