Як прототип мобільного додатку з студією орігамі

Sep 11, 2025

Як

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

10 найпопулярніших інструментів прототипів

Є багато підходів, які ви можете взяти на прототип, і численні інструменти, щоб допомогти. Один з найновіших на блоці Орігамі студія , розроблений Facebook і доступний безкоштовно для MacOS.

Студія орігамі, яка фактично розпочала своє життя як плагін для кварцового композитора (мова візуального програмування в середовищі розробки XCOD Macos), перш ніж стати окремим інструментом, отримав велику увагу протягом останнього року.

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

Виконайте ці дії, щоб виявити, як легко ви можете використовувати студію Origami, щоб побудувати прототип.

01. Новий прототип

Start by creating a new iPhone 8 prototype — Почніть, створюючи новий прототип iPhone 8

Ми збираємося створити прототип для мобільного додатка, який дозволить нам провести пальцем через фотографії котів і "як" деякі з них. Одного разу ми встановили студію Origami, ми створимо новий прототип iPhone 8 з екрану сплеску.

02. Додавання шарів

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

03. Створення взаємодії

For interactions you'll need to create a patch — Для взаємодій вам доведеться створити патч

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

04. Зв'язування взаємодій до шарів

Change the patch properties so that it only responds when you click in the right place — Змініть властивості патчів, щоб він відповів лише тоді, коли ви натискаєте правильне місце

На даний момент ваш патч відповість на дотик будь-де прототипу. Перевірте його, натиснувши, і ви побачите властивості "Down" та "TAP", що змінюються в режимі реального часу. Якщо ви виберете властивість "шару" у патчі, ви можете пов'язати його з шаром, що містить зображення серця, і тепер він буде відповісти лише на кліки на цій конкретній області.

05. Анімації

A pop animation will give users a bit of visual feedback — Анімація поп-анімації дасть користувачам трохи візуального відгуку

Тепер ми хочемо щось трапитися, коли наші тригери взаємодії. Створіть інший патч, на цей раз «поп-анімації». Це використовується для створення пружного ефекту. Залиште властивості, оскільки вони зараз, але ми створимо зв'язок між виведенням з краном взаємодії, яку ми створили раніше, і число введення нашої нової анімації поп-анімації. Ми робимо це, натиснувши та перетягнувши між маленькими колами поруч з кожним. Якщо ви натиснете серце зараз, ви побачите, що взаємодія викликає зміну виведення "прогресу" поп-анімації.

06. Переходи

You can change the extent to which objects change size when they're clicked — Ви можете змінити ступінь, до якої змінюються об'єкти, коли вони натискаються

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

07. Перемикачі

Use switch patches to toggle objects between different states — Використовуйте перемикачі плями для перемикання об'єктів між різними станами

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

08. Більш складна поведінка

By experimenting with patches you can add more complex behaviour to your prototype — Експериментуючи з патчами, ви можете додати більш складну поведінку до свого прототипу

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

09. Карусель

It's time to bring on all the cats — Настав час принести всі кішки

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

10. Рукава ліворуч і праворуч

Follow these steps to add a classic swiping action to your carousel — Дотримуйтесь цих кроків, щоб додати класичну дію в каруселі

Останнє, що нам потрібно зробити, щоб зробити його роботою, що дозволяє ліворуч і праворуч, щоб прокрутити карусель. Ми це робимо, створюючи взаємодію прокрутки для посилання на групу карусельного шару (не окремі зображення). Взаємодія виводить координацію x, яку ми можемо пов'язати з властивостями X каруселя, щоб перемістити його. Між, ми додамо Plact Patch, який можна використовувати для обмеження значень, щоб гарантувати, що ми не прокручуємо до координат за межами краю каруселя.

11. Наступні кроки

Now you've learned the basics you can add more advanced features — Тепер ви дізналися основи, які ви можете додати додаткові функції

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

Ця стаття спочатку була опублікована у випуску 270 Web Designer Web Design Web Design. Купити проблему 270 тут або Підписатися на веб-дизайнер тут .

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

Тенденції, які будуть формувати дизайн додатків у 2018 році
3 Верхні способи побудови прототипу веб-сайту
Все, що вам потрібно знати про макети, Wireframes та прототипи

Як прототип мобільного додатку з студією орігамі

01. Новий прототип

02. Додавання шарів

03. Створення взаємодії

04. Зв'язування взаємодій до шарів

05. Анімації

06. Переходи

07. Перемикачі

08. Більш складна поведінка

09. Карусель

10. Рукава ліворуч і праворуч

11. Наступні кроки

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

Як Photoshop хтось у картину

Як створити символ відеоігор у Збраш

Додайте багатомовну підтримку кутових

Як оволодіти анатомією істоти

Як підкреслити фокусну точку зображення

Створіть символ з сильною позою в Photoshop

Фарба контрольованих та гладких штрихів з намальованим

Як намалювати вологу цифру

Категорії