Глава 1: Проектируем системы (часть 6)
← Назад | Глава 1: Проектируем системы (часть 5)
Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики “Атомарный дизайн”. Если вы здесь впервые, то лучше начните сначала)
Библиотека паттернов проектирования
Наконец, мы добрались до основного блюда. Библиотеки паттернов, или шаблонов (еще их называют руководствами по фронтенду, UI-библиотеками, библиотеками компонентов) быстро превращаются в основу современного дизайна интерфейсов.
В оставшейся части книги мы уделим основное внимание системному подходу к проектированию интерфейсов и подробно опишем, как создавать и поддерживать библиотеки паттернов.
Интересуетесь свежими статьями по дизайну?🚀 Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Плюсы создания руководства по стилю
Заставить UI работать на всевозможных устройствах и браузерах — само по себе задача высокого порядка. Добавьте к этому других членов команды, клиентов, заинтересованные стороны и разные корпоративные причуды , и задача станет поистине устрашающей.
Руководство по стилю — важный инструмент, который помогает предотвратить хаос в разработке и организационных вопросах. Вот почему руководства стали неотъемлемой частью современного веб-дизайна.
Переводим статьи по дизайну c 2013 года. Сейчас в коллекциях уже 555+ статей на русском. Посмотреть все материалы →
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
# Стабильное качество
Наличие руководства по стилю способствует согласованности и последовательности пользовательского интерфейса. Это приносит пользу и самим разработчикам, и пользователям.
Недавно я зашел на сайт моей страховой компании, чтобы оплатить счет. На промежутке из пяти кликов я столкнулся с аж четырьмя различными интерфейсами. Некоторые из которых выглядели так, будто были созданы в 1999 году и с тех пор не менялись. Эта непоследовательность вынудила меня, пользователя, догадываться, что означают разрозненные элементы интерфейса, и какая кнопка куда ведет. К моменту, когда я добрался до формы оплаты, мне уже не верилось, что эта страховая компания в состоянии успешно и безопасно обработать мой платеж.
Руководства по стилю помогают избежать таких несоответствий, так как поощряют использование одинаковых элементов интерфейсов. Дизайнеры и разработчики могут сверяться с существующими шаблонами, чтобы результат их труда гарантированно соответствовал установленным требованиям.
Руководства пригодятся, и когда вы заказываете разработку на аутсорсе. Так подрядчики смогут добиться соответствия вновь созданных интерфейсов с уже существующими. Благодаря единому стилю, закрепленному в руководстве, внешние сервисы — платежные порталы или локализованные сайты, — будут соответствовать стилистике вашего основного сайта.
Поставьте руководство по стилю во главу стола, и вы получите системный и вызывающий доверие интерфейс. Он поможет пользователям освоиться и быстрее решить свои задачи.
# Единая терминология
Что вы имеете в виду, говоря «панель инструментов»? Все ли знают, что за плагин «touch slider hero»?
Чем больше людей задействовано в проекте, тем проще возникнуть проблемам взаимопонимания. Зачастую в смежных направлениях одни и те же элементы именуются по-разному, а некоторые специалисты (для большего хардкора) придумывают собственные названия. Для эффективной работы в команде крайне важно говорить на одном языке. И руководство по стилю поможет достичь единства в терминологии.
Руководство по стилю устанавливает единый согласованный лексикон для всех участников проекта, поощряя сотрудничество специалистов разных профессий и сокращая количество сбоев в работе.
# Образование
Анна Дэбенхэм в своей книге «Руководство по фронтенду» (Front-End Style Guides) доходчиво объясняет преимущества от создания руководств по стилю. Одно из самых важных: образование.
Образование важно настолько же, насколько важна документация. Руководство по стилю способно продемонстрировать клиентам, что веб-сайт — это не просто набор страниц, а система. ~ Анна Дэбенхэм
Руководство по стилю демонстрирует клиентам и всем заинтересованным сторонам, что в основе проектирования и разработки веб-сайта лежит множество продуманных решений, а не чья-то идея: «Ой, а не создать ли нам новый сайт?» Библиотека паттернов доступно передает язык дизайна, таким образом все заинтересованные понимают, что финальный интерфейс стал таковым благодаря системе, лежащей в его основе.
Руководство по стилю помогут сгладить так называемый синдром «Особенной снежинки», когда некоторые отделы компании уверены, что у них уникальные проблемы и поэтому требуют уникальных решений. Когда система дизайна представлена в виде руководства, «особенные снежинки» способны лучше оценить логику системы и понять, почему на свои требования индивидуального решения получают отказ.
# Чуткость в работе
Для клиентов и всех заинтересованных сторон образование не просто важно. Хорошее руководство по стилю сообщает разработчикам об инструментах, которые у них есть, и содержит правила и рекомендации по их правильному использованию.
Сделайте руководство по стилю фундаментом проектирования (подробнее об этом в главе 4), и тогда разработчики будут вынуждены принимать во внимание то, как их решения влияют на всю систему проектирования. Будет сложнее преследовать частные интересы и легче думать об общем благе. Это именно то, что нужно вашей команде.
Руководство по стилю включает в себя каждый аспект разработки, чтобы учесть пожелания и соображения всех сторон. А раз в руководстве собрана вся важная информация, оно становится центральным узлом для всех участников проекта. Это помогает лучше понимать систему дизайна с разных точек зрения.
# Тестирование
Говорите, стартовая страница сломалась? А что именно стало причиной?
Тестировать намного проще, когда есть возможность разделить интерфейс на компоненты. Руководство по стилю позволяет просматривать компоненты интерфейса изолированно, так разработчики могут отследить, что вызывает ошибки: несовместимость с браузером или проблемы с функционированием.
# Скорость
В этой главе мы уже говорили о том, как высокая скорость разработки стала одной из причин, почему фреймворки вроде Bootstrap пользуются бешеной популярностью. Мы пытаемся выпускать проекты настолько быстро, насколько только позволяют человеческие возможности. Разработав собственную систему проектирования, вы можете добиться той же скорости, что и при использовании готовых решений для пользовательских интерфейсов.
Конечно, разработка системы проектирования интерфейсов и создание пользовательской библиотеки паттернов изначально требует много времени, размышлений и усилий. Но как только библиотека готова, дальнейшая разработка происходит намного быстрее, делая всех счастливее.
Федерико Хольгадо, ведущий UX-дизайнер MailChimp, рассказал, что библиотека паттернов MailChimp изначально состояла из паттернов четырех основных экранов их приложения. Но как только они взялись за разработку других страниц сайта, им удалось использовать существующие шаблоны вместо, а не создавать новые шаблоны с нуля.
Когда нам удалось использовать имеющиеся паттерны на других страницах, мы поняли: эта система сработала сейчас и сработает потом. ~ Федерико Хольгадо
# Долгосрочные перспективы
Нет никаких сомнений в том, что руководство по стилю помогает командам эффективно справиться с задачами здесь и сейчас. Но, как и хорошее вино, с годами ценность руководства лишь увеличивается. Достоинство системы проектирования интерфейсов заключается в том, что с течением времени она может и должна изменяться, совершенствоваться и расширяться.
Как уже упоминалось, создание пользовательской библиотеки паттернов — это сложная работа. Но именно она должна стать фундаментом и отправной точкой для будущих итераций и уточнений. Уроки, извлеченные из собственного опыта, аналитики, тестирования пользователей и A/B тестирования нужно отразить в руководстве по стилю. Тогда оно превратится в мощный информационный ресурс из фактов, знаний и лучших практик.
Плюс, даже в случае необходимости масштабного редизайна, вы обнаружите, что многие компоненты структуры интерфейса останутся прежними. Вам по-прежнему будут нужны формы, кнопки, заголовки и другие универсальные элементы интерфейса, поэтому нет необходимости выплескивать воду из ванны вместе с ребенком. Руководство по стилю обеспечит прочную основу для всей будущей работы, даже если результат этой работы будет выглядеть совершенно иначе.
Сложности при создании руководства по стилю
Я надеюсь, что преимущества создания системы проектирования стали вам совершенно ясны, и теперь в вашей голове пляшут прекрасные руководства по стилю и Фея Драже. Но чтобы достичь совершенного руководства по стилю, вам придется преодолеть многие опасности, которые сопровождают его создание.
# Активная пропаганда
Чтобы извлечь выгоду из руководства по стилю, компания сперва должна выделить необходимое время и бюджет на его создание. Это требует от руководства преодоления краткосрочной ментальности, которой корпоративная культура слишком часто заражена.
Для тех, кто мыслит на перспективу, преимущества использования руководства по стилю очевидны. Таким образом, вашей задачей будет убедить остальных в том, что они застряли в краткосрочном мышлении «кварталами», и что создание продуманной системы проектирования — это разумная инвестиция в будущее.
# Время
Самая трудная часть — произвести машину, которая будет производить продукт. ~ Деннис Кроули
Возможно, самой большой и неизбежной проблемой является то, что на создание руководства по стилю требуется много времени. Не знаю как у вас, но мне на работе ни разу не довелось скучать, ломая голову над тем, чем бы позаниматься сегодня. И я никогда не встречал человека, который бы не испытывал давления сроками. Естественно, это приводит к сосредоточению внимания на основном веб-проекте. К сожалению, жесткие временные рамки и бюджет отвлекают от усилий, необходимых для создания руководства по стилю, даже когда команда осознает его важность.
# Второстепенный проект
Создание библиотеки паттернов часто рассматривается как побочный проект, а не как составная часть основного. Если относится к работе над библиотекой как к чему-то отдельному, она попадает в разряд необязательного и становятся первыми кандидатом на заморозку в сложных ситуациях.
Этот парадокс с второстепенными проектами напоминает мне о чувствах, которые я испытываю, когда в очередной раз слышу о реализации веб-доступности в проектах: «Ох, будь у нас время и деньги, уж тогда-то мы бы…» Вот только мнение, будто веб-доступность (а также производительность и адаптивность) — это дорогая дополнительная функция, является ошибкой. Библиотека паттернов, как и веб-доступность, является хорошей практикой для применения в вашей работе независимо от того, обозначено ли это в плане проекта или нет.
# Поддержка и управление
Даже если на создание руководства по стилю выделены ресурсы, этот проект легко погибнет на корню, если ему не уделяется должного внимания.
Для успеха проекта решающее значение имеет стратегия поддержки и управления. Без человека, который будет управлять, поддерживать и обеспечивать соблюдение правил, руководство по стилю вскоре окажется в мусорной корзине (вместе с PSD-шками и вайрфреймами).
Руководство по стилю — это чрезвычайно важная тема, которая заслуживает подробного рассмотрения. В главе 5 я расскажу, как создавать и поддерживать руководства по стилю.
# Непонимание
Руководство по стилю иногда ошибочно считают инструментом, который полезен только дизайнерам или разработчикам. Это заблуждение ведет к снижению эффективности. Вместо того, чтобы сделать руководство источником вдохновения для всех в компании, его зачем-то превращают в тайну за семью печатями. Пусть кто-то сочтет меня простофилей, но я сомневаюсь, что это помогает развивать культуру сотрудничества.
Без учета доступности широкой аудитории, руководство по стилям может стать слишком расплывчатым или слишком техническим. Это в свою очередь приведет к тому, что все остальные решат, что этот ресурс не для них.
# Структура руководства
Чтобы руководство по стилю стало полезным ресурсом для всех в компании, необходимо четко понимать, что оно собой представляет, и почему имеет значение. Руководство должно быть привлекательным, дружелюбным, заметным, понятным и простым в использовании. Как уже упоминалось, руководство предназначается для широкой аудитории, поэтому нужно сделать его доступным и полезным как можно большему числу людей.
# Нехватка контекста
Контекст — это ключ к пониманию системы проектирования. К сожалению, на практике большинство библиотек паттернов не дают никаких подсказок о том, когда, как и где их компоненты будут использоваться. Без контекста разработчики не могут понять, насколько глубоко проработан отдельно взятый шаблон. Как результат, они не знают, какие страницы их приложения нужно перепроверять и тестировать, если были какие-то изменения.
# Нехватка четкой методологии
Несмотря на мою горячую любовь к библиотекам паттернов, я не могу не заметить отсутствие структуры во многих из них. Не поймите меня неправильно, ситуацию, когда команды мыслят системно и регулярно документируют UI-паттерны, я отношу к разряду фантастики. Но мне кажется, что многие библиотеки — это все же немного большее, нежели бессистемный набор компонентов. Уверен, у них есть множество возможностей для улучшения.
В поисках методологии для проектирования интерфейсов
Чтобы создать хороший опыт для эклектичного веб-ландшафта, мы должны выйти за рамки метафоры страницы, которая была с нами с момента рождения Интернета. К счастью, модульность завоевывает все аспекты процесса создания веб-сайтов, что приводит к более разумной организации работы и созданию более устойчивых систем.
По мере того, как количество устройств и браузеров увеличивается, становится все более очевидной необходимость в создании продуманной системы проектирования интерфейсов.
Добро пожаловать в атомарный веб-дизайн!
Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
