Учебники

Axure RP – расширенные взаимодействия

До сих пор мы знакомились с основными функциями Axure для взаимодействия. Тем не менее, будет много реальных сценариев, где прототип должен быть интеллектуальным. По слову «интеллектуальный», прототипу нужно будет определить состояние определенного виджета, чтобы выполнить действие / вызвать определенное поведение.

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

Использование переменных в Axure

Переменная , по определению, обозначает фактор, который может изменяться или изменяться. В Axure мы можем использовать переменные для представления или идентификации состояния виджета / взаимодействия.

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

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

Вот как мы это сделаем –

  • Мы создадим переменную для инициации счетчика в 0.

  • При нажатии кнопки «Показать изображение» мы будем увеличивать значение этой переменной.

  • Отобразите значение в текстовой метке.

Мы создадим переменную для инициации счетчика в 0.

При нажатии кнопки «Показать изображение» мы будем увеличивать значение этой переменной.

Отобразите значение в текстовой метке.

Для этого примера мы будем создавать текст под динамической панелью. Текст будет читать – изображение показывается 0 раз.

динамический

Критическое – важно, чтобы ярлыки были разбиты на три части. Пожалуйста, следуйте названиям этикеток и текстам, указанным в таблице.

Название ярлыка Текст метки
imageLabel Изображение показано
countLabel 0 (ноль цифрами)
timesLabel раз

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

Давайте сначала определим переменную.

Нам понадобится переменная, которая будет контролироваться при нажатии кнопки. Эта переменная в терминологии Axure – Глобальная переменная. Чтобы определить глобальную переменную, нажмите «Проект» в строке меню, а затем нажмите «Глобальные переменные». Откроется диалоговое окно, как показано на следующем снимке экрана.

проект

Нажмите на зеленый значок плюс (+), чтобы добавить глобальную переменную. Давайте назовем нашу глобальную переменную – varDynamicPanel . Его значение по умолчанию будет 0 .

При взаимодействии кнопки «Показать изображение» дважды щелкните «Случай 1». Добавьте еще одно действие. Как показано на следующем снимке экрана, действие для параметра « Установить текст в countLabel» имеет значение [[varDynamicPanel + 1]] .

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

Текстовая метка

Как указано в шаге 4 на приведенном выше снимке экрана, нажмите кнопку fx , и откроется следующее диалоговое окно.

Нажмите FX

Под первой текстовой областью введите следующую строку.

[[varDynamicPanel + 1]]

Нажмите ОК.

Теперь нам нужно убедиться, что переменная обновляется после каждого нажатия кнопки.

Каждое нажатие кнопки

В диалоговом окне редактора дел в разделе действия выберите Переменные → Задать значение переменной.

Выберите varDynamicPanel в качестве переменной.

Установите переменную для получения значения из текста на виджете в виде countLabel из доступных опций.

Закройте Редактор дел, нажав ОК. Затем нажмите кнопку «Просмотр».

После показа / скрытия изображения четыре раза, вот результат на экране предварительного просмотра.