Я один из восьми UX джедаев, работающих в Raona — компании, занимающейся разработкой программного обеспечения. Каждый год мы разрабатываем и создаем множество приложений (> 100), и каждое из них тщательно смоделировано, разработано и создано с любовью 🙂

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

Но, помимо этого, наличие такого количества различных проектов также означает, что у нас есть много способов подойти к одним и тем же концепциям пользовательского интерфейса (несколько типов форм и исходных ресурсов, различных панелей инструментов и меню, модальных окон и т. д.). И это невероятно мощно. Это бесценно. Но… это также скрыто. Никто (кроме их создателя и, к счастью, одного или двух коллег) не знает о них.

У нас была сокровищница повторно используемых компонентов и дизайн-ресурсов… спрятанных в ящике стола.

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

Brand.ai опубликовали три классные статьи на эту же тему, которые очень помогли нам, но ни одна из них не удовлетворила наши потребности полностью. Как бы то ни было, попробуйте их (спойлер: переходите сразу к 3-му шагу).

Наши требования к дизайн системе

  • Имейте единое (и всегда обновленное) место для размещения всех компонентов многократного использования и сделайте их видимыми.
  • Всякий раз, когда ресурсы обновляются, команда должна быть проинформирована.
  • Каждый дизайнер должен иметь возможность легко использовать ресурсы в своих проектах.
  • Всякий раз, когда обновляется ресурс проекта, любой файл проекта, использующий этот ресурс, должен быть проинформирован (и спросить, хотите ли вы его обновить).
  • Любой из джедаев UX команды должен иметь возможность обновить дизайн систему легко и без конфликтов (совместимость, версии и т. д.)

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

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

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

Что входит в состав дизайн-системы

По сути, есть три вещи, которые нам нужно повторно использовать в наших проектах.

  • Компоненты: которые включают в себя всю упомянутую ранее структуру компонент-элемент-частица.
  • Иконки: никогда не недооценивайте системную иконографию (consistent iconography):)
  • Стили и цвета текста: также называемые индивидуальностью. Мы все прошли через какой-то проект со множеством похожих стилей, цветов, которые выглядят почти одинаково, и размерами текста от 11pt до от 11pt до 24pt … ну, практика — путь к совершенству. Не делайте этого снова 🙂

Идея

Оригинальная идея довольно проста. Наличие символа всего, что мы хотели бы использовать повторно. Таак просто. Та-дааа!

Чтобы организовать их, мы создали страницу для любого компонента или элемента (назовите их элементы управления, если хотите). Обратите внимание, что у нас также есть страницы ‘Icons' и ‘Identity', где установлены все текстовые стили и цвета. Вот как это выглядит:

Символы в Sketch

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

