Как создавать и поддерживать системы атомарного дизайна с помощью Pattern Lab 2

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

Они упрощают тестирование браузера, устройства, производительности и доступности. И они служат прочной основой, на которую можно опираться с течением времени, помогая вашей организации легче адаптироваться к постоянно меняющемуся веб-ландшафту.

Чтобы создать эти системы, мы должны создать библиотеку шаблонов в Markdown. Нам нужно разбить наши интерфейсы на более мелкие части, но в то же время нам нужно убедиться, что эти части собираются вместе, чтобы сформировать красивое и функциональное целое. «Атомарный дизайн» — это полезная ментальная модель, которая помогает нам сделать именно это, а Pattern Lab — это набор инструментов, который помогает воплотить в жизнь эти атомарные системы проектирования.

Дальнейшее чтение на SmashingMag:

• Вывод библиотек шаблонов на новый уровень
• Умные адаптивные шаблоны дизайна
• Углубленный обзор инструментов руководства по стилю жизни
• Познакомьтесь с инклюзивными шаблонами проектирования интерфейсов
  

После более чем двух лет напряженной работы мы рады объявить о Pattern Lab 2! Полностью переосмысленный Pattern Lab 2 представляет собой набор инструментов с открытым исходным кодом, которые помогут вам и вашей команде создавать и поддерживать продуманные системы дизайна пользовательского интерфейса . По своей сути, это генератор статических сайтов, который объединяет шаблоны и позволяет создавать дизайн с использованием динамических данных.

Несколько основных моментов новой версии включают в себя:

• Полностью реструктурированное ядро, поддерживающее больше языков, механизмов шаблонов и форматов данных.
• Поддержка Markdown для документации шаблонов
• Добавление поддержки YAML, а также JSON для управления динамическими данными.
• Плагины для расширения и улучшения функциональности Pattern Lab
• Тематический, расширяемый, переработанный интерфейс интерфейса.

Но самое главное, Pattern Lab 2 был спроектирован и построен таким образом, чтобы ваша команда могла эффективно использовать его на каждом этапе процесса создания системы проектирования, с самого начала и до ее долгосрочного обслуживания.

Лаборатория шаблонов в начале проекта

Перед вашей командой была поставлена ​​задача создать новое приложение и базовую систему проектирования. Когда-то UX-дизайнеры вашей команды, возможно, отсиживались в комнате, чтобы определить продукт с помощью монолитных, сильно аннотированных вайрфреймов. После утверждения они передавались визуальным дизайнерам, которые затем применяли цвет, типографику и текстуру, чтобы оживить каркасы. После того, как homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd наконец-то утвержден, дизайны отправляются разработчикам внешнего интерфейса, которые тут же расплакались, поскольку дизайны содержат множество нереалистичных макетов, невероятного пользовательского контента (каждое имя пользователя состоит всего из 4 символов — как удобно!) , а также попурри из шрифтов и несовместимых шаблонов дизайна.

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

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

Звучит здорово, правда? Давайте рассмотрим, как вы можете раскрутить Pattern Lab в первый день вашего проекта.

Pattern Lab 2 поставляется в версиях PHP и Node. Команды, выбирайте свое приключение! Некоторые проекты дают четкий выбор технологического стека. Другие сводятся к набору навыков команды или окружению. Какой бы ни была платформа, Pattern Lab 2 поможет вам и вашей команде в совместной работе над созданием нового приложения и системы дизайна. Независимо от того, какую платформу вы выберете, знайте, что с любой версией Pattern Lab будет давать почти одинаковые результаты — так же, как автомобили разных марок и моделей доставят вас к одному и тому же месту назначения.

Установка лаборатории шаблонов

После установки необходимых компонентов вы будете готовы к установке Pattern Lab. Давайте посмотрим, как установить Pattern Lab Node, но имейте в виду, что инструкции PHP также доступны и аналогичны.

В окне терминала перейдите в каталог, в который вы хотите установить Pattern Lab. Затем введите следующие команды:

