С легкостью создавайте прототипы — учебное пособие по InVision Studio

Если вы не спали в первой половине 2018 года, вы, вероятно, хорошо знали о лихорадочном ожидании в сообществе интерактивного дизайна, которое привело к выпуску приложения InVision Studio. InVision наиболее известна своими наборами плагинов для Sketch и Photoshop, такими как Craft, и тем, что является платформой для быстрого превращения статичных дизайнов интерфейсов в интерактивные и общедоступные прототипы. В прошлом году они сделали смелый шаг, объявив о разработке собственного программного обеспечения для цифрового дизайна, чтобы конкурировать с фаворитами отрасли, такими как Sketch и Figma.

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

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

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

Создайте интерактивный прототип с плавными анимированными переходами в кратчайшие сроки, следуя этому руководству по InVision Studio!

Nickel Tour по рабочему пространству InVision Studio

Большая часть Studio должна быть знакома дизайнерам пользовательского интерфейса и всем, кто использовал программное обеспечение для цифрового дизайна, такое как Sketch. Большая часть рабочего пространства заимствует реплики из пользовательского интерфейса Sketch, с левой боковой панелью, на которой размещены страницы, слои и группы; правая боковая панель для инспекторов; и контекстная панель инструментов вверху.

Вы также найдете много одинаковых инструментов, хотя некоторые функции называются по-разному. Например, «символ» Sketch называется компонентом в Studio.

Панель взаимодействия

В рамках этого руководства мы сосредоточимся на использовании инструментов взаимодействия для создания интерактивных горячих точек между экранами и создания плавных переходов между ними. Много волшебства будет происходить на «панели взаимодействия» в правой части рабочего пространства Studio.

Простой способ создать взаимодействие — выбрать триггерный слой или группу и нажать «c» на клавиатуре (или щелкнуть значок молнии на верхней панели инструментов), что инициирует синюю отмычку, с помощью которой можно выбрать экран назначения. Затем Studio предложит дизайнеру выбрать жест или пользовательский ввод, запускающий событие, и выбрать между набором предустановленных переходов или переходом «движение».

Анимация студии InVision

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

Они повышают удобство использования и могут означать разницу между любимым продуктом и запутанным беспорядком.

В этом руководстве мы используем комбинацию предустановленных переходов и переходов движения для создания прототипа нашего приложения. Предустановленные переходы довольно просты и знакомы пользователям платформы онлайн-прототипов InVision.

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

О чем следует помнить

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

Переходы движения лучше всего работают с объектами на монтажных областях, которые были продублированы один из другого. Функция анимации «умна» в том смысле, что она распознает повторяющиеся объекты с одинаковыми именами слоев, поэтому будьте осторожны, чтобы не удалять и не переименовывать ключевые слои между экранами (это очень простой способ испортить отличную анимацию).

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

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

Наконец, всегда помогает быть организованным. При создании прототипа на любой платформе, будь то Studio, Sketch или Marvel, отслеживание объектов и меток слоев сэкономит время и нервы, особенно если вы работаете в команде или в какой-то момент передаете файл. Обратите внимание на порядок слоев и групп слоев при построении взаимодействий; это часто имеет большое значение для достижения желаемого эффекта анимации.

Учебник!

Давай начнем! Если вы еще этого не сделали, перейдите в InVision Studio, чтобы загрузить раннюю версию приложения Studio. Если на вашем компьютере установлена ​​InVision Studio, загрузите учебные файлы здесь. После запуска программного обеспечения Studio выберите, чтобы открыть файл из того места, где вы его сохранили.

Шаг 1: Откройте файл и посмотрите

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

Иерархия имеет 3 уровня глубины, начиная с «Дома», затем в биографию каждого отдельного художника и, наконец, вниз до карусели из четырех примеров работ художника. Вы заметите, что на артборде «Дом» есть маленькая иконка дома, которая обозначает начальную артборд для прототипа.

Учебное пособие будет сосредоточено на создании простых путей навигации, которые соединяют эти три уровня глубины. Мы будем использовать инструменты взаимодействия и перехода Studio, чтобы прототип выглядел как правильно интерактивное приложение.

Шаг 2. Подключите плитку исполнителя к биографии исполнителя.

Перейдите к первому артборду. Найдите минутку, чтобы развернуть группу слоев «Artist Tile 1». Вы заметите три вложенные группы: одну для имени исполнителя, одну для избранного изображения и третий слой, содержащий «Биотекст».

Глядя на экран монтажной области, третья группа слоев не видна сразу из-за того, как Studio обрабатывает переходы движения, к которым мы перейдем через мгновение. Просто запишите это на данный момент.

Выберите группу слоев, содержащую все эти элементы: «Artist Tile 1». Выбрав эту группу, нажмите «c» на клавиатуре (или щелкните значок молнии на верхней панели инструментов), чтобы запустить инструмент взаимодействия. За вашим курсором будет следовать синяя кирка, чтобы выбрать экран назначения для вашего взаимодействия.

