Прототип кнопки плаваючої дії в піксеті

Jan 30, 2026

Як

Pixate дозволяє швидко прототипом інтерактивних мобільних макетів, які можна переглянути на пристроях Android та iOS. У цьому підручнику ми будемо використовувати його для створення плаваючої кнопки дії (Fab), включаючи під-варіанти. Ми вивчимо різні методи та налаштування в піксеті, таких як переходи та умови.

Fabs використовуються для сприяння дії та залучення уваги користувача. Взагалі основні функції програми доступні через Fab. Наш Fab буде в стилі дизайну матеріального дизайну, який забезпечує красиві, природні інтерфейси. Реалізація елементів дизайну матеріалу простіше, якщо ви використовуєте Посібники Google для довідки.

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

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

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

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

Відкритий піксет, а з екрана Ласкаво просимо натисніть кнопку "Створити новий прототип". Виберіть потрібне збереження, коли з'явиться запит та назвати файл.

Після того, як ви натиснете зберегти, вам буде запропоновано вибрати пристрій, який ви прототипували. Це не потрібно бути попередньо переглянутим пристроєм - для цього прикладу ми вибираємо Nexus 5. Ви повинні тепер дивитися на порожнє полотно.

02. Імпортувати свої зображення

Import all the necessary assets for your prototype — Імпортуйте всі необхідні активи для свого прототипу

Щоб запустити, ми хочемо імпортувати зображення для цього підручника. Ви знайдете всі активи, які я використовували тут (Це все для 3x прототипу). У верхньому лівому куті екрана натисніть на середню вкладку, а потім натисніть кнопку "+". Перейдіть до папки, де є ваші активи, виберіть усі вони та натисніть кнопку Відкрити.

03. Додавання і посада

Тепер ми хочемо додати та розмістити зображення Fab і Icon. У піксеті, коли ви перетягуєте активи до полотна, вони будуть створені як шар, і назва цього шару буде назва зображення зображення, яке ви завантажили. Ось як я буду посилатися на шари протягом цього навчального посібника.

Перетягніть 'fab_normal' до полотна і положення шару, де ви хочете сидіти. Також перетягніть "icon_add" та центр його на fab. Коли ви імпортуєте "icon_add" і спробуйте занести його, він буде оснащувати нижчим, ніж центральна точка. Щоб виправити це, натисніть стрілку вгору на клавіатурі тричі. Це підштовхне його до візуального центру.

04. Додайте фабрики

Add four instances of the FAB to your blank canvas — Додайте чотири екземпляри Fab до порожнього полотна

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

Вирівняйте залишки трьох "шарів Fab_option", тому вони вертикально узгоджуються і сидять один над одним. Це, як з'явиться меню Fab, коли він розширюється.

05. Додайте значки опції

Додайте всі варіанти значків ('icon_school', 'icon_flight', 'icon_cake' та 'icon_basket') до полотна та вирівняти кожен з них з екземпляром кнопки fab_option '. Знову ж таки, тому що тінь включений у файл зображення, центр кола не є центром шару. Вам доведеться підірвати кожну з піктограм близько трьох точок, щоб вони з'являються центром.

06. Додайте натиснуту Fab

Place the 'FAB_pressed' icon on top of the unpressed version — Помістіть значок "fab_pressed" на вершині непресивної версії

Нарешті, додайте "fab_pressed" до полотна і помістіть його на вершину "fab_normal". Підніміть "fab_pressed", тому краю кола відповідають "fab_normal". Це приблизно три вказівки від центрального вирівнювання.

07. Вкладені шари

Гніздові шари всередині одного створює відносини батьків / дітей. Це дозволяє застосовувати анімацію до групи шарів і мати їх анімувати як одну одиницю. Це досягається шляхом перетягування та скидання шару на інший у списку шару (у верхньому лівому куті екрана).

08. Гніздові параметри значок шарів

Nest the option icon layers into their respective button layers — Гніздити параметр значок шарів у свої шари кнопок

Гніздити параметри значок шарів у відповідні кнопки. Наприклад, гніздо "icon_school" у відповідний "fab_option", перетягнувши список "icon_school" у списку шару параметра.

09. Промийте і відразу

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

10. Відрегулюйте властивості

Реєстрація "fab_pressed", тому він сидить нижче "icon_add", але вище "fab_normal". Тепер виберіть "icon_add" і натисніть кнопку "+" у верхній частині списку шару. На панелі властивостей шару (у верхньому правому куті екрана) змініть значення ширини та висоти, щоб відповідати 'fab_pressed' (80 x 92). Це забезпечить інтерактивну територію, що охоплює весь Fab.

11. Додайте взаємодію TAP

Set the colour swatch in the Properties panel to transparent, and add a Tap interaction — Встановіть зразка кольору на панелі "Властивості", щоб прозорі, і додати взаємодію TAP

Хоча на панелі «Властивості», встановіть зразок кольору, щоб прозорий і помістіть шар, щоб він був вирівняний з «fab_pressed». Потім перетягніть взаємодію TAP на шар у списку. Утримувати командування і виберіть всі шари "fab_option", а також "fab_pressed", а потім встановіть непрозорість 0 . Не змінюйте непрозорість значків шарів! Оскільки ви регулюєте батьківські шари, від них успадковується значок іконки.

12. Поверніть значок

Давайте зробимо наш Fab Icon, обертається на Tap. У піксеті анімації можуть посилатися на стан іншого шару. Це дозволяє встановити анімацію, щоб грати після того, як умова виконується. Ми хочемо обертати "icon_add", щоб ми могли засновувати інші умови анімації. Перетягніть анімацію повороту на "icon_add" та встановіть наступні параметри. На підставі: Швидкий шар і Торкатися , Якщо: icon_addpng.rotation == 0 , Обертайте до: -225 , Полегшуючи криву: полегшувати і кубічний , Тривалість: 0,3 .

13. Зворотний стан

Add a reverse condition to rotate the icon back to its original position — Додайте зворотний стан, щоб повернути значок назад до початкового положення

Натисніть посилання "+ умова" у нижній частині анімації та встановіть наступне: ще, якщо: icon_addpng.rotation! = 0 , Обертайте до: 0 , Полегшуючи криву: полегшувати і кубічний , Тривалість: 0,3 .

14. Додайте зникнення

Adjust the settings so the FAB fades in on tap — Налаштуйте параметри, щоб Fab зникає на Tap

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

На підставі: Швидкий шар і Торкатися , Якщо: icon_addpng.rotation == 0 , Зникає: 100 , Тривалість: 0 . Потім "+ стан" та інше, якщо: icon_addpng.rotation! = 0 , Зникає: 0 , Полегшуючи криву: полегшувати і кубічний . Робіть це для кожної кнопки опції.

15. Масштабні речі вниз

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

Перетягніть анімацію масштабу на кнопку опцію та встановіть наступні параметри. На підставі: * Екран * і Навантажений , Шкала x і масштаб y: 0 , і тривалість: 0. Виберіть нижній середній якорі в анкерну сітку. Робіть це для кожної кнопки опції.

16. Параметри анімації

These settings will apply our animation to the FAB — Ці налаштування застосовуватимуть нашу анімацію до Fab

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

17. Затримка ваг

При додаванні цієї анімації до решти кнопок опцій, віднімайте 0,02 від майно затримки. Другий варіант з вершини повинен мати затримку 0,04 , третій буде мати затримку 0,02 і останній 0,0 . Тепер варіанти будуть масштабні один за одним.

18. Більше варіантів анімації

Add these settings to emulate the FAB being pressed — Додайте ці налаштування, щоб наслідувати, що він натискається

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

Перетягніть анімацію зникнення на 'fab_normal' і 'fab_pressed' і застосуйте налаштування, показані на скріншоті.

19. Готовий до використання

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

20. Налаштуйте!

Імпортуйте свої значки та змініть кольори, як ви бачите. З кроками тут ви можете додати додаткові параметри Fab і навіть підключити наступні крани та анімації до кнопки параметрів.

Слідкуйте за більш детальними компонентами конструкції матеріалів з Google, а також дизайн!

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

Прототип кнопки плаваючої дії в піксеті

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

02. Імпортувати свої зображення

03. Додавання і посада

04. Додайте фабрики

05. Додайте значки опції

06. Додайте натиснуту Fab

07. Вкладені шари

08. Гніздові параметри значок шарів

09. Промийте і відразу

10. Відрегулюйте властивості

11. Додайте взаємодію TAP

12. Поверніть значок

13. Зворотний стан

14. Додайте зникнення

15. Масштабні речі вниз

16. Параметри анімації

17. Затримка ваг

18. Більше варіантів анімації

19. Готовий до використання

20. Налаштуйте!

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

Як додати шрифти в Photoshop

Як Кітбаш на ходу з Shapr3d

Робота маска магії з Гудіні

Початок роботи з Redux Thunk

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

Експорт Анімації ефектів до HTML5

Як досягти кращого освітлення з V-Ray

Все, що потрібно знати про новий Node.JS 8

Категорії