Як прототип мобільного додатку з Adobe XD

Цей підручник, показуючи вам, як зробити прототип мобільного додатка в Adobe XD, був об'єднаний Adobe XD CC (2017 Beta) у 2016 році Нещодавно запущений Adobe XD CC Мав кілька налаштувань, що робить його ще простішим для використання.

• Отримати знижку 15% на Adobe Creative Cloud тут

Якщо ви є дизайнером, створюючи досвід користувачів для мобільних додатків або веб-сайтів, ви можете використовувати для використання декількох інструментів для різних завдань, коли прототипування .

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

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

Що робити, якщо існував єдиний інструмент, який мав на увазі, ви можете насолоджуватися повністю підключеним робочим процесом? Де ви можете спроектувати та прототип вашого досвіду за лічені хвилини, діліться ними в Інтернеті, щоб захопити відгук, а потім легко здійснювати редагування, не порушуючи свій крок? Мета з дизайном Adobe досвідом CC - або, як ми називаємо це, Adobe XD - це було це зробити.

У цьому підручнику ми покажемо вам основні напрямки Adobe XD, розробляючи, прототипування та обмін простим "зустріччю команди" Мобільний додаток.

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

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

Зауважте, що деякі процеси, можливо, трохи змінилися в новій версії Adobe XD.

01. Встановіть Adobe XD і запустіть новий дизайн

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

02. Створіть другу монтажну дошку

Використовуйте інструмент арбуту ( А ) Створити другу монтажну дошку, а потім змінити свої назви (двічі клацнувши на них), щоб «iPhone - сторінка команди» та 'iphone - детально. Зміна кольорів фону монтажніх кольорів до чорного, використовуючи інспектор власності праворуч. З інструментом вибору ( V ) Вибрано, ви можете натиснути пробіл у будь-який час, щоб скористатися вашим дизайном.

03. Завантажте підручники

Я склав папку активів, які я буду використовувати протягом цього підручника. Ви можете завантажити їх тут . Від Finder, перетягніть "iphone-status-bar.svg" до вершини монтажу 1 ( X: 8, Y: 5 ). Потім скопіюйте та вставте його в арбутуру 2, тому обидва арматури мають рядок стану на вершині. Ударити cmd + л Щоб заблокувати ці статусні смуги в обох монтажках, щоб їх властивості не можуть бути змінені. Щоб розблокувати їх, ви можете використовувати ярлик знову або натисніть значок "Lock".

04. Намалюйте прямокутник і встановіть розміри