Выберите монтажную область сразу справа под названием «Artist Bio 1», и вам будет предложено выбрать триггер и тип перехода. Для триггера выберите «Касание», а затем выберите «Движение» в качестве перехода. Затем вы можете выбрать продолжительность перехода. Давайте установим этот переход на 2 секунды и нажмем «Сохранить».

Нажмите кнопку воспроизведения, чтобы просмотреть прототип. Вы видели, как предметы перемещаются по экрану и как биослой выскальзывает из-под изображения? Поздравляем — вы создали довольно плавный интерактивный переход!

Шаг 3. Подключите кнопку «Назад» к главному экрану.

Теперь мы должны дать пользователям возможность вернуться на главный экран. Перейдите на артборд «Artist Bio 1» и выберите компонент «btn_back» в левом верхнем углу. Создайте здесь триггер, нажав «c» и выбрав артборд «Home».

Опять же, давайте установим триггер на «Касание», взаимодействие на «Движение» и продолжительность на 2 секунды. Нажмите «Предварительный просмотр» и насладитесь плавными переходами открытия и закрытия, которые вы только что создали. Обратите внимание, что анимация, запускаемая закрытием плитки, представляет собой обратную анимацию, воспроизводимую при открытии плитки.

Шаг 4: Подключите галерею

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

Мы хотим применить еще один аккуратный переход движения для открытия карусельной галереи изображений. Монтажная область под названием «Художник 1 — Изображение 1» содержит элементы, скопированные с монтажной области «Художник Биография 1», размеры которых изменены, чтобы показать больше примера изображения.

Начните с нажатия на слой «Artist Bio 1», чтобы выбрать группу «Избранное изображение». Это будет триггером для открытия галереи. Создайте взаимодействие «Касание», подключившись к первой монтажной области в галерее, и выберите «Движение». На этот раз установите продолжительность немного быстрее: 1 секунда.

Чтобы создать красивый переход для закрытия галереи, просто выберите слой с кнопкой «Закрыть» на артборде «Художник 1 — Изображение 1» и соедините его обратно с артбордом «Художник Био 1» с теми же настройками, что и раньше.

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

Шаг 5: Подключите все изображения галереи

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

Шаблон взаимодействия для нашего пользователя, который пролистывает эту карусель изображений, будет знакомым жестом смахивания. Хорошей новостью является то, что эта последняя часть довольно проста и не займет много времени, используя пресеты анимации Studio.

Выберите артборд «Художник 1 — Изображение 1» и создайте взаимодействие, которое приведет к следующему артборду «Художник 1 — Изображение 2». На этот раз установите триггер на «Проведите влево». Для перехода выберите «Предустановка» и выберите «Нажать влево» в раскрывающемся списке.

Чтобы создать обратное взаимодействие, выберите монтажную область «Художник 1 — Изображение 2» и соедините ее с предыдущей монтажной областью, только на этот раз с помощью жеста «Проведите вправо» и перехода «Нажмите вправо».

Повторите этот шаблон со следующими несколькими монтажными областями, соединив монтажные области для изображения 2 с изображением 3 и изображения 3 с изображением 4. Легко!

Чтобы сделать это еще более реалистичным, давайте замкнем цикл между изображением 1 и изображением 4. Выберите монтажную область для изображения 4 и соедините его с изображением 1. Выберите триггер «Проведите влево» и переход «Нажмите влево», как если бы вы следующее изображение в серии. Соедините монтажную область изображения 1 с изображением 4 с обратной стороны и вуаля — вы создали циклическую галерею!

Наконец, выберите каждый из компонентов «btn_close» в артбордах галереи изображений и свяжите их обратно с био артбордом. Здесь вы можете выбрать любой переход, который вам нравится, но я выбрал «Нажать вправо».

К настоящему времени у вас есть довольно хорошо упорядоченный путь навигации, которым можно похвастаться. Нажмите предварительный просмотр и попробуйте; ваш прототип должен работать так же, как GIF в начале этого урока. Похлопайте себя по плечу.

Шаг 6: Повторите

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

Следующие шаги

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

Возможно, вы столкнулись с некоторыми ошибками или неожиданным поведением, но такова природа опробования нового программного обеспечения. Сотрудники InVision очень внимательно отреагировали на отзывы и определенно продолжат улучшать Studio, делая ее еще более стабильной и полезной.

Studio — это интересный инструмент, который стоит попробовать, и нет причин не экспериментировать с бесплатным инструментом для создания прототипов приложений. Хотя сегодня он вряд ли заменит привычное программное обеспечение, такое как Sketch, в сообществе дизайнеров, у него есть большой потенциал.

Дальнейшее чтение в блоге Toptal Design:

• Совершенствуйте процесс проектирования UX — руководство по дизайну прототипов
• Сила Figma как инструмента дизайна
• Прототипирование с использованием реальных данных — Учебное пособие по Framer
• Фундаментальное руководство по удобству использования мобильных устройств
• Лучшие практики и ошибки в дизайне мобильных приложений