Глава 5: Поддержка системы дизайна (часть 4)
← Предыдущая часть | Следующая часть →
Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики «Атомарный дизайн».
Если вы здесь впервые, то лучше начните сначала.
Создайте систему, которую возможно поддерживать
Когда мы говорили об обновлении, добавлении и удалении шаблонов, возможно, у вас возник вопрос: «Как, черт возьми, наши продукты будут поспевать за всеми этими изменениями?!» Действительно, это одна из самых сложных задач, которые вам предстоит решить, чтобы успешно поддерживать систему дизайна.
Небрежность представляет самую большую угрозу для любой системы. ~Алекс Шлифер, Airbnb
Многими системами перестают пользоваться, потому что для поддержания их актуальности требуется слишком много усилий. Если обновлять паттерны, документацию и продукты слишком сложно и трудоемко, рано или поздно людям это надоест. Они перестанут прилагать какие бы то ни было усилия, и постепенно система дизайна будет забыта.
Вывод: обновлять паттерны UI, документацию и продукты должно быть максимально просто. Это первоочередная задача для команды разработчиков системы, и требует тщательного рассмотрения с позиций технологии и рабочего процесса.
# В поисках идеала
Создание идеальной системы дизайна включает в себя и создание среды, в которой библиотека паттернов и продукты легко синхронизируются. Представьте, что вы вносите исправление в паттерн интерфейса и видите, как оно автоматически отображается в библиотеке паттернов и везде, где этот паттерн используется.
Благодаря такому методу вам не придется делать одну и ту же работу дважды, а ваши библиотека паттернов и продукты, в которых эти паттерны используются, будут синхронизированы. Звучит, как сказка, не так ли?
Но эта сказка вполне может стать реальной. Издательство Lonely Planet стало одним из первопроходцев в создании подобной системы дизайна. Их система получила название Rizzo. С помощью интеллектуальной архитектуры Lonely Planet создали API, который встраивается в их среду разработки и библиотеку паттернов. В результате получилась централизованная система дизайна, которая обеспечивает безупречную синхронизацию сайта и документации.
Начать применять подобный подход — непростая задача. Для этого требуется сложная техническая архитектура, профессиональная команда, чтобы ее развернуть, и относительно централизованная организационная структура компании. То, как получится у вас, зависит от огромного количества факторов.
# Устранение технических преград
Для синхронизации библиотеки паттернов и среды разработки требуется простой, масштабируемый и удобный способ совместного использования кода и его поддержки. Потребуется написать еще целую книгу, чтобы подробно описать разные технические стратегии и подходы к созданию автоматически синхронизируемой системы. Тем не менее, давайте рассмотрим несколько основных областей, связанных с синхронизацией фронтенд-кода.
На передовой фронтенда
Система UI-дизайна проявляется как интерфейсная часть, которая состоит из HTML, CSS и JavaScript. Наша непосредственная задача — перенести фронтенд-код (а также его сложную логику применения и бэкенд-код) в среду разработки.
Веб-разработчик Марсело Сомерс в своей статье «Chasing the Holy Grail*» подробно описывает различные технические подходы к достижению синхронизируемой системы и выделяет плюсы и минусы каждого. Не буду вдаваться в детали каждой стратегии, предложенной Марсело, отмечу однако, что выбрать есть из чего: от примитивного «копипаста» кода вручную до встраивания библиотеки паттернов непосредственно в среду разработки.
По своему опыту могу сказать, что интегрировать CSS и презентационный JavaScript в среду разработки относительно просто, куда сложнее поделиться разметкой. Как правило, CSS и JavaScript скомпилированы в один или несколько файлов, поэтому их можно выложить на CDN, а затем просто ссылаться на эти файлы. Марсело объясняет, как это сделать и организовать управление версиями:
Предоставьте разработчикам URL-адрес с указанием версии (например, http://mycdn.com/1.3.5/styles.css), а при обновлении просто укажите новый номер версии в URL. ~ Марсело Сомерс
Совместное использование CSS и JavaScript — это хорошо. Но как быть, если вам нужно поделиться разметкой? Вы спросите: «Зачем вообще ей делиться?» Все дело в том, что разметка и внутренняя бэкенд-логика зачастую тесно переплетаются в кодовой базе продукта, что затрудняет использование обычного копипаста при передаче данных между библиотекой паттернов и средой разработки. К счастью, есть способы обойти эту проблему.
Решение проблемы с разметкой с помощью языка шаблонов
Использование языка шаблонов на базе HTML (например, Mustache, Handlebars, Twig, Underscore, Jade, Nunjucks и др.) делает разметку более портативной и динамичной.
Язык шаблонов помогает разделить структуру и данные, а также перезагрузить наш HTML, чтобы мы не переписывали одни и те же паттерны разметки снова и снова. Многие CMS и среды разработки также используют язык шаблонов для работы с разметкой, и это еще один плюс.
Язык шаблонов может послужить мостиком между вашей библиотекой и средой разработки. Если вы используете язык шаблонов для создания паттернов в вашей системе дизайна (мы затрагивали это в главе 3), вы можете легко перенести эти паттерны в те среды разработки, где используется тот же механизм шаблонов.
Команда Phase2 Technology сумела выстроить автоматически синхронизируемую систему. Они используют Pattern Lab в качестве инструмента разработки библиотеки паттернов и Drupal в качестве CMS. Поскольку Pattern Lab и Drupal поддерживают популярный шаблонизатор Twig, Phase2 способен легко обмениваться паттернами между двумя средами, и таким образом библиотеки паттернов их клиентов и сборки продуктов идут в ногу друг с другом.
Используя единую платформу для шаблонов и модуль Drupal Component Libraries, мы предоставляем Drupal возможность напрямую включать, расширять и встраивать шаблоны Twig, которые Pattern Lab использует для своих компонентов. И это без какого-либо дублирования шаблонов вообще! ~ Эван Лавли, Phase2 Technology
# Подходит ли вашей компании автоматически синхронизируемая система дизайна?
Возможно, после прочтения предыдущего раздела вы подумали: «Потрясающе! Именно такая система нужна моей компании!» Действительно, выстроить подобную систему было бы прекрасно. И все же ряд причин может помешать автоматической синхронизации среды разработки и библиотеки паттернов.
Например, ваша компания разрабатывает множество цифровых продуктов на разных платформах с использованием абсолютно разных технологий. Возможно, вы работаете на гигантскую корпорацию с филиалами по всему миру. Или вашей компании присуща крайне децентрализованная, автономная структура. Или, быть может, вы трудитесь на благо федерального правительства.
Система дизайна правительства США называется Draft U.S. Web Digital Standards. Она представляет собой набор компонентов UI и визуальных стилей, созданных, чтобы помочь разработчикам, отвечающим за правительственные сайты, создавать более согласованные пользовательские интерфейсы. Система дизайна содержит разметку и стили, которые можно скачать и использовать в своей работе.
Было бы невероятно, если бы удалось реализовать автоматическую синхронизацию в таком гигантском масштабе. Размах и децентрализованный характер организации означает, что автоматическая синхронизация библиотеки паттернов не достижима без кардинальной смены подхода к тому, как создаются веб-сайты федерального правительства.
Не отчаивайтесь, если вашей компании также присуща удаленная, децентрализованная структура! Создание хоть какой-то системы дизайна, состоящей из нескольких шаблонов UI, полезной документации и руководящих принципов, укажет направление, куда надо двигаться. Как я уже говорил, эти усилия должны быть планомерными и постепенными, ведь даже вы прежде чем начать ходить, сперва научились ползать.
Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, нажмите кнопку Clap в левой части экрана. Вам нетрудно, нам приятно :)
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
