Глава 3: Инструменты профессионала (часть 1)
Инструмент Pattern Lab и качества эффективного руководства по стилю
← Предыдущая глава| Следующая часть →
Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики «Атомарный дизайн».
Если вы здесь впервые, то лучше начните сначала.
В предыдущей главе мы познакомились с методологией атомарного дизайна пользовательских интерфейсов. Надеюсь, вы уже поняли, насколько она полезна. А сейчас настало время закатать рукава и попробовать атомарный дизайн на практике.
Библиотека паттернов — это фундамент атомарного дизайна и командный центр для всех компонентов, из которых состоит интерфейс. Давайте еще раз вспомним ее преимущества:
- Она способствует согласованности и последовательности всего UI.
- Она ускоряет работу вашей команды, экономит время и деньги.
- Она помогает всем специалистам, участвующим в проекте, эффективно взаимодействовать.
- Она создает общий лексикон для всех участников проекта, включая сторонних вендоров.
- Она обеспечивает полезной документацией для обучения заинтересованных сторон, коллег и внешних партнеров.
- Она упрощает тестирование производительности и доступности на разных устройствах и в разных браузерах.
- Это отличная основа для разработки, которую с течением времени можно достраивать, изменять, расширять и улучшать.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Звучит чудесно, не правда ли? Я почти слышу, как вы говорите: «Мне нужна библиотека паттернов и мотоцикл!» Но как создать такую библиотеку? Что ж, вы пришли по адресу, потому что оставшаяся часть книги посвящена именно этому:
- В этой главе мы познакомимся с полезными инструментами для создания библиотек паттернов;
- В четвертой— обсудим, как превратить паттерны в основу проектирования и разработки;
- В пятой — расскажем, как создать систему дизайна, которая выдержит испытание временем.
Эта глава поведает о качествах эффективных библиотек паттернов на примере инструмента Pattern Lab. Pattern Lab— это проект с открытым исходным кодом, созданный веб-разработчиками Дейвом Олсеном, Брайаном Муэнцмейером и мной. Он предназначается для реализации атомарных систем проектирования на практике.
Хочу отдельно подчеркнуть: несмотря на мою любовь к Pattern Lab и его функциям, я буду рассказывать лишь о характеристиках хорошо организованных библиотек, а не пытаться продать вам конкретный инструмент. В конце концов, Pattern Lab даже не продается! Ни один инструмент не может идеально подходить абсолютно для всего. Просто постарайтесь учесть описанные принципы при выборе инструментов для создания ваших собственных библиотек паттернов.
Что такое Pattern Lab
Прежде чем углубиться в технические детали того, как работает Pattern Lab, важно объяснить, чем этот инструмент является, а чем нет.
# Pattern Lab это
- Генератор статических сайтов, использующий методологию атомарного дизайна.
- Инструмент для ведения документации и аннотирования паттернов.
- Стартовый набор для работы с паттернами.
# Pattern Lab не является:
- Фреймворком UI, как Bootstrap или Foundation.
- Зависимой библиотекой, языком или стилем.
- Заменой системы управления контентом.
Давайте разбираться по пунктам и начнем с термина «Генератор статических сайтов». В генератор забрасывают исходный код и ассеты, он их компилирует и выдает старый добрый HTML, CSS и JavaScript. Pattern Lab берет исходный код (а именно паттерны) и преобразует эти паттерны в функциональный внешний интерфейс в рамках библиотеки паттернов.
Как Pattern Lab выглядит на практике? Барабанная дробь…
Не очень-то вдохновляющий дизайн, да? Верите или нет, но этот минимальный (или скорее отсутствующий) дизайн сделан намеренно. Здесь нет дизайна специально, чтобы никто не счел Pattern Lab UI-фреймворком, вроде Bootstrap. Благодаря этому, никто ошибочно не принимает демо-интерфейс Pattern Lab за набор использованных стилей.
Pattern Lab не дает никаких ответов относительно того, как писать и создавать фронтенд архитектуру — это вы должны делать самостоятельно. Внешний вид, терминология, синтаксис, структура, библиотеки и скрипты, которые вы хотите использовать для создания UI, полностью зависят от вас и вашей команды. Черт побери, вы даже можете использовать фреймворки, вроде Bootstrap, вместе с Pattern Lab. Pattern Lab нужен для того, чтобы помочь собрать все воедино.
Не волнуйтесь, если все это кажется вам тарабарщиной. В этой главе мы уделим внимание основным функциям Pattern Lab и принципам устройства эффективных библиотек паттернов и не будем углубляться в технические детали. Но если вам все же хочется немного хардкора, изучите документацию Pattern Lab.
Проектирование атомарных систем с Pattern Lab
Чтобы понять принцип работы Pattern Lab, представьте себе матрешку.
Матрешки — это красиво вырезанные из дерева полые куклы, которые вкладываются друг в друга по возрастающей. Паттерны Pattern Lab работают аналогично: наименьшие атомы входят в состав более крупных молекул, которые включены в еще более крупные элементы — организмы, а они в свою являются частью еще более крупных паттернов страниц (шаблонов).
Проектирование пользовательских интерфейсов по такому принципу соответствует принципу разработки «Не повторяйся» (DRY, don’t repeat yourself). Это значит, когда вы вносите изменения в паттерн, везде, где он используется, происходит автоматическое обновление. Разработка по принципу матрешки значительно ускоряет работу. И это намного лучше, чем вручную перебирать сотни файлов в Photoshop для каждого паттерна, чтобы внести простые изменения.
Чтобы это работало именно так, Pattern Lab использует шаблонизатор Mustache, содержащий минимум управляющей логики. Вот, на что он похож:
{{> atom-thumbnail }}Если вы не догадались по двойным фигурным скобкам ({{}}), это код Mustache. Значок «больше» (>) — это способ, которым Mustache передает Pattern Lab, что нужно использовать атом под названием «thumbnail». Таким образом Pattern Lab будет искать в своих папках с паттернами атом «thumbnail».
Давайте рассмотрим несколько паттернов веб-сайта Time Inc, в разработке которого я принимал участие. Перед вами один из паттернов многократного использования:
Этот паттерн должен выглядеть знакомо. Миниатюры изображения с заголовком и текстом встречаются на бесчисленном множестве веб-сайтов. Узнаем, как устроена эта модель изнутри:
<div class="block-post">
<a href="{{ url }}">
{{> atoms-thumb }}
<h3>{{ headline }}</h3>
<p>{{ excerpt }}</p>
</a>
</div>Что мы имеем: HTML-разметку, состоящую из тега div с именем класса block-post; ссылку; код Mustache для миниатюры; элемент <h3> для заголовка; и тег <p> для текста. Вы можете заметить, что здесь также присутствует код Mustache для URL-адреса, заголовка и текста, который мы будем использовать позже для динамической замены в реальном контенте.
Теперь, когда мы прописали разметку паттерна, можем включить этот кусок кода в более крупные паттерны, используя тот же метод:
{{> molecules-block-post }}Перейдем к более сложным организмам, таким как хедер веб-сайта. Выглядит он примерно так:
Отправимся за сцену и посмотрим на разметку в Pattern Lab. Перед нами предстает следующее:
<header role="banner">
{{> atoms-logo }}
{{> molecules-primary-nav }}
{{> molecules-search }}
</header>Что мы видим? У нас есть базовый элемент <header>, а внутри этого элемента заключены атом логотипа, молекула основной навигации и молекула поисковой формы.
Теперь мы можем использовать этот относительно сложный паттерн везде, где потребуется.
{{> organisms-header }}Надеюсь, сейчас стало понятно, как работает принцип матрешки на практике. Мельчайшие атомы включены в более крупные молекулы, а молекулы входят в еще более крупные организмы.
Теперь давайте используем эти компоненты в макете. Возьмем, к примеру, шаблон домашней страницы:
Прокрутите шаблон домашней страницы, и вы увидите несколько довольно стандартных паттернов: хедер, нижний колонтитул и баннеры. Вы также увидите несколько других паттернов, которые повторяются по всему шаблону.
Как это выглядит в коде? Как и следовало ожидать, здесь куда больше всего!
{{> organisms-header }}
<main role="main">
{{# hero }}
{{> molecules-hero }}
{{/ hero }}
<section>
{{# experience-block }}
{{> molecules-block-main }}
{{/ experience-block }}
{{# experience-feature }}
{{> organisms-story-feature }}
{{/ experience-feature }}
</section>
<section>
{{# factoid-advertising }}
{{> organisms-factoid }}
{{/ factoid-advertising }}
</section>
<section>
{{# advertising }}
{{> molecules-block-main }}
{{/ advertising }}
</section>
…
</main>
{{> organisms-footer }}На этом этапе более мелкие паттерны уже спроектированы, поэтому все, что нужно сделать шаблону, это вставить их в контекст макета страницы и дать им уникальные названия.
Присмотритесь к коду: некоторые паттерны, такие как {{> organisms-header }} и {{> organisms-footer }}, используются таким же образом, как и в предыдущих примерах. Но есть и несколько других примеров, содержащих дополнительную информацию, как здесь:
{{# factoid-advertising }}
{{> organisms-factoid }}
{{/ factoid-advertising }}Мы включаем организмы-фактоиды так же, как и другие паттерны, но кроме того называем их рекламой, оборачивая включение в секцию Mustache. Секция обозначается особым кодом, содержащим символы # и /. Присваивая паттерну уникальное название, мы можем закрепить его и динамически заменять его содержимое. Подробнее об этом в следующем разделе!
Подход к проектированию интерфейсов по принципу матрешки прост, но чрезвычайно эффективен. Такая структура позволяет дизайнерам и разработчикам не повторяться, экономит время, силы и деньги. Благодаря такому подходу разработчики создают финальную версию интерфейса и одновременно закладывают базовую систему проектирования UI. В конце концов, финальный интерфейс является одним из следствий базовой системы проектирования. Команды также могут переключаться между абстрактным и конкретным, перекраивая отдельные паттерны для исправления ошибок («Хедер перекосило!»), и видеть, как изменения в небольших паттернах влияют на весь макет страницы.
Работа с динамическими данными
Важно определить базовую структуру контента паттернов UI в контексте библиотеки паттернов. Вот почему мы смотрим на заглушки изображений в оттенках серого и текста, ограниченного количеством знаков. Однако, серые квадраты и заглушечный текст Lorem ipsum — это не то, с чем пользователи будут по факту взаимодействовать на вашем сайте. Нам нужен способ заменять заглушки на реальный контент, чтобы убедиться, что паттерны UI подходят содержащемуся в них контенту.
Чтобы продемонстрировать, как Pattern Lab динамически загружает реальный контент в шаблоны, давайте посмотрим на сравнение шаблона домашней страницы Time Inc. и реальной страницы:
Слева мы видим шаблон, который определяет структуру контента на веб-странице. Справа — страница, где мы добавили реальный контент, чтобы продемонстрировать, как будет выглядеть финальный интерфейс, и проверить эффективность системы проектирования.
Как заменить заглушки на реальный контент с помощью Pattern Lab? Pattern Lab использует JSON (а также YAML, Markdown и другие форматы данных) для определения и замены динамических элементов контента в проекте.
По умолчанию данные для заглушек определяются в файле с именем data.json, который находится в директории /source. Внутри этого файла мы прописываем текст, пути к изображениям и другие динамические данные, из которых будет состоять интерфейс. Вот небольшой образец файла data.json из Time Inc.:
"hero" : {
"headline": "Lorem Ipsum",
"img": {
"src": "/images/sample/fpo_hero.png",
"alt": "Hero Image"
}
}Для разработчиков такой формат скорее всего выглядит знакомо. Если вы не разработчик, не волнуйтесь! Абстрагируйтесь от фигурных скобок и кавычек, и тогда поймете, что мы прописали свойства баннера (области непосредственно под хедером), на котором присутствует headline (заголовок) "Lorem Ipsum" и img (изображение) с src (источником) "/images/sample/fpo_hero.png". Мы просто определяем атрибуты этого объекта и прописываем их значения.
Когда объекты прописаны, мы можем изменять их атрибуты на уровне страницы с Pattern Lab. Это достигается путем создания нового файла JSON, соответствующего названию паттерна страницы внутри директории / pages (файл JSON для паттерна главной страницы Time Inc. называется 00-homepage.json).
Когда мы открываем файл 00-homepage.json, мы можем заменить заглушечные данные, которые указали ранее. Вот как это может выглядеть:
"hero" : {
"headline": "Moving People",
"img": {
"src": "/images/hero_beyonce.jpg",
"alt": "Beyonce"
}
}Теперь вместо «Lorem Ipsum» заголовок гласит «Moving People». А для замены заглушечного баннера в оттенках серого, мы указываем путь к изображению с Бейонсе: /images/hero_beyonce.jpg.
Такой процесс установки значений по умолчанию для динамических данных и последующей замены их реальным содержимым нужно провести для всех страниц всех разделов сайта. Кроме замены простых элементов, вроде заголовков, мы можем установить динамические переменные true/ false, пройтись по массиву данных и сделать многое другое. Мы даже можем кардинально изменить интерфейс, внеся несколько правок в файл JSON, о котором будем говорить дальше.
Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
