Создали адаптивную мобильную систему дизайна для дизайнера

Какой должна быть идеальная мобильная система дизайна для дизайнера? Миллион компонентов или хватит пары? Широкая палитра или несколько цветов? Токены… — что это?

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

Поэтому мы пошли ресерчить и выделили несколько проблем:

Непрозрачная структура стилей или токенов
Это тот случай, когда хотелось бы, чтобы семантическое наименование токенов или стилей цветов стало мейнстримом, но пока что чаще всего мы имеем “Blue-600” “Grey-300” “Redwine-900”. Такой подход к наименованию усложняет процесс проектирования: “Так, у меня тут grey-300 или grey-400, а redwine где применяется?” а так же усложняет процесс кастомизации, например, при смене цвета не совсем понятно, где ждать изменений. Другое дело когда ты юзаешь что-то подобное “button-primary-default” или в нашем случае “bg-primary”- ясно, что и где.

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

Адаптивность
Рутинная ситуация: ты сделал дизайн к примеру под iOS и теперь нужно адаптировать его еще под 2 размера (390х840, 320х358), а также адаптировать под Аndroid и тоже в 2 размера (414х823, 360х740) и ко всему прочему подкрутить темную тему. Звучит не очень, нужно подобрать горизонтальные и вертикальные отступы, перевести нативные компоненты под Android, поменять шрифты, подобрать цвета для темной темы, проверить их на доступность WCAG, еще много раз внутри что-то подвигать, вернуться к какому-то основному экрану, чтобы сравнить, все ли так по отступам и только потом отдать экраны дальше. Сомнительное удовольствие. А теперь представь, что ты делаешь это за пару нажатий и тебе не нужно перепроверять каждый экран. Звучит заманчиво?

Кастомизация
Если мы юзаем UI kit, то для конкретной задачи. Задачи всегда разные. Этому проекту нужно больше воздуха и скругления, а тут бы наоборот избегать скруглений и сделать все компактно, здесь у меня палитра холодная, а здесь теплая. Большая часть решений, представленная на стоках, будет заточена либо под одно, либо под второе. Конечно, можно изменить и скругления, и отступы, и палитру, внести или перенести все в variables, но как говорила Гамора “Какой ценой?”

Системность и передача в разработку
Проектирование мобильных приложений - это не только продуктовый подход, но и подход системный, один язык с разработкой. В идеале вы имеете понятную команде систему отступов, размеров и все это желательно должно быть завязано на вашей сетке, например, в 4pt/dp, цвета опять же подвязаны на палитру - системность и прозрачность. К сожалению, этого сейчас в UIkits не хватает.

Стоимость
Решения, которые в большей степени отвечают нашим представлениям, стоят весьма не дешево. Не называя имен, скажем, готовьте не менее $200. Для нас это не совсем дружественный подход, не одобряем.

В общем, спустя 3 месяца, мы - 2 дизайнера, создали мобильную систему дизайна для собственного использования…или не только собственного?

Система состоит из 3-ех слоев:

Фундаментальный - Сетка и Палитра
Базовый - Токены для отступов, гэпов, размеров, цветов и стили типографики
Кроссплатформенные компоненты

Используется базовая для мобильных приложений сетка в 4 шага.
В NANO DS используется понятие мегапикселя, где один мегапиксель равен 4pt в iOS и 4dp в Android.

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

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

Кто не знает, что это и зачем, рекомендуем к прочтению статью Жени из Usetech— habr.com

Figma позволяет раскрыть потенциал системы. Без использования сторонних плагинов мы токенизировали: цвета, размеры, скругления, вертикальные гэпы и горизонтальные отступы.

Токены наследуются от своих родительских сущностей:

Токены размера и отступов ссылаются на сетку
Токены цвета ссылаются на палитру

Каждый токен цвета имеет два значения - для темной и светлой темы.

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

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

Используются нативные шрифты: San Francisco для iOS и Roboto для Android. Каждый стиль текста включает три начертания: обычное, среднее и жирное.

NANO DS содержит основной набор компонентов для быстрой разработки сценариев:

Button — все разновидности кнопок
Card — карточки для предоставления контента
Cell — различного вида ячейки с чекбоксом радио и прочим
Chips — чипс
Date and time — контролы для работы с датой и временем
Forms — контролы используемые в формах: инпуты, селекты, слайдеры
и прочие
Header — блок для предоставления контента, используемый в детальных экранах
Keyboard — кастомная числовая клавиатура
Native — набор нативных системных компонентов (статус бар, клавиатура, хоуминдекатор и прочие)
Navbar / Appbar — навигационная верхняя панель
Section Header — заголовки для секций
Segmented Control — элемент управления из двух или более сегментов
Snacks — уведомление, которое появляется в нижней части экрана
Steps — компонент представления кол-ва предстоящих шагов для завершения сценария
Tabbar — навигационная нижняя панель
Text — базовые компоненты для типографики
Details — набор микрокомпонентов: аватарки, бэйджи, прогресс бар
и другие

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

Компоненты построены на autolayout, контент внутри адаптируется по ширине экрана, а для текста предусмотрено ограничение по количеству строк.

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

Две цветовые темы
Поддерживает две темы: светлую и темную, их легко переключить на панели инструментов в Figma.

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

Кроссплатформенность
Каждый компонент создан для обоих платформ (iOS, Android) с учетом их особенностей: corner smoothing, типографика, навигация, нативные компоненты.
Перевод макета с платформы на платформы и адаптацию под вторичные размеры экранов занимает около 1 минуты без необходимости использования плагинов.

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

Это больше, чем UIkit, здесь каждый механизм связан друг с другом и изменение одного, может привести к изменениям во всем макете или изменить только один макет. Зависит от вас.
Это core модуль, в который мы занесли базовые компоненты и создали легко масштабируемую и кастомизируемую структуру токенов.
Это кроссплатформенная система, в которой учтены гайдлайны iOS и Android: навигация, нативные компоненты, corner smoothing, типографика, размеры экранов.
Autolayout подход к проектированию экранов. Просто набрасываем в экран компоненты, он без проблем адаптируется и под ширину, и под высоту.
Масштабируемая система. На базе Nano DS очень легко сделать узкоспециализированные UIkit, о чем мы сейчас задумались.
А еще это легкая кастомизация, прозрачность и другие решенные проблемы описанные выше.

По ссылке на Nano DS вы найдете гайды по работе с ней, примеры использования, правила создания и работы с компонентами, а также ссылки для связи с нами. Если у вас возникнут вопросы по работе, пожалуйста, напишите нам.

Мы видим NANO DS как core, выполняющий основные функции и мы понимаем, что необходимо расширять компонентную базу для покрытия широкого спектра задач. Поэтому в перспективе мы видим, что на основе NANO DS будут созданы специализированные UIkit для e-commerce, banking, travels, events, lifestyls, habits и пр.

Но не уверены, что это нужно выносить в сообщество, возможно, мы оставим прелесть себе

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

Вы можете повлиять на появление специализированных UIkits и выбор направления, поделитесь своими мыслями с нами здесь Link.

Эта наша первая статья и нам важно ваше мнение.
Пожалуйста, поддержите лайком и комментарием, нам важно получить как можно больше обратной связи. Ваш фидбек поможет докрутить NANO DS и сделать опыт использования еще продуктивнее и приятнее.

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

Посмотреть в Figma →

Скачать со стока →