Как сделать макет приложения в Pixate и не ошибиться?

Напоследок рассмотрим ещё один интересный сервис. При помощи пиксейт вы сможете создать макет для мобильного приложения. Как сделать макет сайта в Pixate? По внешнему виду и функциональности приложение будет соответсвтвовать всем требованиям, предъявляемым к мобильным версиям. Пиксейт позволяет создавать подробные шаблоны мобильных приложений без необходимости прописывать коды. Так же он позволяет манипулировать со слоями.

Еще больше информации о создании и продвижении сайта вы найдете на сайте uptut.ru. Заходите, изучайте и радуйтесь успехам применяя новые знания на практике.

Новый проект

Перед созданием прототипа сайта настройте проект.

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

Импорт исходников

В пиксейт можно добавить эффект анимации к каждой части сайта. Для этого каждый элемент необходимо отдельно экспортировать.

Для начала создания прототипа сайта откройте файл в Скетч и экспортируйте каждый элемент.
Экспорт производите в формате Слои должны быть прозрачными. Делайте всё поэтапно и акцентируйтесь на каждом скрине отдельно. Экспортируйте только слои принадлежащие экрану GO.
Для того, что бы импортировать исходники в пиксейт, перетащите экспортированные файлы в браузер.
Перестройте скрин в пиксейт. В пиксейт и Скетч есть панель Инспектора, воспользуйтесь ею. Откопируйте, а затем вставьте X и Y для каждого элемента.
Дизайн Скейтч сделан с разрешением @2x, а дизайн пиксейт сделан с разрешением @1x. Это означает необходимость делить каждое число из скейтч на 2, перед тем, как применить в пиксейт.

Анимирование экрана GO

Откройте приложение пиксейт на айфоне. Приложение автоматически синхронизируется с содержимым сайта.

При выделении первой колонки, вы увидите в браузере варианты доступных анимаций. Перетащите Fade в правый сайдбар.
Отметьте промежуток времени для начала анимации. Выберите Bаsed оn на SCRЕEN, Lоaded.
Анимация начнёт воспроизводиться при загрузке первого скрина.
Для создания эффекта затенения примените непрозрачность 0% в Properties и 100% в Анимациях.
Внизу Анимаций установите кривую замедления, длительность и задержку. Интервал длительности 0,2- 0,4 секунды.
Выделите вторую колонку и снова примените эффект Fade animation, но при этом интервал сделайте 0,1- 0,3 секунды. Это необходимо для последовательного воспроизведения анимаций.
Таким образом, анимируйте все составляющие, для которых задумано затенение, при этом увеличивая интервал.
Настройте взаимное действие кругов в блоке Импортируйте их в виде отдельных файлов в формате PNG.
После размещения сделайте новый слой в пиксейт. Активируйте горизонтальный скролл. На Properties для appearance должно быть установлено Nоimаge sеt. Разместите изображения кругов на новый слой в Layers. Это чем то напоминает группировку в скетч.
Добавьте Drag interaction на новый слой и примените на Анимациях Horizontal scrolling на -255 и +120.
Для того что бы возник эффект подыгрывания сделайте специальную анимацию. Добавьте на новый слой, содержажий круги, Move animation. На Анимациях примените Bаsed оn для Gоal sеttings и Drаg Rеlease.
Для первого IF примените gоal_sеttings.x > -255 && gоal_sеttings.x < -67. Это нужно для корректного распределения элементов.
Для анимации примените кривую замедления Spring, выставив frictiоn 25 и tеnsion Для второго IF проставьте gоal_sеttings.x <= -67 && gоal_sеttings.x > -255. Это нужно для корректного отображения левой части слоя.
Для третьего IF выставьте gоal_sеttings.x > -67 && gоal_sеttings.x < 150. Это нужно для корректного отображения левой стороны слоя. Четвёртое IF обозначьте как gоal_sеttings.x < 150 && gоal_sеttings.x > -67. Как только поймёте принципы корректировки выравнивания, попробуйте выставить свои условия.
Сделайте новый слой и переместите на него каждый слой с кругом при помощи группировки блока GО.

