Yotaphone 2

UX и UI для 10 приложений двустороннего телефона

Yotaphone 2
Yotaphone 2Yotaphone 2
Мобильные приложения
Телефон с двух сторон
реализован
с 28.04.2014 по 5.11.2014

Вызов

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

YotaPhone —

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


Yota Devices — международная частная компания, основной деятельностью которой является разработка и производство высокотехнологичного абонентского LTE-оборудования (модемы, роутеры, смартфоны). Только за 2012 год Yota Devices выпустила 1 миллион LTE-устройств, благодаря чему заняла 6% мирового рынка LTE-продукции в сегменте модемов и роутеров. В основе бизнес философии Yota Devices лежит принцип производства максимально удобной в использовании продукции.



На предыдущей версии Yotaphone взаимодействие со вторым экраном происходило только в узкой зоне, расположенной ниже дисплея. В новом Yotaphone 2 весь E-Ink экран сенсорный. Это означает, что пользователи могут отвечать на телефонные звонки и электронные письма, принимать или отклонять приглашения на встречи, публиковать сообщения в социальных сетях, минуя необходимость «будить» цветной дисплей. А это поможет сохранить срок службы батареи и обеспечит более 50 часов работы без подзарядки.

Второй экран — это будущее. Развитие технологий в отрасли идет по пути упрощения сложного и эффективного использования ресурсов. На смену физическим клавиатурам пришли чувствительные экраны, вместо неиспользуемой задней панели будут использоваться экраны с предельно низким энергопотреблением. Мы опередили отрасль на 5–7 лет.
Влад Мартынов, генеральный директор Yota Devices

О приложениях

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


Итак, мы работали.
Много.

Концепция GUI

GUI — Graphical User Interface, графический интерфейс пользователя — это широкий набор элементов (кнопки, меню, пиктограммы, списки, цвета, шрифты и так далее), который задаёт стандарты отображения и ускоряет проектирование интерфейсов приложения.

Мы понимали, что впереди нас ждет большая работа по графическому интерфейсу и что будет логично начать с разработки общих принципов, которые объединят десятки приложений в единую экосистему. За основу были взяты стандарты операционной системы Android, существующие на тот момент. Поскольку все приложения будут написаны именно для этой системы. И мы принялись за разработку концепцию GUI.

В основу концепции легла такая идея: найти особый стиль для приложений переднего экрана, исходя из потребностей пользователей и одновременно опираясь на параметры Yotaphone 2. Целевая аудитория — в основном представители бизнес-сообщества (в последствии это понятие расширилось), а особенность заднего экрана — монохром. Так родилась идея «газетного стиля»: небольшое количество цветов, плотный набор текста, использование особого нуар-эффекта для иллюстраций и заливок.

Как только определились со стилем, сформировали основные правила и согласовали их с командой Yotaphone 2, мы принялись за отрисовку приложений в рамках концепции. Пора посмотреть на неё в действии. Поехали!


погода

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

игровой центр

Рейтинги, награды и достижения, странички пользователей, новостная лента твоих друзей — всё это внутри приложения.

А потом пришел Google Material Design. Прямо в середине нашей работы. Неожиданный, прекрасный и такой манящий набор новых правил, не играть по которым сегодня нельзя. Но тогда Material Design был юн и полон тайн. Брать ли его за основу, переделать уже готовое? Довериться ли сырым разработкам, хотя и разработкам Google? Мы посмотрели с арт-директором Yotaphone 2 друг на друга и решили: нужно брать. Было чёткое понимание, к чему все идёт.

Google Material Design — это набор стандартов оформления интерфейсов мобильных приложений.

Цель Google Material Design — «cоздать визуальный язык, который объединит классические принципы хорошего дизайна с новшествами и возможностями технологий и науки.»


Clipper

Clipper — записная книжка. Внутри приложения — заметки, списки, фотографии, голосовые файлы. Для этого продукта мы разработали интерфейсы переднего экрана на основе Google Material Design. Это было непросто, потому что на тот момент в GMD было много «белых пятен», «слепых зон», которые сегодня уже описаны и регламентированы. А нам приходилось догадываться и додумывать. Но работать с новыми гайдлайнам от Google прямо с первого дня их выхода было положительным опытом и для всего продукта, и для нашей команды.

Помимо UI для переднего экрана (фронтскрина), мы сделали также интерфейсы заднего экрана (бэкскрина) и виджеты для него же.

Teach me

Teach me — это приложение для обучения. «Учи меня!» — так переводится название. Внутри тесты и задачи по математике, изучению языков и любым другим дисциплинам. С возможностью выводить и приложение, и его виджеты на бэкскрин.


ОТслеживание доставки

Delivery tracking — очень простая утилита, отслеживающая положение ваших посылок и писем, доставляемых разными службам, от государственных до коммерческих.

ФИнансы

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


Rss Reader

Классический функционал для чтения новостного контента через RSS — поиск и настройка источников, отображение лент и публикаций.

Sportcaster

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


Yota Store

Собственный магазин приложений Yota, в котором отображаются все продукты, поддерживающие работу в режиме двух экранов и виджетов.

Из воронежа в москву

Производственный отдел «Мануфактуры» расположен в Воронеже. Когда настало время, два смелых дизайнера отправились в головной офис Yota и работали 14 дней вместе со всей командой Yota Devices над окончанием и полировкой виджетов для бэкскрина всех приложений Yota.

Особая благодарность Владиславу Мартынову, Георгию Яковлеву, Анастасии Сидякиной и всей команде Yota Devices. Это был длинный путь.


Рендеры телефона предоставлены командой Altspace.

Над проектом работали
Провоторов Дмитрий
Менеджер продукта
Сидоров Дмитрий
Арт-директор
Моисеева Елена
Ведущий дизайнер
Стеганцов Владимир
Дизайнер
Тулинов Пётр
Дизайнер
Хныкин Денис
Менеджер
Зарезина Ольга
Менеджер
Серков Михаил
Менеджер
Сегодня в рубрике «Стартапы» — приложение Easybank для контроля расходов. Транзакцию можно добавить в три касания, и приложение автоматически добавит к ней отметку геолокации.
VC.RU про EasybankVC.RU про Easybank
Интерактивное агентство «Мануфактура» бросило вызов другим известным в Воронеже компаниям, занимающимся web-дизайном.
36.ON о VORONEZH DRIBBBLE SHOWDOWN36.ON о VORONEZH DRIBBBLE SHOWDOWN
Одного логотипа для такой задачи недостаточно, но хороший логотип всегда лучше плохого. Этот — хороший. А путь в тысячу ли начинается с первого шага.
Эркен Кагаров в бизнес-линче Студии ЛебедеваЭркен Кагаров в бизнес-линче Студии Лебедева
letter-cover Created with Sketch.