1. git clone https://github.com/pattern-lab/edition-node-gulp.git
2. npm install
3. После завершения gulp patternlab:serve

Запуск npm install последние зависимости, а gulp patternlab:serve сгенерирует и самостоятельно разместит Pattern Lab, открыв интерфейс в браузере по умолчанию. И если вы не хотите напрямую клонировать репозиторий git, вы можете в качестве альтернативы загрузить последнюю версию, а затем выполнить шаги 2 и 3.

Теперь, когда Pattern Lab запущена и работает, у вашей команды есть центр для проектирования, разработки и проверки вашей системы дизайна, которая скоро будет создана.

Файловая система Pattern Lab

Pattern Lab компилирует все, что находится в папке /source вашего проекта, в статические файлы HTML, которые находятся в папке /public . Затем этот вывод можно отобразить или использовать отдельно или во внешнем интерфейсе руководства по стилю. Давайте взглянем на файловую систему Pattern Lab и на то, что находится внутри source/ :

• _annotations/ — где ваша команда может определять живые аннотации для поддержки документации пользовательского интерфейса.
• _data/ — где находятся глобальные данные, используемые для рендеринга ваших шаблонов.
• _meta/ - где находится информация <head> и foot (которые закрывают все ваши шаблоны).
• _patterns/ — где находятся ваши шаблоны, документация по шаблонам и данные, относящиеся к шаблонам.
• css - где могут находиться ваши таблицы стилей
• изображения - где ваши изображения могут находиться
• js — где может находиться ваш javascript

Стоит подчеркнуть, что Pattern Lab не навязывает вам никаких соглашений о внешнем интерфейсе или производственных зависимостей. Как вы решите структурировать свои папки и какие технологии вы выберете, полностью зависит от вас. Если вы хотите назвать свою папку /stylesheets вместо /css , сделайте это! Хотите использовать Sass? Хороший! Любите jQuery? Здорово! Ненавидеть это? Это тоже хорошо! Pattern Lab просто существует для того, чтобы сшивать ваши шаблоны вместе и не мешать любым решениям, которые вы принимаете во внешнем интерфейсе. Вы даже можете настроить способ управления вашими активами, когда они перемещаются из source/ в public/ .

Выберите свое собственное приключение: соглашения об именах и конфигурация

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

Соглашения об именах Pattern Lab, как и большинство аспектов программного обеспечения, полностью настраиваются. Хотя patterns/ папка Pattern Lab по умолчанию содержат «атомы», «молекулы», «организмы», «шаблоны» и «страницы», вы можете изменять, удалять или добавлять их по своему желанию. Например, если бы нам нужно было воссоздать таксономию дизайн-системы GE Predix, которая состоит из принципов, основ, компонентов, шаблонов, функций и приложений, мы бы структурировали /source/_patterns/ Pattern Lab следующим образом:

 /00-Principles/ /01-Basics/ /02-Components/ /03-Templates/ /04-Features/ /05-Applications/

Pattern Lab разработан, чтобы соответствовать вашему рабочему процессу, а не наоборот.

Создание направления дизайна

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

Определение IA с низким уровнем точности в Pattern Lab

Ранняя работа по дизайну UX включает определение информационной архитектуры приложения. Вместо того, чтобы сразу прибегать к высокоточным инструментам каркаса, которые имеют тенденцию преждевременно определять макеты и техническую функциональность, лучше создавать наброски lo-fi, которые определяют, что происходит на конкретном экране и в каком общем порядке. Эта работа может принимать форму набросков на салфетках, маркированных списков или электронных таблиц. Поскольку Pattern Lab поддерживает базовую разметку, можно сразу же быстро перевести эти справочные диаграммы содержимого в браузер. Для редизайна Pittsburgh Food Bank мы затушили каждый шаблон, используя этот подход.

Таким образом, код шаблона домашней страницы, найденный в /source/_patterns/templates/homepage.mustache , выглядит следующим образом:

 {{> organisms-header }} <div class="fpo">Mission Statement</div> <div class="fpo">Campaign</div> <div class="fpo">Get Help</div> <div class="fpo">Give Help</div> <div class="fpo">Learn</div> {{> organisms-footer }}

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

