Рассматриваемые моменты: определение и сборка, тестирование компонента, документирование компонента
Определение и сборка
Перед тем, как приступить к сборке компонента, следует ответить на следующие вопросы:
Класс и зона применения : Какой класс компонента? В каких проектах будет использоваться компонент?
Роль : В какой роли будет выступать компонент относительно других?
Интеграции : Будут ли использоваться в рамках данного компонента другие компоненты?
Типы : Какие типы данных будут использоваться внутри компонента?
Состояния : Какие состояния и вариации будет иметь компонент?
Кликабельность : Будет ли компонент или его часть кликабельной?
Альясы : Есть ли в рамках дизайн-системы нужные альясы или их нужно создать?
Темизация : Будет ли компонент изменяться в рамках общих тем приложения?
Класс
Компоненты существуют в следующих классах:
| Класс | Пример | Зона применения |
|---|---|---|
| Базовый компонент | Кнопки, переключатели, ячейки, текстовые поля | В составных компонентах |
| Локальный модуль | Модуль витрины, модуль каталога | В рамках одного продукта или проекта |
| Глобальный модуль | Модуль карточки продукта, модуль авторизация | В продуктах и проектах |
| Групповой модуль | Модуль поиска, модуль сбора логов | В проектах в составе одного продукта |
Роль
При сборке компонента важно изначально понять, в какой роли, будет использоваться компонент относительно окружения: родительская или дочерняя.
Интеграции
Нужно понять, что интегрируется в компонент, а что будет собрано локально.
Чтобы чётко понять нужно или нет использовать интеграции других компонентов, следует ответить себе на несколько вопросов:
- Какова вероятность масштабирования в будущем данного компонента? Если большая и если у компонента большое количество свойств, то это может быть проблемой в будущем при настройке родительского компонента
- Будет ли данный компонент входить в состав других? Если да, то это явный сигнал к тому чтобы уменьшить количество интеграций в компоненте
☝ Важно помнить, что излишняя фанатичность в переиспользовании — плохо, и может создать проблемы в будущем.
Проблемы излишней интеграции
- Сложность в настройки отдельного дубликата компонента
- Чрезмерная зависимость от интеграций
- Сложно развивать, так как, множественные зависимости будут потеряны. С прошествием времени это может создать колоссальную проблему
Типы
Выделяют следующие типы данных:
- Изображение
- Текстовое значение
- Числовое значение
- Булевое значение (true / false)
Состояния
Определите варианты и состояния внутри компонента.
Возможные состояния компонента
| Состояние | Комментарий |
|---|---|
| Default | Статус чего-либо до того, как кто-то взаимодействовал с ним или на него повлияло другое содержимое. |
| Hovered | Когда кто-то помещает указывающее устройство над элементом, но еще не предпринял над ним никаких действий |
| Active | Промежуточное состояние, которое сообщает, что кто-то предпринял действие над элементом, и что он находится в процессе перехода к месту назначения, запуска логики или передачи данных |
| Focused | Когда кто-то выбирает элемент с помощью клавиатуры или голосовой команды, но еще не предпринял над ним никаких действий |
| Visited | Кто-то ранее посещал ресурс, на который элемент настроен для перехода |
| Loading | Элемент извлекает данные из другого внутреннего или внешнего ресурса |
| Loaded | Элемент получил данные из другого внутреннего или внешнего ресурса и указывает, что получение завершено. Состояние загрузки не всегда передается после применения состояния загрузки |
| Disabled | У элемента условно удалена интерактивность |
| Hidden | Элемент был полностью скрыт. Его нельзя увидеть визуально или получить к нему доступ с помощью вспомогательных технологий |
| Readonly | Указывает содержимое элемента, которое можно только читать, но не взаимодействовать с ним |
| Enabled | Элемент был активирован, что открывает возможность применения дополнительного состояния к элементу, странице или представлению, на котором содержится элемент, или ко всему сайту или приложению |
| Checked | Элемент помечается для отправки в качестве данных на другой внутренний или внешний ресурс. Элемент Checked может быть сфокусирован, но его выбранное состояние сохраняется после перемещения фокуса |
| Unchecked | Элемент Checked, который больше не помечен как желающий быть отправленным в качестве данных на другой внутренний или внешний ресурс |
| Indeterminate | Неопределенный элемент запускается для родительского элемента, когда некоторые, но не все дочерние элементы помещаются в состояние Checked. |
| Selected | Элемент был выбран в качестве одного или нескольких критериев для задачи. Выбранный элемент может быть сфокусирован, но его выбранное состояние сохраняется после перемещения фокуса |
| Deselected | Выбранный элемент, выделение которого было удалено. Элементы, которые могут быть выбраны, но еще не выбраны, считаются покоящимися. |
| Dragged | Элемент был выбран и перемещается в другое место |
| Dropped | Перетащенный элемент помещается в новое место |
| Collapsed | Элемент скрывает большую часть своего содержимого |
| Expanded | Элемент показывает все свое свернутое содержимое |
| Resizing | Элемент имеет свою высоту или ширину, увеличенную или уменьшенную |
| Dirty | Редактируемый элемент был изменен кем-то в одном или нескольких экземплярах |
| Pristine | Редактируемый элемент еще не был изменен кем-либо |
| Saving | Неопределённое состояние. Он срабатывает, когда редактируемый элемент находится в грязном состоянии, когда кто-то сигнализирует, что его изменения должны быть зафиксированы. Как только изменения будут успешно зафиксированы, он вернется в исходное состояние |
| Overflowing | Визуальное содержимое дочернего элемента частично скрыто родительским элементом, который ограничивает его высоту или ширину |
| Scrolling | Дочерний элемент панорамируется по горизонтали или вертикали |
| Playing | Элемент активно представляет предварительно записанный медиафайл или анимацию |
| Paused | Предварительно записанный медиафайл или анимация, воспроизводимые элементом, временно остановлены |
| Stopped | Предварительно записанные медиафайлы или анимация, воспроизводимые элементом, возвращаются в исходное положение |
| Sticky | Элемент прикрепляется к стороне окна просмотра, противоположной направлению прокрутки, и не уходит из поля зрения вместе с окружающим его содержимым. |
| Unstuck | Sticky элемент удаляется со стороны области просмотра и перемещается обратно в исходное положение. |
Кликабельность
Также стоит определить зоны клика.
Кликабельность в рамках одного компонента может быть в нескольких формах:
| Кликабельность | Комментарий | Пример |
|---|---|---|
| Родительский компонент | Весь компонент кликабельный | Ячейка в списке, кнопка, строка в таблице… |
| Дочерний компонент | Кликабельные только компоненты внутри | В каждом столбце таблицы есть кликабельная ссылка: пользователь, тариф… |
| Гибридный подход | Кликабельный весь родительский компонент, кроме облостей с другими интерактивными компонентами | Строка в таблице, где нажатие ведёт к какому-то действию, но также есть кнопка открывающая меню с дополнительными действиями над этой строкой. И есть ссылка, которая открывает карточку пользователя |
☝ У некоторых компонентов для удобства взаимодействия, особенно на мобильных устройствах — зона клика может быть увеличена (больше, чем сам компонент). К примеру крестик в текстовом поле
Альясы
У каждого элемента должна быть привязка к цветовому альясу. Запрещается использовать цвета в отрыве от библиотеки, за исключением иллюстраций.
Темизация
Существует, только две возможные темы: Светлая (Light) и Тёмная (Dark). Все остальные темы это производные от этих двух тем.
Если в продукте используется несколько тем, то стоит оформлять и придерживаться карты тем.
Также стоит подумать при наличаи растровых объектов — как они будут себя вести при переключении на другую тему.
При проектирование темы стоит начинать с тестирования на компонентном ядре, затем модулях, а потом уже на макетах.
Отступы, габариты и ограничения
Все отступы, габариты и пределы стоит продумывать, исходя из текущих потребностей и тех которые появятся. Также стоит понимать будет ли этот компонент вложен в другой или нет.
Данные параметры стоит использовать из библиотеки, согласно заранее созданной таблице.
Типы габаритов и ограничения
Для всех компонентов стоит закладывать ограничения родительского контейнера. Это позволит избежать ошибок.
Примеры:
- Если компонент с фиксированными габаритами имеет размер 24px всем сторонам, то Height:
min=24,max=24, Width:min=24,max=24 - Если компонент имеет фиксированный размер по вертикали 54px, а по горизонтали зависит от контента внутри, то
min=24,max=24
| Тип | Возможность использования ограничений min—max |
|---|---|
| Вертикальный | Да |
| Горизонтальный | Да |
Типы поведения
| Тип | Поведение |
|---|---|
| Fill | От края до края в пределах возможной зоны |
| Hug | Увеличение и уменьшение в зависимости от контента внутри |
| Fixed | Фиксированный размер относительно жёстко заданных размеров |
Если компонент имеет пределы Width: min 200px, max 640px , то тип вповедения будет Fill — такая настройка позволит тянуться компоненту в пределах заданный ограничений.
Изменяемые области в компоненте
Сборка компонента осуществляется по принципу вложенности и переиспользуемости других компонентов, если это не усложнит дальнейшее масштабирование.
Для родительских компонентов с однотипными дочерними компонентами стоит заложить подмену компонентов — то есть у ячейки с текстом и Radiobutton можно Radiobutton заменять на схожий компонент Checkbox и не делать дополнительный вариант ячейки.
Что выносим в свойства компонента
При сборке компонентов рекомендуется придерживаться единой системы формирования вариантов и свойств компонента.
Не следует собирать разные по структуре компоненты в единый вариативный.
К примеру, компонент ячейка может иметь следующее содержание:
Родительский контейнер
- Графический слой
- Текстовый слой
- Текстовый слой
- Текстовый слой
- Дочерний компонент
- Дочерний компонент
Родительский контейнер
- Текстовый слой
- Текстовый слой
Смотря на примеры, может возникнуть желание использовать опции для скрытия элементов или создание дополнительного варианта — но делать так не нужно, это должны быть два разных компонента.
Это позволит на этапе разработки не возиться с настройкой и не тоскать лишнее.
Нейминг и суффиксы
Компоненты
Для наименование компонентов следует использовать маркеры в качестве суффиксов.
📌 Маркеры — это короткое текстовое добавление к названию компонента. Они помогают быстро определить необходимую сущность из списка одноимённых при поиске в библиотеке
| Сущность | Сущность | Пример наименования |
|---|---|---|
| Компоненты дизайн-системы | : COMPONENT.MOBILE : COMPONENT.WEB | Button : COMPONENT.MOBILE |
| Модули дизайн-системы | : M.MOBILE : M.WEB | Authorization : M.MOBILE |
| Иконки | : ICON | Arrow : ICON |
| Системные компоненты | : SC.MOBILE : SC.WEB | Keyboard : SC.MOBILE |
| Иллюстрации | : ILLUSTRATION | Scanner : ILLUSTRATION |
| Спецмодули | : S-M.MOBILE : S-M.WEB | Logs : S-M.MOBILE |
| Локальные модули | : L-M.MOBILE : L-M.WEB | Order List : L-M.MOBILE |
Макеты
Формат наименования по системе вложенности, а в качестве разделителя слэш:
Раздел / Сценарий / Экран / Состояние
Для экранов в состоянии Default — состояние можно не указывать.
В случаях когда нужно замиксовать несколько состояний следует использовать символ &
Примеры:
- Отгрузка / Добавление товара / Главный экран
- Каталог / Выбор категорий товаров / Категория Мужская одежда / Скроллинг
- Корзина / Товары в корзине / Список товаров / Выбран один товар & Отображение действий над товаром
Анимация
Для точного определения всех параметров: скорость, тип и т. д. — создавайте прототипы, не пытайтесь угадать значения.
По завершению проектирования компонента, прототип может снять массу вопросов на этапе разработки.
Общие анимационные эффекты должны быть вынесены в дизайн-систему.
Тестирование компонента
Переполнение
Если в компонент приходят какие-то данные, такие как текст, изображения, то следует проверить корректность при получении.
✓ Чек-лист
- полученый текст не ломает верстку
- полученый текст соответствует заданым правилам сокращения строки или масштабированию без ограничений
- отсутствует crop для масштабирования изображения
- полученное изображение правильно маштабируется
- полученное изображение не ломает вёрстку и не влияет на другие компоненты
Габариты и поведение
Абсолютно для любого компонента следует проверять его поведение на изменение габаритов. Считается хорошей практикой фиксировать размеры, если они не предпологают изменений в ходе проектирования макетов.
✓ Чек-лист
- заданы необходимые пределы растяжения для min и max
- при растяжении компонент не ломается
- при растяжении компонент не нарушается верстку внутри себя
Свойства
Для упращения взаимодействия с компонентом, требуется создавать свойста (props) и варианты.
Наименование
| Свойство | Для чего | Пример наименования |
|---|---|---|
| version | Для переключения между разными версиями | version = 1 |
| state | Для переключения между состояниями | state = Default |
| type | Для переключения между разными типами | type = 1 |
| show | Для отображения или скрытия | showText = true / false |
✓ Чек-лист
- вынесены все свойства для всех необходимых слоёв
- отсутствуют не используемые свойства
- при выделении комбинированного компонента не появляются ошибки в панеле
- все свойства в рамках компонента ведут себя корректно — не ломают верстку и не затрагивают свойства других элементов внутри компонента
- все варианты переключатся корректно
Интеграция
Если компонент будет использоваться в состове других компонентов, то следует проверить поведение этого компонента при интеграции в другие компоненты
✓ Чек-лист
- компонент загружается
- компонент не ломает вёрстку
- при растяжении родительского компонента, родительский интегрированный компонент не ломается и правильно реагирует на растяжение и сжатие
- все необходимые свойства в рамках вложенных компонентов доступны при выделении родительского компонента
Документирование компонента
Основная
Каждый компонент в ядре дизайн-системы требуется документировать.
В документации следует отразить:
- Описание
- Вариации, состояния и нюансы поведения
- Масштабирование: обработка разных объёмов переданной информации, а также изменение габаритов общего контейнера
- Анимация
Раскадровка
Используется для покадровой демонстрации функционала.
Является неотемлемой частью при проектировании, позволяет сделать функционал прозрачным для последующей разработки.
Из чего состоит:
- Раскладываются проходы
- Обозначаются все интерактивные зоны
- Выносятся все возможные варианты
- Обозначаются компоненты через которые можно вызвать текущий