Прототип плавающей кнопки действия в Pixate

Sep 11, 2025
Инструкции

Pixate позволяет быстро прототипу интерактивных мобильных макетов, которые можно предварительно просмотреть на устройствах Android и iOS. В этом руководстве мы собираемся использовать его для создания плавающей кнопки действия (FAB), включая подменные опции. Мы исследуем разные методы и настройки в пиксете, такие как переходы и условия.

Fabs используются для продвижения действий и привлечения внимания пользователя. Обычно основные функции приложения доступны через Fab. Наш Fab будет в стиле дизайна материала, который поддается прекрасным, натуральным интерфейсам. Реализация элементов дизайна материала прост, если вы используете Руководящие принципы Google для справки.

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

Вам также понадобится мобильное приложение Pixate для Android или iOS. Неважно, на каком устройстве вы предварительно просмотра, так как приложение автоматически будет масштабировать прототип, чтобы соответствовать экрану вашего устройства.

Найти все файлы, которые вам понадобятся для этого учебника здесь Отказ

01. Начните

Откройте Pixate, а с экрана приветствия нажмите «Создать новый прототип». Выберите желаемое местоположение сохранения при появлении запроса и назовите свой файл.

Как только вы нажмете сохранить, вас попросят выбрать устройство, для которого вы прототипируете. Это не должно быть устройством, которое вы предварительно просмотра - для этого примера, мы выбираем Nexus 5. Теперь вы должны смотреть на пустой холст.

02. Импортируйте ваши изображения

Import all the necessary assets for your prototype

Импортируйте все необходимые активы для вашего прототипа

Для начала мы хотим импортировать изображения для этого руководства. Вы найдете все активы, которые я использовал здесь (Это все для прототипа 3x). В верхнем левом углу экрана нажмите на среднюю вкладку, а затем нажмите кнопку «+». Перейдите к папке, где ваши активы выберите все из них и нажмите «Открыть».

03. Добавить и позицию

Теперь мы хотим добавить и располагать изображения Fab и Icon. В Pixate, когда вы перетащите активы в холст, они будут созданы как слой, и имя этого уровня будет именем файла изображения, которое вы загрузили. Вот как я ссылаюсь на слои на протяжении всего этого руководства.

Перетащите «FAB_NOMMAL» на холст и поместите слой, в котором вы хотите сидеть. Также перетащите актива «Icon_Add» и введите его на Fab. Когда вы импортируете «icon_add» и попробуйте привязать его к потрясающему, он будет защелкиваться ниже центральной точки. Чтобы исправить это, нажмите стрелку вверх на клавиатуре три раза. Это подтолкнут его к визуальному центру.

04. Добавьте свои потрясающие экземпляры

Add four instances of the FAB to your blank canvas

Добавьте четыре экземпляра Fab в пустой холст

Теперь добавьте четыре случая «Fab_option» на холст. Перетащите сначала, так что нижняя граница защелкивается до вершины «FAB_NOMMAL» и является вертикально-центром.

Совместите оставшиеся три слоя Fab_option, поэтому они вертикально выровнены в центре и сидят друг на друга. Вот как появится меню Fab, когда он расширен.

05. Добавьте параметры значков

