UXPUB 🇺🇦 Дизайн-спільнота

Cover image for 4 маленьких хитрости создания анимации в Principle
Редакція
Редакція

Опубліковано • Оновлено

4 маленьких хитрости создания анимации в Principle

Как подготовить кликабельный прототип, содержащий все необходимые взаимодействия. Сколько раз вы пытались объяснить свой отличный дизайн разработчику? Даже используя жесты, раскадровки или простые цифровые прототипы нелегко передать свое видение. Principle дает вам возможность продемонстрировать основные взаимодействия за несколько простых шагов. Прочитав эту статью, вы будете на четыре шага ближе к выражению своих идей. Вот полноразмерный вид календаря, который я подготовил для своего мобильного приложения HUB Mobile. Во-первых, я попытался объяснить свое видение взаимодействий друзьям, используя приложение InVision, при помощи нескольких загруженных экранов. Не сработало. Затем я потратил 2 часа на подготовку этого прототипа. Наконец они поняли мою концепцию.

Начало

Есть одна вещь, которую вам нужно запомнить, если вы хотите использовать Principle. Подготовка проектов в Sketch позволит вам просто скопировать все компоненты из одного инструмента в другой, так вы сэкономите много времени. Убедитесь, что артборды в Principle имеют тот же размер, что и в Sketch. Благодаря этому все детали будут соответствовать друг другу.

Подготовка артборда Principle

После подготовки дизайна в Sketch вам нужно подумать об анимационных слоях. Каждое движение каким-то образом отличается друг от друга, но в этом случае вам нужно разделить их на две категории. Анимация, такая как затухание или перемещение по оси y или x, не требует дополнительной работы. Вы можете просто скопировать (ctrl + c) из Sketch компоненты, в которых вы хотите использовать эту анимацию, и вставить (ctrl + v) их в артборд Principle. Однако помните, что асимметричные тени отключат опцию авто центровки. Кроме того, в Principle нет линеек. В случае таких движений, как растяжение, закругление углов или даже изменение текста, я предлагаю вам создать с нуля эти слои в Principle. Не волнуйтесь, тексты, созданные в Principle, будут соответствовать текстам из Sketch!

Вопросы анимации

Хорошо анимированные интерфейсы помогут пользователю понять взаимосвязь между двумя экранами и подготовить его к плавному переходу от одного действия к другому, но будьте осторожны. Пользовательский интерфейс – это не диснеевский мультфильм, поэтому с умом подходите к добавлению последовательных движений. http://ux.pub/udobnyj-interfejs-s-pomoshhyu-dvizheniya-12-principov-ux-animacii/

 «Нет такого понятия, как скучный проект. Есть только скучное исполнение». - Айрин Этцкорн

В этой части я покажу вам, как я проектирую движения в своих прототипах. Если вам нужно заполнить некоторые пробелы, связанные с основами работы в Principle, не стесняйтесь посмотрите это  руководство по основам Principle. http://ux.pub/poshagovoe-rukovodstvo-po-animacii-interfejsa-v-principle-i-sketch/

Floating Label

Чтобы сэкономить место и обеспечить пользовательский опыт, не забудьте поддерживать контекст для пользователей, даже если они на мгновение отвлекутся. Чтобы создать эффект плавающей метки, вам нужно подготовить три текстовых слоя: текст плейсходера (серый), текст метки (синий) и основной текст (черный). Floating Label Principle - Шаг 1 Шаг 1 На первом артборде вам нужно правильно установить все три текстовых слои:

  1. Текст плейсхолдера должен иметь 100% непрозрачности с выбранным размером шрифта, например, 32 pt.
  2. Текст label должен иметь 0% непрозрачности с размером шрифта и позицией такой же, как в текстовом слое плейсхолдера.
  3. Основной текст должен иметь 0% непрозрачности с размером шрифта и позицией, такой же, как и в текстовом слое плейсхолдера.

