ПРОЕКТИРУЕМ В AXURE

Екатерина Миронова

UX дизайнер, тренер

ОБО МНЕ

• Занимаюсь проектированием интерфейсов с 2009 года

• Специализируюсь на нестандартных и крупных проектах

• Участвую в полным циклом производства

• Работала со стартапами, продуктовыми компаниями, веб-студиями, UX компаниями, UX специалистами.

Mironova.Katia@gmail.com

Mironova.Katia

ПЛАН

1. Обзор возможностей

2. Общие рекомендации

3. Инструменты

4. Динамика

ОБЗОР ВОЗМОЖНОСТЕЙ

Преимущества

• Axure RP доступен как для Mac, так и

для PC.

• Быстрое создание HTML-прототипов

• Гибкая и быстрая возможность

изменений

• Простота поддержки

• Возможность выгрузки макетов в

функциональную спецификацию

• Менее «монструозен» чем Visio или

OmniGraph.

• Хорошая техническая поддержка

• Более аккуратный для показа заказчику.

Axure – это самый удобный продукт для проектирования интерактивных

прототипов.

ОБЩИЕ

РЕКОМЕНДАЦИИ

ПОДГОТОВКА

1. Не забывать о сценариях

2. Осмысленные названия элементам

3. «Горячие» клавиши

4. Автосохранение

5. Куда генерируем прототип

6. Библиотеки компонентов

7. Разрешение монитора

8. Сетки

9. Мастера

10. Подключаем динамику во время

проектирования

Бывает такое, что не всегда следуем принципам, потом отгребаем.

http://www.cmsmagazine.ru/library/items/management/15-requirements-for-the-design-of-the-prototype/

СОЧЕТАНИЕ БЫСТРЫХ КЛАВИШ

АВТОСОХРАНЕНИЕ

File>Backup Settings…

ГЕНЕРИРУЕМ ПРОТОТИП

• На компьютер

HTML-версия

СНМ-версия одним файлом

• Локальный сервер

• http://dropbox.com

• http://share.axure.com

Для запуска прототипа открываем

index.html в корневой папке.

РАБОЧАЯ ВЕРСИЯ ПРОТОТИПА

СУЩЕСТВУЮЩИЕ БИБЛИОТЕКИ

• BetterDefaults

• YahooPatterns

• iPad/iPhone

СОБСТВЕННЫЕ БИБЛИОТЕКИ

Зачем нужны?

• Упростить процесс, перейти на

«конвейер»

• Проект долгосрочный с целой

линейкой продуктов

РАЗРЕШЕНИЕ МОНИТОРА

ИСПОЛЬЗОВАНИЕ СЕТКИ

Виды

• Сетка подручными

средствами

• Сетка «со стороны»

• Встроенная сетка

Не забываем о линиях сгиба

1. СЕТКА ПОДРУЧНЫМИ

СРЕДСТВАМИ

2. СЕТКА «СО СТОРОНЫ»

• Используем созданные мастера/компоненты

• Ищем сторонние мастера

Yahoo interface patterns

…

3. ВСТРОЕННАЯ СЕТКА

Wireframe -> Grid and guides -> Create guides или

вытягиваем из линеек

Можно использовать как одиночные направляющие,

так и создать общую сетку.

МАСТЕРА

Зачем использовать? • Есть повторяющиеся участки

• Элемент должен вести себя по разному

• Делается интерактивный прототип «посценарно»/ «позадачно»

Выход одной задачи – вход другой

Собранная страница используется в нескольких местах по-разному

Как делать? • Выделяем в мастер на «ходу»

• Или через панель мастеров

ПРОЕКТИРОВАНИЕ

1. Использовать версионный контроль

• Работают больше 2 человек

• Проходит более 3 итераций

• Если проект состоит больше, чем из 20 экранов

• Нужно иметь доступ к любой версии

2. Начинать со структуры страниц (от простого к сложному)

• Стараемся рисовать в одинаковых пропорциях изображений

1:2, 1:3

0,62:0,38 (правило золотого сечение)

• Определяемся с размерами баннеров

3. Главную страницу проектируем в последнюю очередь

ВЕРСИОННЫЙ КОНТРОЛЬ

• Shared folder – папка на доступном для

нескольких человек диске

• Расшарить на дропбокс

Проблемы

• Культура использования контроля

• Хаотичность изменений

• Конкурентной работы не предусмотрено

ВЕРСИОННЫЙ КОНТРОЛЬ

Когда делать? • Нужно иметь доступ к любой версии

• Нужно отследить причины изменений (если заполняются

комментарии) Нужно писать, зачем вы изменили элемент/страницу, чтобы

понять и объяснить потом заказчику.

• Получить возможность совместной работы

• Получить возможность оперативно строить «ответвления» и

«снимать «релизы»

• Когда хочется упорядочить свою работу.

ИНСТРУМЕНТЫ

ИНТЕРФЕЙС ПРОГРАММЫ

ДЕЙСТВИЯ НАД ЭЛЕМЕНТАМИ