Давайте зосередитися на монтажній дошці 1 (сторінка команди). Використання інструмента прямокутника ( Г ), намалюйте рожевий прямокутник (# FF2BC2 без кордону) у арктській монтажі 1 та встановіть його розміри до 375 х 230, використовуючи панель інспекторів нерухомості справа.

05. Змінити об'єкти

Щоб увімкнути кордон або заповнити та вимкнути, натисніть значок "Eye" справа. Ударити Shift + CMD + [ відправити його до спини, або йти Об'єкт & gt; Влаштовувати & gt; Відправити назад . Якщо ви хочете змінити кольори, використовуючи шістнадцяткові значення, натисніть значок кольору, і коли з'явиться нативний вибір кольорів, виберіть другу вкладку у верхній частині та змініть випадаючі до "RGB SliDers".

06. Створіть заголовок

Використовуючи текстовий інструмент ( Т ), натисніть, щоб створити заголовок для сторінки вашої команди. Шахта - Гельветика, 20, #FFFFFF, X: 18, Y: 123. Давайте почнемо покласти наш список членів команди. Намалюйте сіру площу, де буде сидітиме фото члена команди (100 x 100, x: 8, y: 238, # d0d0d0 без кордону).

07. Додайте інший прямокутник

Право цього, нам потрібен білий прямокутник (260 x 100, x: 108, y: 238, #ffffff без кордону), на якому ми включимо назву члена команди як заголовок та посаду як підзаголовок. Наразі використовуйте заповнювач текст, і стиль його, як ви хочете.

08. Додайте значок зі стрілкою

Щоб показати цю коробку, буде зняткою, ми включимо значок зі стрілкою. Перетягніть "path.svg" від Finder на XD-полотно до точки з монтажної дошки. Потім перемістіть його до x: 330, y: 279.

09. Помістіть свій головний погляд

Від Finder перетягніть голову на місце на сірій площі.

10. Створіть список

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

Ну, а не з Adobe XD - ви можете використовувати функцію Reate Grid. Виберіть елементи, які потрібно повторити, натисніть кнопку "Повторити Grid" на інспекторі нерухомого майна ( cmd + r ) І використовуйте зелені ручки, щоб повторити елементи вертикально. Ви також можете повторити їх по горизонталі для версії таблетки.

11. Налаштуйте маржу

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

12. Редагувати текстові поля

Хоча властивості (кольори, положення x та y тощо) є глобальними, вміст кожного елемента може бути унікальним. Відредагуйте текстові поля до назви кожного індивідуума та назви завдання. Ви можете двічі клацнути, щоб увійти до сітки та групи, або CMD + натисніть для прямого вибору будь-якого елемента в групі або повторювану сітку. Тепер нам просто потрібно захопити всі голови відразу і перетягнути їх на сітку, і ми закінчимо цей екран.

13. Створіть потемнівний ефект

Давайте перейти до монтажної дошки 2 (детальна сторінка). Знову ж таки, ми почнемо з прямокутником заповнення (375 x 444, x: 0, y: 0, #ffffff з без кордону) і перетягніть голову, щоб заповнити його. Ми створимо потемнівний ефект, змінюючи непрозорість зображення до 60 відсотків і відправлення його до спини ( Shift + CMD + [ ).

14. Додайте іншу стрілку

Потім заблокуйте елемент голови ( cmd + л ) І додати ще одну стрілку ("back-arch.svg"), щоб вказати, що користувач може повернутися до списку команди. Це має сидіти при X: 20, Y: 40. В першу чергу важливо заблокувати зображення, тому що інакше SVG замінить голову.

15. Додайте контактний інформаційний бар

Ми хочемо включити рожевий бар на кожній сторінці, яка буде перераховувати контактну інформацію учасника команди (375 x 45, x: 0, y: 400). Використовуйте текстовий інструмент ( Т ) Щоб створити текстовий елемент, що читає "Посилання заповнювача", Центр його, стиль його, і помістіть його при X: 169, Y: 416.

16. Створіть більше екземплярів текстового елемента

Давайте скористаємося інструментом ReAty Grid для створення ще двох екземплярів цього текстового елемента. По-перше, конвертуйте текст до повторної сітки ( cmd + r ), потім утримуйте ключ опції, розширюючи свою сітку горизонтально. Красива, чи не так? Прямий-виберіть текст ( CMD + натисніть ) І змінити вміст для читання "Електронна пошта", "Twitter" та "LinkedIn".

17. Створіть назву та біопоклон

Щоб закінчити дизайн, створіть білу коробку (360 x 214, x: 8, y: 445), що включатиме назву члена команди та biog. Спочатку додайте текстовий елемент за допомогою назви особи Placeholder '. Для текстового елемента, який тримає біог, ми хочемо використовувати текст області. Для цього виберіть текстовий інструмент ( Т ) і натисніть і перетягніть, щоб визначити область для вашої копії. Знову ж таки, введіть текст деякого заповнювача та налаштуйте свої стильні властивості.

18. Створіть монтажні майданчики для інших членів команди

Тепер давайте зробимо нові нові монтування для інших членів команди. Спочатку розблокувати головне зображення ( cmd + л ), потім натисніть назву "Артенд", щоб вибрати його, і натисніть cmd + c Щоб скопіювати його. Зменшення ( CMD + - Або скористайтеся трекпадою, щоб затиснути до масштабування), а потім натисніть CMD + V Вставити три нові монтажні автомобілі. Додайте деяку інформацію про біог до кожної сторінки. Оновіть імена та зображення, а також організувати монтування на полотні. Прохолодний! Наш дизайн закінчиться зараз.

19. Налаштуйте потік

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

20. Підключіть

Давайте підемо, хоча кожен з елементів у нашому списку на арматській дошці 1 і дріт їх на відповідну сторінку деталей. Для кожного з них ми хочемо встановити Segue, щоб ковзати ліворуч, і полегшення полегшення. Далі ми зможемо дроти задніми стрілками на кожній з деталей сторінок назад до монтажної дошки 1 - Не забудьте встановити сегну, щоб ковзати право на цей раз. Бум - наш прототип готовий.

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

Щоб перевірити прототип, натисніть кнопку відтворення у верхньому правому документі (попередній перегляд). Вам не потрібно закрити вікно попереднього перегляду, щоб оновити дизайн або провід. Просто почніть вносити зміни, і вони автоматично відображатимуться на вікні попереднього перегляду.

22. Зробіть відео

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

23. Поділіться своєю роботою

Щоб поділитися прототипами в Інтернеті, натисніть на останню кнопку у верхньому правому куті (Share Online). Натисніть кнопку Створити посилання. Всі активи будуть завантажені до творчої хмари, а посилання буде створено. Якщо необхідні зміни, ви можете повернутися до режиму проектування, внести зміни та ділитися знову. Весь потік просто працює.

24. Експортувати файли

З XD ви можете експортувати PNG для веб-сторінок, iOS та Android у різних розмірах, а також високо оптимізовані файли SVG.

25. Насолоджуйтесь результатами

Вітаємо! Ви освоїли основи Adobe досвіду розробки CC (попереднього перегляду). Не соромтеся ділитися своїми прототипами в Інтернеті та соціальні медіа - додати #adobexd Таким чином, ми бачимо вашу роботу.

Ця стаття спочатку з'явилася чистий журнал випуск 280. Підписатися на мережу тут .

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

• Як уникнути прототипів підводних каменів
• Як використовувати анімацію в мобільних додатках
• 10 порад для кращого мобільного UX дизайну