Сейчас я работаю над системами проектирования. Он избавляет меня от многих моих проблем, в первую очередь от организации и стандартизации вещей, а также обеспечения доступности как на уровне проектирования, так и на уровне разработки.
Мой очень крутой начальник работает над обновлением нашей сеточной системы, и с этим идут разговоры о вертикальном ритме.
Если вы не знакомы, вертикальный ритм — это способ последовательно добавлять вертикальные интервалы между объектами путем предоставления предварительно определенных значений измерения. Обычно эти значения измерений получают из базового источника логики, такого как модульная шкала.
Идея создания мерных остановок для вертикальных пространств — это метод, позволяющий дизайнерам и разработчикам работать над общим источником истины. Он обеспечивает согласованность в разных частях веб-сайта, а также на других веб-сайтах, которые также используют систему дизайна.
Согласованность — важная вещь в любой дизайн-системе. Есть также пара других общих соображений, которые наша система проектирования должна учитывать, что, в свою очередь, влияет на наш подход:
- По контракту мы обязаны использовать Sketch, в котором отсутствует множество тонкостей, которые я ожидал от Figma с точки зрения кодификации, документации и передачи функций разработчикам.
- У нас есть «известная неизвестная» проблема, когда дизайнеры и разработчики из неизвестного количества внешних команд используют наш контент. Это команды, с которыми мы не обязательно общаемся, или которые не обязательно знают или читают нашу документацию.
С точки зрения механизма передачи информации о вертикальном интервале в Sketch, мы обдумывали несколько подходов:
Содержание статьи
Перемещение предметов вручную до тех пор, пока они не «станут выглядеть правильно»
Это чистый хаос и не может масштабироваться.
Сделайте единое вертикальное пространство в каждом компоненте
Идея заключается в том, что мы коллективно решаем, что каждый компонент использует только одно измерение, чтобы определить, как далеко он должен быть размещен.
Я придерживаюсь мнения, что интервал всегда должен располагаться сверху, поэтому он добавлял бы отрицательное пространство вверху каждого символа компонента.
Проблема с этим подходом в том, что он слишком ограничен, чтобы его можно было использовать в реальном мире. Одно заданное измерение не соответствует моим сценариям использования неизвестного количества неизвестных дизайнеров, работающих над неизвестным количеством проектов с неизвестными потребностями в содержании.
Если оно слишком ограничительное, оно будет проигнорировано. Это означает, что вертикальный интервал снова перемещается при перемещении объектов вручную до тех пор, пока они не будут выглядеть «правильно».
Сделайте вертикальное расстояние компонентной опорой
Идея здесь в том, что пространство над каждым компонентом представляет собой переключаемый набор расстояний, и эти расстояния представляют собой набор кодифицированных значений. Затем дизайнер может переключить опору, чтобы использовать значение интервала, которое лучше всего подходит для его нужд.
Площадь
Хотя создание зрелых компонентов в Sketch и Figma требует большой предварительной работы, то, как дизайнер взаимодействует с компонентом, различается в зависимости от того, какие конструктивные решения разработчики приложений сделали для построения компонентов. Это, в свою очередь, влияет на опыт дизайнера в работе с системой проектирования, как это проявляется в инструментах проектирования.
Вот как подход иерархического вложения компонентов в Sketch сравнивается с более категоричным подходом переключения в Figma:
Набросок
Детали проставки
Поскольку компонентные реквизиты отсутствуют, единственное, что можно сделать, это создать "мета" компонент документации, который фиксирует эти значения интервалов.
Проставка
div s
Spacer div s — это метод разработки, который был в моде несколько месяцев назад. Для олдскульного веб-ботаника это кажется неудобным и грубым — как разметка на основе таблиц 2.0.
Похоже, что мы предлагаем использовать разделительный компонент div s для соответствия. Я бы предпочел, чтобы компоненты имели вертикальный интервал на конце кода вещей, который сопоставляется с абстрактным полем или значением заполнения (настраиваемое свойство CSS, передаваемое маркером проекта, если вы все делаете правильно).
Общайтесь с людьми
Дизайн-системы предназначены для интерфейсов, но над интерфейсами работают люди. Чтобы снизить мотивацию использования spacer div s и вместо этого использовать свойства компонентов, вам нужно поговорить с разработчиками вашей дизайн-системы. Для этого я предпочитаю частое общение и сотрудничество.
До тех пор, пока инструменты проектирования не станут более зрелыми и намерения не будут более легко реализованы, мы должны учитывать:
- Площадь поверхности, которую мы, как специалисты по обслуживанию систем дизайна, создаем, как это влияет на эргономику рабочих процессов дизайнера и разработчика,
- Как структурирование самой дизайн-системы будет стимулировать ее правильное использование,
- Когда специалистам по сопровождению систем проектирования необходимо учитывать ограничения, связанные с инструментарием, и делать самую сложную часть работы, чтобы упростить другим.
Загрузка...