• Редактировать и изменять параметры

виджетов

• Использовать стили элементов

• Можно работать с несколькими

элементами одновременно

• Копировать параметры форматирования

одного виджета и применять их к другим

• Редактировать общие стили виджетов

Wireframe>Widget Style Editor…

СТИЛИ ЭЛЕМЕНТОВ

• Наведение (Rollover) — когда

курсор наводится на виджет

• Нажатие (Mouse Down) — когда по

виджету производится клик мышкой

• Выделение (Selected) — когда

виджет выделяется. Применяется

вместе с взаимодействиями.

• Отключение (Disabled) — когда

элемент отключен. А также

применяется вместе с

взаимодействиями.

СТИЛИ ЭЛЕМЕНТОВ

Окно редактирования стиля Копирование параметров элементов

• выберите нужный элемент

• нажмите на кнопку Format Painter на панели

инструментов

ДОБАВЛЕНИЕ МЕТОК

К странице К элементам

ФОРМАТИРОВАНИЕ СТРАНИЦ

ДИНАМИЧЕСКИЕ ПАНЕЛИ

Возможные действия

• Скрытие

• Изменение

• Отображение

• Перемещение

• Перетаскивание

• Создание анимации и

эффектов перехода

• Добавление прокручиваемой

области внутри панели

Edit Dynamic Panel → Show

Scrollbars as Needed

Как делать?

• Выделяем в динамическую

панель на «ходу»

Convert → Convert to Dynamic Panel.

ДИНАМИЧЕСКИЕ ПАНЕЛИ

События Окно управления в пределах одной

страницы

СОСТОЯНИЯ ДИНАМИЧЕСКИХ

ПАНЕЛЕЙ

Переключение состояний в

редакторе сценариев

Передвижение панели

ДОБАВЛЕНИЕ

ВЗАИМОДЕЙСТВИЙ

Количество взаимодействий определяется целями прототипа.

Динамика занимает в среднем в 2 раза больше времени.

Возможности

• гипертекстовые ссылки

• AJAX-поведение

• логических операции

• математические функции.

Зачем нужны

• Для тестирования прототипов

Добавляется сложная динамика по сценариям.

• Для показа заказчику основных переходов

Достаточно подключить ссылки, меню, кнопки

• Для удовольствия :)

Нет необходимости

• При горящих сроках и малом количестве экранов.

• При описании глубокой спецификации на интерфейс

• Проектируем выборочно страницы.

ВИДЫ ВЗАИМОДЕЙСТВИЙ

1. События

2. Сценарии

3. Условия

4. Действия

СОБЫТИЯ ВИДЖЕТОВ

• OnClick — нажатие мышкой на виджет (работает со всеми виджетами, за исключением динамической панели).

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

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

• OnKeyUp — при вводе текста в поле виджета отпускается клавиша на клавиатуре (текстовое поле и текстовый блок).

• OnFocus — фокус на виджет переводится при помощи клика мыши или табуляции (текстовое поле, текстовый блок, выпадающий список, списковое окно, чекбокс и радиокнопка).

• OnLostFocus — с виджета снимается фокус (текстовое поле, текстовый блок, выпадающий список, списковое окно, чекбокс и радиокнопка.)

• OnChange — в выпадающем списке или окне списка выбирается любой пункт.

СОБЫТИЯ ДИНАМИЧЕСКИХ

ПАНЕЛЕЙ

• OnMove происходит, когда

динамическая панель перемещается

• OnShow, OnHide срабатывают, когда

динамическая панель скрывается или

раскрывается.

• OnPanelStateChange срабатывает,

когда состояние динамической панели

изменяется действием Set Panel State

to State (Установить панель в

состояние)

• OnDragStart происходит во время

начала перетягивания.

• OnDrag происходит во время

перетягивания динамической панели.

• OnDragDrop происходит после того,

как динамическая панель отпущена.

ВЗАИМОДЕЙСТВИЕ ПРИ

ЗАГРУЗКЕ СТРАНИЦЫ

Например:

• выделение текущего элемента в меню

• установка динамической панели в нужное состояние

• вставка переменной в текст виджета

• отслеживание действий через глобальные переменные

авторизован ли пользователь, можно задать изменение состояния панели на

авторизирован / неавторизирован.

Событие OnPageLoad позволяет создавать взаимодействия, которые

срабатывают при загрузке страницы

ДИНАМИКА

РЕДАКТОР СЦЕНАРИЕВ

Widget Properties Pane -> вкладку Interactions -> Add Case или дважды кликните по событию =

Case Editor

ШАГ 1: ОПИСАНИЕ

Возможно добавить описание сценария

После добавления условий

ШАГ 2: ДОБАВЛЕНИЕ ДЕЙСТВИЙ

Виды действий

• Действия с ссылками

• Действия с динамическими панелями

• Действия с виджетами и переменными

• Общие действия

ШАГ 2.1: ДЕЙСТВИЯ С

ССЫЛКАМИ

