Как прототип мобильное приложение с Origami Studio

Sep 14, 2025

Инструкции

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

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

Есть много подходов, которые вы можете принять к прототипированию, а также многочисленные инструменты, чтобы помочь. Один из новейших на блоке Origami Studio Разработаны Facebook и доступны бесплатно для MacOS.

Origami Studio, которая фактически начала свою жизнь как плагин для кварцевого композитора (визуальный язык программирования в рамках среды разработки XCode MacOS), прежде чем стать автономным инструментом, набрал много внимания за последний год.

Это не только потому, что он создан разработчиком Big-Name, но и из-за сочетания мощности и простоты, которые он приносит развиванию высокой точности, интерактивных прототипов.

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

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

Start by creating a new iPhone 8 prototype — Начните с создания нового прототипа iPhone 8

Мы собираемся создать прототип для мобильного приложения, которое позволит нам провести снимки кошек и «вроде» некоторые из них. Как только мы установили Origami Studio, мы создадим новый прототип 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», изменяющиеся в режиме реального времени. Если вы выберете свойство «Layer» в патче, вы можете связать его на слой, содержащий изображение сердца, и теперь он ответит только на клики на этой конкретной области.

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 — Вы можете изменить степень, к которому объекты изменяются размер, когда они нажали

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

07. Переключатели

Use switch patches to toggle objects between different states — Используйте патчи Switch для переключения объектов между различными состояниями

Переключательные патчи представляют собой способ переключения между двумя состояниями. Это то, что мы хотим для нашей кнопки «как». Вход, передаваемый на патч переключателя, может перевернуть его между состояниями «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 — Выполните следующие шаги, чтобы добавить классическую прослушивающее действие на вашу карусель

Последнее, что нам нужно сделать, чтобы сделать его работу, включает в левую и правую, чтобы прокрутить карусель. Мы делаем это, создавая взаимодействие прокрутки к ссылке на группу слоев Carousel (не отдельные изображения). Взаимодействие выводит координату X, который мы можем затем ссылаться на свой свойство карусели для перемещения. Между ними мы добавим патч-клип, который можно использовать для ограничения значений, чтобы убедиться, что мы не прокручиваем, чтобы координаты за пределами края карусели.

11. Следующие шаги

Now you've learned the basics you can add more advanced features — Теперь вы узнали основы, вы можете добавить больше расширенных функций

Вот и все. Вы создали очень простое приложение. Вы также можете использовать встроенные «кадры» Origami Studio, чтобы разместить его на фоне устройства, что может помочь дать профессиональную отделку. Теперь, когда вы знакомы с основы использования исправлений, вы можете начать создавать более продвинутые поведения. Есть много руководств на веб-сайте Origami Studio, которые объясняют, как реализовать популярные функции, обычно видели в приложениях.

Эта статья была первоначально опубликована в номере 270 Treative Web Design Web Designer. Купить выпуск 270 здесь или же Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

Тенденции, которые будут формировать дизайн приложений в 2018 году
3 лучших способа построить прототип сайта
Все, что вам нужно знать о макетах, каркасах и прототипах

Как прототип мобильное приложение с Origami Studio

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

02. Добавление слоев

03. Создание взаимодействия

04. Связывание взаимодействия к слоям

05. Анимация

06. Переходы

07. Переключатели

08. Более сложное поведение

09. Карусель

10. Удаление влево и вправо

11. Следующие шаги

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

Проводить бесплатные и быстрые пользовательские тесты с помощью UserLook

Как создавать интерьеры с Eevee Blender

Начните с Express.js

Мастерское процессуальное моделирование

Начните с Rust

три шага к искрищему ночному небу в акварели

Как кодировать маркер дополненной реальности

Как создать зимнюю среду

Категории