Глава 3: Инструменты профессионала (часть 2)
← Предыдущая часть| Следующая глава →
Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики «Атомарный дизайн».
Если вы здесь впервые, то лучше начните сначала.
Разработка паттернов и псевдо-паттернов
Исторически сложилось так, что разработчики, использующие статические инструменты, прорабатывали только лучшие сценарии. Имя пользователя — Сара Смит, — всегда аккуратно вписывается в одну строку; ее фото будто вырезали из журнала; ее профиль полностью заполнен; два столбца с информацией в профиле — одинаковой высоты.
Естественно, в реальности эти идеальные сценарии практически никогда не случаются.
Для создания надежных и устойчивых систем, необходимо учитывать все варианты сценариев: и лучшие, и худшие, и все, что между ними.
Что, если пользователь не загрузил аватар? Что, если у него 87 наименований товаров в корзине? Что, если продукт представлен в 14 вариантах? Что, если заголовок поста в блоге содержит 400 символов? Как насчет пользователя, который зашел на сайт повторно? А если впервые? Что делать, если под статьей нет комментариев? И что делать, если там дискуссия из семи вложенных комментариев? Что делать, когда на панель управления нужно вывести срочное сообщение?
Разработка всех вариаций интерфейса традиционным статическим способом — это выполнение лишней работы и самое настоящее испытание нудятиной. Что, вероятно, и является причиной, почему эти вариации так редко создают. Но если мы хотим проектировать системы, которые учитывают все варианты и реалии контента, нельзя отмахиваться от вопросов «что, если».
Как же учесть все варианты интерфейса, не свихнувшись в процессе? Функция псевдо-шаблонов Pattern Lab позволяет закладывать самые разные сценарии, внося лишь несколько изменений в данные.
Допустим, мы создаем приложение, где на одной из панелей отображается список авторов проектов. Его интерфейс выглядит примерно так:
Чтобы сделать контент внутри каждого из блоков динамическим, определим наш список соавторов как массив данных внутри dashboard.json:
"collaborators" : [
{
"img": "/images/sample/avatar1.jpg",
"name" : "Steve Boomshakalaka",
"title" : "CIA"
},
{
"img": "/images/sample/avatar2.jpg",
"name" : "Gingersnap Jujubees-Daniels",
"title" : "President of the Longest Company Name in the World Corporation, Global Division"
},
{
"img": "/images/sample/avatar3.jpg",
"name" : "Sarunus Marciulionis",
"title" : "Golden State Warriors"
},
{
"img": "/images/sample/avatar4.jpg",
"name" : "Sara Smith",
"title" : "Short Title"
}
] В этом дизайне по умолчанию предполагается, что пользователь является рядовым пользователем, а не администратором. Но что, если мы хотим дать администраторам возможность управлять соавторами проекта? Тогда интерфейс может выглядеть примерно так:
Чтобы показать дополнительные опции администратора по редактированию и удалению в Pattern Lab, мы можем создать псевдо-паттерн — новый файл в папке pages, который выглядит так:
dashboard~admin.jsonСимвол тильда (~) обозначает псевдо-паттерн. dashboard~admin.json наследует все данные, содержащиеся в dashboard.json, но также дает возможность добавлять или удалять различные данные. Это значит, что список соавторов, который мы указали ранее в dashboard.json, по-прежнему доступен, но мы можем добавить дополнительные данные на панель управления dashboard~admin.json:
"isAdmin" : true Мы создаем переменную с именем isAdmin и указываем ее значение true. Теперь это можно использовать, чтобы включать дополнительные опции внутри паттерна блока соавтора.
<div class="block">
<img src="{{ img }}" alt="{{ name }}" />
<h3>{{ name }}</h3>
<h4>{{ title }}</h4>
{{# isAdmin }}
{{> molecules-block-actions }}
{{/ isAdmin }}
</div>Первые несколько строк содержат img, name и title, которые мы прописали в dashboard.json. Но обратите внимание на то, что содержится в разделе {{# isAdmin }} секции Mustache. Вот что у нас тут говорится: если isAdmin true, включается паттерн молекулы block-actions. Паттерн block-actions содержит кнопки редактирования и удаления, и будет отображаться только в том случае, если isAdmin установлен в true (или имеет любое другое значение кроме false).
В dashboard.json параметр isAdmin не установлен по умолчанию, поэтому дополнительные действия не будут отображаться. Чтобы показать дополнительные опции, нужно указать в dashboard.json, что isAdmin true. Вы можете использовать эту технику, чтобы кардинально поменять весь пользовательский интерфейс (к примеру, изменить основную навигацию, показать дополнительные опции на панели управления, добавить дополнительные элементы управления и т.д.), всего лишь изменив значение одной переменной. Мощная штука.
Уф… Мои поздравления, если вы добрались до сюда! Теперь вы знаете, как добавлять и обрабатывать динамические данные в Pattern Lab. Способность Pattern Lab к динамической разработке обеспечивает некоторые важные преимущества:
- Проводит четкую границу между структурой и контентом. Структура паттерна и его содержание очень сильно влияют друг на друга. Однако, устойчивые системы дизайна стремятся к созданию независимых и гибких паттернов, которые могут содержать самый разный контент. Разделение структуры и контента позволяет соблюдать принцип DRY («Не повторяйся») и вносить изменения в контент, не влияя на структуру паттерна. И наоборот: мы можем вносить изменения в паттерн без необходимости обновлять каждый пример этого паттерна, содержащий разные данные. Это разделение приводит к огромной экономии времени и усилий.
- Создает кастомную CMS. Установка данных по умолчанию и данных, характерных для конкретных страниц, служит ситуативной системой управления контентом. Статические инструменты дизайна не очень хорошо подходят для обработки динамических данных, но устанавливать WordPress, Drupal и другие CMS, только для демонстрации вариантов интерфейса —как-то чересчур. Pattern Lab дает баланс, так как позволяет работать с динамическими данными, но не требует настраивать внушительные базы данных в MySQL.
- Выступает в качестве инструкции для бэкенд разработчиков, отвечающих за интеграцию UI с системой управления контентом. Бэкенд разработчики могут посмотреть на пользовательский интерфейс, созданный в Pattern Lab, понять, какие элементы статические, а какие динамические, и перенести их в серверную часть.
- Позволяет редакторам, авторам, дизайнерам и другим не-разработчикам вносить свой вклад в проектирование живой системы. Мне, как фронтенд разработчику, приходилось бесчисленное количество раз исправлять опечатки, загружать новые изображения, переводить рекламные баннеры и вносить в код другие изменения, связанные с контентом. Это настоящий ад! Уверен, большинство разработчиков согласятся, что внесение подобных незначительных правок — неэффективное использование их времени. Pattern Lab разделяет структуру и данные. Благодаря то этому не-разработчики безопасно управляют аспектами системы, связанными с контентом, а разработчикам могут сосредоточиться на проектировании архитектуры системы.
Наконец, мы рассмотрели основные функции Pattern Lab. Но это еще не все! Далее мы рассмотрим несколько дополнительных функций, которые следует учитывать независимо от того, какой инструмент вы используете для создания вашей библиотеки паттернов.
Визуальные инструменты для «резиновых» паттернов
Обилие устройств с доступом в интернет заставило дизайнеров считаться с изменчивостью, присущей этой среде. К счастью, такие методы, как адаптивный веб-дизайн, позволяют создавать макеты, которые прекрасно выглядят и работают на любом экране.
Если мы хотим создавать адаптивный дизайн, то нам, очевидно, нужно создавать гибкие паттерны пользовательского интерфейса. Однако, создание «резиновых» паттернов имеет больше преимуществ. Чем гибче компонент UI, тем он устойчивее и универсальнее.
Представьте, что вы можете взять компонент — к примеру, слайдер фотогалереи, — и использовать его в любом месте, где это нужно. Иногда он должен быть главным элементом и занимать весь экран. В другой раз мы мы можем использовать его в контексте статьи или встроить в боковую панель. Наша заветная цель: сделать компоненты настолько гибкими, чтобы они могли адаптироваться и подходить для решения всех задач, ради которых мы их пожелаем использовать.
Несомненно, это открывает перспективу для контейнерных запросов (container queries). Контейнерные запросы позволяют элементам адаптироваться на основе их родительских контейнеров, а не в зависимости от размера окна просмотра. Таким образом мы можем воздействовать на элементы, использующими медиа-запросы в данный момент. Несмотря на то, что контейнерные запросы ограничены нативным функционалом браузеров, они позволяют помешанным на паттернах разработчикам с легкостью создавать и развертывать «резиновые» системы UI.
Создавать гибкие паттерны UI крайне важно. Только так вы найдете баланс между адаптивным дизайном, контейнерными запросами и здравым смыслом. Но как их создавать? И как библиотека паттернов может помочь гибко думать и действовать?
Разработчики первых инструментов для создания адаптивного дизайна считали главной задачей корректное отображение на популярных мобильных устройствах:
- iPhone 4 в портретной ориентации (ширина экрана 320 пикселей),
- он же в альбомном режиме (480 пикселей),
- iPad в портретном режиме (768 пикселей) и т.д.
Конечно, интернет-среда куда более разнообразна, нежели мобильник, планшет и десктоп. Я создал инструмент ish., чтобы дизайнерам было проще учесть весь спектр разрешений при тестировании адаптивного дизайна.
Я назвал инструмент ish. (прим.пер.: ish — это уменьшительный суффикс, вроде -еньк), потому что при нажатии на маленькую кнопку открывается маленькое окно просмотра. При выборе средней кнопки откроется окно среднего размера. А большая кнопка приведет к открытию окна большого размера. Такие унифицированные размеры помогают дизайнерам и разработчикам учесть все варианты разрешений, а не фокусироваться лишь на нескольких популярных.
Ish. интегрирован в Pattern Lab. Благодаря этому мы можем просматривать интерфейсы и паттерны, лежащие в их основе, в разном разрешении:
Хотя ish. был призван помочь разработчикам, я обнаружил, что он даже полезнее в роли инструмента для обучения клиентов и коллег. Поскольку он встроен непосредственно в библиотеку паттернов, клиенты и коллеги могут оценить тот факт, что их система дизайна выглядит и хорошо работает независимо от размера окна.
Просмотр кода
Фишка, присущая любой библиотеке паттернов, — возможность заглянуть под капот и увидеть код любого компонента. Открытость кода паттернов UI ускоряет разработку (как и любой другой кодер, я обожаю копипаст) и помогает тим-лидам сохранять синтаксис и стиль кода. Это особенно полезно, когда над кодом трудится целая толпа разработчиков.
Какой вид кода наиболее важен в библиотеке паттернов, естественно, зависит от организации и того, какая среда разработки и стек технологий используется. На практике большинство библиотек паттернов придерживаются базового HTML-кода. Однако некоторые для отдельных элементов дополнительно используют CSS и Javascript. Например, в системе проектирования Salesforce Lightning наряду с HTML использован (S)CSS, связанный с данным паттерном.
Поскольку фронтенд-код открыт, программисты пишут его более аккуратно. Впрочем, это не гарантирует совершенства — всегда найдутся разработчики, пишущие плохой код. Из-за этого некоторым компаниям пришлось создать невероятно сложные системы дизайна. Но некоторым из них, например, Lonely Planet, удалось-таки отыскать Священный Грааль библиотек паттернов: их библиотека и среда разработки синхронизированы.
Мы еще остановимся подробнее на Святом Граале в пятой главе. Сейчас я просто хочу продемонстрировать, как открытый в библиотеке паттернов код влияет на разработку. В руководстве по стилю Rizzo от Lonely Planet вместо описаний HTML и CSS, указан код для включения каждого компонента UI.
Такой ресурс позволяет команде разработчиков придерживаться единой системы при создании интерфейсов для любых паттернов. Для отладки компонента интерфейса, нужно всего лишь взять код для включения определенного паттерна из библиотеки.
Pattern Lab дает возможность просмотра базового HTML-кода паттерна и кода паттерна, используемого для генерации HTML. Также с его помощью можно увидеть сопутствующий CSS и JavaScript код.
В конечном итоге, какой бы инструмент для работы с паттернами библиотеки вы не выбрали, он должен иметь режим просмотра кода. И еще важнее, чтобы ваша библиотека показывала тип кода. Тогда вы и ваша команда разработчиков будете работать максимально эффективно.
Ведение документации и аннотирование
Типичная ситуация при традиционном разрозненном проектировании — наличие внушительных макетов и длинных портянок технической документации. Написанных, согласованных и одобренных. Обычно это гигантские PDF-файлы, что прискорбно. Ведь часто в этих документах содержатся ценные идеи, инструкции и информация о системе дизайна. К сожалению, к моменту запуска проекта в продакшн такие громоздкие артефакты часто оказываются в мусорной корзине.
Так быть не должно. UI-документация должна содержать информацию по каждому аспекту создания интерфейсов, и — ключевой момент — она должна быть интегрирована с живой системой дизайна. Эффективные библиотеки паттернов содержат определения и описания компонентов интерфейса и сформулированные принципы: начиная от доступности и производительности до визуальной эстетики и т.д.
Pattern Lab предлагает несколько способов добавления описаний паттернов и аннотаций к системе дизайна. Описания можно добавить с помощью файла Markdown, соответствующего имени паттерна (например, pattern-name.md), в котором будет содержаться описание паттерна в каталоге библиотеки.
Pattern Lab также предоставляет замечательную функцию, которая позволяет добавлять аннотации к любому элементу интерфейса и просматривать эти аннотации «на живом». Каждый аннотированный элемент получает сноску, и при клике на нее вы переходите в соответствующую аннотацию. Это позволяет разработчикам просматривать комментарии по элементу в контексте живого интерфейса. Очень удобно!
Использование паттернов в контексте
Часто, глядя на различные паттерны в библиотеке, я ловил себя на мысли: «Замечательно, но где этот компонент в действительности используется?» Определение и описание характеристик паттерна — это одно, но было бы здорово давать информацию о контексте использования паттернов интерфейса.
Благодаря принципу матрешки Pattern Lab может отображать, из каких паттернов состоит любой компонент, и где эти паттерны используются в дизайне.
В приведенном выше примере мы видим паттерн молекулы media-block, который содержит изображение, заголовок, текст и группу кнопок. Если обратите внимание на структуру паттерна, увидите, что в ней есть элемент atoms-square, который представляет собой изображение-миниатюру, а также молекулу button-bar, которая представляет собой группу кнопок. Мы также видим, где именно используется этот паттерн: в организме media-block-list.
Информация о контексте невероятно полезна для дизайнеров и разработчиков; я все время использую эту функцию в своей работе. Допустим, захотели мы внести изменения в какой-то паттерн, например, увеличить размер изображения вдвое или добавить дополнительный элемент: мы сразу увидим, какие паттерны и шаблоны нужно будет протестировать, а отделу QA убедиться, что ничего не поломалось после изменений.
А еще такая функция помогает обнаружить избыточные или редко используемые паттерны и удалить их из библиотеки до релиза.
Каждому свое
Итак, мы узнали кучу всего. Pattern Lab предлагает несколько полезных функций для создания последовательных и продуманных систем дизайна. Но, как я уже говорил, ни один инструмент не будет идеальным для всех и каждого. Существует огромное количество отличных инструментов, которые помогут создать эффективные библиотеки паттернов, и ваш выбор будут зависеть от среды разработки, технологий, процессов и культуры вашей организации.
При выборе инструментов для работы над библиотекой паттернов, помните о качествах и особенностях эффективной библиотеки.
Эффективная библиотека паттернов:
- Содержит описания паттернов и аннотации.
- Содержит актуальный HTML, CSS и/или JavaScript код.
- Позволяет увидеть, как будет выглядеть паттерн при различном разрешении экранов.
- Содержит не только основные паттерны, но и их вариации. Например, активные и неактивные вкладки.
- Позволяет добавлять реальный контент в структуру паттернов в режиме реального времени.
- Содержит информацию о контексте. Например, из каких паттернов состоит тот или иной компонент, и где он используется.
По большому счету, речь идет не о самих инструментах для создания библиотек паттернов, а о том, как мы их используем. Создание и поддержка эффективной системы дизайна означает радикальные перемены в культуре, процессах и стилю работы в вашей организации. Возможно, это покажется сложным, но это так и есть.
Но не бойтесь! Оставшаяся часть книги подробно описывает весь процесс создания и поддержки успешной системы дизайна для достижения долгосрочного успеха вашей компании.
Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
