Дизайн-система Опенленда

Декабрь 2019

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

Введение

Опенленд — это околонативные приложения для андроида, айфона и айпада. Это большой и мобильный веб, который портируется в десктопные приложения для маков, виндусов и линуксов. Это десятки экранов и сотни состояний.

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

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

Принципы

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

Структура

Отскриншотил все экраны и разложил на холсте. Увидел набор сервисов — месенджер, дискавер, настройки. Заметил второй уровень иерархии — список чатов, рубрики в дискавере, категории в настройках. Пришёл к глобальной трёхуровневой структуре: раздел → подраздел → содержание.

Цвета

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

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

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

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

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

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

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

С таким подходом легко поддерживать несколько тем оформления. Для тёмной темы я всего-навсего подобрал два десятка альтернативных цветов.

Типографика

Разработал семантический набор текстовых стилей и свёл все надписи в продукте к нему. Типографика Опенленда построена на системных шрифтах, всего лишь 3 начертаниях и 5-7 размерах. Параметры приближены к гайдлайнам платформ.

Скругления

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

Иконки

Собрал иконки в универсальную библиотеку для всех платформ, выработал характерный стиль и с нуля нарисовал более 100 пиктограмм. Теперь все знаки имеют размер 24 × 24 и могут масштабироваться до 16 × 16.

Для иконок разработана сетка. Она определяет базовые пропорции, помогает балансировать фигуры, задаёт углы под 45°.

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

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

У всех иконок строгий нейминг. Название строится из префикса, смыслового глагола или существительного и размера, например, ic-delete-24. Чтобы было проще искать похожие иконки, к названию добавляется суффикс, например, ic-follow-24 и ic-follow-off-24, ic-group-16 и ic-group-glyph-16 и т. д.

Иллюстрации

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

Лоадеры

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

Кнопки

Свёл гигантскую матрицу кнопок к 2 размерам и 3 стилям: первичные — для ключевых действий, вторичные — для побочных, опасные — когда нужно привлечь особое внимание. Для простоты и брутальности отказался от кнопок со стрелками и иконками — только текст. Предусмотрел варианты при наведении, нажатии и в момент ожидания. Избавился от задизейбленного состояния (стремился делать продукт прямолинейным и контактным).

Формы

С бинарными контролами был бардак: чекбоксы и радио выглядели одинаково круглыми; радио-группы обходились без выбранного элемента по умолчанию; чекбоксы и переключалки применялись по вкусу, а не семантически. Я исправил проблемные места, сделал контролы наглядными и заложил микро-анимации.

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

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

Заложил чипы. Это такие кирпичики, которые можно прокликивать. Полезны для выбора тегов, интересов и т. д.

Аватарки

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

Самый большой размер аватарок встречается в формах. Для него заготовлены особые состояния.

Ячейки

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

При наведении или нажатии ячейки меняют цвет фона. Если ячейка не доходит до краёв колонки, углы скругляются.

Стейты

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

Таб-бары

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

Апп-бары

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

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

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

Ещё под апп-баром могут быть вкладки. Вкладки растягиваются на ширину экрана. Если места становится мало, появляется скролл.

Тултипы

Задизайнил всплывающие подсказки. Они выводят поясняющий текст при наведении с любой стороны элемента.

Тосты

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

Попапы и окна

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

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

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

Диалоги и боттом-шиты

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

Для всего остального есть боттом-шиты. Они всплывают в нижней части экрана, закрываются свайпом, крестиком или кнопкой «назад» на андроиде. У каждого боттом-шита обязательно есть шапка — она фиксируется у верхней границы экрана, если шит высокий и появляется скролл. Заголовок в шапке помогает не забыть, с чем человек имеет дело — какое сообщение он сейчас удаляет или какого человека назначает администратором. На планшетах боттом-шиты ограничены по ширине и появляются в середине экрана.

Логотип

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

Боже, храни Фигму

Перетащил Опенленд из Скетча в Фигму, чем сократил стек, сэкономил деньги и ускорил процесс. Создал проекты и файлы, раздал команде права. Завёл библиотеки с цветами и иконками, собрал компоненты по каждой платформе. Вынес сетки, шрифты и тени в переменные. Применил авто-лейауты везде, где только возможно. Всё аккуратно разметил, сгруппировал, проименовал.

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

В ролях

Менеджмент
  • Юрий Лифшиц
  • Степан Коршаков
  • Диана Шкурко
Дизайн
  • Павел Ващенко
  • Александр Дубовский
Бэкенд
  • Степан Коршаков
  • Глеб Путинцев
  • Нарек Абовян
  • Данила Волков
Фронтенд
  • Глеб Путинцев
  • Фёдор Морозов
  • Максим Волков
  • Александр Метренюк

За кадром