alexanderniki.name › Digital Garden

Component Driven User Interfaces

Component Driven UI - это практика проектирования и разработки пользовательских интерфейсов с использованием повторяющихся компонентов.

При таком подходе, интерфейс строится "снизу вверх" от базовых компонентов к их разнообразным комбинациям.

Как реализуется подход

  1. Создается по одному компоненту за раз. Каждый компонент проектируется изолированно от других. Начинать нужно с небольших примитивных компонентов. Например: аватар, кнопка, поле ввода, подсказка.
  2. Компоненты объединяются. Объединяем несколько простых компонентов вместе, чтобы получить новые более сложные компоненты с новыми функциями. Например: формы, заголовки, списки, таблицы.
  3. Собираются страницы/экраны. Строим страницы/экраны, используя сложные компоненты. Рекомендуется использовать mock-данные, чтобы показать краевые и маловероятные случаи. Например: главный экран, настройки, профиль.
  4. Собранные страницы/экраны встраиваются в проект. На этом этапе получается финальный результат. Например: приложение, сайт.

Преимущества

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

Связанные понятия:

Источники: