1 - Начало

Начало работы

Quant-UX — это инструмент для прототипирования, который позволяет проектировать, тестировать и анализировать ваши визуальные дизайны. Чтобы узнать больше, используйте навигацию в правой части интерфейса.

Обзор

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

Полотно Quant-UX имеет три основных представления прототипа:

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

• Представление прототипа определяет взаимодействие между экранами и элементами. В этом представлении вы можете видеть и создавать связи между экранами. Также можно настроить определённые динамические свойства элементов ввода, например, проверку форм и привязку данных.

• Представление низкого кода позволяет определить свойства, которые важны для превращения прототипа в рабочее приложение.

Вы можете задавать переходы между экранами, которые связывают их друг с другом. Переход активируется, когда пользователь выполняет определённое действие, например, нажимает на кнопку или выполняет жест на экране.

Экраны

Чтобы создать экран, нажмите клавишу S или кликните на соответствующую иконку. Вы можете свободно размещать экран на полотне. После размещения экрана кликните на него, чтобы выбрать. На правой панели свойств вы сможете настроить имя экрана, фон (цвет или изображение). Также можно установить экран как наложение. Это означает, что экран будет отображаться поверх других экранов, что, например, удобно для создания модальных диалогов.

Виджеты

Quant-UX предлагает богатый выбор функциональных виджетов. Вы можете создать виджет, нажав клавишу W или выбрав соответствующую иконку. Для создания наиболее распространённых виджетов также можно использовать快捷键: R (прямоугольник), T (текст) или H (горячая точка). Чтобы выбрать виджет, просто кликните на него. Появится панель свойств, где вы сможете настроить внешний вид виджета. Кроме того, можно настроить определённые свойства, например, элементы в выпадающем списке.

Связи

Чтобы создать переход между экранами, необходимо связать источник (виджет или экран) с целевым экраном. Перейдите в представление прототипа, выберите виджет (или экран) и нажмите клавишу L или кнопку «Добавить действие» на панели свойств. Теперь вы можете выбрать целевой экран. После создания связи кнопка «Добавить действие» исчезнет с панели свойств, и вы сможете настроить определённые параметры связи, например, анимацию и событие пользователя, которое должно запускать переход между экранами. Для экранов также можно создавать таймированные переходы, чтобы, например, сделать заставки.

Подсказка: Чтобы упорядочить дизайн, вы можете размещать промежуточные точки (waypoints), кликая на полотно.