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

Olga Kokoulina
Nov 9, 2017 · 4 min read

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

Перед вами перевод книги 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 в левой части экрана. Вам нетрудно, нам приятно :)

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

Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн

Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!

Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!

Посмотреть каталог курсов →

Атомарный дизайн

В этой коллекции публикуется перевод книги Atomic Design…

Olga Kokoulina

Written by

Пишущий маркетолог, Tg: @ollieko

Атомарный дизайн

В этой коллекции публикуется перевод книги Atomic Design, которая посвящена разработке систем проектирования пользовательского интерфейса. Автор книги — Брэд Фрост. Читать в оригинале: http://atomicdesign.bradfrost.com/table-of-contents/

Olga Kokoulina

Written by

Пишущий маркетолог, Tg: @ollieko

Атомарный дизайн

В этой коллекции публикуется перевод книги Atomic Design, которая посвящена разработке систем проектирования пользовательского интерфейса. Автор книги — Брэд Фрост. Читать в оригинале: http://atomicdesign.bradfrost.com/table-of-contents/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store