Презентация по курсу «Проектирования в Axure»
3 likes4,797 views
Документ представляет собой руководство по проектированию интерфейсов с использованием Axure, написанное Екатериной Мироновой, опытным UX-дизайнером. В нем рассматриваются возможности программы, общие рекомендации по подготовке и проектированию интерактивных прототипов, а также инструменты и динамика работы с виджетами и переменными. Документ также включает полезные ресурсы и ссылки для дальнейшего изучения.
Презентация по курсу «Проектирования в Axure»
- 1. ПРОЕКТИРУЕМ В AXURE Екатерина Миронова UX дизайнер, тренер
- 2. ОБО МНЕ • Занимаюсь проектированием интерфейсов с 2009 года • Специализируюсь на нестандартных и крупных проектах • Участвую в полным циклом производства • Работала со стартапами, продуктовыми компаниями, веб-студиями, UX компаниями, UX специалистами. [email protected] Mironova.Katia
- 3. ПЛАН 1. Обзор возможностей 2. Общие рекомендации 3. Инструменты 4. Динамика
- 4. ОБЗОР ВОЗМОЖНОСТЕЙ Преимущества • Axure RP доступен как для Mac, так и для PC. • Быстрое создание HTML-прототипов • Гибкая и быстрая возможность изменений • Простота поддержки • Возможность выгрузки макетов в функциональную спецификацию • Менее «монструозен» чем Visio или OmniGraph. • Хорошая техническая поддержка • Более аккуратный для показа заказчику. Axure – это самый удобный продукт для проектирования интерактивных прототипов.
- 6. ПОДГОТОВКА 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/
- 9. ГЕНЕРИРУЕМ ПРОТОТИП • На компьютер HTML-версия СНМ-версия одним файлом • Локальный сервер • http://dropbox.com • http://share.axure.com Для запуска прототипа открываем index.html в корневой папке.
- 11. СУЩЕСТВУЮЩИЕ БИБЛИОТЕКИ • BetterDefaults • YahooPatterns • iPad/iPhone
- 12. СОБСТВЕННЫЕ БИБЛИОТЕКИ Зачем нужны? • Упростить процесс, перейти на «конвейер» • Проект долгосрочный с целой линейкой продуктов
- 14. ИСПОЛЬЗОВАНИЕ СЕТКИ Виды • Сетка подручными средствами • Сетка «со стороны» • Встроенная сетка Не забываем о линиях сгиба
- 16. 2. СЕТКА «СО СТОРОНЫ» • Используем созданные мастера/компоненты • Ищем сторонние мастера Yahoo interface patterns …
- 17. 3. ВСТРОЕННАЯ СЕТКА Wireframe -> Grid and guides -> Create guides или вытягиваем из линеек Можно использовать как одиночные направляющие, так и создать общую сетку.
- 18. МАСТЕРА Зачем использовать? • Есть повторяющиеся участки • Элемент должен вести себя по разному • Делается интерактивный прототип «посценарно»/ «позадачно» Выход одной задачи – вход другой Собранная страница используется в нескольких местах по-разному Как делать? • Выделяем в мастер на «ходу» • Или через панель мастеров
- 19. ПРОЕКТИРОВАНИЕ 1. Использовать версионный контроль • Работают больше 2 человек • Проходит более 3 итераций • Если проект состоит больше, чем из 20 экранов • Нужно иметь доступ к любой версии 2. Начинать со структуры страниц (от простого к сложному) • Стараемся рисовать в одинаковых пропорциях изображений 1:2, 1:3 0,62:0,38 (правило золотого сечение) • Определяемся с размерами баннеров 3. Главную страницу проектируем в последнюю очередь
- 20. ВЕРСИОННЫЙ КОНТРОЛЬ • Shared folder – папка на доступном для нескольких человек диске • Расшарить на дропбокс Проблемы • Культура использования контроля • Хаотичность изменений • Конкурентной работы не предусмотрено
- 21. ВЕРСИОННЫЙ КОНТРОЛЬ Когда делать? • Нужно иметь доступ к любой версии • Нужно отследить причины изменений (если заполняются комментарии) Нужно писать, зачем вы изменили элемент/страницу, чтобы понять и объяснить потом заказчику. • Получить возможность совместной работы • Получить возможность оперативно строить «ответвления» и «снимать «релизы» • Когда хочется упорядочить свою работу.
- 22. ИНСТРУМЕНТЫ
- 24. ДЕЙСТВИЯ НАД ЭЛЕМЕНТАМИ • Редактировать и изменять параметры виджетов • Использовать стили элементов • Можно работать с несколькими элементами одновременно • Копировать параметры форматирования одного виджета и применять их к другим • Редактировать общие стили виджетов Wireframe>Widget Style Editor…
- 25. СТИЛИ ЭЛЕМЕНТОВ • Наведение (Rollover) — когда курсор наводится на виджет • Нажатие (Mouse Down) — когда по виджету производится клик мышкой • Выделение (Selected) — когда виджет выделяется. Применяется вместе с взаимодействиями. • Отключение (Disabled) — когда элемент отключен. А также применяется вместе с взаимодействиями.
- 26. СТИЛИ ЭЛЕМЕНТОВ Окно редактирования стиля Копирование параметров элементов • выберите нужный элемент • нажмите на кнопку Format Painter на панели инструментов
- 27. ДОБАВЛЕНИЕ МЕТОК К странице К элементам
- 29. ДИНАМИЧЕСКИЕ ПАНЕЛИ Возможные действия • Скрытие • Изменение • Отображение • Перемещение • Перетаскивание • Создание анимации и эффектов перехода • Добавление прокручиваемой области внутри панели Edit Dynamic Panel → Show Scrollbars as Needed Как делать? • Выделяем в динамическую панель на «ходу» Convert → Convert to Dynamic Panel.
- 30. ДИНАМИЧЕСКИЕ ПАНЕЛИ События Окно управления в пределах одной страницы
- 31. СОСТОЯНИЯ ДИНАМИЧЕСКИХ ПАНЕЛЕЙ Переключение состояний в редакторе сценариев Передвижение панели
- 32. ДОБАВЛЕНИЕ ВЗАИМОДЕЙСТВИЙ Количество взаимодействий определяется целями прототипа. Динамика занимает в среднем в 2 раза больше времени. Возможности • гипертекстовые ссылки • AJAX-поведение • логических операции • математические функции. Зачем нужны • Для тестирования прототипов Добавляется сложная динамика по сценариям. • Для показа заказчику основных переходов Достаточно подключить ссылки, меню, кнопки • Для удовольствия :) Нет необходимости • При горящих сроках и малом количестве экранов. • При описании глубокой спецификации на интерфейс • Проектируем выборочно страницы.
- 33. ВИДЫ ВЗАИМОДЕЙСТВИЙ 1. События 2. Сценарии 3. Условия 4. Действия
- 34. СОБЫТИЯ ВИДЖЕТОВ • OnClick — нажатие мышкой на виджет (работает со всеми виджетами, за исключением динамической панели). • OnMouseEnter — наведение курсора мыши на виджет (изображение, текстовый блок, ссылка, кнопка или активная область изображения). • OnMouseOut — курсор мыши убирается с виджета (изображение, текстовый блок, ссылка, кнопка или активная область изображения). • OnKeyUp — при вводе текста в поле виджета отпускается клавиша на клавиатуре (текстовое поле и текстовый блок). • OnFocus — фокус на виджет переводится при помощи клика мыши или табуляции (текстовое поле, текстовый блок, выпадающий список, списковое окно, чекбокс и радиокнопка). • OnLostFocus — с виджета снимается фокус (текстовое поле, текстовый блок, выпадающий список, списковое окно, чекбокс и радиокнопка.) • OnChange — в выпадающем списке или окне списка выбирается любой пункт.
- 35. СОБЫТИЯ ДИНАМИЧЕСКИХ ПАНЕЛЕЙ • OnMove происходит, когда динамическая панель перемещается • OnShow, OnHide срабатывают, когда динамическая панель скрывается или раскрывается. • OnPanelStateChange срабатывает, когда состояние динамической панели изменяется действием Set Panel State to State (Установить панель в состояние) • OnDragStart происходит во время начала перетягивания. • OnDrag происходит во время перетягивания динамической панели. • OnDragDrop происходит после того, как динамическая панель отпущена.
- 36. ВЗАИМОДЕЙСТВИЕ ПРИ ЗАГРУЗКЕ СТРАНИЦЫ Например: • выделение текущего элемента в меню • установка динамической панели в нужное состояние • вставка переменной в текст виджета • отслеживание действий через глобальные переменные авторизован ли пользователь, можно задать изменение состояния панели на авторизирован / неавторизирован. Событие OnPageLoad позволяет создавать взаимодействия, которые срабатывают при загрузке страницы
- 37. ДИНАМИКА
- 38. РЕДАКТОР СЦЕНАРИЕВ Widget Properties Pane -> вкладку Interactions -> Add Case или дважды кликните по событию = Case Editor
- 39. ШАГ 1: ОПИСАНИЕ Возможно добавить описание сценария После добавления условий
- 40. ШАГ 2: ДОБАВЛЕНИЕ ДЕЙСТВИЙ Виды действий • Действия с ссылками • Действия с динамическими панелями • Действия с виджетами и переменными • Общие действия
- 41. ШАГ 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 — открывает страницу в родительском фрейме. Используется при переходе со страницы, загруженной во встроенном фрейме..
- 42. ШАГ 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 — перемещает динамическую панель на самый нижний слой страницы.
- 43. ШАГ 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) — сворачивает узел в дереве виджетов.
- 44. ШАГ 2.4: ОБЩИЕ ДЕЙСТВИЯ • Wait Time (ms) — откладывает действия на определенное время. • Other — показывает текстовое описание действия, например “Отправить письмо пользователю”.
- 45. ШАГ 3: ОРГАНИЗАЦИЯ ДЕЙСТВИЙ Столбец с выбранными действиями. Одно действие можно добавлять несколько раз Действия будут выполняться в порядке, показанном в этом списке
- 46. ШАГ 4: КОНФИГУРАЦИЯ ДЕЙСТВИЙ Используется для настройки параметров действий
- 47. ЛОГИКА Возможные действия • В один и тот же сценарий можно добавлять несколько условий • Возможно изменять значения элементов при помощи: o взаимодействий o переменных, математических и строковых функций. Как делать? 1. Создаем сценарий внутри события (вкладка Interactions окна свойств виджета Widget Properties ) 2. “Add Condition” (Добавить условие). 3. Появляется окно конструктора условий (Case Editor)
- 48. КОНСТРУКТОР УСЛОВИЙ тип переменной +само значение (которым может быть виджет)+тип сравнения +второй сравниваемый набор Конструктор условий позволяет создавать различные выражения
- 49. ТИПЫ ПЕРЕМЕННЫХ • 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 — прямоугольная область, занимаемая виджетом (используется при перетаскивании мышкой).
- 50. КОНКРЕТНОЕ ЗНАЧЕНИЯ • Value — статическое значение • Value of variable — значение переменной • Length of variable value — длина значения переменной • Selected option of — выбранное значение выпадающего списка или элемента listbox • Text on widget — текущий текст в любом • Length of widget value — длина текущего значения любого элемента • Text on focused widget — текст в выбранном элементе
- 52. ПЕРЕМЕННЫЕ Зачем использовать? • Нужно передать информацию с одной страницы на другую • Когда взаимодействию одной страницы необходимо изменить виджеты на другой странице Виды переменных • Локальные • Глобальные
- 53. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ Wireframe → Manage Variables
- 54. ЛОКАЛЬНЫЕ ПЕРЕМЕННЫЕ Название переменной + тип переменной + источник, из которого берется значение переменной
- 55. ДОПОЛНИТЕЛЬНЫЕ ВОЗМОЖНОСТИ • Выгрузка в спецификацию • Возможность рисования структурных схем
- 56. ПОЛЕЗНЫЕ РЕСУРСЫ 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/
- 57. ПОЛЕЗНЫЕ РЕСУРСЫ 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
- 58. ПОЛЕЗНЫЕ КНИГИ Ezra Schwartz Axure RP 6 Prototyping Essentials Mark Boulton Grids Are Good Владимир Лаптев Модульные сетки: проектирование многополосных изданий
- 59. ПОЛЕЗНЫЕ КНИГИ Lennart Hennigs Axure for Mobole
- 60. Контакты для связи [email protected] skype: Mironova.Katia