Глава 5: Поддержка системы дизайна (часть 7)

85

← Предыдущая часть | Следующая часть →

Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики «Атомарный дизайн».

Если вы здесь впервые, то лучше начните сначала.


Сделайте систему масштабной

Заметная, междисциплинарная, легкодоступная библиотека паттернов — это тот инструмент, к которому ваша команда будет прибегать снова и снова. Используйте это в своих интересах.

Поскольку этот ресурс уже привлек их внимание, вы может пойти дальше и расширить его. Добавьте и другую полезную документацию: голос и тон, бренд, код, принципы дизайна и рекомендации по написанию текстов (мы обсуждали это в главе 1).

В систему дизайна Intuit’s Harmony входят библиотека паттернов, принципы дизайна, голос и тон, маркетинговые рекомендации и многое другое. Вся эта полезная документация собрана в одном месте, что помогает повысить ее доступность и эффективность.

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

Еще один способ расширить функциональность библиотеки паттернов — включить в нее наряду с веб-шаблонами рекомендации по паттернам для нативных платформ. Система дизайна Intuit’s Harmony являет пример того, как нативные паттерны мобильных платформ iOS и Android соседствуют с их веб-сородичами.

В библиотеке Intuit’s Harmony в каждом паттерне можно переключаться между веб-интерфейсом, iOS и Android. Это позволяет команде поддерживать согласованность системы дизайна для разных платформах и обнаруживать расхождения в паттернах, если таковые случаются.

Сделайте систему контекстно-агностической

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

Мы склонны создавать паттерны пользовательского интерфейса в контексте страниц, поэтому может возникнуть соблазн называть компоненты на основе их изначального расположения. И все же вместо того, чтобы называть ваш компонент «карусель домашней страницы» (простите мою болезненную одержимость каруселями), назовите его просто «карусель» и используйте везде, где хотите!

Еще одна сложность с присвоением названий графическим паттернам заключается в том, что мы склонны отвлекаться на паттерны контента, которые заключены внутри них. Например, если вы разрабатываете интернет-магазин, у вас может возникнуть желание назвать блок с изображением продукта и наименованием «карточкой продукта». Но при подобном названии вы тотчас же ограничите содержание данного паттерна. Назовите его просто «карточка», и тогда вы сможете поместить в него всевозможный контент: товары, рекламные акции, адреса магазинов и т. д.

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

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

Хорошее способ придумать название для паттерна — «заблюрить» контент внутри него. Тогда название будет отражать структуру паттерна, а не его содержание.

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

Покажите контекст

Упаковать паттерны интерфейса в библиотеку — это полдела. Вторая половина — продемонстрировать пользователям системы дизайна контекст каждого паттерна, чтобы они могли понять, как и где правильно их использовать. Большинство библиотек паттернов содержат примеры UI-паттернов, но, как уже говорилось, паттерны не существуют в вакууме. Где именно они используются?

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

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

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

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

Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.

Если вам понравился перевод, нажмите кнопку Clap в левой части экрана. Вам нетрудно, нам приятно 🙂

← Предыдущая часть | Следующая часть →


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →
Курс «Атомарный дизайн»

Посты в категории UI-дизайн

Программы для веб-дизайнера: где создавать сайты? | Глава 7

Ольга Жолудова

13 августа 2019

Посты в категории UI-дизайн

Основные этапы работы над веб-проектом | Глава 6

Ольга Жолудова

13 августа 2019

Посты в категории UI-дизайн

5 направлений, в которых веб-дизайнеру нужно развиваться постоянно | Глава 5

Ринат Шайхутдинов

13 августа 2019