Добавьте все значки параметров (icon_school ',' icon_flight ',' icon_cake 'и' icon_basket ') на Canvas и выравнивают каждый из них с экземпляром кнопки «fab_option». Опять же, потому что тень включена в файл изображения, центр круга не является центром слоя. Вам нужно будет поднять каждую из значков около трех точек, поэтому они кажутся центрированными.

06. Добавьте нажатые потрясающие

Place the 'FAB_pressed' icon on top of the unpressed version

Поместите значок «FAB_PURED» поверх бесконечной версии

Наконец, добавьте «fab_pressed» на холст и поместите его поверх «FAB_NOMMAL». Подтащить «Fab_pressed», поэтому края круга соответствует «Fab_Normal». Это около трех очков от центрального выравнивания.

07. Гнездовые слои

Внутренние слои внутри друг друга создают родительские / детские отношения. Это позволяет применить анимацию к группе слоев и у них анимация в виде одного устройства. Он достигается за счет перетаскивания и падения слоя на другой в списке слоя (в верхнем левом углу экрана).

08. На опцион Nest Layers

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_PURED» (80 x 92). Это обеспечит интерактивную область охватывает весь потрясающий.

11. Добавьте взаимодействие крана

Set the colour swatch in the Properties panel to transparent, and add a Tap interaction

Установите образец цвета на панели «Свойства», чтобы прозрачный и добавьте взаимодействие на кранах

Находясь на панели «Свойства», установите образец цвета прозрачности и поместите слой, чтобы он был выровнен в центре с «FAB_PURED». Затем перетащите взаимодействие нажмите на слой в списке. Удерживаться CMD и выберите все слои «Fab_option», а также «FAB_PURED», затем установите непрозрачность на 0. Отказ Не меняйте непрозрачность слоев значков! Поскольку вы регулируете родительские слои, непрозрачность слоев значков унаследована от них.

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

Давайте сделаем наш значок Fab поверните на кране. В пиксете анимации могут ссылаться на состояние другого слоя. Это позволяет вам установить анимацию для воспроизведения после выполнения условия. Мы хотим повернуть «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

Добавьте обратное состояние, чтобы повернуть значок обратно в исходное положение

Нажмите на ссылку «+ условие» в нижней части анимации и установите следующее: else, если: icon_addpng.Rotation! = 0 Поверните на: 0. Ослабность кривой: ослабить и кубика , Продолжительность: 0.3 Отказ

14. Добавьте исчезновение

Adjust the settings so the FAB fades in on tap

Отрегулируйте настройки, чтобы погрузиться на кран

Мы хотим, чтобы варианты FAB выцветают на кране. Таким образом, мы видим, что мы делаем, мы добавим исчезнув на кнопки параметра. Перетащите анимацию исчезновения на кнопку параметра и установите следующее.

На основании: Нажмите слой и Кран , ЕСЛИ: icon_addpng.Rotation == 0. , Исчезнет: 100. , Продолжительность: 0. Отказ Тогда «+ состояние» и остальное, если: icon_addpng.Rotation! = 0 , Исчезнет: 0. Ослабность кривой: ослабить и кубика Отказ Сделайте это для каждой кнопки варианта.

15. Масштабировать вещи

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

Перетащите масштабную анимацию на кнопку параметра и установите следующие параметры. На основании: *ЭКРАН* и Загружен , Масштаб х и масштаб Y: 0. И продолжительность: 0. Выберите нижний анкер в анкерной сетке. Сделайте это для каждой кнопки варианта.

16. Опции анимации

These settings will apply our animation to the FAB

Эти настройки применит нашу анимацию на Fab

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

17. Задержка весов

При добавлении этой анимации до остальной части кнопок параметра вычтите 0,02 от, если его недвижимость задержки. Второй вариант сверху должен иметь задержку 0.04. третий будет задержать 0.02. , и последнее 0.0 Отказ Теперь варианты будут масштабироваться один за другим.

18. Больше вариантов анимации

Add these settings to emulate the FAB being pressed

Добавьте эти настройки для эмуляции нажатия FAB

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

Перетащите анимацию FADE на «FAB_NOMMAL» и «FAB_PURED» и примените настройки, показанные на скриншоте.

19. Готов к использованию

Теперь вы можете использовать этот файл для любого из ваших прототипов. Нажав кнопку в верхнем правом правой части холста, вы можете выбрать файл Pixate, чтобы объединить в тот, который в настоящее время открыт. Это позволяет добавлять такие компоненты, как этот потрясающий к прототипам, над которым вы уже работаете.

20. Настроить!

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

Следите за большим количеством компонентов дизайна материала Pixate из Google и дизайн!

Эта статья изначально появилась в Чистый журнал Выпуск 281; Купить это здесь Отказ

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

Иллюстрация карта: пошаговое руководство

Инструкции Sep 11, 2025

Иллюстрация карта имела реальное возрождение за последние несколько лет. Увлекательная альтернатива н�..

Руководство по облачному видению Google

Инструкции Sep 11, 2025

Машинное обучение. Глубокое обучение. Обработка естественного языка. �..

Создайте бог лучей в V-Ray

Инструкции Sep 11, 2025

В реальной фотографии лучи света на их самых заметных, когда у них есть..

Как построить прогрессивное веб-приложение

Инструкции Sep 11, 2025

Mobile Теперь приходится более половины трафика Web, а веб-приложения позв�..

Обновите свои текстуры в дизайнере вещества

Инструкции Sep 11, 2025

Журнал Bungie Wide Environment Artist Daniel Thiger пробегает нас через свои методы для пр�..

Как сделать массивные взрывы с V-Ray

Инструкции Sep 11, 2025

Создание и композиционные 3D взрывы - это обычно задача для двух разных ..

Создайте приложение, которое собирает данные датчика

Инструкции Sep 11, 2025

Сегодня доступные платформы для разработки взаимосвязанных продукто�..

Как объединить акварельные наборы художника

Инструкции Sep 11, 2025

Corel Painter. Предлагает банкет из акварельных инструментов. Он може�..

Категории