Как разработать дизайн новой мобильной операционной системы: кейс 65apps и РОСА. Часть 2: нативные приложения

Как разработать дизайн новой мобильной операционной системы: кейс 65apps и РОСА. Часть 2: нативные приложения

Вместе с компанией АО «НТЦ ИТ РОСА» мы создавали дизайн для их новой мобильной операционной системы «РОСА Мобайл», которая работает на смартфоне «Р-ФОН». Отдельной интересной частью проекта стала разработка нативных приложений.

Нативные приложения — что это?

Каждая ОС — это не только дизайн, навигация и иконки приложений, но и целая группа встроенных сервисов.

Начинка и дизайн нативных приложений разрабатывается специально под каждую ОС, обычно это:

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

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

— Сергей Кравцов, член совета директоров «НТЦ ИТ РОСА», «Рутек»

Представьте масштаб: кроме серьезной работы по созданию концепции и дизайна самой операционной системы нужно сделать еще несколько приложений.

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

Галерея

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

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

Вот так выглядит управление фотографиями в Галерее

Главное, что нужно учесть — чтобы на самых маленьких плитках помещались важные функциональные элементы: кнопка «добавить в избранное», длительность видео, чекбокс для выбора фотографий.

Обратите внимание, что фон для полноэкранного режима фото и видео всегда черный независимо от темы устройства — это дает более яркий контраст

— Юлия Монахова, арт-директор 65apps

Обратите внимание, что фон для полноэкранного режима фото и видео всегда черный независимо от темы устройства — это дает более яркий контраст

— Юлия Монахова, арт-директор 65apps

Контрастный черный фон полноэкранного режима и размеры плиток

Также приложение должно уметь отображать видео не обрезая, в зависимости от:
а) ориентации изображения
б) и положения телефона.

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

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

— Сергей Кравцов, член совета директоров «НТЦ ИТ РОСА», «Рутек»

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

— Сергей Кравцов, член совета директоров «НТЦ ИТ РОСА», «Рутек»

Демонстрация горизонтального и вертикального видео при разных положениях телефона

Телефонная книга

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

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

Список контактов

Также важно корректно оформить индикацию входящих и исходящих вызовов, проработать разные сценарии наполнения карточки контакта.

Функции: блокировка номера, редактирование, выбор основного номера

Карточка контакта

Еще нужны подсказки при наборе номера: когда пользователь начинает вводить цифры, система показывает контакты, в которых эта последовательность уже есть, чтобы сразу выбрать нужный.

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

— Юлия Монахова, арт-директор 65apps

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

— Юлия Монахова, арт-директор 65apps

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

— Сергей Кравцов, член совета директоров «НТЦ ИТ РОСА», «Рутек»

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

— Сергей Кравцов, член совета директоров «НТЦ ИТ РОСА», «Рутек»

Подсказки и масштабирование номера в зависимости от количества цифр

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

Подсказки и отображение выбора сим-карты

Часы

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

Стандартный и моноширинный шрифт, будильник, секундомер и таймер

Таймер: сравнение стандартного и моноширинного шрифта

В функциональность мы добавили брейк-пойнты — готовые тэги с разными значениями периодов для быстрой установки таймера. А также ограничили количество знаков в названии — так удобнее регулировать отображение каждой плашки, чтобы все было компактно и лаконично.

Динамический и фиксированный размер плашек

При работе с крупной типографикой важно следить, чтобы контент всегда корректно отображался, особенно при появлении новых символов или функций, например, am/pm или иконки удаления. Кроме того, при работе с часовыми поясами необходимо учесть длинные названия городов, потому что каждое из них требует дополнительной обработки.

Отображение мировых часов

Мировые часы, будильники, секундомер, таймер

Калькулятор

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

Простая и расширенная версия приложения, история операций

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

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

— Юлия Монахова, арт-директор 65apps

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

— Юлия Монахова, арт-директор 65apps

Динамическое отображение символов

Календарь

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

управление видом календаря, выбор количества дней, которые помещаются на один экран,
управление аккаунтами (рабочий/личный).

Меню календаря и разные форматы просмотра: день, неделя, месяц, лента

Цветовой код для задач в разных статусах

Мы предусмотрели все возможные статусы событий и задач:

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

Добавили динамическую кнопку «Сегодня» — она показывает события на сегодняшнюю дату. Многие ОС для этой кнопки используют иконки, но по нашим исследованиям изображение, которое означает «сегодня», не всегда считывается, так как у слова «сегодня» попросту нет универсального символа. Поэтому мы подписали кнопку текстом и показываем только тогда, когда она может пригодиться пользователю. Например, когда сегодняшний день уже открыт, кнопка исчезает.

Динамическая кнопка «Сегодня»

Почасовое расписание и список дел

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

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

Шаги добавления нового события

При создании и редактировании событий мы учитывали:

дату,
время,
длительности события,
расписания участников,
геолокацию.

Панель управления задачами

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

Продолжение

Если вы хотите узнать больше о нашем опыте создания облика операционной системы «РОСА Мобайл», у нас есть еще одна статья про разработку дизайна: навигации, иконок, виджетов и много другого. Это был сложный и интересный квест, который мы прошли за год в плотном сотрудничестве с клиентом, и получили действительно уникальный опыт на рынке. Почитать про это можно здесь.

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

— Сергей Кравцов, член совета директоров «НТЦ ИТ РОСА», «Рутек»

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

— Сергей Кравцов, член совета директоров «НТЦ ИТ РОСА», «Рутек»