Floating Label Principle - Шаг 2 Шаг 2 Продублируйте артборд и разместите эти три текстовых слоя на втором артборде:

  1. Текст метки должен label непрозрачность 100% с выбранным размером шрифта, например, 14 pt и настроенным в правильном положении.
  2. Текст плейсхолдера должен иметь непрозрачность 0% с размера шрифта, соответствующим указанному в текстовом слое метки.
  3. Основной текст должен иметь непрозрачность 100%.

Indicator Split

Date Picker

Это похоже на родной date picker iOS, но мы можем просто подстроить его под наш дизайн. Date Picker Principle Когда вы начинаете создавать подобный роллер, вам нужно помнить одно: Principle распознает и анимирует слои, основываясь на их имени. Это важно для анимации, чтобы она отображалась правильно. Date Picker Principle - Текстовые слои на первом артборе Текстовые слои на первом артборе Подготовьте артборд с семью или больше текстовыми слоями. Вам нужно как минимум семь слоев для одного полного цикла (пять видимых и два скрытых). Теперь установите их непрозрачность на 100%, 50%, 20%, а для двух скрытых дат 0% и измените размер шрифта. Я предлагаю прыгать на 2-4 pt. Date Picker Principle - Текстовые слои на втором артборде Текстовые слои на втором артборде Как я писал ранее, Principle распознает слои, основываясь на их имени, поэтому на втором шаге вам нужно продублировать артборды и изменить даты с названиями меток, как в приведенном выше примере.

Вывод

Пользователи любят быть вознагражденными. Приправьте свой дизайн крутыми иллюстрациями экрана успешного выполнения задачи!Переходы, подобные этому, с оригинальными движениями заставляют нас использовать функцию «Animate». Вы можете найти ее в верхнем меню. Principle анимация карточки Расположите свою карточку подтверждения с краю артборда, с непрозрачностью 0%. Кроме того, я изменил угол на -5 °, чтобы получить более плавный переход. Продублируйте артборд и установите карточку подтверждения в месте назначения с непрозрачностью 100%, сбросив ее угол до 0 °. Principle интерфейс Выберите стрелку перехода над артбордом и откройте функцию «Animate», о которой я упоминал ранее. Разверните моушн-меню, нажав на ось движения X и выберите «Spring». Вы можете настроить напряжение (Tension) и трение (Friction) по желанию, я использовал 500/30, чтобы получить мягкое движение. Principle выбор анимации Если вы хотите установить автоматический возврат в предыдущее состояние, выделите весь артборд и выберите «Авто» из списка движения. В результате экран вернется к выделенному артборду после окончания анимации.

Dribbble

Вы придумали то, чем гордитесь? Время хвастаться! Если вы знакомы с сообществом Dribbble – эта часть статьи определенно для вас. Вы много работали над своим дизайном. Будьте осторожны! Он не будет эффективен, если вы не сможете его правильно экспортировать. Ограничение размера шота Dribbble составляет 8 МБ. Это много. Или нет? Если вы используете главным образом фигуры и шрифты, этого достаточно для 10 или даже 20 секундной анимации. Если ваш дизайн основан главным образом на фотографиях и показывает множество разных экранов, это значительно увеличит вес. Для меня безопасный лимит составляет 8-10 секунд, так как он также обеспечивает легкий доступ для пользователей с медленным Интернет-соединением. Лично я предпочитаю экспортировать запись в формате .mov из Principle. Затем я импортирую ее в Photoshop 800x600px с хорошим фоном. Здесь я нажимаю export> save for web и выбираю следующие настройки: Шот, экспортированный с этой предустановкой, занял менее 3 МБ. Это довольно хороший результат для 10-секундной анимации, и качество осталось очень хорошим. Не забудьте установить опцию looping на «forever», в противном случае ваш шот будет зацикливаться только один раз и будет менее впечатляющим! Помните, что добавление восторга в ваш дизайн помогает повысить доверие пользователей. Всем нравится более продуманные проекты. Жмите , если считаете эту статью полезной! Об авторе Kamil – дизайнер в elpassion. Его странички на Dribbble и Twitter.


Перевод статьи Kamil Janus

Топ коментарі (0)