Как подготовить кликабельный прототип, содержащий все необходимые взаимодействия.
Сколько раз вы пытались объяснить свой отличный дизайн разработчику? Даже используя жесты, раскадровки или простые цифровые прототипы нелегко передать свое видение. Principle дает вам возможность продемонстрировать основные взаимодействия за несколько простых шагов. Прочитав эту статью, вы будете на четыре шага ближе к выражению своих идей.
Вот полноразмерный вид календаря, который я подготовил для своего мобильного приложения HUB Mobile. Во-первых, я попытался объяснить свое видение взаимодействий друзьям, используя приложение InVision, при помощи нескольких загруженных экранов. Не сработало. Затем я потратил 2 часа на подготовку этого прототипа. Наконец они поняли мою концепцию.
Начало
Есть одна вещь, которую вам нужно запомнить, если вы хотите использовать Principle. Подготовка проектов в Sketch позволит вам просто скопировать все компоненты из одного инструмента в другой, так вы сэкономите много времени. Убедитесь, что артборды в Principle имеют тот же размер, что и в Sketch. Благодаря этому все детали будут соответствовать друг другу.
Подготовка артборда Principle
После подготовки дизайна в Sketch вам нужно подумать об анимационных слоях. Каждое движение каким-то образом отличается друг от друга, но в этом случае вам нужно разделить их на две категории.
Анимация, такая как затухание или перемещение по оси y или x, не требует дополнительной работы. Вы можете просто скопировать (ctrl + c) из Sketch компоненты, в которых вы хотите использовать эту анимацию, и вставить (ctrl + v) их в артборд Principle. Однако помните, что асимметричные тени отключат опцию авто центровки. Кроме того, в Principle нет линеек.
В случае таких движений, как растяжение, закругление углов или даже изменение текста, я предлагаю вам создать с нуля эти слои в Principle. Не волнуйтесь, тексты, созданные в Principle, будут соответствовать текстам из Sketch!
Я подготовил артборд размером 750×1334 пикселей. Вся анимация, показанная выше, использует в общей сложности 9 артбордов.
Вопросы анимации
Хорошо анимированные интерфейсы помогут пользователю понять взаимосвязь между двумя экранами и подготовить его к плавному переходу от одного действия к другому, но будьте осторожны. Пользовательский интерфейс — это не диснеевский мультфильм, поэтому с умом подходите к добавлению последовательных движений.
Удобный интерфейс с помощью движения: 12 принципов UX-анимации
«Нет такого понятия, как скучный проект. Есть только скучное исполнение».
— Айрин Этцкорн
В этой части я покажу вам, как я проектирую движения в своих прототипах. Если вам нужно заполнить некоторые пробелы, связанные с основами работы в Principle, не стесняйтесь посмотрите это руководство по основам Principle.
Пошаговое руководство по анимации интерфейса в Principle и Sketch
Floating Label
Чтобы сэкономить место и обеспечить пользовательский опыт, не забудьте поддерживать контекст для пользователей, даже если они на мгновение отвлекутся.
Чтобы создать эффект плавающей метки, вам нужно подготовить три текстовых слоя: текст плейсходера (серый), текст метки (синий) и основной текст (черный).
На первом артборде вам нужно правильно установить все три текстовых слои:
- Текст плейсхолдера должен иметь 100% непрозрачности с выбранным размером шрифта, например, 32 pt.
- Текст label должен иметь 0% непрозрачности с размером шрифта и позицией такой же, как в текстовом слое плейсхолдера.
- Основной текст должен иметь 0% непрозрачности с размером шрифта и позицией, такой же, как и в текстовом слое плейсхолдера.
Продублируйте артборд и разместите эти три текстовых слоя на втором артборде:
- Текст метки должен label непрозрачность 100% с выбранным размером шрифта, например, 14 pt и настроенным в правильном положении.
- Текст плейсхолдера должен иметь непрозрачность 0% с размера шрифта, соответствующим указанному в текстовом слое метки.
- Основной текст должен иметь непрозрачность 100%.
Indicator Split
Добавьте немного красоты в свой дизайн!
На первый взгляд нет ничего особенного, но Principle не позволяет избирательно изменять радиус углов. Если вы хотите изменить только два угла, как на картинке выше, вам нужно применить к ним маску.
Создайте два прямоугольника и установите их радиус равным 100.
Затем создайте еще два слоя сверху и разместите их, чтобы они накрыли внутренние углы.
Продублируйте артборд и установите радиус угла двух наложенных сверху прямоугольников 100, а затем переместите их с правой стороны примерно на 100 точек вправо.
Date Picker
Это похоже на родной date picker iOS, но мы можем просто подстроить его под наш дизайн.
Когда вы начинаете создавать подобный роллер, вам нужно помнить одно: Principle распознает и анимирует слои, основываясь на их имени. Это важно для анимации, чтобы она отображалась правильно.
Подготовьте артборд с семью или больше текстовыми слоями. Вам нужно как минимум семь слоев для одного полного цикла (пять видимых и два скрытых). Теперь установите их непрозрачность на 100%, 50%, 20%, а для двух скрытых дат 0% и измените размер шрифта. Я предлагаю прыгать на 2−4 pt.
Как я писал ранее, Principle распознает слои, основываясь на их имени, поэтому на втором шаге вам нужно продублировать артборды и изменить даты с названиями меток, как в приведенном выше примере.
Вывод
Пользователи любят быть вознагражденными. Приправьте свой дизайн крутыми иллюстрациями экрана успешного выполнения задачи!
Переходы, подобные этому, с оригинальными движениями заставляют нас использовать функцию «Animate». Вы можете найти ее в верхнем меню.
Расположите свою карточку подтверждения с краю артборда, с непрозрачностью 0%. Кроме того, я изменил угол на -5 °, чтобы получить более плавный переход.
Продублируйте артборд и установите карточку подтверждения в месте назначения с непрозрачностью 100%, сбросив ее угол до 0 °.
Выберите стрелку перехода над артбордом и откройте функцию «Animate», о которой я упоминал ранее. Разверните моушн-меню, нажав на ось движения X и выберите «Spring». Вы можете настроить напряжение (Tension) и трение (Friction) по желанию, я использовал 500/30, чтобы получить мягкое движение.
Если вы хотите установить автоматический возврат в предыдущее состояние, выделите весь артборд и выберите «Авто» из списка движения. В результате экран вернется к выделенному артборду после окончания анимации.
Dribbble
Вы придумали то, чем гордитесь? Время хвастаться! Если вы знакомы с сообществом Dribbble — эта часть статьи определенно для вас. Вы много работали над своим дизайном. Будьте осторожны! Он не будет эффективен, если вы не сможете его правильно экспортировать.
Ограничение размера шота Dribbble составляет 8 МБ. Это много. Или нет? Если вы используете главным образом фигуры и шрифты, этого достаточно для 10 или даже 20 секундной анимации. Если ваш дизайн основан главным образом на фотографиях и показывает множество разных экранов, это значительно увеличит вес. Для меня безопасный лимит составляет 8−10 секунд, так как он также обеспечивает легкий доступ для пользователей с медленным Интернет-соединением.
Лично я предпочитаю экспортировать запись в формате .mov из Principle. Затем я импортирую ее в Photoshop 800×600px с хорошим фоном. Здесь я нажимаю export> save for web и выбираю следующие настройки:
Шот, экспортированный с этой предустановкой, занял менее 3 МБ. Это довольно хороший результат для 10-секундной анимации, и качество осталось очень хорошим. Не забудьте установить опцию looping на «forever», в противном случае ваш шот будет зацикливаться только один раз и будет менее впечатляющим!
Помните, что добавление восторга в ваш дизайн помогает повысить доверие пользователей. Всем нравится более продуманные проекты.
Жмите ❤, если считаете эту статью полезной!
Об авторе
Kamil — дизайнер в elpassion. Его странички на Dribbble и Twitter.
Нет комментариев