У нас есть файл системы дизайна Sketch, синхронизированный с Invision (как проект), и когда что-либо обновляется в системе дизайна, проект Invision также обновляется. Поскольку проект также синхронизирован с Slack (в Slack-канале под названием #designguide), и все в команде используют Slack и находятся в этом канале… вся команда волшебным образом получает уведомление и миниатюру каждого изменения, которое было сделано в дизайн-системе. Круто!

designguide

С этой простой идеей мы достигли первые 2 из 6 наших целей. Единое место для размещения всех элементов пользовательского интерфейса, и команда всегда в курсе всех изменений.

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

Итак… как насчет повторного использования и синхронизации элементов? Давайте вернемся к этому.

Лучшее решение: использование Craft Library (хотя оно не работает на 100%)

Должен признать, я большой поклонник Invision. У Invision есть замечательный набор плагинов под названием Craft, и один из них (Craft Library) — это инструмент, разработанный специально для решения такой сложной задачи, как совместное использование + обновление + совместная работа над проектом.

Craft library — это просто коллекция элементов управления, которые можно упорядочить по категориям (она имеет множество других клевых функций, подробности на странице плагина Craft).

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

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

Но держитесь! Дальше круче! Всякий раз, когда исходный компонент в системе дизайна повторно синхронизируется с Craft library, Craft будет автоматически уведомлять вас в вашем файле дизайна (и вы сможете получить изменения — если вы хотите — просто нажав кнопку «обновить»). Вау!

Идея, использования Craft Library, состоит в том, чтобы создать библиотеку, называемую «дизайн-системой», и повторить всю файловую структуру Sketch в библиотеке. Затем файл Sketch становится просто способом просмотра и редактирования компонентов, но платформа «реального обмена» — это Craft library.

Вот, как выглядит большая картинка:

Поэтому любой дизайнер может легко использовать любой компонент дизайн-системы и получать уведомления, когда он изменяется в дизайн-системе (и спрашивает, готовы ли вы его обновить). Эй… это же были наши требования 3 и 4! Дай пять!

То, что вы получаете в файле дизайна, является полным символом, что означает, что вы можете редактировать все, что захотите, для своего собственного дизайна. И, возможно, заново загрузить ‘улучшенный' символ в Craft library, чтобы другие могли использовать обновленную версию. Вам просто нужно выбрать символ и повторно синхронизировать его с библиотекой.

Это классная и полезная функция, но для меня она еще более важна. Она позволяет всем дизайнерам работать с любым компонентом в отдельном файле, а после его загрузки в библиотеку, избежать проблем того, что разные люди, редактируют базовый системный файл, избежать проблем различия версий и т. д. И это было требование 5! Ура!

Итак, Craft Library выглядит как решение проблемы, верно? Что же ты тогда сказал, что оно работает не на 100%?

Craft library замечательно работает с символами ‘атомами'. Она работает безупречно, ничего не скажешь. Но, как я уже говорил, мы используем атомарный дизайн, а это значит, что у нас есть (по крайней мере) 3-уровневая символьная вложенность. Первоначально у Craft было много проблем, связанных с синхронизацией, повторной синхронизацией и обновлением файлов дизайна при использовании символов «молекул» и символов «организмов» в Craft library. Казалось, что ссылки на элементы библиотеки потерялись, и ничего не обновлялось. Но, к счастью, есть хорошие новости! С тех пор Craft library улучшилась, и теперь кажется, что она лучше справляется с вложением символов и ссылками.

У Craft library были некоторые проблемы с вложенными символами, но теперь большинство из них, похоже, уже решены.

Когда вы ‘используете' символ из Craft library, то вы получаете в своем дизайн-файле полный символ и все зависимые от него элементы (если вы импортируете символ «организм», вы также получите все, связанные с ним, символы «молекулы» и «атомы»). Если вы отредактируете любой из символов «атомов», «молекул» или «организмов» и повторно синхронизируете их с Craft library, все элементы, которые зависят от него, будут обновлены (и это здорово!).

Во время написания этой статьи у Craft есть только проблема, связанная с вложением символов. Хотя, повторная синхронизация любых символов «атомов» или «молекул» с библиотекой обновит символ в библиотеке и все символы, зависящие от него… Craft не сообщает другим файлам дизайна, которые используют эти символы, о необходимости обновиться. Взаимосвязь между ними, похоже, нарушена.

Хорошая новость заключается в том, что команда поддержки Invision осведомлена об этом (мы говорили об этом несколько недель назад), и команда разработчиков уже работает над ее решением. Итак… Я надеюсь, что скоро мне придется отредактировать этот пост, чтобы удалить несколько строк 🙂

Выводы

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

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

Повторное использование элементов управления никогда не бывает легким. Но с этой системой это может быть довольно эффективно.

Просто пара соображений:

Если вы работаете с flattened libraries (без вложения символов) и с единственным брендингом / руководством по дизайну, то система будет безотказно работать. Если вы работаете с атомарным дизайном и нуждаетесь во вложенных символах, она будет работать, но вам просто нужно быть более осторожным и хорошо обучить свою команду.

Если у вас есть глубокое вложение символов и работа для нескольких клиентов, или есть несколько брендингов / руководств по дизайну… вы наверняка столкнетесь с трудностями повторного использования компонентов и попытками применить к ним другой брендинг. Скоро я опубликую заметку на эту тему. Следите за обновлениями.

Как всегда… надеюсь это помогло вам! 🙂