Глава 5: Поддержка системы дизайна (часть 7)
← Предыдущая часть | Следующая часть →
Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики «Атомарный дизайн».
Если вы здесь впервые, то лучше начните сначала.
Сделайте систему масштабной
Заметная, междисциплинарная, легкодоступная библиотека паттернов — тот инструмент, к которому ваша команда будет прибегать снова и снова. Используйте это в своих интересах.
Поскольку библиотека уже привлекла их внимание, вы можете пойти дальше и расширить ее. Добавьте и другую полезную документацию: голос и тон, бренд, код, принципы дизайна и рекомендации по написанию текстов (мы обсуждали это в главе 1).
Возможно, сейчас вашей компании нет необходимости прорабатывать все эти аспекты руководства по стилю. Смысл в том, что создание централизованного ресурса повышает информированность всех сотрудников о лучших практиках и повышает эффективность документации.
Еще один способ расширить функциональность библиотеки паттернов —наряду с веб-шаблонами включить в нее и рекомендации по паттернам для нативных платформ. Система дизайна Intuit’s Harmony являет пример того, как нативные паттерны мобильных платформ iOS и Android соседствуют с их веб-сородичами.
Сделайте систему контекстно-агностической
Названия паттернов, которые вы им присвоите, несомненно, повлияют на то, как они будут использоваться. Чем лучше название подходит паттерну, тем более универсальными он становится и тем чаще используется.
Мы склонны создавать паттерны пользовательского интерфейса в контексте страниц, поэтому может возникнуть соблазн называть компоненты на основе их изначального расположения. И все же вместо того, чтобы называть ваш компонент «карусель домашней страницы» (простите мою болезненную одержимость каруселями), назовите его просто «карусель» и используйте везде, где хотите!
Еще одна сложность с присвоением названий графическим паттернам заключается в том, что мы склонны отвлекаться на паттерны контента, которые заключены внутри них. Например, если вы разрабатываете интернет-магазин, у вас может возникнуть желание назвать блок с изображением продукта и наименованием «карточкой продукта». Но при подобном названии вы тотчас же ограничите содержание данного паттерна. Назовите его просто «карточка», и тогда вы сможете поместить в него всевозможный контент: товары, рекламные акции, адреса магазинов и т. д.
Сразу предупреждаю: давать названия действительно очень сложно. Но есть стратегии, которые помогут вам придумать хорошие для ваших паттернов. Проведение инвентаризации элементов интерфейса (как описывалось в главе 4) поможет уйти от контекста страниц, на которой паттерн находится, и вы сможете придумать название без привязки к конкретному варианту использования.
Для этой же цели я проводил с командами следующее упражнение: мы размывали содержимое внутри паттерна, чтобы сосредоточиться на его структуре, а не контенте внутри.
Придумывать названия всегда будет непросто, но присвоив удачные названия паттернам, которые отражают контекст и контент, вы сделаете их более мобильными, практичными и универсальными.
Покажите контекст
Упаковать паттерны интерфейса в библиотеку — это полдела. Вторая половина — продемонстрировать пользователям системы дизайна контекст каждого паттерна, чтобы они могли понять, как и где правильно их использовать. Большинство библиотек паттернов содержат примеры UI-паттернов, но, как уже говорилось, паттерны не существуют в вакууме. Где именно они используются?
Один из способов познакомить с контекстом — показать скриншоты или видео паттерна в действии. В этом плане очень хороша документация по материальному дизайну; каждый компонент сопровождается фотографиями, видео и подробной информацией о его применении. Это дает пользователям полное представление о том, как компоненты будут выглядеть на практике, и объясняет, как использовать каждый паттерн.
Другой способ показать контекст — предоставить информацию о наследовании каждого паттерна. В главе 3 мы обсуждали инструмент Pattern Lab, который автоматически собирает эту информацию. Он позволяет увидеть, какие паттерны входят в состав какого-либо компонента, и показывает, где данный компонент используется. Эти наводки очень помогают в QA — вы увидите, какие паттерны нужно будет протестировать после внесения правок.
Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, нажмите кнопку Clap в левой части экрана. Вам нетрудно, нам приятно :)
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
