Как в axure сделать ссылку
В этом разделе вы узнаете о взаимодействиях (Interactions), научитесь создавать обычные гипертекстовые ссылки и использовать множественные сценарии одного взаимодействия. Это первая из двух статей посвященных взаимодействиям в Axure RP.
Знакомство с понятием взаимодействий
В Axure RP вы можете создавать огромное количество различных взаимодействий — от обычных гипертекстовых ссылок на AJAX-поведения до логических операций и математических функций.
Количество необходимых в прототипе взаимодействий определяется аудиторией и целями прототипа. Иногда вполне достаточно и простого обсуждения, однако если вы собираетесь проводить пользовательское тестирование, вам придется больше вложить в создание прототипа как можно более полно отображающего финальный результат. Прежде чем создавать сложные взаимодействия, лучше убедиться в их необходимости. Конечно, иногда использование всех опций просто приносит удовольствие.
Взаимодействия в Axure RP состоят из трех частей: событий, сценариев и действий.
События
События (Events) — это триггеры взаимодействий. Клик мышкой, наведение курсора, перетаскивание объекта — все это события. Разные типы виджетов могут относиться к разным типам событий.
Вот список событий и соответствующих им виджетов:
- OnClick— нажатие мышкой на виджет (работает со всеми виджетами, за исключением динамической панели).
- OnMouseEnter— наведение курсора мыши на виджет (изображение, текстовый блок, ссылка, кнопка или активная область изображения).
- OnMouseOut— курсор мыши убирается с виджета (изображение, текстовый блок, ссылка, кнопка или активная область изображения).
- OnKeyUp—при вводе текста в поле виджета отпускается клавиша на клавиатуре (текстовое поле и текстовый блок).
- OnFocus— фокус на виджет переводится при помощи клика мыши или табуляции (текстовое поле, текстовый блок, выпадающий список, списковое окно, чекбокс и радиокнопка).
- OnLostFocus— с виджета снимается фокус (текстовое поле, текстовый блок, выпадающий список, списковое окно, чекбокс и радиокнопка.)
- OnChange — в выпадающем списке или окне списка выбирается любой пункт.
Для динамических панелей существуют отдельные события: OnMove, OnShow, OnHide, OnPanelStateChange, OnDragStart, OnDrag и OnDragDrop. Подробнее о них можно узнать в статье «Знакомство с динамическими панелями».
Действия
Действия (Actions) — это реакции на события, определенные внутри сценария. На примере гиперссылки это выглядит так: при клике на гиперссылку страница открывается в текущем окне. Значит, заданным действием было “открыть страницу в текущем окне”. Вот список возможных действий:
Действия со ссылками:
- Open Link in Current Window — открывает другую страницу или внешний URL в текущем окне.
- Open Link in New Window/Tab— открывает другую страницу или внешний URL в новом окне или новой вкладке.
- Open Link in Popup Window — открывает другую страницу или внешний URL во всплывающем окне. Для этого окна можно задать размеры и свойства.
- Open Link in Parent Window— используется во всплывающем окне для того, чтобы изменить страницу, загруженную в родительском окне, из которого оно открыто.
- Close Current Window— закрывает текущее окно.
- Open Link(s) in Frame(s)— меняет страницу, загруженную во встроенном фрейме.
- Open Links in Parent Frame — открывает страницу в родительском фрейме. Используется при переходе со страницы, загруженной во встроенном фрейме.
Действия с динамическими панелями:
- Set Panel state(s) to State— настраивает видимость одной или нескольких динамических панелей.
- Show Panel(s)— отображает (делает видимой) одну или несколько динамических панелей.
- Hide Panel(s)— скрывает одну или несколько динамических панелей.
- Toggle Visibility— скрывает или отображает динамические панели в зависимости от их текущего статуса видимости.
- Move Panel(s)— передвигает динамическую панель в заданное место или на заданное расстояние.
- Bring Panel(s) to Front— перемещает динамическую панель на самый верхний слой страницы.
- Send Panel(s) to Back — перемещает динамическую панель на самый нижний слой страницы.
Действия с виджетами и переменными:
- Set Variable/Widget value(s) — устанавливает значение одного или нескольких переменных и/или виджетов (т.е. значение текста в виджете).
- Scroll to Image Map Region— прокручивает страницу к активной области изображения. Похоже на использование якоря или ссылки перехода.
- Enable Widget(s)— включает такие виджеты формы, как выпадающий список или текстовое поле.
- Disable Widget(s)— отключает виджеты.
- Set Widget(s) to Selected State— настраивает выбранный стиль виджета или возвращает его стандартный стиль.
- Set Focus on Widget— переводит фокус на виджет формы (например, в текстовое поле).
- Expant Tree Node(s)— разворачивает узел в дереве виджетов.
- Collapse Tree Node(s) — сворачивает узел в дереве виджетов.
Редактор сценариев
Добавление взаимодействий
Чтобы узнать возможные события для определенного виджета, выберите его нажмите на вкладку Interactions в окне свойств виджета.
Чтобы добавить сценарий, нажмите «Add Case» (Добавить сценарий) или дважды кликните по событию. После этого откроется редактор сценариев (Case Editor), в котором вы сможете выбрать и настроить нужные вам действия.
Вверху (Шаг 1: Описание (Description)) вы можете добавить описание сценария. Описание отображается в прототипе, если событию присвоено несколько сценариев, и не задана логика, по которой выбирается выполняемый сценарий.
Для того, чтобы добавить в сценарий одно или несколько действий, выберите нужные из списка слева (Шаг 2: Добавление действий (Add actions)).
Выбранные действия появятся в среднем столбце (Шаг 3: Организация действий (Organize Actions)). Одно действие можно добавлять несколько раз. Добавленные действия будут выполняться в порядке, показанном в этом списке. Например, если вы добавите действие «Установить значение переменной» после действия «Открыть ссылку в текущем окне», браузер откроет ссылку перед тем, как значение переменной поменяется.
Действия можно менять местами, перетаскивая их или при помощи контекстного меню, вызываемого нажатием на стрелочку возле действия или нажатием на правую кнопку мыши.
Чтобы в правой колонке настроить параметры действия, выберите его в Шаге 3 (Шаг 4: Конфигурация действий (Configure actions)).
После того, как вы закончите, нажмите ОК и добавленные сценарии и действия появятся в окне настройки виджетов.
Установка множественных сценариев
Возможны случаи, когда вам потребуется сделать так, чтобы одно событие в разных случаях вызывало разные сценарии. Чтобы задать событию дополнительные сценарии, повторите те же шаги, что и при добавлении сценария. Вы можете использовать поле Description, чтобы описать сценарий. Например, при совершении события OnClick на кнопке, вы можете создать два сценария с описаниями «Успешная авторизация» и «Неудачная авторизация». Клик по кнопке в прототипе покажет описания, и пользователь прототипа сможет выбрать одно из двух возможных действий.
Грамотно прописанные описания сценариев — это эффективный способ передать словами логику работы веб-сайта. Кроме того, описания легко исправлять. Если вам нужно, чтобы в прототипе нужный сценарий выбирался автоматически, вы можете задать логику, согласно которой выполняемые сценарии будут выбираться на основе значений переменных или данных, введенных пользователем в сгенерированном прототипе. Подробнее о логике смотрите в статье «Логика условий» («Conditional Logic»).
Уроки по работе с простыми взаимодействиями
Простая ссылка на страницу
Этот урок описывает как создать простую ссылку, открывающую другую страницу в текущем окне браузера.
Несколько сценариев
В данном уроке описан процесс добавления нескольких сценариев выполнения одного действия и редактирования описаний, которые будут показывать пользователю различные результаты выполнения входа в систему. (Перейти на страницу урока)
Создание якоря
В этом уроке виджет «Активная область изображения» (Image Map Region) и действие «Прокрутка к активной области изображения» (Scroll to Image Map Region) используются для создания якоря к странице.
Итог
Теперь ваш макет стал интереснее благодаря ссылкам и множественным сценариям.
При создании прототипов с осей нам часто нужно сделать скачок ссылки. Здесь даст вам ряд различных способов установки текстовой связи.
Давайте установимся в том же примере.
Когда мы регистрируем некоторые веб-сайты или приложения, мы часто видим аналогичную подсказку. Нажмите «Протокол конфиденциальности пользователя», чтобы открыть страницу протокола конфиденциальности пользователя для просмотра.
Есть несколько способов быть в осей.
Во-первых, настройки сегментации
Настройка сегментации заключается в том, чтобы сказать, что часть щелчков, протокол конфиденциальности пользователей »независимо открыта с другими словами соответственно, которые принадлежат различным компонентам.
Затем установите ссылку на текст «Протокол конфиденциальности пользователя», вы можете добраться до наших ожидаемых результатов.
Во-вторых, использование компонентов охвата
Что значит покрыть? Как это покрыто?
В этом простом примере текст появляется в виде компонента. Вот и все:
Затем один компонент, прозрачный прямоугольник, тепловая зона и т. Д. Напечатаны на тексте, который необходимо связать. Вот «Соглашение о конфиденциальности пользователя».
Наконец, скачок ссылки устанавливается на компонент прямоугольной или горячей зоны, и настройка является простейшим взаимодействием с первым методом.
Этот метод также является широко используемым и гибким подходом, в дополнение к тексту, во многих случаях мы можем сделать быстрое взаимодействие с горячей зоной.
Третий, гиперссылка текста
1. Первая открытая осей, создайте текст гиперссылки. Элементы гиперссылки не ограничены текстом, вы можете использовать любые запчасти, текст, изображения, графики или другие, которые вы хотите. Вот «Соглашение о конфиденциальности пользователя» в небольшом примере здесь.
2, установите стиль гиперссылки - эффект зависания мыши. Выберите Text «Протокол конфиденциальности пользователей», нажмите на маленький значок за «текстовой ссылкой», откройте панель настройки гиперссылки.
3, всплывающая панель настройки гиперссылки, выберите страницу гиперссылки или адрес URL. Здесь мы выбираем или страницу «Соглашение о конфиденциальности пользователя». После завершения выбора нажмите OK, чтобы закрыть панель настроек.
4. После его установки он изменился по сравнению с исходным стилем.
Если вы посмотрите на этот стиль текста, если вы хотите выполнить настройки гиперссылки, не интерактивные настройки. В настройках взаимодействия вы не можете видеть настройки, вы должны обратить внимание.
5, окончательный превью, посмотрите, является ли эффект таким же, как и другие методы.
Кратко представляется метод изготовления текста в осере, вы можете выбрать подходящий способ в соответствии с вашими собственными фактическими потребностями и привычками использования.
Интеллектуальная рекомендация
Michael.W Поговорите о Hyperledger Fabric. Проблема 20 - Подробная индивидуальная сортировка узла с пятью порядками с исходным кодом для чтения.
Michael.W Поговорите о Hyperledger Fabric. Проблема 20 - Подробная индивидуальная сортировка узла с пятью порядками с исходным кодом чтения Fabric Файл исходного кода одиночного режима находится в ord.
Мяу Пасс Матрица SDUT
Мяу Пасс Матрица SDUT Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description Лянцзян получил матрицу, но эта матрица была особенно уродливой, и Лянцзян испытал отвращение. Чт.
Гессенская легкая двоичная структура удаленного вызова
Hessian - это легкая двоичная структура удаленного вызова, официальный адрес документа, в основном он включает протокол удаленного вызова Hessian, протокол сериализации Hessian, прокси-сервер клиента .
TCP Pasket и распаковка и Нетти Solutions
Основные введение TCP является ориентированным на соединение, обеспечивая высокую надежность услуг. На обоих концах (клиенты и терминалы сервера) должны иметь один или более гнезда, так что передающий.
Многие пользователи программы Axure поначалу сталкивались с такой проблемой, как оформление псевдоссылок. Дело в том, что по умолчанию софтина не позволяет делать ссылки (или текст, что, в принципе, — одно и то же) подчёркнутыми пунктиром. Поэтому у начинающих творцов прототипов (прототипистов?) периодически можно увидеть псевдоссылки со сплошным подчёркиванием, что вносит в документ путаницу. На самом деле решить эту задачу очень просто.
1. В панели виджетов выбираем ссылку (Hyperlink);
2. Помещаем её в нашу рабочую область;
3. Снимаем подчёркивание;
4. В панели виджетов выбираем горизонтальную линию (Horisontal line);
5. Перетаскиваем её в нашу рабочую область, меняем цвет и делаем пунктирной;
6. Увеличив масштаб рабочей области, подгоняем под нашу ссылку (теперь псевдоссылку). Я обычно оставляю зазор между текстом и линией всего в один пиксель;
7. Любуемся результатом
Ребятушки, от вашей активности в этом посте будет понятно, стот ли делиться подобными «мелочами» по этой узкоспециализированной теме или же сия информация мало кому интересна.
Axure RP — удобный инструмент для создания интерактивных прототипов. Чтобы прототипировать простые сайты, которые можно открыть в браузере и обсудить с заказчиком, достаточно изучить интерфейс программы и ее базовые возможности.
Что такое прототип сайта
Прототип — это детальная схема сайта. Он помогает продумать структуру страниц и разделов, расположение информационных блоков на каждой странице, а также согласовать сайт с заказчиком.
Обычно прототип создают черно-белым. Такой прием используют, чтобы сфокусироваться на структуре сайта и расположении информации, а не на красивом оформлении.
Как сделать прототип сайта
В статье «Скетчинг: как нарисовать сайт на бумаге» мы придумали структуру страницы для компании, которая продает строительные блоки.
Скетч — это примерный план информации на странице. На его основе можно создать кликабельный прототип. Для этого нужно точно продумать структуру сайта, информационные блоки на страницах и расположение элементов.
Прототип удобно делать в программе Axure RP. Это полноценный инструмент для создания сложных прототипов сайтов и приложений. Ответом на вопрос, как сделать прототип сайта самому, будет простой совет: освоить Axure и разобраться в интерфейсе и его базовых функциях.
Создаем новый проект в Axure RP
Рассмотрим создание прототипа на примере сайта для компании с блогом. Необходимые страницы для такого сайта — главная, блог и запись в блоге.
Чтобы начать работать, создаем новый проект: File –> New . По умолчанию Axure откроет новый проект с тремя пустыми страницами. Переименуем их под структуру будущего сайта.
Для того, чтобы поменять имя страницы, достаточно кликнуть правой кнопкой мыши на название страницы в окне Pages и выбрать пункт Rename .
Сетка и ширина экрана
Современные сайты проектируют для разных устройств: смартфонов, планшетов, компьютеров и ноутбуков. У каждого из устройств разный размер и разрешение экрана, поэтому дизайнер обычно рисует несколько макетов одного и того же сайта разного размера.
Для простоты мы будем создавать прототип для экрана шириной 1140px и больше. Чтобы все элементы будущего сайта выглядели лаконично и ровно, при проектировании будем использовать сетку из CSS-фреймворка Bootstrap 4.
Зададим вручную нужную ширину экрана с помощью направляющей: ее можно вытащить из линейки справа от рабочей области. Работает это так же, как и в Photoshop.
Слово прототипирование очень распространено и актуально для людей, занимающихся разработкой программного обеспечения, а также архитектурной разработкой. Когда дело доходит до архитектурного развития, в Египте есть прототипы Великих пирамид Гизы. Они были построены с (конечно) меньшей версией, чтобы получить согласие или одобрение правителя.
Этот небольшой, но значимый пример точно иллюстрирует цель прототипа. Согласно Википедии, прототипом является «первая или предварительная версия устройства или транспортного средства, из которого разработаны другие формы».
Для мира разработки программного обеспечения определение можно адаптировать как предварительную версию страницы, экрана или функциональности, которая поддерживает другую разработку, эффективно визуализируя элементы экрана и демонстрируя взаимодействия. Это определение включает в себя наиболее важную часть, взаимодействие.
При разработке программного обеспечения для разработки части функциональности или самой полной функциональности требуются значительные инвестиции с точки зрения времени и усилий. Это бесконечный процесс разработки, проверки и исправления проблем в соответствии с отзывами клиентов.
Большинство компаний-разработчиков программного обеспечения хотят, чтобы этот процесс был максимально быстрым. Следовательно, они не идут вперед с усилиями и временными затратами от всех членов команды. Вместо этого они делают умный ход, наняв инженера пользовательского опыта (UX), который обладает навыками визуализации конкретной функции. Это приводит их к водительскому креслу при разработке продукта.
По сути, прототипирование требуется для моделирования и визуализации требований к программному обеспечению на самых ранних этапах разработки. Этот процесс в конечном итоге становится выгодным как для компаний-разработчиков программного обеспечения, так и для клиентов, поскольку он уменьшает неизвестность в функции, тем самым обеспечивая правильное направление развития.
Правильная фаза для разработки прототипа
В нынешнюю эпоху разработки программного обеспечения высокого профиля в общей таблице жизненного цикла разработки программного обеспечения было много достижений. Эти достижения связаны с технологиями, а также с ролью / положением конкретного члена команды в жизненном цикле. Одна такая позиция начала набирать обороты, которая называется UX инженер.
Инженер UX оснащен набором навыков, который выгоден для клиентов. Используя различные методы или шаги, чтобы лучше узнать клиента, инженер UX может получить хорошее представление о том, что пользователь ожидает от данного программного продукта.
Обычно, когда происходит процесс сбора требований, технологические компании привлекают инженеров UX, чтобы выйти на рынок, чтобы понять, что нужно пользователю. С последним трендом Responsive Web XDesign и Mobile-First подход к разработке программного обеспечения, может быть ряд областей, на которых хочется сосредоточить свое внимание. Инженер UX использует такие процессы, как пользовательские интервью, обзоры рынка, чтобы знать пульс своей целевой аудитории.
Этот процесс занимает много времени, а также важен, поскольку он дает возможность программному продукту увидеть его пригодность на рынке. Эти шаги используются при сборе требований к программному обеспечению и их выявлении. Это идеальный этап, поскольку он снижает общую стоимость разработки. Однако, когда программный продукт является зрелым, можно ввести этап исследования UX, чтобы измерить жизнеспособность производимого усовершенствования.
Для инженеров UX процесс понимания их пользовательской базы не ограничивается только получением информации от клиента или связанных разговоров. Есть несколько интересных шагов, которые они должны предпринять, чтобы понять, чего хочет пользователь. Настоящая работа начинается тогда, когда ему становится ясно, что пользователь может ожидать от программного продукта.
Как только становятся доступны некоторые данные о том, как пользователь воспринимает предстоящее программное обеспечение или усовершенствование существующего программного обеспечения, инженер UX возвращается в свое логово, чтобы разработать пользовательский интерфейс для них. Традиционно или в качестве общего подхода, когда кто-то говорит о дизайне, это означает программное обеспечение, такое как Adobe Photoshop, CorelDraw или даже Microsoft Paint. Иногда, чтобы быстро вернуться к пользователям, дизайнеры UX используют старые добрые ручки и бумагу для проектирования интерфейсов.
Введите Axure, современное программное обеспечение для разработки красивых пользовательских интерфейсов и взаимодействий. Axure существует уже около десяти лет, чтобы позволить инженерам UX с легкостью добраться до деталей создания прототипа программного обеспечения. Axure, помимо того, что является инструментом для создания прототипов, имеет мощное сообщество, вносящее свой вклад в мир UX с множеством примеров и умелых взаимодействий.
- Диаграммы и документация
- Эффективное прототипирование с динамическим контентом
- Условные потоки
- Красивые анимации для улучшения взаимодействия
- Адаптивные виды
- Поддержка на Windows и Mac
Для быстрого создания прототипов Axure RP предоставляет разнообразный набор инструментов и методов, которые всегда помогают инженерам-аналитикам / пользовательскому интерфейсу визуализировать конечную цель.
Благодаря сильному сообществу, которое всегда готово оказать помощь, Axure RP становится предпочтительным инструментом для энтузиастов и практиков UX.
После установки Axure вам будет представлен интерфейс, как показано на следующем снимке экрана.
Этот экран всегда будет отображаться при запуске, пока вы не решите не показывать его.
- Начать новый файл в Axure
- Откройте существующий проект Axure
Давайте теперь создадим новый файл с Axure.
Когда вы нажмете кнопку «НОВЫЙ ФАЙЛ», вы увидите следующий экран для создания нового прототипа.
Как показано на рисунке выше, рабочее пространство разделено на 6 частей.
- страницы
- Библиотеки
- Инспектор
- Контур
- Мастера
- Площадь дизайна
Давайте пройдемся по этим частям по очереди.
страницы
В этом разделе показаны страницы, над которыми вы работаете. Эти страницы отображаются в древовидной структуре по умолчанию следующим образом. Домашняя страница имеет следующие дочерние страницы.
Главная
Как и большинство доступных инструментов, этот раздел позволяет вам взаимодействовать со страницами вашего прототипа. Вы можете использовать его для планирования экранов в предполагаемом прототипе.
Панель библиотек
Общие библиотеки включают в себя основные фигуры, кнопки, текст заголовка, Hot Spot, панель Dynamic и т. Д.
С Axure RP, для всех ваших требований к прототипированию, появляется очень эффективный контроль, называемый Hot Spot. Используя этот элемент управления, вы можете обеспечить взаимодействие щелчка практически с любым элементом управления в пользовательском интерфейсе. Пример будет приведен на последующих страницах.
В библиотеку форм, как следует из названия, включены элементы управления List Box, Checkbox, переключатель, текстовая область и текстовое поле. Для разработки формы пользовательского ввода вы можете использовать элементы управления из этого раздела в библиотеке.
Меню и таблицы имеют традиционную структуру. Такая структура, возможно в горизонтальной или вертикальной форме, доступна в этой библиотеке, называемой Меню и таблицы.
Наконец, что не менее важно, идет библиотека разметки, которая включает в себя стикеры, маркеры и стрелки. В основном, это будет использоваться для аннотаций в вашем прототипе.
Площадь дизайна
Это настоящая площадка для инженеров UX. Это пространство будет использоваться для создания прототипов в соответствии с вашими требованиями. Для начала обратитесь к области, выделенной цифрой 6 на следующем скриншоте.
В этой области вы можете перетащить нужные элементы управления из библиотеки. Давайте создадим быструю строку меню, используя библиотеку.
Как только вы перетащите элемент управления в область дизайна, вы увидите следующий экран.
Как показано на приведенном выше экране, Axure RP достаточно интеллектуален, чтобы отображать нужный текст в меню. Учитывая, что это строка меню, Axure RP автоматически создал File, Edit и View как меню в элементе управления.
Как указано стрелкой, в разделе инспектора отображаются свойства элемента управления. Используйте этот раздел, чтобы создать имя для вашего элемента управления для уникальной идентификации при создании сложных прототипов.
Давайте дадим имя этому элементу управления TestMenu. Мы будем использовать это имя в следующих примерах.
Свойства страницы
При планировании прототипа имеет смысл иметь четкое представление о пользователе и, следовательно, об устройстве, на котором будет демонстрироваться / просматриваться прототип. Для лучшего взаимодействия с прототипом в Axure предусмотрена функция настройки свойств страницы.
Как показано на рисунке выше, область, обозначенная цифрой 3, является разделом свойств страницы. В этом разделе вы сможете увидеть выпадающий список взаимодействий и подраздел Adaptive.
Давайте обсудим эти разделы подробно.
В разделе «Взаимодействия» рассматриваются возможные взаимодействия (случаи) со страницей. Как видите, случай взаимодействия OnPageLoad обрабатывает события при загрузке страницы. В большинстве прототипов инженеры UX предпочитают помещать анимацию, чтобы произвести первое впечатление. Это конкретное событие для отображения анимации обычно вызывается в случае OnPageLoad.
Благодаря адаптивному разделу Axure RP начинает адаптивный веб-дизайн. В настоящее время разработка опыта для веб-сайтов не является достаточной, наряду с этим, предприятия предпочитают, чтобы мобильные сайты сосуществовали с веб-сайтами.
Одна и та же страница, если смотреть с разных размеров экрана и макетов, представляет собой разные адаптивные виды. Как правило, адаптивные представления предназначены для мобильных телефонов и планшетов. Axure предоставляет эту функцию адаптивных представлений, так что инженеры UX могут контролировать адаптивный аспект прототипов с нуля.
Панель инспектора для виджета
Панель взаимодействий виджетов является наиболее важной частью Axure. Вы можете увидеть эту панель, щелкнув любой виджет в области дизайна.
Рассмотрим пример пункта меню, который мы использовали в предыдущем разделе. Выберите пункт меню с именем TestMenu и обратите внимание на раздел, выделенный на следующем снимке экрана.
Как вы можете видеть на вкладке Свойства, существуют различные взаимодействия, такие как OnMove, OnShow, OnHide и OnLoad. Они относятся к элементу управления меню в целом.
Теперь нажмите «Файл» в элементе управления меню.
Вы заметите изменение типа взаимодействий на панели свойств виджета. Кроме того, он предоставляет гибкость, чтобы дать имя для этого пункта меню. Давайте возьмем случай OnClick в качестве примера.
Панель «Примечания». В самой панели инспектора имеется подраздел «Примечания». В области заметок вы сможете добавить некоторые запоминающиеся моменты для управления по вашему выбору.
Эти моменты будут понятны, когда мы погрузимся в пример в следующей главе.
Сетки и направляющие
Для прототипа с максимальным уровнем качества и точности инженерам UX требуется умение совмещать / позиционировать элемент управления с другим элементом управления.
Например, предположим, что вы хотите показать всплывающее окно входа в систему. Если это всплывающее окно должно отображаться в центре экрана, вам нужны общие размеры экрана. Кроме того, чтобы выровнять точно в середине экрана, у вас должны быть сетки, чтобы выровнять его соответствующим образом.
Axure предоставляет функцию гридов и направляющих, что позволяет эффективно использовать область проектирования.
Чтобы увидеть доступные сетки и направляющие, щелкните правой кнопкой мыши область дизайна, и появится контекстное меню, показанное на следующем снимке экрана.
Теперь позвольте нам понять доступные варианты.
Мы рассмотрим варианты, которые обычно используются для руководства.
В этой главе вы познакомитесь с базовым набором взаимодействий, предоставляемым Axure при разработке экрана.
Целью Axure RP является предоставление интерактивных прототипов. Теперь, когда дело доходит до создания интерактивных прототипов, всегда есть предостережение о создании чрезмерно интерактивного прототипа. По этой причине имеет смысл начинать с одного важного взаимодействия за раз, чтобы пробежаться по остальным доступным страницам.
Axure Взаимодействия
При создании прототипа HTML Axure RP преобразует взаимодействия в реальный код (HTML, CSS и JavaScript). Это действует как катализатор, чтобы показать предполагаемый дизайн и взаимодействия на странице.
Как правило, взаимодействие начинается с того момента, когда взаимодействие происходит. Например, когда страница загружается в браузере, когда пользователь нажимает на один из элементов и т. Д.
Затем возникает вопрос, где на экране происходит взаимодействие. Это может быть простой элемент экрана, такой как прямоугольник, который мы хотим превратить в нажимаемую кнопку для меню (пример показан ниже).
Наконец, есть описание того, что происходит во взаимодействии. Давайте рассмотрим загрузку страницы, когда браузер загружает страницу; Вы можете просто выбрать конкретное слайд-шоу, чтобы начать или увеличить изображение при вводе на экране.
Axure Events
События в Axure могут быть двух типов, инициируемые двумя типами событий.
События уровня страницы и мастера
Когда страница загружается, происходит множество событий, извлекающих информацию о дизайне, содержание и, следовательно, выравнивание каждого элемента на экране. Поскольку эти события происходят во время начальной загрузки страницы, вы можете считать, что эти события будут повторяться при каждой загрузке страницы. Ниже приведены некоторые примеры событий уровня страницы и мастера.
- OnPageLoad
- OnWindowResize
- OnMouseMove
- OnAdaptiveViewChange
События уровня объекта или виджета
Давайте рассмотрим, мы создали страницу и определенный виджет кнопки на странице. Теперь для взаимодействия с этим виджетом кнопки, возможно, прикосновением (на мобильном прототипе) или щелчком мыши. Ниже приведены некоторые примеры событий уровня объекта или виджета.
- По щелчку
- OnMouseEnter
- OnDrag
- OnDrop
- OnMouseHover
случаи
Как обсуждалось в предыдущей главе, в разделе свойств страницы может быть разработано конкретное взаимодействие с виджетами. Это так называемые случаи . Конкретное взаимодействие может представлять собой совокупность нескольких случаев.
Давайте рассмотрим пример, чтобы понять это лучше.
Чтобы начать с этого примера, создайте новый файл, щелкнув « Новый» в меню « Файл» или с помощью сочетания клавиш Ctrl + N.
В этом примере мы собираемся разработать простую строку меню, как это видно в большинстве программных продуктов. Структура меню будет иметь следующие элементы меню и подменю под каждым из них.
редактировать
- Показать строку состояния
- Панели инструментов
- Главная панель инструментов
- Панель инструментов для укладки
- Начиная
- Использование справки
- Что это
В конце описанной выше процедуры вы сможете увидеть конечный результат, как показано на следующем снимке экрана.
Читайте также: