Побудувати прототипи з Adobe XD

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

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

Дізнайтеся про інше програмне забезпечення Adobe, такі як Adobe Simension .

• 8 основних прототипів та інструментів створення

Тут ми покажемо вам, як створити прототип програми, який робить саме це (для більшої кількості Як створити додаток Підручники, перевірте наше розтин кращих). І виїжджаючи за межі цього, нова особливість XD дозволяє користувачеві контролювати взаємодії з їх голосом. Ми будемо досліджувати це як функцію дизайну, і як це також може поговорити з користувачем, що може забезпечити деякі цікаві дизайнерські можливості.

Завантажте файли проекту Для цього підручника.

01. Запуск проекту

Якщо у вас немає Adobe XD, ви можете завантажити та встановити його тут . Після завершення встановлення відкрийте програмне забезпечення, а екран привітання дозволить вам вибрати розмір екрана для завантаження. У цьому випадку виберіть iPhone 6/7/8, оскільки це правильний розмір для цього проекту, але ви побачите, що є різноманітні розміри.

02. Імпорт першого зображення

Існують різні способи імпортування зображень, але в цьому першому випадку перейдіть до файлу & gt; Імпорт. Виберіть папку "активи" з файлів проекту, а перше зображення для імпорту буде "sky.png". Помістіть його у верхній частині екрана і перемістіть його лише пару пікселів вниз.

03. Помістіть кабіну

Наступне зображення для дизайну буде "CABLE.PNG". Просто імпортуйте це так само, як ви зробили на попередньому кроці, а потім помістіть його, щоб заповнити екран. Нарешті, імпортуйте зображення "Trees.png" і покладіть його на нижню частину екрана з деревами над озером.

04. Принесіть логотип

Причина, що ці зображення є окремими шарами, так що при створенні переходу між екранами вони можуть рухатися окремо. Перейдіть до меню «Файл» та виберіть «Імпорт». На цей раз виберіть "Logo.ai", який є векторним зображенням. Розмістіть це зображення у верхній центрі екрана.

05. Додайте коло

Виберіть інструмент кола та намалюйте коло трохи трохи більше, ніж логотип. На панелі «Властивості» справа, видаліть інсульт і зробити фон чорного кольору. Виберіть Background Blur і зменшити яскравість до -30, щоб коло все ще чорне.

06. Змініть порядок графіки

Тепер круг повинен рухатися за логотипом. Виберіть об'єкт & gt; Організувати і відправити назад. Як і в інших продуктах Adobe, це також CMD / Ctrl + [ для переміщення будь-якої графіки назад у порядку шару. Тим часом, використовуючи правий квадратний кронштейн, принесе об'єкт вперед у порядку.

07. Зніміть мікрофон

Тепер імпортуйте зображення "mic.ai" та змініть розмір зображення, щоб бути відносно невеликим. Помістіть це у нижній частині екрана. Намалюйте коло навколо цього і зніміть прапорець Заповніть, щоб він видалено. Потім зробіть білий колір і дві пікселі шириною. Положення, що навколо зображення "MIC".

08. Текстове повідомлення

Використовуйте текстовий інструмент, щоб додати слова "говорити, щоб шукати" нижче мікрофона. Зробіть текст білий і змініть його в Helvetica Neue Condensed Black. У нижньому лівому куті екрана натисніть значок панелі активів, щоб відкрити його. З текстом, вибраним на екрані, натисніть значок "+" поруч із "стилем символів", щоб зберегти цей формат для тексту.

09. Приєднуйтесь до групи

Виберіть піктограму панелі шарів у нижньому лівому куті екрана. На екрані виберіть текст "Пошук" і Зміна клацання додати коло і значок мікрофон. Перейдіть до об'єкта та вибрати групу. У панелі "Шар" перейменуйте цю групу "Пошук". Корисно назвати групи, особливо при цьому анімація.

10. Група логотип

Так само, як і на останньому кроці, виберіть логотип та розмитий коло навколо нього, а потім групуйте їх разом. На панелі «Шар» перейменуйте цільну групу «логотип», щоб він легко ідентифікувати, якщо вам потрібно знову відредагувати це пізніше. На даний момент дизайн для першого екрану завершений.

11. Додаткові елементи

Незважаючи на те, що перший екран завершено, є ще більше елементів дизайну, які потрібно додати. Ось як створюється анімація, змінюючи позиціонування елементів між екранами. Перейти до інструменту прямокутника і утримуйте Зміна Щоб додати квадрат на екрані, роблячи білий кордон.

12. Різний імпорт

Тепер відкрийте папку для активів через вашу операційну систему. Виберіть зображення "CABLE1.PNG" та перетягніть це безпосередньо на квадрат, який ви створили на попередньому кроці. Це автоматично маскується всередині цього. Двічі клацніть, щоб відредагувати положення зображення та переконайтеся, що кабіна видно на квадраті.

13. Додайте етикетку

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

14. Дублікат групи

Як правило, повторює елемент інтерфейсу - це ідеальна робота для інструменту "Repeat Grid". Однак це буде потрібна конкретна анімація, яка не працює з повторюваною сіткою. Виберіть зображення та текстову групу, а потім скопіюйте та вставте його так, щоб він сидить поруч з оригіналом, а замість цього додати зображення "CABLE2.PNG".

15. Перейменування потім копіювати знову

Змініть текст до "Снігової кабіни", а на панелі панелі "Шари" це "Права кабіна". Виберіть як ліву, так і праву кабіну, і дублюйте їх, розташуйте дублікати нижче та оновіть свій текст та зображення з "кабіною3.png" та "cabin4.png". Група обох разом і називають групу "нижню кабіну".

16. Назва тексту

Додайте текст на сторінку з результатами пошуку тексту для кабін. Дайте це Thexeface Rockwell та збережіть це до стилів символів у панелі "Активи". Тепер розташовуйте групу "Нижня кабіна" прямо в нижній частині екрана та візьміть зовнішній вигляд до нуля, щоб він був невидимий на цьому екрані.

17. Зміна непрозорості

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

18. Дублікат екрана

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

19. Перемістіть фони

Виберіть зображення неба та підштовхуйте трохи на екрані. Виберіть зображення каюту та перемістіть його, поки кабіна знаходиться у верхній частині екрана. Потім натисніть на зображення дерева і перемістіть його над кабіною. Нарешті, виберіть "Пошук" та зменшити вигляд до нуля.

20. З'являються нові елементи

Виберіть результати пошуку на панелі «Шар» та привести його до 100. Перемістіть його на екрані. Повторіть це для лівої кабіни, правої кабіни та нижньої кабіни. Використовуйте інструмент для пера, щоб намалювати просту кнопку назад і додати навколо нього коло. Зробіть фонову розмитість і візьміть яскравість цього до -30.

21. Заповніть кнопку "Назад"

Виберіть стрілку назад і коло, групуйте їх разом і назвати їх "Назад" на панелі Layer. Перейдіть до режиму "Прототип", натиснувши "Прототип" у верхньому лівому куті інтерфейсу XD. Виберіть головний екран, перетягніть синю стрілку на екран пошуку, з'явиться спливаюча панель.

22. Голосова команда

Змініть тригер, щоб голос і введіть слово "Пошук" як голосову команду, щоб контролювати це. Змінити дію для автоматичного анімації та полегшення. Зробити тривалість 1.5s. У екрані пошуку натисніть кнопку "Назад" і перетягніть синю стрілку назад на екран "Домашня". Просто змініть тригер, щоб торкнутися.

23. Перевірте прототип

У верхньому правому куті інтерфейсу XD є кнопка відтворення. Натисніть на це, а робочий прототип тепер з'явиться на екрані. На домашній сторінці вам потрібно буде утримувати пробіл, коли ви говорите голосову команду "Пошук". Коли ви відпускаєте пробіл, він приведе вас до наступного екрана та анімація графічного інтерфейсу в положення.

24. Повернення

Після того, як перехід запустити, ви можете натиснути кнопку "Назад", щоб повернутися до домашнього екрану. Закрийте прототип і натисніть на екран пошуку, а потім натисніть синю стрілку праворуч (не перетягніть). Змініть тригер до часу, зробити затримку 0S і встановіть дію до відтворення мовлення. Зробіть результати пошуку мови для доступних кабін.

25. Підтвердження мовлення

Перевірте це зараз за допомогою кнопки відтворення, щоб почути голосове підтвердження пошуку. Закрийте прототип, коли ви спробували це. Інший екран буде створений, тому, натисніть кнопку "Дизайн" у верхньому лівому куті інтерфейсу XD. Натисніть на екран пошуку, натиснувши ім'я, а потім скопіюйте та вставте його.

26. Масштабування зображення

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

27. Нові елементи екрана

Двічі клацніть текст "лісова кабіна", оскільки вона є частиною групи. Збільшуйте розмір тексту до 26 пікселів і трохи перемістіть його на екрані. Додайте текст до екрана в Helvetica Neue Medium у розмірі 14 пікселів і встановіть його на білий, щоб виділити на тлі. Додайте білу лінію з інструментом лінії під заголовком.

28. Створіть кнопку

Використовуйте інструмент прямокутника, щоб намалювати прямокутник на екрані внизу дизайну. Перетягніть у кутові ручки, щоб дати цю форму круглі кути. Додайте слово "резерв" до цього, використовуючи стиль збереженого символу у панелі "Активи" для HELVETICA NEUE у конденсованому жирному шрифті.

29. Перейдіть до режиму прототипу

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

30. Налаштування анімації

У спливаючій панелі для переходу між екранами виберіть «Торк», як тригер, потім виконайте auto-animate. Зберігайте пом'якшення як оснащення, але зменшити тривалість цього до 0,6. Це гарантує, що анімація не тягне - рух першого екрану на другий екран мав багато руху, який вимагав довшого переходу.

31. Підключіть кнопку "Назад"

Тепер виберіть кнопку "Назад" з кінцевого екрана та перетягніть блакитну стрілку з цього назад на екран "Пошук". Всі налаштування від попереднього переходу слід пам'ятати. Тепер ви готові йти вперед і перевірити це, натиснувши кнопку відтворення.

32. Автоматичний анімат

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

33. Зберегти проект

За замовчуванням ваш проект повинен автоматично зберігати у творчому хмарі, але це гарна ідея зберегти копію на свій власний жорсткий диск у випадку, якщо виникають будь-які проблеми. Натисніть File & GT; Зберегти, змініть розташування до власного комп'ютера та назвіть проект з відповідним ім'ям.

34. Обмін проектом

Вся точка прототипів полягає в тому, щоб перевірити проект з іншими людьми. На щастя, є кнопка акцій у верхньому правому куті інтерфейсу XD, що робить це вітром. Клацніть кнопку Share, а в меню "Крапля", яка з'явиться, виберіть розділ параметрів для перегляду.

35. Опублікувати прототип

На наступному екрані вам сказано, що автоматично-анімаційна підтримка ще не доступна для Інтернету, але це скоро. Натисніть кнопку Створити публічне посилання, а потім натисніть посилання у верхньому правому куті, щоб відвідати публічну посилання у веб-браузері. Вам потрібно буде утримувати пробіл, щоб скористатися голосовою командою з прототипом.

36. Версія відео

Інший прототип можна розділити, записуючи інтерфейс у дії. Натисніть кнопку Share та виберіть «Записати відео». Це відкриє вікно, і коли ви закриєте, вам буде запропоновано зберегти запис екрана як файл MP4, який також є корисним способом поділитися своїм прототипом.

Ця стаття була опублікована у випуску 285 журналу Creative Web-дизайну Веб-дизайнер . Купити проблему 285 тут або Підписатися на веб-дизайнер тут .

Пов'язані статті:

• Дизайн мобільного додатка: Посібник для початківців
• Як створити додаток з vue.js
• Отримати захоплення з мобільним додатком на борту