Продуктивное прототипирование XD — руководство по компонентам Adobe XD

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

С момента своего официального публичного выпуска в конце 2017 года Adobe XD добился больших успехов, став высококонкурентным инструментом создания каркасов и прототипов для UX-дизайнеров. В частности, его новая система компонентов расширяет тип взаимодействия, с которым дизайнеры могут экспериментировать. Тем не менее, компоненты не лишены причуд и недостатков. При работе с компонентами XD полезно принять ряд методов рабочего процесса, чтобы избежать рутинной работы и использовать весь потенциал системы.

Что такое компоненты Adobe XD?

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

Заменяя предыдущую «символьную» систему XD, которая служила той же цели, компоненты предлагают ключевое отличие . Они могут иметь несколько состояний , которые реагируют на разные входные данные, определенные в режиме прототипа XD. Например, кнопка может иметь состояние по умолчанию, но изменять свой внешний вид при наведении или нажатии. Он может воспроизводить звук при нажатии или даже изменять свой внешний вид в зависимости от ввода от распознавания речи.

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

Рекомендуется знание Adobe XD

Дизайнеры, хорошо знакомые с Adobe XD, получат наибольшую пользу от следующих советов и предложений. Чтобы начать работу, загрузите Adobe XD Design Kit с домашней страницы Google Material Design. В комплект входит набор компонентов Adobe XD, с которым можно экспериментировать и разбирать.

Совет № 1. Учитывайте все состояния перед созданием компонента

Создавая компонент с состояниями в первый раз, дизайнеры должны понимать, как возможные изменения в компоненте могут повлиять на другие экземпляры. Для иллюстрации рассмотрим выпадающее меню с несколькими состояниями:

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

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

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

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

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

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

Совет № 2. Назовите компоненты при создании

Создание компонента (щелкните элемент правой кнопкой мыши, затем выберите «Создать компонент» в меню или нажмите Cmd-K на Mac/Ctrl-K на ПК) добавляет компонент на панель «Активы» на левой боковой панели. XD присвоит компоненту имя по умолчанию «Компонент XX» (где «XX» — число). Оно не очень описательное, поэтому было бы лучше дать ему уникальное имя с возможностью поиска.

Зачем это делать? По мере заполнения списка компонентов становится громоздким, если все компоненты начинаются с одного и того же имени по умолчанию и бессмысленного номера. Хотя вариант «мозаичный вид» помогает, он не имеет текстовых меток, что делает визуальную идентификацию медленной и сложной. «Представление в виде списка» с маленькими эскизами также затрудняет выявление различий между компонентами с неразборчивыми именами. Компоненты могут и будут теряться. Делая их доступными для поиска, назвав их, вы сэкономите время позже.

Рекомендация для Adobe : при создании компонента выберите его автоматически и сфокусируйте пользователя на панели «Активы->Компоненты», чтобы переименовать его или вызвать всплывающее окно с именем. Также было бы полезно сделать возможным переключение этой функции в настройках.

Совет № 3 — Организуйте основные компоненты

При создании компонента легко случайно разместить основной компонент на монтажной области. Хотя XD предоставляет инструменты для поиска основных компонентов (путем поиска на панели «Активы» или щелчка правой кнопкой мыши и выбора «Редактировать основной компонент» в дочернем экземпляре), слишком легко внести непреднамеренные изменения в основной компонент, полагая, что это экземпляр. Это может привести к множеству нежелательных изменений на нескольких монтажных областях.

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

Лучше всего выработать привычку убирать основные компоненты с монтажных областей дизайна сразу после создания . Идеальным способом сделать это было бы размещение основных компонентов на монтажном столе в файле XD или на четко обозначенных специальных монтажных областях. Это сделает работу более эффективной позже.

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

Совет № 4. Оставайтесь организованными с помощью панели «Слои»

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

Представление «Слой» обеспечивает 100-процентную прозрачность иерархии и именования элементов, а его безупречная организация имеет жизненно важное значение. Использование мощного автоматического перехода XD Auto-Animate между состояниями требует, чтобы элементы имели одинаковое имя и положение в иерархии слоев компонента. В противном случае переход по умолчанию будет плавным, а не привлекательной автоматической анимацией.

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

В любом случае представление «Слои» можно использовать для устранения непредвиденных проблем . Это должно быть первым шагом при устранении проблем с прототипированием, будь то переход между состояниями компонентов или между монтажными областями.

Совет № 5 — Используйте альфа-затухание для интерполяции цветов

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

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

Совет № 6 — Используйте компоненты в повторяющейся сетке

Повторяющаяся сетка — еще одна отличная функция XD , позволяющая экономить время и упрощающая организацию и обслуживание массивов похожих элементов. Как и компоненты, повторяющиеся сетки имеют иерархические отношения, в которых первый элемент в верхнем левом углу сетки является «родителем», который определяет свойства «дочерних» элементов. (Есть исключения: растровые изображения могут быть уникальными для дочернего элемента, как и текстовые строки, но не текстовые свойства.)

Однако при использовании компонентов в повторяющихся сетках все меняется.

При обычной работе с повторяющимися сетками изменения, внесенные в родительский элемент, немедленно распространяются на его дочерние элементы. Однако изменения основного компонента распространяются на дочерние элементы в повторяющейся сетке, только если нет переопределений локальных свойств . Другими словами, изменение свойства компонента в сетке «блокирует» его от изменений, распространяющихся из основного компонента.

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

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

Совет № 7. Предположим, что переходы состояний компонентов на основе времени не существуют (на данный момент)

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

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

Совет № 8. Будьте внимательны при клонировании иерархий основных компонентов

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

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

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

Рекомендация для Adobe: при щелчке правой кнопкой мыши по главному компоненту на панели «Ресурсы» укажите пункт меню «дублировать».

Прототипирование с помощью компонентов Adobe XD: выводы для успеха

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

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

Вот несколько ключевых выводов, о которых следует помнить:

• Поймите, как изменения распространяются между основными компонентами и дочерними экземплярами.
• Помните о том, как компоненты взаимодействуют с другими функциями Adobe XD, такими как Auto-Animate и Repeat Grid.
• Стремитесь применять последовательные методы рабочего процесса, чтобы сэкономить время, такие как присвоение имен компонентам и сохранение отдельной монтажной области основного компонента в файле XD.

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

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Adobe XD против Sketch — Showdown 2020
• Дизайн с точностью — обзор Adobe XD
• Изучение мультимодального дизайна — учебник по Adobe XD
• Мифы об UX — прототипирование, пользовательское тестирование и результаты UX
• Совершенствуйте процесс проектирования UX — руководство по дизайну прототипов