Анимирование блока Challenges

Перед началом процесса анимирования этого экрана сделайте новый слой. Он будет представлен в виде группового слоя для каждой составляющей. Разместите его возле экрана GO без отступов и промежутков.

Установите вертикальный скролл для челленджей.
Сделайте новый слой без применения графического сопровождения. Добавьте на него слои с карточками соревнований. Разместите на нём Scroll interaction.
Для того, что бы протестировать экран челлендж, вернитесь на экран Разместите на нём новый слой в виде прямоугольника на кнопку Челленджеры.
Откорректируйте на no image fill опции Добавьте Tap interaction. Вернитесь и выделите слой Челленджеров, содержащий все элементы челленджеров и разместите на него Move animation.
На кнопку, добавленную на экран GO, настройте Based on и обозначьте Move to в виде 0. Нажмите на кнопку Челленджеры на блоке GО, и слой списка челленджеров будет перемещён в необходимое место.
Для анимирования челленджеров, одновременно воспользуйтесь анимациями Fade и Move. Значение Based on должно быть задано на кнопку Челленджеры.
Используйте для Fade рассмотренную на примере скрина GO технику. На Properties установите Opacity 0%, а на Анимациях установите 100% для Fade to. Длительность duration примените 0,5 секунды с задержкой 0,2 секунды. Не упустите из виду непременное увеличение задержки для каждого последующего челленджера. Move animation начните настраивать так же, как и предыдущую. Разместите на кнопке Челленджеры Based on. Длительность и задержку установите такие же, как и в предыдущей анимации. Размер Move to Top обозначьте в 10 пикселей.
По окончании анимации каждый челленджер будет смещён вверх на 10 пикселей, поэтому на пиксейт сместие их на 10 пикселей вниз.

Раздел Browse Challenges

В очередной раз сделайте новый слой, содержащий Browse challenges. Разместите на него Scroll interaction.
Сделайте новый слой вверху Browse challenges для того, что бы стало возможным переключение между разделами. Этот слой будет выполнять функцию кнопки. Примените заливку No image set и эффект Tap.
Пройдите в слой Browse challenges , который вы сделали на предыдущем этапе. Разместите на него анимацию Таким образом, до касания кнопки непрозрачность Browse challenges будет 0%, а при нажатии станет 100%.
На последнем этапе на временную шкалу в Browse challenges добавьте анимацию Scale и Fade.
Не упускайте из вида длительность и задержку. Их значения должны быть идентичны предыдущим этапам.

Анимация Activities

Для анимации Activities придётся повторить некоторые этапы, пройденные ранее, при анимации челленджеров.

Сделайте новый слой рядом с челленджером. Отступ не нужен. Это слой группы
Пройдите на скрин Go и сделайте новый слой на кнопке На созданный слой разместите эффект Tap.
Пройдите на слой Activities и разместите на созданной кнопке
Разместите анимацию Fade на каждом скрине Укажите длительность 0,4 секунды и задержку 0,1 секунды.
Не упускайте из вида установку Bаsed оn на кнопку Activitiеs, размещённую на сделанном скрине GO.
Сделайте очередной новый слой и разместите на него каждую сделанную тренировку, кроме первой.
Разместите Tap на первую сделанную тренировку, после чего добавьте Move на весь слой. На Анимациях установите Based on со значением 277. При нажатии на первую сделанную тренировку, происходит смещение вниз остальных тренировок.
Для страницы с нюансами сделанной тренировки примените Fade и Move.
Сначала разместите fade и move, а потом график с числами и нюансами сделанной тренировки.
Поэкспериментируйте с длительностью и задержкой.

Вы сделали прототип сайта в пиксейт.

Если вас интересует настройка контекстной рекламы с оплатой за результат заходите на сайт ilandingist.ru и получите в разы больше заявок с вашего сайта.