Adobe XD: Як використовувати автоматичну функцію

Sep 14, 2025

Як

(Зображення кредиту: Adobe)

Незважаючи на те, що його пізній запис у прототипну гру, Adobe XD є одним з найкращих та найшвидших, доступних інструментів для прототиків. Прототипування - це ключовий процес у життєвому циклі дизайну, але також відіграє важливу роль у розробці, допомагаючи дизайнерам та командам Dev з обслуговуванням робочого процесу.

Як дизайнери, нам часто потрібні багато інструментів для розробки різних етапів робочого процесу користувача. Adobe активно інноваційний інструмент для перехресного платформ, який може бути використаний для тестування конструкцій, створення Wireframes, передачі специфікацій до команди Dev, а також спільного проектування (див. Наш список Wireframe Інструменти Для отримання додаткових варіантів).

Автоматична функція означає, що Adobe XD також може бути використаний для створення безшовних мікро-взаємодій та анімацій, таких як інструменти, такі як принцип. Це допомагає дизайнерам, щоб ремонтувати багатий прототип досвід, з наборгованих потоків, анімації для мобільних каруселів, показників прогресу тощо. Найкраща частина цієї функції полягає в тому, що вона просто навчитися і виконати.

У цій статті я буду пояснити, як створити прості мікро анімації за допомогою автоматичної анімації. Ми будемо дивитися на взаємодії на основі жесту, так і для переміщення.

Якщо ви ще не отримали Adobe XD, подивіться, як Завантажте Adobe XD пост, а потім перегляньте наш улюблений Плагіни Adobe XD .

01. Переведіть жести, щоб додати до Fav або Delete

Переваги взаємодії є однією з найбільш часто використовуваних мікро-взаємодій на мобільних додатках. Для цього прикладу давайте подивимося на музичний список відтворення. Для першої арастри, ми збираємося створити екран списку відтворення з п'ятьма піснями. Кожна пісня є індивідуальною карткою і, по суті, коли кожна картка буде ліворуч, вона повинна вилучити пісню зі списку відтворення. Коли карта рухається правильно, вона повинна додати пісню до черги.

Давайте почнемо і створити першу карту. Ви можете додати основні деталі, такі як назва пісні, назва художника, довжина пісні та рейтинг. Тепер групуйте всі ці елементи в один шар. Дублюйте його до тих пір, поки не буде зроблено п'ять подібних карт. Ви можете редагувати їх на основі вашого смаку.

Для першої картки - C1 - ми збираємося додати лівий проведіть для видалення дії. Отже, давайте створимо невеликий квадрат з червоним фоном, додати деякий текст видалення та значок, як показано на знімку екрана нижче. Група всіх цих предметів у шар називається A1. Тепер поєднуйте C1 і A1 у шар L - так, що A1 знаходиться на правій стороні C1.

02. Створіть другу картку

Для другої картки - C2 - ми збираємося додати додаток в чергу правильно прокрутити дію в аналогічній моді. Створіть групу A2 з значком, текстом та зеленим фоном. Додайте його ліворуч від групи C2 і створіть комбінований шар на ім'я L2. Тепер перша арматура (S1) завершена. Давайте двічі дублюємо всю монтажну дошку, на дві держави - S2 і S3. Ми будемо використовувати S2 для видалення SWIPE та S3 для додавання до черги. Для того, щоб зробити, що нам потрібно внести деякі зміни для кожного з цих монтажних платів. Ось налаштування для обидва шрифти:

● S1 - Змініть непрозорість A1 та A2 до 0% та організувати L1, L2, щоб вони були узгодженими.

● S2 - організувати картку L1, тому правий край L1 вирівняний з іншими картками. Змініть непрозорість A2 до 0%.

● S3 - організувати картку L2, тому лівий край L2 вирівняний з іншими картками. Змініть непрозорість A1 до 0%.

03. Анімація монтування

Тепер, коли арматура повністю створена, наступний крок - анімувати їх. Ви можете зробити це, перейшовши у режим прототипу на верхній лівій стороні інструменту. Тепер на фоні S1, натисніть на шарі L1 і додати взаємодію з правої сторони інструмента, встановивши тригер, щоб перетягнути, дію для автоматичного анімації та призначення до Artboard S2. Ви також можете додати пом'якшення на основі ваших уподобань. Перевірте цю взаємодію, натиснувши кнопку відтворення на верхній правій стороні інструмента. На фоні S1, натисніть на шар L2 і додати подібну взаємодію за допомогою тих самих параметрів, але в цьому випадку встановіть пункт призначення до S3. Ця взаємодія створить лівий проведіть пальцем.

04. Розгорніть свої картки

Друга взаємодія, яку ми будемо переглядати, зазвичай видно з більшості додатків та веб-сайтів, де ви переживаєте список або каталог продукції, і коли ви натискаєте одну з них, ви берете на нову сторінку з більш детальною інформацією про продукт . Автоматична анімація робить її супер простою для анімації такого роду взаємодії. Для цього прикладу, почнемо, створивши сторінку каталогів продукту. Ви можете вибрати будь-який продукт, наприклад, мобільний телефон (який буде нашим прикладом), одяг тощо для першої арастри (S1), створіть заголовок із меню гамбургера та значком профілю.

