Дизайн-система
«Cuva super clean»
Атомарность
Tokens
Токены это новый виток развития системы, и в данный момент имеют ограниченное применение.
Токены это новый виток развития системы, и в данный момент имеют ограниченное применение.
Basics
Это базовые элементы системы, чаще всего неделимые (атомы).
Примеры компонентов из группы:
Это базовые элементы системы, чаще всего неделимые (атомы).
Примеры компонентов из группы:
Simple items
Самые простые, но уже функциональные, компоненты.
Примеры компонентов из группы:
Самые простые, но уже функциональные, компоненты.
Примеры компонентов из группы:
Templates
Шаблоны разметки контента и вариантов отображения.
Примеры компонентов из группы:
Шаблоны разметки контента и вариантов отображения.
Примеры компонентов из группы:
Complex items
Это промежуточная группа. Сюда входят компоненты включающие в себя несколько простых компонентов, но которые по области применения всё же остаются ближе к items чем к следующей группе.
Примеры компонентов из группы:
Это промежуточная группа. Сюда входят компоненты включающие в себя несколько простых компонентов, но которые по области применения всё же остаются ближе к items чем к следующей группе.
Примеры компонентов из группы:
Wigdets
Крупные компоненты со сложной бизнес-логикой.
Примеры компонентов из группы:
Крупные компоненты со сложной бизнес-логикой.
Примеры компонентов из группы:
Глобальные и локальные компоненты
К примеру если компонент использовался в пределах проекта, то попадал в список локальных компонентов этого проекта. И лишь если требовалось применение этого компонента в другом проекте, то он получал повышение до уровня глобального.
Причем чаще всего в глобальные компоненты перемещались некак есть, а профодился рефакторинг и шаблонизация, и в систему попадали только общие принципы. И наоборот, часто локальные компоненты, это были не сосвсем новые, а измененные глобальные, или локальные пресеты на основе шаблонов из системы.
Причем чаще всего в глобальные компоненты перемещались некак есть, а профодился рефакторинг и шаблонизация, и в систему попадали только общие принципы. И наоборот, часто локальные компоненты, это были не сосвсем новые, а измененные глобальные, или локальные пресеты на основе шаблонов из системы.
Компоненты были разделены на три уровня: глобальные, локальные кмпоненты проекта, локальные компоненты страницы. Определялось это просто, зоной использования.
Пример: системный DatePicker
и локальный Calendar
и локальный Calendar
Глобальный компонент служил базой для выбора дат и диапазонов дат в самых разных ситуациях, например выбор значения для поля типа Date. Проекту бронирования же требовался расширенный компонент с большим количеством локальной бизнес-логики.
Отличия компонентов хорошо видны если посмотреть в их файлы в фигме, там же есть и документация.
Отличия компонентов хорошо видны если посмотреть в их файлы в фигме, там же есть и документация.
Документация, стандарты и синхронизация
с разработчиками
с разработчиками
Были так же написаны гайды по строению компонентов и неймингу слоёв. После серии встреч с разработчиками, также удалось сформировать стандарты нейминга компонентов и свойств. В результате и фронтенд и макеты полностью соответствовали всем нюансам работы и устройства компонента в документации, а дизайнеры и разработчики использовали одни и те же термины, благодаря чему лучше понимали друг друга.
Документацию по бизнес-логике компонентов было решено хранить в Figma, потомучто напрмиер Confluence было сложно поддерживать, постоянно теряли актуальность скриншоты и описания состояний. Там же планировалось накапливать информацию об ошибках в использовании компонента и рекомендации по использованию в разделе Do\Donts.
Система цветов и токены
На базе этой модели была сформирована референсная палитра, а затем и темы (тёмная и светлая) с более декларативной интерпритацией цветов. Результат можете посмотрет ьв файлах ниже.
Выбор цветовой модели
Палитру хотелось сделать вычисляемой, чтобы в будущем, если скажем мы захотим сделать тёмную тему темнее, это не потребовало полной переработки всей палитры.
Были протестированы несколько подходов:
У варианта 1 очень много сторонников в индустрии, и есть мнение, что это будущее. Это связано с тем, что новые современные дисплеи имеют цветовой охват больше чем sRGB пространство. И поулчается что дизайнерам не доступны почти 30% цветов, которые поддерживают современные экраны. Но на практике, скажем браузер всё равно конвертирует цвета в sRGB, даже не смотря на то что есть спецификации для определения цветов в LHC и LAB пространствах. Да и полноценной поддержки Р3 дисплеев нет. Поэтому этот вариант был отброшен. К томуже при динамическом рассчете палитры, был высок риск получить «не существующие» в sRGB цвета.
Вариант 2 долгое время привлекал возможностью математически задать все зависимости, но тоже имел недостатки. Например если задать изменения цвета по формуле, то у некоторых оттенков нельзя было получить яркие цвета с тем же значение Luminosity что и в соседних линейках
Были протестированы несколько подходов:
- Рассчет референсной палитры в пространстве LHC, с конвертацией в RGB
- Модель на основе HSL палитры и использование коэффициентов для параметров яркости и насыщенности
- Простое RGB наложение
У варианта 1 очень много сторонников в индустрии, и есть мнение, что это будущее. Это связано с тем, что новые современные дисплеи имеют цветовой охват больше чем sRGB пространство. И поулчается что дизайнерам не доступны почти 30% цветов, которые поддерживают современные экраны. Но на практике, скажем браузер всё равно конвертирует цвета в sRGB, даже не смотря на то что есть спецификации для определения цветов в LHC и LAB пространствах. Да и полноценной поддержки Р3 дисплеев нет. Поэтому этот вариант был отброшен. К томуже при динамическом рассчете палитры, был высок риск получить «не существующие» в sRGB цвета.
Вариант 2 долгое время привлекал возможностью математически задать все зависимости, но тоже имел недостатки. Например если задать изменения цвета по формуле, то у некоторых оттенков нельзя было получить яркие цвета с тем же значение Luminosity что и в соседних линейках
В итоге было выбрано простое RGB наложение
Такой способ давал предсказуемый результат и позволял в дальнейшем с помощью разработчиков автоматизировать просчет палитры.
Получили цветовую модель:
Получили цветовую модель:
