TL; DR: Design systems - это руководство по дизайну, которое приносит пользу программному обеспечению, коммуникациям, людям и бизнесу.

Ведущие технологические компании в последние годы поделились своими правилами и соглашениями в области дизайна со всем миром, и одним из хорошо известных примеров является Material Design от Google. Как и в случае с материальным дизайном, есть Руководство по стилям Yelp, Рекомендации по человеческому интерфейсу от Apple и многое другое. Даже у правительства США есть свой набор правил, который называется U.S. Система веб-дизайна . И все это индивидуально называется дизайн-системами.

Что такое дизайн-система?

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

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

Давайте возьмем кнопку в качестве примера:

Кнопки имеют цвета и текст, соответствующие принципам правил и ограничений. Вторая кнопка «Отправить форму» вместе с «Удалить файл» и «Уведомить команду» имеет все 3 атрибута, поскольку она явно указывает на конкретное действие пользователя. Система дизайна содержит более сложные компоненты, которые соответствуют этим трем принципам, составляющим приложение.

Являются ли дизайн-системы синонимами руководств по стилю?

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

Они похожи на библиотеки шаблонов?

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

Тогда как насчет интерфейсных фреймворков?

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

С появлением компонентных JavaScript-фреймворков, таких как Vue и React, дизайн-системы также сосредоточены на компонентном дизайне. Но некоторым из этих фреймворков не хватает тона, голоса и обмена сообщениями.

Посмотреть дизайн-системы как экосистемы

Дизайн-система - это сочетание стиля, компонентов и голоса. MailChimp, платформа для почтовых кампаний, имеет подробное руководство по стилю, но также имеет отдельное руководство, посвященное голосу и тону, под названием Voice and Tone. Цель Voice and Tone - показать человеческое сочувствие, помнить о человеческих ограничениях (например, инвалидности) и обеспечить общий опыт использования. MailChimp использует эти правила для настройки единого голоса для всей своей платформы и сервисов.

Вот пример от MailChimp:

Итак, почему сейчас наблюдается рост дизайнерских систем?

Концепция систем проектирования существует довольно давно, например, Руководство по стандартам графики NASA 1975 года. Однако лишь недавно некоторые компании обратили внимание на дизайн-системы, поскольку поняли, что их проекты не масштабируются так быстро, как их бизнес. Внутренние группы осознают потребность в удобном взаимодействии с пользователем и создают программное обеспечение с чистым, последовательным и продуманным дизайном с использованием ориентированных на человека и системных подходов.

Как упоминалось ранее, дизайн-система - это больше, чем статическое руководство по стилю. Это живой образец, который развивается по мере взросления компании и / или изменения потребностей клиентов. Руководство по стилю Lonely Planet - это пример живой дизайн-системы. Команда Lonely Planet сознательно осознает ценность пользовательского опыта, потому что устаревший дизайн может иметь пагубные последствия для их бизнеса.

Как дизайн-системы могут принести пользу мне и моей компании?

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

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

Наличие дизайн-системы оказывает на внутренние команды большее благотворное влияние, чем им полагается. Это увеличивает общение и понимание между дисциплинами, особенно дизайнерами и разработчиками. Ян Фезер, бывший инженер Lonely Planet, рассматривает его как «инструмент совместной работы, объединяющий группы проектирования и разработки», который может повысить продуктивность работы.

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

Существуют ли официальные стандарты для систем дизайна?

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

Lightning Design System Salesforce содержит шаблоны проектирования, компоненты и рекомендации, но не содержит кода JavaScript, что позволяет командам использовать любую среду разработки внешнего интерфейса по своему выбору. Material Design от Google включает интерактивные инструкции по движению, поскольку в нем подчеркивается естественное движение и плавная анимация для восхитительного опыта. И мой личный фаворит - Carbon Design System от IBM. Carbon не только предполагает шаблоны и рекомендации, но также имеет динамическую песочницу для настройки компонентов.

Итак, как создать дизайн-систему?

Так как же создать дизайн-систему для своей компании? Во-первых, соберите своих дизайнеров, разработчиков и представителей малого и среднего бизнеса. Затем проведите инвентаризацию всех цветов, шрифтов и компонентов, имеющихся в системе. Тогда настройтесь на блог Часть 2: Системы проектирования зданий!