Вызов
Нашей команде был брошен вызов — разработать прототипы и интерфейсы для первых в своем роде приложений, работающих одновременно с двумя экранами: обычным и 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 часов работы без подзарядки.
О приложениях
Специальные двусторонние приложения 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.