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

При поддержке канала https://t.me/uxidesign

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

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

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

1. Простота масштабируемости

2. Доступность

3. Согласованность между командой и платформами

4. Возможность повторного использования

5. Быстрое прототипирование и повторение

6. Увеличение темпов разработки программного обеспечения

7. Снижение энтропии дизайна

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

Атомный дизайн, разработанный Брэдом Фростом, представляет собой метод, в котором макет веб-сайта разбит на основные компоненты. Эти компоненты затем повторно используются по всему сайту. Название атомного дизайна происходит от концепции того, как вся материя во вселенной может быть разбита на конечный набор небольших элементов, называемых атомами. Точно так же это может быть применено к созданию дизайн-систем, где наши интерфейсы могут быть разделены на конечный набор элементов. Затем эти элементы работают вместе, чтобы создать эффективные дизайн-системы интерфейсов в модели, которая не является линейной, но является ментальной. Это помогает нам рассматривать пользовательские интерфейсы как целостные объекты, а также тот факт, что они были созданы с помощью наборов деталей.

Десять лет назад они были известны как библиотеки шаблонов, еще до появления атомного дизайна, который дал более полное понимание дизайн-систем. После того как Google представила Material Design в 2014 году, концепция дизайн-систем наконец-то созрела. Теперь, после появления многих таких систем, принцип атомного дизайна используется в качестве ментальной модели при создании системы, работающей в связке с репозиторием разработчика. Чтобы узнать больше об атомном дизайне, посетите: http://atomicdesign.bradfrost.com/.

Использование дизайн-системы действительно впечатляет. Ее можно использовать для создания нового продукта, веб-сайта электронной коммерции и т. д. Пока у вас есть команда и время для создания и обслуживания дизайн-системы, вы можете быть уверены, что сможете воспользоваться её преимуществами.

Так каков процесс создания дизайн-системы? Ниже приведен подробный пошаговый процесс построения дизайн-системы с помощью The Material Theme Editor.

Отличным примером дизайн-системы является Material Design System, которая является собственной дизайн-системой Google. Также известна как material.io, вы можете узнать больше на https://material.io/.

• Начните с изучения руководящих принципов проектирования и анализа существующих приложений, созданных с использованием этой дизайн-системы. Это поможет вам определить назначение дизайн-системы, которую вы хотите создать.
• 2. Загрузите в Google инструмент для создания эскизов Material Theme Editor. Это довольно забавный плагин, потому что он позволяет изменять множество элементов, от цвета и типографики до значков.The Material Theme Editor позволяет легко создавать интерфейс благодаря организованному расположению и группировке элементов, так что все доступно в форме раскрывающегося списка. Кроме того, можно настроить тему и сохранить ее как пользовательскую.

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

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

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

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

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

Этот редактор тем также состоит из типографских шкал и весов, которые можно сгенерировать с помощью плагина. Вы можете выбрать нужный шрифт Google на панели редактора, и он автоматически генерирует все размеры и вес заголовка в соответствии с выбранным шрифтом, как показано ниже. Поправки в иерархии или весе могут быть сделаны на холсте / документе руководства по стилю.

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

Material design предоставляет вам 4 типа наборов системных значков, которые заполнены, заострены, закруглены и двухцветны. Как и другие вещи, мы можем добавить больше в эту библиотеку с помощью наших пользовательских значков.

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

Material design предоставляет несколько экранных шаблонов, построенных с использованием атомов (символ первого уровня) и молекул (вложенные символы).

Не все значки, которые дает система, могут подойти для дизайна. Иногда нам нужно создать несколько пользовательских иконок либо для настройки, либо ради контекста. Как добавить значки в систему, не разрушая ее структуру и сделать их такими же доступными, как и другие системные значки? Как добавить типографский размер / вес или добавить цветовой код в цветовую систему? Давайте быстро посмотрим.

Каждый значок назван по-своему, так что они сгруппированы и названы так, чтобы их было легко создавать. Пример: значок / меню / заполнение, значок / меню / резкость и т. д., Так что в разделе «Значки» можно найти множество других значков, например, меню, и в этом разделе вы можете найти его варианты, такие как «резкий», «заполненный» и т. д.

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

Таким образом, значок соединяется с системой цветности и другими значками, если система цвета также установлена. Теперь пользователь может изменить глиф / форму значка из выпадающего списка символов и изменить цвет из переопределений. Чтобы добавить в систему значков, перейдите на страницу символов и продублируйте символ значка, который уже имеет соответствующую структуру, и просто замените глиф / форму значка новым и убедитесь, что вы изменили имя артборда / символа на новое. Вуаля!

Существует два способа создания цветовой системы с нуля. Создайте образцы цветов оттенков и оттенков цвета и назовите их правильно, как color / blue / blue100; цвет / синий / синий 900 и т. д. Затем преобразуйте эти образцы в символы. Это важный шаг. Кроме того, создайте стиль слоя для цветов. Выберите формы образцов цвета, создайте стиль слоя и назовите его так же, как указано выше. Это дает вам больше гибкости для доступа к цвету из системы. (показать рисунок) Если вы хотите добавить цвет в систему, символ или стиль слоя могут быть продублированы для изменения и переименования.

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

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

• Вы можете начать с создания отдельных элементов, таких как панель навигации (верхняя панель), нижняя панель, лотки и т. д., С различными вариантами цвета, доступными в системе.
• Вы можете отправить свою систему и первый раунд экранов своему клиенту или команде. После одобрения вы можете начать использовать эти компоненты повторно.
• При необходимости создайте новые компоненты / стили / типографский масштаб или измените существующие в системе согласно обратной связи, но только с одобрения команды. Ваша система теперь масштабируется без нарушения согласованности.
• Если в вашей команде несколько дизайнеров, вы можете использовать функцию «библиотеки эскизов», чтобы все синхронизировались с одним источником. Это означает, что у вас будет основной системный файл, который будет храниться в облаке, как в Dropbox или Google Drive. Этот файл будет доступен только для чтения, и все разработчики в команде могут получить доступ к главному файлу оттуда, чтобы при необходимости обновления или дополнения к системе вы могли выполнить это в мастер-файле, с одобрения команды. Это изменение будет отражено в файлах эскизов каждого пользователя в виде загружаемого обновления. Таким образом, управление эскизами и их различными версиями становится простым и организованным.
• Вы можете предоставить своим разработчикам доступ только для чтения к главному файлу системы, чтобы они могли читать спецификации атомов, молекул и организмов оттуда и создавать свои хранилища. Для справки вы можете передать им свои экраны. Затем разработчики могут ссылаться на макеты и создавать экраны, используя хранилище, которое они построили в своей системе кодирования. Таким образом, мы разрабатываем для практических конечных результатов и всегда синхронизированы с процессами разработчиков.

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

Перевод статьи Lollypop Design Studio.