Фиксация решений визуального дизайна

Ранняя работа над визуальным дизайном включает в себя изучение типографики, цветовых палитр и других аспектов визуального бренда. Исторически сложилось так, что дизайнеры могли перейти к созданию высококачественных макетов Photoshop, ориентированных на настольные компьютеры, теперь у дизайнеров есть полезные инструменты, такие как плитки стилей, Typecast и коллажи элементов, чтобы определить направление визуального дизайна, не прибегая к преждевременным высокоточным композициям.

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

Стать Frontend Prep Chef в Pattern Lab

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

Подобно шеф-поварам в ресторане, у разработчиков есть прекрасная возможность приступить к работе по подготовке шаблонов и кода, которые в конечном итоге станут окончательной системой проектирования. В первые дни проекта разработчики могут начать заглушать шаблоны и импортировать ресурсы в Pattern Lab, заранее настраивать вещи, чтобы дизайнеры и разработчики могли тратить больше времени на совместную работу над проектированием и созданием пользовательского интерфейса.

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

Этот шаблон включает в себя другие шаблоны, что является мощным способом использования меньших элементов интерфейса во все более крупные структуры. Вот разметка для block-hero.mustache :

 <a href="{{ url }}" class="c-block-hero"> {{> atoms-hero-img }} <h2 class="c-block-hero__headline">{{ headline.medium }}</h2> </a><!-- end c-block--hero-->

Код двойной фигурной скобки ( {{}} ) — это код шаблона Mustache, который позволяет нам определять динамическое содержимое и включать шаблоны друг в друга. Например, код {{> atoms-hero-img }} говорит Pattern Lab искать атом с именем «hero-img» и включать его в шаблон. Сама единица-герой затем может быть включена в более сложные шаблоны, используя то же соглашение о включении, используя следующее: {{> molecules-hero }} .

Этот русский подход к включению шаблонов позволяет вашей кодовой базе оставаться красивой и СУХОЙ, а это означает, что если вы внесете редактирование в какой-либо конкретный шаблон, везде, где этот шаблон включен, будет автоматически обновлено. Это обеспечит синхронизацию и согласованность ваших проектов и кодовой базы. И вдобавок ко всему этому постоянное наращивание паттернов может привести к созданию почти полных интерфейсов в короткие сроки!

Засучив рукава

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

Проектирование с динамическими данными

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

Одной из самых мощных функций Pattern Lab является возможность замены различного репрезентативного контента в шаблоны пользовательского интерфейса, чтобы убедиться, что они могут обрабатывать динамический характер вашего контента. Что делать, если ваш пользователь не загружает изображение профиля? Что, если у пользователя в корзине 13 товаров, а не 2? Что, если у одного из этих продуктов есть 14 возможных вариаций? Что делать, если заголовок сообщения в блоге содержит 400 символов? Вернуть пользователя? Первый пользователь? Что делать, если к статье нет комментариев? Или как насчет семи слоев вложенных комментариев? Что, если нам нужно отобразить срочное сообщение на панели инструментов, когда их учетная запись взломана? Pattern Lab позволяет вам манипулировать данными, чтобы выразить любое количество различных состояний пользовательского интерфейса и вариантов любого шаблона.

Страничные данные

