Використовуйте Framer X для побудови інтерактивних прототипів

Sep 15, 2025

Як

(Зображення кредиту: Framer)

Як дизайнери, завжди є питання про те, які інструменти прототипів ви повинні використовувати для вашого проекту. Існує безліч програмного забезпечення для завдань, як Wireframing (див. Наш верх Інструменти для Wireframing і відмінний Будівельники веб-сайту ), прототипування та будівельні комплексні взаємодії; Однак дуже мало інструментів здатні обробляти все це. Framer - це один інструмент, який має всі ці функції і значно прискорює процес створення крихітних анімацій та взаємодій.

Останню ітерацію, Framer x Тепер зараз використовує реагування та JavaScript, а не використовує кавовий креветку для розробки мікро-взаємодій та анімації. Це допомагає забезпечити швидше завантаження часу та кращу продуктивність. Крім того, використання компонентів реагування означає, що користувачі мають більше можливостей додавати та розширити, включаючи вбудовані медіа-плеєри, дані в режимі реального часу всередині прототипів.

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

Як створити додаток з Framer X

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

Стандартний пошуковий бар, щоб знайти рецепти
Останні дії, щоб показати останні рецепти перегляду
Карти рецепту показують такі речі, як найпопулярніші рецепти
Створення детального перегляду рецепту з варіантами відео та обміну

Щоб розпочати роботу, потрібно створити новий кадр (монтаж), натиснувши значок + на лівій NAVBAR. Виберіть будь-який стиль художнього дошки зі списку стандартних шаблонів iPhone / Android у правій панелі. Тепер ви готові піти.

01. Побудуйте панель пошуку

Почнемо збірку пошукового рядка. Замість того, щоб створювати прямокутник і додавати значок пошуку, як ми, як правило, ми можемо насправді використовувати швидкі багаторазові компоненти в Framer X, це називаються пакетами. Є тисячі пакетів, які можна знайти в лівій панелі навігації в магазині. Натисніть на магазин, шукати комплект Android та приклад комплекту, а потім встановіть їх.

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

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

02. Створіть стек вмісту

Для цього недавнього блоку активності спочатку додайте текст "Останні дії", яка досить проста. Тепер ми можемо використовувати нову особливість Framer X Call Stacks. Це можна зробити, натиснувши значок + і вибираючи стек з меню. Після вибору стека, перетягніть площу 600 х 300 на робочу рамку, щоб створити стек. Цей стек буде показаний як синій.

Тепер повернімося до розділу компонентів та під Android Kit, пошук елемента карт-5 і перетягніть його в стек, який ми просто створили. Дублюйте ці картки двічі і переконайтеся, що всі три карти знаходяться в стеку.

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

Тепер, коли ми створили стек, давайте зробимо це прокрученим. Перемістіть його з кадру / арбуту. Натисніть значок + з лівої NAV та натисніть опцію прокручування. Так само, як ми створили область зі стеком, створіть прокручую область на кадрі / арбуті, яка однаковий, як стек.

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

03. Створіть вертикальний стек

Interactive Framer X - 01 — Framer X дозволяє запровадити горизонтальні та вертикальні скляні стеки (Зображення кредиту: Vamsi Batchu)

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

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

04. Створіть нову сторінку

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

Для додавання відео, перейдіть до магазину та встановіть пакет YouTube, який дозволяє вам легко додавати відео до свого прототипу. Тепер перейдіть на панель ваших компонентів та перетягніть елемент YouTube з компонента YouTube у кадр.

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

Нижче це відео ви можете додати назву, рейтинг та різні значки. Щоб додати значки для нашого прикладу, я скористався компонентом з магазину генератора значків. Це простий процес: просто перетягніть значок основи на кадр, а потім змініть властивість під назвою значок на правій частині панелі "Серце" та "Частка". Це змінить основні піктограми у збереженні та ділитися значками відповідно. Їх кольори також можна легко змінити за допомогою правої панелі.

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

05. Впровадження взаємодій

Interactive Framer X - 02 — Додайте взаємодії до кнопок та елементів, щоб зробити їх більш залученням (Зображення кредиту: Vamsi Batchu)

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

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

Щоб зробити екран відмінним, давайте додати деякий колір до нього і заповнити його з піктограмами соціальних медіа, таких як Facebook, Instagram, WhatsApp та електронна пошта. Цей екран Share також повинен мати до нього значок X, який, коли натиснув, поверне його до початкового стану.

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

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

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

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

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

06. Додайте кнопку Зберегти

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

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

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

Це, як використовувати Framer X, щоб легко створювати дії інтерактивних прототипів. Існують також розширені інструменти, які ви можете використовувати, а також додавання фрагментів кодування реагування на елементи кадрів. Крім того, найкраща частина Framer X полягає в тому, що кожен може освоїти його, намагаючись його на кілька прототипів.

Ця стаття була опублікована у випуску 325 чистих, найпопулярніших журналів у світі для веб-дизайнерів та розробників. Купити проблему 325 або підписатися до мережі.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer. — Дізнайтеся, як побудувати кращий JavaScript на генерації (Зображення Кредит: Майбутнє / Ремі Sharp / Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba, unsplash)

Приєднуйтесь до нас у квітні 2020 року з нашим складом JavaScript Superstars на Generatejs - Конференція, яка допомагає вам створити кращий JavaScript. Забронювати зараз generateconf.com

Читати далі:

Як виділити і отримати найнятий як дизайнер UX
Поради 20 UX, які потрібно знати
22 найкращі інструменти для дизайну UI

Використовуйте Framer X для побудови інтерактивних прототипів

Як створити додаток з Framer X

01. Побудуйте панель пошуку

02. Створіть стек вмісту

03. Створіть вертикальний стек

04. Створіть нову сторінку

05. Впровадження взаємодій

06. Додайте кнопку Зберегти

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

Як використовувати смарт-шари в Photoshop

Зробіть свої символи POP з кольором і світлом

Як малювати зомбі в кліп-студії

Створіть метеорологічний душ у 3DS MAX

Створіть щітку наклейки в арстразі

Створіть символ зі стилізованим реалізмом

Об'єднати традиційні та цифрові навички для створення комічного покриття

Як отримати свою модель Zbrush у Maya

Категорії