Зробити прототип Hi-Fidelity в атомній

Sep 16, 2025
Як

Легко потрапити в спробу, щоб розробити ідею в межах статичного макета або плоский інструмент малювання файлів, але a прототип коштує тисячі зустрічей. Чому ви вирішили щось менше, ніж вивчити свої ідеї інтерактивним способом?

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

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

Прототипування в атомній неймовірно швидко: ви можете створювати красиві, розширені макети за лічені хвилини, не написавши будь-який код, встановлюючи будь-яке програмне забезпечення або пити занадто багато кави. Ви зможете переглянути з прототипом безпосередньо на своєму мобільному пристрої, або поділитися ним з товариша по команді для зворотного зв'язку. Ми також попередньо створені всі активи, які потрібно почати, тому вам не доведеться імпортувати річ (але ви можете імпортувати з ескізу та Photoshop CC теж).

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

01. Зареєструватися

Давайте розпочнемо! Якщо ви ще не маєте облікового запису, відкрийте Google Chrome, відвідайте atomic.io і зареєструйтеся на безкоштовну пробну версію. Це триває 30 днів, що повинно бути достатньо часу для вивчення атомної та зробити ваш перший прототип.

02. Подивіться навколо

The Sample Project contains sample files to help you get familiar with Atomic

Зразок проекту містить зразкові файли, щоб допомогти вам ознайомитися з атомним

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

03. Новий проект

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

04. Візьміть зразок

There's a ready-made sample file for this project

Там готовий зразковий файл для цього проекту

Замість створення нового порожнього дизайну, голова тут . Це відкриє зразковий файл, який ми створили, щоб допомогти вам почати.

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

05. Дослідіть редактор

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

06. Перевірте елементи

In the sample file's Assets page you’ll find the elements you need

У сторінці "Зразок файлів" ви знайдете потрібні елементи

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

07. Попередній перегляд

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

08. Початок роботи

Тепер ви знайомі з прототипом, який ми будуємо, настав час почати! Виберіть "Редагувати", щоб повернутися до редактора, а потім на сторінці активів виберіть всі елементи та скопіюйте їх у буфер обміну. Перейдіть на сторінку 1 і вставте елементи на сторінку.

09. Організуйте свої активи

Без вибраних елементів, встановіть фонове заповнення вашого полотна до # F6F7F8 (перегляньте панель правопорушень). Помістіть заголовок на полотно, вершину та центру.

Ви хочете переставити активи, тому ваша перша держава (всі рецепти) розташовані на полотні, а також активи для вашого незабаром, створеного другого стану (збережені рецепти) з полотна праворуч. Ось чому: коли той самий об'єкт існує на сторінці 1, а також атомна буде автоматично активувати будь-які зміни між ними.

10. Складіть свої картки

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

11. Створіть контейнер прокрутки

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

12. Помістіть елементи

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

13. Торкніться переходу

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

14. Дублювання

For our transition, duplicate page 1

Для нашого переходу, дублікат Сторінка 1

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

15. Збережені рецепти

Atomic will animate any changes you make between Page 1 and your new Page 2

Атомна буде анімація будь-яких змін, які ви робите між сторінкою 1 та новою сторінкою 2

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

16. Більше переходів

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

17. Подальша анімація

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

18. Весела частина

Add an interaction hotspot over the area you want users to interact with

Додайте контактну доступу до області, яку ви хочете взаємодіяти з

Тепер приходить весела частина створення переходу. На сторінці 1 ми збираємося намалювати гарячу доступу над текстом "збережених рецептів" у заголовку, оскільки це область, з якою ми хочемо, щоб нашим користувачем взаємодіяв. Виберіть інструмент Hotspot взаємодії з панелі інструментів на далекому лівому редактора (або просто натисніть H). Ви можете намалювати гарячі точки, використовуючи той самий метод, який ви використовуєте, щоб намалювати прямокутник на полотні: просто натисніть і перетягніть.

19. Налаштування переходу

Customise your transition, including the trigger gesture and motion type

Налаштуйте свій перехід, включаючи тригер жест та тип руху

Після того, як ви намалюєте свою точку доступу, за допомогою його все ще вибирається, ви побачите розділ взаємодій з'являється на панелі властивостей праворуч. Саме тут ви можете вказати жест тригер, сторінку призначення, тип руху та тривалість переходу. Для цього переходу вкажіть наступні налаштування: Жест: Натисніть або торкніться ; Йти до: Сторінка 2 ; Рух: e ase in-out ; Тривалість: 250 .

20. назад і вперед

Ми хочемо, щоб бути в змозі переключитися між двома переходами, тому ми також повинні зараз розмістити точку доступу на стор. 2, щоб повернути нас до сторінки 1. Скопіюйте гарячу доступу з сторінки 1 за допомогою клавіатурних скорочень, а також вставте Це на сторінці 2 над текстом "усіх рецептів" у "заголовку". Не забудьте оновити сторінку призначення нової точки доступу до сторінки 1.

21. Попередній перегляд

Click the Preview button to see your transition in action

Натисніть кнопку Попередній перегляд, щоб переглянути свій перехід у дії

Настав час переглянути ваш перехід! Перейдіть до сторінки 1 На панелі «Сторінки» та натисніть Попередній перегляд у нижньому правому куті редактора (ярлик CMD + Enter ). Натисніть або торкніться "Збережені рецепти" на своєму прототипі, щоб перейти до сторінки 2. Потім виберіть "Всі рецепти" прототип, який потрібно повернути назад до сторінки 1.

22. Все зроблено!

Тепер ти про! Виберіть "Редагувати", щоб повернутися до редактора, то, якщо ви видаляєте активи та дві довідкові сторінки (вибираючи меню гамбургера сторінки, а потім "Видалити сторінку"), прототип, який ви тільки що готові поділитися. Ви можете легко створити посилання на акцію, натиснувши "Поділитися" у нижньому правому куті редактора.

Ця стаття спочатку з'явилася чистий журнал випуск 283; купити його тут !

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

Підручник з змішаного медіа: Як акварел над цифровими ілюстраціями

Як Sep 16, 2025

(Зображення кредиту: Naomi Vandoren) Як незалежний художник, я насолодж..

Як стискати зображення: довідник веб-дизайнера

Як Sep 16, 2025

Середня швидкість сучасного підключення до Інтернету звучить дуже фу�..

5 Речі, які вам потрібно для масляного живопису

Як Sep 16, 2025

Там є необґрунтована містика навколо нафтового живопису, яка поставил..

Перебудова флеш-пам'ятник 2004 року на 2018 рік

Як Sep 16, 2025

У 1999 році я побудував свій перший веб-сайт, використовуючи Web Studio 1.0. Web Studio - графічний користувальницький..

Створити інтерактивні 3D-візуальні матеріали з трьома.JS

Як Sep 16, 2025

Цей підручник WebGL демонструє, як створити 3D-симуляцію навколишнього се..

Вік фотографія в Photoshop CC

Як Sep 16, 2025

Старіння фотографії в Photoshop - це класична техніка, яка може перетворити..

Створіть живописні ефекти в Photoshop CC

Як Sep 16, 2025

Adobe випустив два нових відео підручників, які допоможуть вам взяти ваш ..

Намалюйте портрет стилю мону в Photoshop CC

Як Sep 16, 2025

Як частина його Приховані скарби творчості Проект, Adobe перетво..

Категорії