Исходные данные в Pattern Lab хранятся в файле с именем /source/_data/data.json , который содержит данные, которые шаблоны изначально будут использовать для отображения в руководстве по стилю и представлениях шаблонов. Ваш data.json по умолчанию может выглядеть примерно так:

 { "headline" : { "short" : "Lorem ipsum dolor sit (37 characters)", "medium" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit iopa. (76 characters)" }, "url": "#", "imgHero" : { "src": "../../images/fpo_hero-opt.png", "alt": "Hero Image" }, "imgLandscape" : { "src": "../../images/fpo_16x9-opt.png", "alt": "Landscape Image" }, "mediaList": [] }

Вы можете ссылаться на эти фрагменты данных в своих шаблонах (т. е. включать {{ headline.short }} в шаблон) для достижения таких результатов:

На уровне страницы мы хотим заменить эти изображения в градациях серого и текст-заполнитель lorem ipsum реальным содержимым. Для этого мы создадим новый файл рядом с /source/_patterns/pages/homepage.mustache с именем homepage.json , где мы сможем переопределить исходные данные, определенные в `data.json. Это может выглядеть примерно так:

 "imgHero" : { "src": "../../images/sample/hero-forest.jpg", "alt": "Forest" }, "headline" : { "medium" : "Track your hikes. Challenge your friends. Get out there and start exploring." }, "toutList" : [ { "url": "link.pages-blog-detail", "headline": { "short" : "Best winter hikes around the world" }, "imgLandscape" : { "src": "../../images/sample/tout-winter-hiker.jpg", "alt": "Hiker with back pack walking in snow" } }, { "url": "link.pages-login", "headline": { "short" : "Sign in to view your dashboard" }, "imgLandscape" : { "src": "../../images/sample/tout-leaves.jpg", "alt": "Green Leaves" } }, { "url" : "link.pages-about", "headline": { "short" : "Learn about our mission" }, "imgLandscape" : { "src": "../../images/sample/tout-mountains.jpg", "alt": "Mountain" } } ]

В результате пользовательский интерфейс выглядит следующим образом:

Псевдо-шаблоны

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

Выражение этих вариаций пользовательского интерфейса в инструментах статического дизайна — упражнение в утомлении и избыточности, что может объяснить, почему они редко разрабатываются. Но функция псевдошаблонов Pattern Lab позволяет нам сформулировать (иногда резко) различные сценарии с помощью всего лишь нескольких изменений в наших данных.

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

В /source/_patterns/pages/dashboard.json наши данные будут выглядеть примерно так:

 { "blockFeature":{ "number":"4,500", "headline":{ "short":"Feet of Elevation Gain" }, "progress":{ "max":"100", "progressValue":"100", "label":"Progress: 100%" } }, "tileList":[ { "number":"16", "headline":{ "short":"National Parks" }, "progress":{ "max":"100", "progressValue":"20", "label":"Progress: 20%" } }, { "number":"500", "headline":{ "short":"Hikes" }, "progress":{ "max":"100", "progressValue":"40", "label":"Progress: 40%" } }, { "number":"62,500", "headline":{ "short":"Calories Burned" }, "progress":{ "max":"100", "progressValue":"60", "label":"Progress: 60%" } }, { "number":"94,300,843", "headline":{ "short":"Steps" }, "progress":{ "max":"100", "progressValue":"80", "label":"Progress: 80%" } } ], ... }

Используя эти данные, Pattern Lab может наполнить пользовательский интерфейс огромным количеством сгенерированного контента этого пользователя.

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

В нашем /source/_patterns/pages/ мы можем создать новый псевдошаблон с именем dashboard~new-user.json . Это создаст еще один экземпляр страницы, который наследует все данные от dashboard.json , но также позволяет нам в дальнейшем изменять или расширять данные. В случае с dashboard~new-user.json мы можем переопределить биты данных, чтобы продемонстрировать, как может выглядеть новый пользовательский интерфейс:

А вот данные, которые мы добавляем в файл для реализации этого пользовательского интерфейса:

 { "blockFeature":{ "styleModifier":"featured", "number":"0", "headline":{ "short":"Feet of Elevation Gain" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Let's go on a hike and climb in elevation", "overlayAction":"Find a Hike" } }, "tileList":[ { "number":"0", "headline":{ "short":"National Parks" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"What National Parks have you visited?", "overlayAction":"Find a National Park" } }, { "number":"0", "headline":{ "short":"Hikes" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Been on a hike recently?", "overlayAction":"Log Your First Hike" } }, { "number":"0", "headline":{ "short":"Calories Burned" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Trying to stay healthy?", "overlayAction":"Track Calorie Count" } }, { "number":"0", "headline":{ "short":"Steps" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Counting steps?", "overlayAction":"Connect Your Fitbit" } } ] }

Переопределяя некоторые значения в dashboard.json , мы можем изменять содержимое и включать/отключать определенные шаблоны.

В другом случае нам может понадобиться продемонстрировать, как выглядит пользовательский интерфейс, когда есть проблема с безопасностью или какая-либо другая проблема с учетной записью пользователя. Мы можем создать dashboard~hacked.json для создания следующего пользовательского интерфейса:

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

 { "alert" : { "alertClass" : "error", "alertText" : "On May 22nd, hackers from a hidden underground tunnel somewhere in Siberia hacked our servers and compromised all of our sensitive data. <a href='#'> Please reset your password immediately!</a>" } }

Параметры шаблона

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

 ... <div class="l-sidebar"> {{# latestPosts }} {{> organisms-section-media-list }} {{/ latestPosts}} {{# featuredPeople }} {{> organisms-section-media-list }} {{/ featuredPeople}} </div><!--end .l-sidebar--> ...

который включает в себя шаблон списка медиа раздела.

 <section class="c-section"> {{# sectionTitle}} <h2 class="c-section__title">{{ sectionTitle }}</h2> {{/ sectionTitle }} {{> organisms-media-list }} {{# textButton }} {{> atoms-text-button }} {{/ textButton }} {{# overlay }} {{> molecules-overlay }} {{/ overlay}} </section><!--end section-->

Как мы узнали, {{sectionTitle}} для блоков данных lastPosts и FeaturedPeople будет заполняться из любого присутствующего сопутствующего файла .json с /source/_data/data.json в качестве глобального запасного варианта. Однако мы включаем один шаблон несколько раз и можем захотеть быстро предоставить уникальные данные для каждого шаблона без необходимости создавать эти ключи в нашем .json. Мы можем изменить включенные списки медиа раздела на следующие:

 ... <div class="l-sidebar"> {{# latestPosts }} {{> organisms-section-media-list(sectionTitle: "The latest from the moleskine") }} {{/ latestPosts}} {{# featuredPeople }} {{> organisms-section-media-list(sectionTitle: "Staff Hikers") }} {{/ featuredPeople}} </div><!--end .l-sidebar--> ...

Эти два организма теперь будут использовать определенную здесь переменную sectionTitle при рендеринге. Параметры шаблона — это мощное средство, но они поддерживаются только PHP и Node Mustache PatternEngines. Другие языки шаблонов предлагают лучшие решения этой проблемы. Ознакомьтесь с документацией, чтобы прочитать полную информацию о параметрах параметров.

styleModifiers

Часто вы обнаружите, что хотите отобразить стилистические варианты одного и того же шаблона, такие как цветные кнопки социальных сетей или состояния компонентов. styleModifiers , являющиеся расширением сокращенного синтаксиса включения, предоставляют дополнительные классы шаблону. При условии, что вы создаете block-media шаблона с {{ styleModifier}} в атрибуте класса:

 <a href="{{ url }}" class="c-block-media c-block-media--{{ styleModifier }}"> <div class="c-block-media__media"> {{> atoms-square:c-block-media__img }} </div> <div class="c-block-media__body"> <h2 class="c-block-media__headline">{{ headline.short }}</h2> <p class="c-block-media__excerpt">{{ excerpt.medium }}</p> </div><!-- end c-block-media__body --> </a><!-- end c-block-media -->

Включение этого шаблона с двоеточием после имени устанавливает styleModifier:

 {{> molecules-block-media:fullBleed }}

даст такой тег привязки:

 <a href="path/to/url" class="c-block-media c-block-media--fullBleed">

styleModifiers можно комбинировать для предоставления нескольких классов, используя вертикальную черту (|) в качестве разделителя.

 {{> molecules-block-media:fullBleed|is-lazyLoaded }}

Псевдо-шаблоны, параметры шаблонов и styleModifiers Pattern Lab упрощает демонстрацию иногда совершенно разных вариантов пользовательского интерфейса, сохраняя базовую кодовую базу СУХОЙ в процессе.

Итерация в стиле

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

Другим естественным следствием этого процесса является то, что точка производства переходит из рук UX и визуальных дизайнеров в руки разработчиков интерфейса гораздо раньше. Вместо того, чтобы тратить много драгоценного времени на создание множества высокоточных композиций и подробных вайрфреймов, работа над дизайном может быть перенесена из статических документов в браузер, где ваша команда сможет быстрее приспособиться к реалиям Интернета.

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

Тестирование видового экрана с помощью ish.

Для наших компонентов, а также для наших страниц важно быть гибкими во всем спектре разрешений. Запекание инструмента изменения размера видового экрана, такого как ish. в библиотеку шаблонов гарантирует, что каждый элемент будет красиво выглядеть и функционировать на любом размере экрана. Потратив время на создание полностью гибких шаблонов, мы лучше подготовимся к будущему, когда запросы элементов и веб-компоненты полностью созреют (мы не можем ждать!).

Благодаря тому, что эти инструменты окна просмотра встроены прямо в среду внешнего интерфейса, дизайнеры и разработчики могут собираться вокруг Pattern Lab, чтобы определить, где вставить точки останова в дизайн. Более того, клиенты, отдел контроля качества и другие коллеги могут точно определить конкретные области, в которых пользовательский интерфейс по какой-либо причине не работает.

Готов к запуску

Проект хорошо складывается, но прежде чем его можно будет запустить в мир, необходимо доработать его, протестировать на разных браузерах/устройствах и должным образом задокументировать. Давайте поговорим о том, как Pattern Lab может помочь подготовить код и документацию вашей дизайн-системы к работе в прайм-тайм!

Доступная документация по шаблонам

Некоторые паттерны могут представляться как самодокументирующиеся, но паттерн часто требует некоторого контекста или дополнительной информации, чтобы все стало кристально ясным. Такие вещи, как определения. рекомендации по использованию, соображения, ресурсы и примеры изображений могут и должны найти свое место в документации шаблонов. Документация Pattern Lab 2 использует Markdown с вводной частью YAML для создания этой документации. Файл уценки сопровождает шаблон (например, media-object.md должен находиться рядом с media-object.mustache ) и может быть отформатирован следующим образом:

 --- title: Utility Colors --- The utility color palette defines colors that are used to convey meaning such as success, error, warning, and information to the user. These colors should be used for things like alert messages, form validation, tooltips, and other kinds of messaging.

Документация Markdown означает, что IA, визуальные дизайнеры, контент-стратеги, деловые люди и т. д. могут более легко вносить свой вклад в живую документацию. Владельцы продуктов могут даже вставлять заметки о функциональных возможностях для новых шаблонов еще до того, как шаблон будет создан. Запланированы улучшения, чтобы сделать документацию по шаблонам более мощной, что еще больше сделает Pattern Lab вечнозеленым пространством для вашей команды.

Происхождение для более легкого контроля качества

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

Благодаря русской матрешке Pattern Lab может отображать шаблоны, из которых состоит тот или иной компонент, а также показывать, где этот шаблон используется в системе проектирования.

Благодаря этой функции дизайнеры и разработчики получают контекстную информацию, которая пригодится при проверке качества и/или внесении изменений в систему дизайна. Если бы мы хотели внести изменения в определенный шаблон, например, удвоить размер изображения или добавить дополнительный текстовый элемент, мы бы сразу знали, какие шаблоны и шаблоны потребуют повторного тестирования и контроля качества, чтобы гарантировать, что ничего не сломается с изменениями. . The lineage feature also helps point out unused or underutilized patterns so that teams can weed them out of the pattern library.

Showing Progress with Pattern States

Taking the concept of pattern lineage a step further, you and your team can keep track of each pattern's progress and how it affects the whole system. Pattern Lab's pattern state feature can track progress of a pattern from development, through review, to completion. With pattern states, you'll always be able to answer “Are all the patterns that comprise this template complete?”

To give your pattern a state, you add a state to the frontmatter in that pattern's documentation file. For instance:

 --- title: Block Media state: inreview --- The media block consists of...

Applying this status will present the pattern state in a couple places across Pattern Lab.

It's important to note that the state of a pattern can be influenced by the patterns it contains. Flagging a pattern like {{> molecule-media-block }} as inreview will cause a ripple effect anywhere that pattern is included. This helps identify bottlenecks that need addressed in order to bring your design system home.

You can create your own pattern states that match your team's workflow. These methods of understanding the state of your patterns can help larger teams keep track of the airplane as it's being built and flown at the same time.

Maintaining An Effective Design System

"The biggest existential threat to any system is neglect." – Alex Schleifer, Airbnb

There is a very real risk that despite your team's best intentions, your carefully-crafted design system and pattern library will slip into oblivion. “Never!” you exclaim, but unfortunately design system efforts fall into a state of disrepair for a number of reasons:

• The level of effort required to keep pattern code up to speed with applications' code bases is too high
• The pattern library is thought of as mere documentation rather than as housing a living, breathing system.
• The team fails to make the design system a key part of their workflow, and instead lets their process devolve into a series of hotfixes and ad hoc changes.
• One discipline serves as gatekeepers to the pattern library, preventing it from becoming a helpful resource for every discipline
• The pattern library isn't visible or attractive
• Many other factors (lack of funding, technology mismatches, lack of governance model, and more)

As Nathan Curtis rightly says, making a design system isn't just another project, but rather a product meant to serve your organization's sites and apps. To create a system that serves your organization for years to come, your UI design system needs to be properly maintained, serve as an essential resource for the organization to keep coming back to, and continue to be a core part of your team's design and development workflow.

Pattern Lab has always been an effective tool for creating UI design systems, but has historically lacked in the maintenance department. Thankfully, that's all changed with Pattern Lab 2. The new version has many features that helps you successfully document and maintain your pattern libraries while continuing to serve as a key tool in your pattern-driven design and development process.

Seeking the Holy Grail

It's critical to reduce the amount of effort and friction required to keep both your pattern library and production environments up to date. The Holy Grail of design systems is an environment where changes to patterns in a design system are automatically updated in both the pattern library and production environments.

The Holy Grail is often accomplished by using a frontend templating language to serve as the bridge between your pattern library and production environments. Pattern Lab 2's architecture now makes it possible to choose the templating engine that's right for your particular environment. As a result, you're able to get closer to achieving the Holy Grail. For instance, the team at Phase2 Technology have successfully integrated Pattern Lab 2 into their Drupal builds so that their clients' pattern libraries and production builds are always in step with one another.

“By using the same templating engine, along with the help of the Component Libraries Drupal Module, the tool gives Drupal the ability to directly include, extend, and embed the Twig templates that Pattern Lab uses for its components without any template duplication at all!”

– Evan Lovely, Phase2 Technology

Currently Pattern Lab 2 supports the popular Mustache and Twig templating engines, but the decoupled nature of Pattern Lab 2's editions (more on these in a bit) means that you can power Pattern Lab using the templating engine of your choice.

A Helpful Resource

Your pattern library and accompanying style guide should be something that your team comes back to reference again and again. While it may not make sense to immediately surface code snippets and pattern usage information during the initial design and development process, design system users will find themselves reaching for these things as they apply the design system to actual applications. Pattern Lab 2 now has more advanced config options that let you switch on pattern info by default to become a more helpful documentation and reference tool.

In order for your design system to thrive across your entire organization, it should be approachable and attractive. Pattern Lab 2 allows you to create your own custom front page for the component library, and also skin Pattern Lab's (intentionally bare bones) default UI to better serve your brand.

Doing It All Again

There are some teams that need only to set up and maintain a single design system, but many of us work on multiple projects for multiple clients. Wouldn't it be great to start new design system projects from a setup that's tuned to your workflow and tool choices?

Pattern Lab 2 has been re-architected to achieve just that. No longer is Pattern Lab a standalone tool, but rather it's an ecosystem built atop a core library. These changes will also make it easier for the Pattern Lab team to push out new features.

Выпуски Pattern Lab

Редакции позволяют командам и агентствам объединять все, что поддерживает их уникальные рабочие процессы, с Pattern Lab. Редакция может стать отправной точкой для всех ваших проектов, пока команды обмениваются и обновляют функциональность. Node-версия Pattern Lab использует npm для извлечения отдельных компонентов, а PHP-версия использует Composer, чтобы помочь вам начать свои проекты простым и стандартизированным способом.

Ядро лаборатории узоров

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

Стартовые наборы

У вас есть надежный набор шаблонного кода, с которым вы начинаете каждый проект? Возможно, вам нужен общий набор базовых шаблонов, примесей Sass и библиотек JavaScript? StarterKit идеально подходит для объединения этих ресурсов в шаблон, который гарантирует, что каждый проект начинается с правильной ноги.

Уже существует несколько стартовых наборов, чтобы запустить ваш проект, независимо от того, ищете ли вы начало с чистого листа, начните с демонстрации, демонстрирующей возможности Pattern Lab, или начните с популярных фреймворков, таких как Bootstrap, Foundation или Material Design. Кроме того, вы можете создать свой собственный пакет с полным контролем версий, чтобы StarterKit вашей команды мог развиваться вместе с вашими инструментами.

Импорт стартового набора осуществляется всего несколькими нажатиями клавиш после установки. В конечном итоге эта функция будет встроена в фазу после установки, как это сделано для Pattern Lab PHP через композитор.

Руководство по стилюКомплекты

StyleguideKits — это интерфейс Pattern Lab. Мы называем это «Зритель». StyleguideKits позволяют агентствам и организациям разрабатывать собственные фирменные пользовательские интерфейсы Pattern Lab, чтобы продемонстрировать свои шаблоны.

ШаблонДвигатели

PatternEngines — это механизмы шаблонов, отвечающие за анализ шаблонов и преобразование их в HTML. PatternEngines дает Pattern Lab Core гибкость для визуализации множества различных типов языков шаблонов. Текущие PatternEngines включают Mustache и Twig, а другие, такие как Handlebars и Underscore, находятся в разработке. И ничто не мешает вам добавить еще один механизм шаблонов в Pattern Lab.

Плагины

Плагины позволяют разработчикам расширять ядро ​​Pattern Lab и другие части экосистемы. Например, PHP-версия Pattern Lab имеет ряд плагинов, таких как Browser Auto-Reload, Data Inheritance и Faker. Архитектура Pattern Lab позволяет разработчикам изменять данные на разных этапах, добавлять свои собственные команды или правила шаблонов или изменять внешний интерфейс для изменения и расширения возможностей Pattern Lab.

Смотрите мой разговор

Попробуйте Pattern Lab 2 и примите участие

Создание пользовательских интерфейсов на основе шаблонов и сложных систем дизайна важнее, чем когда-либо. Pattern Lab 2 хорошо оснащена для создания и поддержки атомарных систем проектирования и может служить центром для вашей системы проектирования на каждом этапе рабочего процесса вашей команды.

Если ваша команда решит загрузить Pattern Lab 2 и попробовать, мы будем рады получить от вас известие! Присоединяйтесь к беседе, задавая вопросы в Gitter, открывайте проблемы, если у вас возникли проблемы, и помогайте предлагать и обсуждать новые функции.

И если вы делаете классные вещи с Pattern Lab 2, поделитесь своими идеями! Styleguides.io содержит более 150 примеров библиотек паттернов, так что добавьте к ним свою лабораторию паттернов. Прелесть веб-проектов и проектов с открытым исходным кодом в том, что все сообщество может учиться на вашем опыте и опираться на эти знания.

Мы рады видеть, какие замечательные вещи вы создаете!