UI — это листы бумаги с нарисованными кнопками. UX – это действия пользователя. Разработка — это действия экспериментатора. Прототип — это визуализация будущего продукта, способ проверить пользовательский опыт и получить обратную связь от клиента.
Кажется, что без программистов собрать из макета рабочий прототип невозможно. На самом деле это не так — в Pixso, как и в Figma предусмотрена функция прототипирования, которая поможет вам запустить приложение и найти все ошибки сценариев до момента передачи макета разработчику.
Что такое Pixso?
Pixso — это программа для веб-дизайнеров, с помощью которой можно создавать не только прототипы, но и конечные интерфейсы сайтов и приложений. Процесс работы в программе интуитивно понятен, а возможность совместной одновременной работы над проектом привлекает все больше и больше команд.
С Pixso вы сможете свободно добавлять анимацию, и представить модель взаимодействие другим участникам команды.
Доступные функции:
- Добавление взаимодействий в указанную область
- Автоматический переход по страницам
- Интерактивная демонстрация анимации
- Онлайн-обсуждения
Широкий выбор настроек дизайна взаимодействия, с различные формами перехода: всплывающее окно, переключение, закрытие и другие команды.
- Шесть анимационных переходов
- Семь кривых смягчения
- Восемь вариантов свайпов
- Настройка времени и направления перехода
Интерфейс прототипирования Pixso
На панели настроек справа в самом верху есть три вкладки: Design, Handoff и Prototype. Все настройки прототипов находятся в Prototype.
Нажмите на опцию prototypе - прототип на правой боковой панели, чтобы перейти в режим прототипа.
Основные настройки прототипов
Device — выбор устройства, внутри которого будет отображаться прототип. От этой настройки зависит не только то, как будет выглядеть рамка, но и плавность анимации прокрутки. У Pixso есть стандартные холсты разного размера: телефон, веб-страница, планшет и холст свободного размера. Выберите один из них для быстрого прототипирования.
Background — цвет фона.
Добавление взаимодействия
Когда вы находитесь в режиме прототипа, щелкните слой во фрейме или весь фрейм, тогда в центре правой границы отобразится точка. Щелкните и перетащите точку на целевой слой, чтобы добавить взаимодействие.
После этого вы можете проверить все свойства этого взаимодействия на правой боковой панели.
Вы также можете нажать знак + в части взаимодействия, чтобы добавить его напрямую, в то время как вам нужно сделать это после выбора рамки.
Настройки события прототипа
Полное событие прототипа объединяет триггер, операцию, цель и анимацию. Вот что означает каждый элемент:
- Триггер: при каких обстоятельствах произойдет событие.
- Операция: что происходит после события.
- Цель: кто является целью действия.
- Анимация: обогащает весь процесс.
1. Trigger
Триггер определяет, когда будет активирована горячая зона, и, таким образом, обеспечивает демонстрацию прототипа.
- Одиночный щелчок и двойной щелчок
Чаще применяется для открытия ссылки или нажатия кнопки.
- При наведении курсора мыши: запуск операции при наведении курсора мыши на горячую зону.
Он всегда используется для отображения подсказки функции кнопки. Его также можно использовать для уведомления пользователей о том, что зона является интерактивной, посредством изменения статуса при наведении курсора мыши.
- При нажатии: запускает операцию, когда пользователи нажимают и нажимают на горячую зону.
Чаще используется для мобильных устройств, например, 3D Touch на устройстве iOS.
- Наведение курсора мыши: запуск операции, когда мышь попадает в горячую зону.
Чаще используется для уведомления пользователей о том, что эта горячая зона является интерактивной. Его также можно использовать для переключения информации без щелчка. Например, при проверке даты сведения о каждой дате отображаются в режиме реального времени при наведении на нее курсора мыши.
- Выход мыши: запуск операции, когда мышь покидает горячую зону.
Ситуация с его применением аналогична ситуации с наведением курсора мыши. Как правило, они будут использоваться вместе.
- Нажатие: запуск операции при нажатии на горячую точку / зону.
Всегда используется для изменяемой горячей зоны. Например, при нажатии на значок любого приложения на компьютере с Windows вы перейдете в режим выбора.
- Отпустить: запуск операции при отпускании мыши.
Чаще используется вместе с Press. Например, пользователям иногда может потребоваться перетащить полосу прокрутки для определенной цели. После этого им нужно отпустить мышь, чтобы выйти из режима выбора.
2. Operation
Определяет, какое поведение будет выполнять событие при запуске.
- Перенаправление на: перенаправление на определенный кадр при запуске события.
- Открыть окно: определенный фрейм будет открыт как всплывающее окно на текущей странице.
- Переключиться на окно: переключиться с всплывающего окна 1 на всплывающее окно 2. Обычно используется для открытия окна.
- Закрыть окно: Закрыть текущее окно.
- Возврат: возврат к предыдущему кадру.
3. Target
Цель определяет конечный пункт назначения события.
Могут отображаться лишь фреймы на текущей странице.
4. Animation
По умолчанию установлена мгновенная анимация.
Pixso поддерживает различные анимационные эффекты, вы можете комбинировать их для достижения лучшей интерактивной производительности.
Фактический результат анимации можно просмотреть с помощью функции предварительного просмотра.
Прокрутка
При выборе кадра в режиме прототипа вы можете настроить эффект прокрутки с переполнением на правой боковой панели. Pixso поддерживает 3 типа прокрутки: горизонтальную, вертикальную, а также горизонтальную и вертикальную прокрутку.
- Вертикальная прокрутка
Вертикальная прокрутка поддерживает перемещение или прокрутку вверх и вниз в рамке для имитации поведения при посещении длинной веб-страницы (приложение для покупок, приложение для новостей и так далее).
- Горизонтальная прокрутка
Поддержка горизонтальной прокрутки позволяет перемещать или прокручивать кадр влево и вправо, сохраняя при этом вертикальное положение. Обычно используется для создания скользящей зоны, такой как слайд-шоу.
- Горизонтальная и вертикальная прокрутка
Поддержка горизонтальной и вертикальной прокрутки для прокрутки в любом направлении в кадре. Он всегда используется при предварительном просмотре карты.
Совет: Чтобы использовать функцию прокрутки с переполнением, содержимое для переполнения должно превышать границу рамки.
Заключение.
Как отличить хороший прототип от плохого?
Простой чек-лист, который без каких-то знаний в области проектирования взаимодействия позволит определить, подсовывают ли вам под видом прототипа "нечто" или результат реальной работы.
Несколько важных пунктов:
- В прототипе используются только реальный контент, соответствующий теме продукта
- Вы полностью понимаете, посыл прототипа без комментариев и помощи дизайнера
- Дизайнер аргументирует каждое интерфейсное решение ссылками на результаты исследований бизнеса и пользователей