В этой главе вы познакомитесь с базовым набором взаимодействий, предоставляемым Axure при разработке экрана.
Целью Axure RP является предоставление интерактивных прототипов. Теперь, когда дело доходит до создания интерактивных прототипов, всегда есть предостережение о создании чрезмерно интерактивного прототипа. По этой причине имеет смысл начинать с одного важного взаимодействия за раз, чтобы пробежаться по остальным доступным страницам.
Axure Взаимодействия
Взаимодействия — это термин, придуманный для функциональных элементов, которые преобразуют статический каркас в интерактивный прототип с интерактивной активацией. Чтобы упростить подход к взаимодействию, Axure избавляет от необходимости кодировать прототип, предоставляя интерфейс для определения структур и логики.
При создании прототипа HTML Axure RP преобразует взаимодействия в реальный код (HTML, CSS и JavaScript). Это действует как катализатор, чтобы показать предполагаемый дизайн и взаимодействия на странице.
Как правило, взаимодействие начинается с того момента, когда взаимодействие происходит. Например, когда страница загружается в браузере, когда пользователь нажимает на один из элементов и т. Д.
Затем возникает вопрос, где на экране происходит взаимодействие. Это может быть простой элемент экрана, такой как прямоугольник, который мы хотим превратить в нажимаемую кнопку для меню (пример показан ниже).
Наконец, есть описание того, что происходит во взаимодействии. Давайте рассмотрим загрузку страницы, когда браузер загружает страницу; Вы можете просто выбрать конкретное слайд-шоу, чтобы начать или увеличить изображение при вводе на экране.
Axure Events
События в Axure могут быть двух типов, инициируемые двумя типами событий.
События уровня страницы и мастера
Когда страница загружается, происходит множество событий, извлекающих информацию о дизайне, содержание и, следовательно, выравнивание каждого элемента на экране. Поскольку эти события происходят во время начальной загрузки страницы, вы можете считать, что эти события будут повторяться при каждой загрузке страницы. Ниже приведены некоторые примеры событий уровня страницы и мастера.
- OnPageLoad
- OnWindowResize
- OnMouseMove
- OnAdaptiveViewChange
События уровня объекта или виджета
Давайте рассмотрим, мы создали страницу и определенный виджет кнопки на странице. Теперь для взаимодействия с этим виджетом кнопки, возможно, прикосновением (на мобильном прототипе) или щелчком мыши. Ниже приведены некоторые примеры событий уровня объекта или виджета.
- По щелчку
- OnMouseEnter
- OnDrag
- OnDrop
- OnMouseHover
случаи
Как обсуждалось в предыдущей главе, в разделе свойств страницы может быть разработано конкретное взаимодействие с виджетами. Это так называемые случаи . Конкретное взаимодействие может представлять собой совокупность нескольких случаев.
Давайте рассмотрим пример, чтобы понять это лучше.
Пример: Axure Prototype — Показать меню при наведении мыши
Чтобы начать с этого примера, создайте новый файл, щелкнув « Новый» в меню « Файл» или с помощью сочетания клавиш Ctrl + N.
В этом примере мы собираемся разработать простую строку меню, как это видно в большинстве программных продуктов. Структура меню будет иметь следующие элементы меню и подменю под каждым из них.
файл
- новый
- открыто
- Сохранить
- близко
редактировать
- Резать
- копия
- Вставить
- найти
- замещать
Посмотреть
- Показать строку состояния
- Панели инструментов
- Главная панель инструментов
- Панель инструментов для укладки
Помогите
- Начиная
- Использование справки
- Что это
Для начала перетащите Classic Menu — Horizontal в область дизайна. Вы найдете его в разделе «Библиотеки» → «Меню и таблицы». Назовите элемент управления как MenuBarExample. Давайте сделаем этот элемент шириной 300 пикселей и высотой 30 пикселей. Поместите его на 100 на оси X и на 30 на оси Y. Вы можете настроить эти значения на вкладке «Стиль» в разделе «Инспектор» справа.
В конце описанной выше процедуры вы сможете увидеть конечный результат, как показано на следующем снимке экрана.
Давайте также добавим имена к заголовкам меню в разделе «Инспектор». Нажмите на каждый заголовок меню и посмотрите раздел инспектора. Если имя не указано в конкретной строке меню, оно изменится на (Название пункта меню).
Назовите меню «Файл» как FileMenu .
То же самое касается редактирования как EditMenu и просмотра как ViewMenu .
Чтобы подтвердить, были ли указаны имена, щелкните каждое отдельное меню и подтвердите в разделе «Инспектор: Пункт меню». Вы сможете увидеть имена, а не (Название пункта меню).
Теперь, согласно нашему требованию, давайте заполним строку меню меню Справка. Щелкните правой кнопкой мыши заголовок строки меню — View, вы увидите контекстное меню. Нажмите Добавить пункт меню после.
Появится пустой пункт меню. Дважды щелкните пустой элемент меню и введите заголовок меню в качестве справки. Повторите процедуру, указав ее имя в разделе «Инспектор: Имя элемента меню». После завершения вы увидите область дизайна следующим образом.
Далее, давайте разработаем взаимодействие для File Menu.
Щелкните заголовок строки меню «Файл» и посмотрите «Инспектор: пункт меню».
Как показано на скриншоте выше, обратите внимание на вкладку Свойства.
На вкладке «Свойства» мы создадим взаимодействие для меню «Файл».
Добавить подменю в меню очень просто. Щелкните правой кнопкой мыши меню «Файл», в появившемся контекстном меню выберите «Добавить подменю».
Примечание. Мы также можем удалить подменю, повторив тот же шаг и щелкнув Удалить подменю.
После добавления подменю появится пустое подменю. Дважды щелкните каждый из пунктов меню и введите названия, такие как — Создать, Открыть, Сохранить.
Щелкните правой кнопкой мыши по последнему элементу подменю и добавьте еще один элемент подменю. Назовите это как Close.
Рекомендуется также указывать все пункты подменю в разделе «Инспектор». Это помогает ссылаться на них в вашем общем процессе проектирования.
При разработке этой части обратите внимание, что всякий раз, когда мы щелкаем любую другую часть области дизайна, подменю исчезает. Нам нужно нажать пункт меню Файл, чтобы просмотреть подменю.
Давайте поговорим о взаимодействии — ховер . Это взаимодействие имеет уникальное поведение срабатывания, когда указатель мыши наведен на определенный элемент. В Axure это взаимодействие автоматически реализуется с помощью Классического меню — Горизонтальное.
Чтобы увидеть взаимодействие в действии, нажмите кнопку «Просмотр» на панели инструментов. Axure откроет предварительный просмотр в браузере по умолчанию.
Наведите курсор на меню Файл. Подменю будет отображаться, как показано на следующем снимке экрана.
Если мы посмотрим на это объективно, мы только что использовали Axure для создания сложного взаимодействия, такого как наведение на пункт меню. В обычном HTML-кодировании это заняло бы от 1 до 1,5 часов времени.
В качестве задания заполните остальные меню для своих подменю.
Теперь давайте быстро создадим взаимодействие в подменю «Закрыть» в меню «Файл». Мы выделим его красным, когда зависли. Для этого щелкните правой кнопкой мыши подменю «Закрыть». Нажмите Стили взаимодействия …
На вкладке MouseOver установите флажок «Цвет заливки» и выберите красный цвет. Axure немедленно покажет предварительный просмотр в области дизайна. Предполагая, что выбран пункт Применить к разделу Выбранное меню и все подменю, все меню будет выделено красным.
Нажмите Только выбранный пункт меню. Теперь установите флажок «Цвет шрифта» и выберите белый цвет для шрифта. Предварительный просмотр будет обновлен немедленно.
Нажмите OK, чтобы завершить эту настройку.
Нажмите Preview еще раз, чтобы увидеть взаимодействие в действии.
Это завершает пример.
Вы можете попробовать следующее взаимодействие в качестве быстрого задания.
Свойство OnClick с помощью виджета кнопки.