Используйте Adobe XD для создания микроадресов

Sep 13, 2025

Инструкции

(Образ кредита: Adobe)

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

Как и многие другие дисциплины, нет единого дизайна и прототипирования инструмента, который может достичь всего. Различные этапы требуют уникального набора инструментов. Прошли те дни, когда дизайнеры радули полагаться исключительно на фотошопе и эскиз. Хотя они являются отличными инструментами дизайна пользовательского интерфейса, у них нет возможностей для быстрых потоков пользователей и проволочных кадров (см. Наш лучший каркасные инструменты Для получения дополнительных вариантов Wireframming).

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

Получить Adobe Creative Cloud

Идея здесь проста: Auto Animate позволяет дизайнерам создавать интерактивные прототипы с погружными анимациями, просто дублируя артборду или изменение свойств объекта. Эти свойства могут быть все, такими как размеры, положение X и Y, непрозрачность, вращение. Ранее Adobe XD предложил базовые взаимодействия, такие как скользящие, толчок и растворение.

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

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

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

Сделайте изменение состояния с помощью Auto Animate

Adobe XD tutorial — Это может звучать просто, но вам нужно начать с двух форм (Образ кредита: Vamsi Batchu)

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

На начальной артборде нарисуйте форму - в нашем примере, это зеленый прямоугольник 500px x 200px. Дублируйте эту артборду и выберите прямоугольник на второй артборде. Нам нужно изменить свойства прямоугольника, увеличивая ширину до 1000 и высоту до 500. Вы также можете выполнить дополнительные модификации, такие как изменение непрозрачности до 50% или сделать цвет розового цвета.

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

Установите вкладку Действия по умолчанию на Auto Animate и потому, что в нашем примере в нашем примере есть только два артборда, установите вкладку назначения в Artboard 2. Существуют также несколько гладких переходов, которые могут быть выбраны и время. Нажмите на значок Play в правом верхнем углу, чтобы увидеть, как Auto Animate делает его магию и анимирует прямоугольник. Когда существует более двух элементов, которые необходимо изменять одновременно, убедитесь, что имена этих элементов одинаковы в армантах. Это будет информировать приложение о том, что эти два элемента должны быть анимированы.

Развернуть карты

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

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

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

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

Сделать перетаскивание анимации

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

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

Создать бесконечный погрузчик анимации

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

Давайте создадим анимацию загрузки, в которой заправляется аккумулятор. Ключ к достижению этого идеального - это правильно подержать первую артборду. Первая артборда имеет заполнитель аккумулятора, как показано на изображении. Это может быть создано с помощью прямоугольных форм. Для фактической батареи внутри заполнителя первая артборда должна быть пустой (которая представляет 0%). Дублируйте эту артборду и создайте зеленый прямоугольник с высотой 50px, которая идеально подходит внутри заполнителя. Создайте аналогичные дубликаты, чтобы высота аккумулятора в третьей артборде увеличивается на 50 пикселей и так далее. Продолжайте до тех пор, пока артборд полностью заполнен.

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

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

Эта статья первоначально появилась выпуск 326 сеть Ведущий в мире ведущий журнал для веб-дизайнеров и разработчиков. Купить Выпуск 326. или же Подписаться здесь Отказ

Прочитайте больше:

40 Brilliant WordPress Учебники
11 Удивительные JavaScript Frameworks
Неоморорфизм действительно самая горячая тенденция 2020 года?

Используйте Adobe XD для создания микроадресов

Сделайте изменение состояния с помощью Auto Animate

Развернуть карты

Сделать перетаскивание анимации

Создать бесконечный погрузчик анимации

Инструкции - Самые популярные статьи

Как сделать скриншот на Mac

Сделайте свое приложение в автономном режиме с обслуживающими работниками

Как начать работу с TypeyctScript

Как передавать звук в живописи

Создать богаточные плитки в дизайнере вещества

Как покрасить магические светящиеся руны

Как получить больше из цифровых текстур

5 способов эффективно управлять денежным потоком

Категории