• 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 — открывает

страницу в родительском фрейме. Используется

при переходе со страницы, загруженной во

встроенном фрейме..

ШАГ 2.2: ДЕЙСТВИЯ С

ДИНАМИЧЕСКИМИ ПАНЕЛЯМИ

• 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 — перемещает

динамическую панель на самый нижний слой

страницы.

ШАГ 2.3: ДЕЙСТВИЯ С

ВИДЖЕТАМИ И ПЕРЕМЕННЫМИ

• 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) — сворачивает узел в

дереве виджетов.

ШАГ 2.4: ОБЩИЕ ДЕЙСТВИЯ

• Wait Time (ms) — откладывает действия на определенное время.

• Other — показывает текстовое описание действия, например “Отправить письмо пользователю”.

ШАГ 3: ОРГАНИЗАЦИЯ

ДЕЙСТВИЙ

Столбец с выбранными действиями.

Одно действие можно добавлять несколько раз

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

в этом списке

ШАГ 4: КОНФИГУРАЦИЯ

ДЕЙСТВИЙ

Используется для настройки параметров действий

ЛОГИКА

Возможные действия

• В один и тот же сценарий можно добавлять несколько условий

• Возможно изменять значения элементов при помощи:

o взаимодействий

o переменных, математических и строковых функций.

Как делать?

1. Создаем сценарий внутри события (вкладка Interactions окна

свойств виджета Widget Properties )

2. “Add Condition” (Добавить условие).

3. Появляется окно конструктора условий (Case Editor)

КОНСТРУКТОР УСЛОВИЙ

тип переменной +само значение (которым может быть виджет)+тип сравнения +второй

сравниваемый набор

Конструктор условий позволяет создавать различные выражения

ТИПЫ ПЕРЕМЕННЫХ

• 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 — прямоугольная область,

занимаемая виджетом (используется при

перетаскивании мышкой).

КОНКРЕТНОЕ ЗНАЧЕНИЯ

• Value — статическое значение

• Value of variable — значение переменной

• Length of variable value — длина значения

переменной

• Selected option of — выбранное значение

выпадающего списка или элемента listbox

• Text on widget — текущий текст в любом

• Length of widget value — длина текущего

значения любого элемента

• Text on focused widget — текст в

выбранном элементе

МНОЖЕСТВЕННЫЕ СЦЕНАРИИ

С УСЛОВИЯМИ

ПЕРЕМЕННЫЕ

Зачем использовать?

• Нужно передать информацию с одной страницы на другую

• Когда взаимодействию одной страницы необходимо изменить

виджеты на другой странице

Виды переменных

• Локальные

• Глобальные

ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ

Wireframe → Manage Variables

ЛОКАЛЬНЫЕ ПЕРЕМЕННЫЕ

Название переменной + тип переменной + источник, из которого берется значение

переменной

ДОПОЛНИТЕЛЬНЫЕ

ВОЗМОЖНОСТИ

• Выгрузка в спецификацию

• Возможность рисования структурных схем

ПОЛЕЗНЫЕ РЕСУРСЫ

1. Официальный сайт http://www.axure.com/

2. Сообщество http://www.axureworld.org/

3. Канал Axure RP http://www.youtube.com/user/axurerp

4. Уроки по Axure на русском http://www.uxfox.ru/category/axure/

5. Библиотека элементов для Axure http://axureland.com/

6. Русскоязычные сообщества Axure

• http://ru-axurerp.livejournal.com

• http://vk.com/axure

• http://www.facebook.com/groups/256143434465197/

7. http://www.axure.com/top-5-mistakes

8. Axure 6.5: не самые заметные, но крайне полезные возможности http://bit.ly/WWaxvi

9. http://www.userfocus.co.uk/articles/confessions_of_an_axure_master.html

10. http://www.axure.com/6-tips-for-higher-fidelity

11. Пример прототипа http://share.axure.com/N7MCWS/

ПОЛЕЗНЫЕ РЕСУРСЫ

12. Сетка

• http://960.gs/

• http://960grid.ru/

• Калькулятор сеток http://www.problem.se/labs/gridcalc/

• 892 уникальных способа разделения сетки 3x4 http://www.dubberly.com/wp-content/uploads/2011/03/3x4variations-poster.pdf

• Принципы композиции и модульные сетки при проектировании сайтов http://vimeo.com/31503890

13. Набор иконок

• http://fontello.com/

• http://glyphicons.com/

• http://www.gentleface.com/free_icon_set.html

14. Ментальные модели для веб - объектов http://interruptions.net/private/misc/Roth-IwC10.htm

ПОЛЕЗНЫЕ КНИГИ

Ezra Schwartz Axure RP 6

Prototyping Essentials Mark Boulton Grids Are Good Владимир Лаптев Модульные

сетки: проектирование

многополосных изданий

ПОЛЕЗНЫЕ КНИГИ

Lennart Hennigs Axure for Mobole

Контакты для связи

Mironova.Katia@gmail.com

skype: Mironova.Katia