Рубрика: Статьи по дизайну

Крис Койер, автор CSS Tricks and Codepen, недавно опубликовал статью «Для кого предназначены системы проектирования?», В которой он рассказывает об аудитории для различных систем проектирования с открытым исходным кодом.

В статье он обсуждает настраиваемость системы проектирования и роль, которую она играет в том, насколько полезна система проектирования для использования не компанией. Он заключает, что системы проектирования имеют разные уровни настройки — от «совсем нет» до давая людям широкий контроль над тем, как они применяют стили (или «тему BYO», как он ее называет).

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

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

Когда мы запустили систему дизайна Shopify, Polaris , это не было настраиваемым вообще. В 2018 году мы решили сделать Polaris частично настраиваемым, и мы все еще работаем над его расширением, чтобы сделать большинство вещей настраиваемыми.

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

Команды начали разрабатывать визуальный стиль, который намеренно отличается от брендинга нашей компании, что Polaris не позволяет. Например, команда Shopify Point of Sale начала экспериментировать с темным режимом, потому что он сделал систему более удобной для использования в темных витринах, а команда Shopify Plus начала экспериментировать с разными цветами, шрифтами и интервалами, потому что они хотели визуально отличаться от Основной продукт. Сторонние разработчики в настоящее время сталкиваются с той же проблемой, поскольку они не могут надлежащим образом выразить свой бренд.

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

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

Это другой конец спектра. Эта опция дает пользователю полный контроль над стилем.

В Интернете вы видите множество чистых систем проектирования HTML и CSS, которые позволяют этот уровень настройки. Поскольку они предоставляют необработанный HTML, очень легко настроить практически что угодно.

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

Системы проектирования, использующие каркасы (или слои представления), такие как React, немного отличаются. Они скрывают свою базовую разметку, затрудняя ее изменение, что значительно упрощает обслуживание системы. Создавая такое четкое разделение между тем, что публично раскрывается, и тем, что доступно только в системе, вы создаете гораздо лучшее определение того, какие изменения вносят риск нарушения реализации потребителем.

Многие системы на основе React по-прежнему допускаю подобный уровень настройки, допуская переопределения классов. Вы не сможете свободно настраивать разметку так, как вы можете с помощью необработанного HTML, но вы все равно сможете применять переопределения стилей к определенным элементам и, таким образом, по-прежнему будете иметь большой контроль над тем, как компонент выглядит и ведет себя.

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

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

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

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

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

Вместо настройки вещей с помощью переменных Sass, Polaris использует всеобъемлющий компонент React, называемый ThemeProvider который предоставляет набор цветов. Эти цвета затем используются для стилизации компонента (ов). Если вы предоставляете только частичный набор цветов, Polaris использует цвета, которые вы определили, для создания остальных, что делает его максимально удобным для темы вашего интерфейса.

Этот подход имеет два больших преимущества перед переменными Sass:

1. Возможность предоставить только частичный набор цветов делает очень легко (и быстро) создать собственный интерфейс.
2. Он предоставляет потребителям очень преднамеренный общедоступный API настройки, который далек от таких вещей, как переменные SCSS и классы CSS, которые в Polaris технически модифицируемы, но никогда не должны изменяться поскольку они являются частным API.

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

Этот подход имеет свой собственный набор проблем, хотя , Один из них заключается в том, что он опирается на переменные CSS и в системе, подобной Polaris, которая в значительной степени опирается на встроенные функции Sass (в основном это цветовые утилиты, такие как lighten darken и rgba ), это создает реальную проблему. Поскольку система тем не знает, какими будут цвета до времени выполнения, она не может использовать эти функции Sass для изменения цветов, и поэтому нам нужен альтернативный способ их генерации.

Это Проблема, которую мы еще не решили, но мы работаем над решением, чтобы мы могли начать расширять этот API. В настоящее время мы разрешаем людям настраивать цвета только в нашем компоненте TopBar но мы работаем над улучшением системы, чтобы также разрешить настройку шрифтов и, возможно, даже настройки анимации во всем Polaris. Мы также изучаем, как сделать API менее специфичным для компонента, так как это может привести к несоответствиям пользовательского интерфейса. Мы исследуем схему, в которой вы не сможете настроить эти свойства для каждого компонента, но только на глобальном уровне.

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

Если вы заинтересованы в изучении этого уровня настройки для своего собственного дизайна Система не забудьте проверить Theme UI, который является проектом с открытым исходным кодом, который предоставляет очень похожий API на систему ThemeProvider которую мы используем для Polaris.