05. Робота на зображеннях та деталях

Тепер створіть текстовий елемент заголовка з кількістю елементів каталогу. Для кожного з карток продуктів, ми будемо мати один образ, назву телефону, ціну та оцінки. Ми можемо назвати ці картки C1 до C6. Найкращий спосіб зробити це - це створити першу картку (C1), а потім використовувати дивовижну функцію XD під назвою Reate Grid, яка знаходиться у верхньому правому куті панелі інструментів. Це дозволяє легко дублювати елементи, зберігаючи вирівнювання та відстань недоторканим. Налаштування цієї монтажної дошки завершена. Ми збираємося анімувати другу карту, тому важливо, щоб розсипати елементи цієї картки, тому XD може виконувати автоматичне анімацію.

06. Дизайн другий арбуст

Тепер, щоб дістатися до другого монтажу. Дублікат першої арастри та видалення карт C1, C3-C6. Ми збираємося використовувати існуючу картку C2, щоб створити цю сторінку, тому імена шарів однакові. По-перше, розширюйте фон картки, щоб він охопив всю сторінку під панеллю заголовка. Тепер ми можемо організувати інші предмети будь-яким способом, що ми хочемо - основна ідея полягає в тому, що вона повинна відрізнятися від того, як карта була в монтажній дошці S1, оскільки це, коли ви можете побачити перехід. З цієї причини давайте підняв назву мобільного до 25px і зробити його сміливо. Аналогічним чином, збільшуйте розмір ціни та розміщуйте його нижче назви мобільного телефону. Далі важлива частина - зображення мобільного телефону. Ви маєте значно збільшити свій розмір, а також вирівняти його в центрі.

07. Нанесіть фінішні штрихи

Щоб прибрати все і завершити дизайн, організувати рейтинги та зірки нижче всього і ліворуч. Оскільки ця арматура являє собою детальну версію продукту, тепер ви можете включити додаткову інформацію про телефон, наприклад, пам'ять, доступні кольори телефону, аксесуари, надані телефоном, і так далі, на основі ваших уподобань. Все інше буде слідувати, як ви прокручуєте монтажну дошку. Ви також можете змінити значок заголовка гамбургера, щоб користувач повернувся до попередньої монтажної дошки S1. Не забудьте змінити назву піктограми, щоб відповідати ім'ям іконки в першій армбуті.

08. Створіть мікро-взаємодію

Давайте перейдемо до режиму прототипу зараз, щоб створити мікро-взаємодію. Для цього виберіть карту C2 у монтажній панелі S1 і перетягніть синю стрілку до монтажної дошки S2. На панелі "Взаємодія" з правої сторони, встановіть тригер як торкніться, дію як автоматичне анімацію та призначення як S2. Для більш гладких взаємодій добре йти з легкістю для пом'якшення та часу 0,4 або 0,6 секунди. Натисніть на значок зі стрілкою зі стрілкою на монтажці S2 і перетягніть стрілку до S1. Ви можете використовувати ті ж самі параметри для цього, щоб це було послідовним. Тепер натисніть на S1 і відтворюйте прототип, щоб побачити магію. Ви будете спостерігати за допомогою гладкої анімації, коли картка C2 постукала. Налаштуйте параметри ослаблення, щоб зробити анімацію гладкою.

09. Вийти за межі основ

Тепер у вас є основна ідея, як створити прості взаємодії. Ви також можете спробувати автоматичне анімацію, змінюючи кольори елементів, розмірів та форм, щоб переглянути плавні переходи між кількома монтажними картами. На додаток до Tap і Track Triggers є й інші тригери, які дизайнери можуть експериментувати, наприклад, використання клавіш клавіатури та клавіш GamePad, щоб викликати прототипи на певному ключ. Існує також режим, в якому ви можете створювати та розробляти голосові прототипи для Alexa, Siri тощо, де ви можете призначити речення та говорити їм, щоб отримати конкретні відповіді.

Читати далі:

Точний Кращі будівельники веб-сайту
Ярлики Adobe XD ви повинні знати (але, ймовірно, не)
Побудуйте прототипи з Adobe XD

Adobe XD: Як використовувати автоматичну функцію

01. Переведіть жести, щоб додати до Fav або Delete

02. Створіть другу картку

03. Анімація монтування

04. Розгорніть свої картки

05. Робота на зображеннях та деталях

06. Дизайн другий арбуст

07. Нанесіть фінішні штрихи

08. Створіть мікро-взаємодію

09. Вийти за межі основ

Як - Найпопулярніші статті

Як намалювати людину

Як підготувати файл для друку

Як підготувати графіку Illustrator для наслідків

Як спроектувати ідеальну обкладинку книги

7 Вбивства шляхів впливу поведінки користувачів

Секрет живопису, як Моне

Як поєднати акварельні набори художників

Неймовірна потужність Flexbox

Категорії