Состояния элементов

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

Что такое логика, основанная на условиях?

Хорошо составленное описание сценария — это эффективный способ объяснить логику работы продукта или потока, который легко дополнять и изменять. Но бывают случаи, когда необходимо сделать, чтобы всё работало именно так, как будет работать в готовом приложении (это может помочь в дальнейшем проектировании или пользовательском тестировании).

К примеру, давайте представим, что нам требуется показать изображение определенного фрукта на основании выбранного значения в выпадающем списке. Вы можете создать динамическую панель с состояниями, содержащими разные изображения фруктов. Также можно настроить логику таким образом, чтобы, когда значение выпадающего списка изменяется (событие OnChange), в зависимости от выбранного пользователем значения в разных сценариях активировались разные состояния динамических панелей.

Взаимодействия и логика

Конструктор условий

Чтобы добавить условие к взаимодействию, сначала создайте сценарий внутри события. Это можно сделать во вкладке Interactions окна свойств виджета. Вверху диалога редактора сценариев, в шаге 1, есть опция “Add Condition” (Добавить условие). Нажатие по ней откроет конструктор условий.

Конструктор условий позволяет создавать различные выражения (к примеру, «Если выбранное значение выпадающего списка “Фрукты” соответствует значению “яблоко”). Используя поля ввода и выпадающие списки, можно задавать любые условия.

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

[Значение 1] + [Тип сравнения] + [Значение 2]

Первое и второе поля в каждой строке представляют собой первый сравниваемый набор, состоящий из типа переменной и самого значения (которым может быть виджет). Третье поле — это тип сравнения (где определяется, должны ли две части быть равны, не равны и так далее). Четвертое и пятое поля представляют собой второй сравниваемый набор (тип переменной и значение).

Вы можете строить условия, основанные на следующих типах переменных:

Is checked of — отмеченное состояние чекбокса или радиокнопки.

Selected option of — выбранное значение выпадающего списка или окна списка.

Value of variable — текущее значение, хранящееся в переменной.

Length of variable value — количество символов в текущем значении переменной.

Text on widget — текст, введенный в заполняемое поле.

Length of widget value — количество символов текста, введенного в поле.

State of panel — текущее состояние динамической панели.

Visibility of panel — состояние видимости динамической панели.

Text on focus widget — текст в выбранном виджете.

Drag cursor — положение курсора во время перетаскивания.

Area of widget — прямоугольная область, занимаемая виджетом (используется при перетаскивании мышкой).

В один и тот же сценарий можно добавлять дополнительные условия— для этого нажмите кнопку «+» в конце строки с выражением. К примеру, вы можете задать условие «Если текст в элементе «Ваша электронная почта» равен kiska1978@ya.ru» И «Текст в элементе «Ваш пароль» равен «moskvarulezz». Для того чтобы удалить условие, нажмите на кнопку «?».

Если вам нужно, чтобы были выполнены все условия (оператор “AND”), то в верхней части диалогового окна в выпадающем списке нужно выбрать значение “Satisfy all of the following” (удовлетворить все нижеописанное). Если должно быть выполнено только одно из условий (оператор “OR”), то нужно выбрать значение “Satisfy any of the following” (удовлетворить любое из нижеописанных). По умолчанию выбрано значение “Satisfy all of the following”.

После того, как все будет настроено, нажмите «ОК» для того чтобы вернуться в редактор сценариев и выбрать действие, которое должно быть произведено в результате выполнения условия. К примеру, после выполнения условий «Если текст в элементе «Ваша электронная почта» соответствует kiska1978@ya.ru» И «Текст в элементе «Ваш пароль» соответствует moskvarulezz», можно установить действие «Открыть страницу Оформление заказа в текущем окне».

Множественные сценарии с условиями

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

По умолчанию, в каждом дополнительном сценарии (после первого) выражение будет начинаться с “Else if”. В случае если вы добавите сценарий без условия, то все выражение будет иметь вид “Else if True”. В сгенерированном прототипе, в событии с одним условием, начинающимся с “If…” и остальными условиями, начинающимися с “Else if…”, выполнится только первый по порядку сценарий, условие которого удовлетворено.

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

Для этого измените выражение с “Else if…” на “If…” в контекстном меню сценария (внизу контекстного меню опция “Toggle IF/ELSE IF” (Переключить IF/ELSE IF). Пример использования — форма ввода, в которой каждое поле проверяется на ошибку индивидуально. На событии OnClick по кнопке “Готово” создайте сценарии с условиями “If…” для каждого поля, и покажите динамические панели, содержащие соответствующие сообщения об ошибке.

Уроки по использованию логики, основанной на условиях

Вход в аккаунт

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

Итог
Теперь вы можете создавать более реальные прототипы с логикой, основанной на условиях.