ЛАБОРАТОРНАЯ РАБОТА №6

Проектирование интерфейса пользователя приложения

Цель работы: научиться создавать wireframe-ы интерфейса пользователя при помощи приложения Axure.

Теоретические сведения

Wireframe – это способ упрощенного проектирования визуального интерфейса пользователя, включающий основные визуальные элементы, структуру и взаимодействие и иерархию форм сайтов и десктопных приложений. Обычно wireframe-ы разрабатываются до дизайнерской работы и программирования основных алгоритмов задач.

Для разработки wireframe-ов для простых проектов простых случаях используются такие средства разработки, как Visio, Balsamiq, InDesign, Illustrator, Photoshop, OmniGraffle; для сложных проектов - Axure, ProtoShare, Justinmind, and Irise.

Axure обладает одновременно широкими возможностями и простым в освоении интерфейсом. Основное окно Axure приведено на рисунке 1.

Рис. 1. Основное окно Axure

В правом верхнем окне «Sitemap» приведена структура и иерархия форм проектируемого сайта или приложения. Конструирование и навигация происходит при помощи контекстного меню, или панели инструменвов вверху окна.

В правом среднем окне находятся «Виджеты» - визуальные элементы интерфейса пользователя. Посередине находится область с разметочной сеткой для конструирования wireframe-ов.

В процессе работы виджеты перетаскиваются мышкой в область разметки, позиционируются и растягиваются до нужного размера. В окне справа отражаются аннотации и взаимодействия выделенного в разметочной области виджета. Пользуясь этим окном, можно задать комментарии, либо назначить действия для различных операций с элементом. Среди действий – управление окнами, видимостью и состоянием виджетов, задание переменных, переход по ссылкам и т.д.

Спроектированный прототип можно сгенерировать через главное меню в виде сайта на html со вставками javascript.

Порядок выполнения работы

1. Изучить теоретические сведения.

2. Спроектировать wireframe для интерфейса пользователя вашего ПМК. При проектировании обязательно использовать виджеты, обрабатывать события и совершать действия согласно варианту (Таблица 1). Все это должно быть использовано хотя бы один раз, но не обязательно именно в таком сочетании. Результат должен быть практически обоснован.

3. Сгенерировать прототип, проверить относительную работоспособность.

4. Оформить отчет.

5. Подготовиться к защите лабораторной работы.

Содержание отчета

1. Фамилия, имя отчество, группа, тема, цель.

2. Описания возможности и особенности виджета, события и действия согласно варианту

3. Иерархия экранных форм.

4. Распечатки сайта-прототипа нтерфейса ПМК (на страницах должно быть указано индивидуальное задание на ПМК и Л.Р., данные о разработчике).

5. Выводы по работе.

Индивидуальное задание

Таблица 1.

№	Виджет	Событие	Действие
1	Image	Нажатие мышью	Открыть в текущем окне
2	Text Panel	Наведение мыши	Открыть во всплывающем окне
3	Button	Уход мыши	Закрыть текущее окно
4	Text Field	Наведение фокуса	Открыть во фрейме
5	Table	Потеря фокуса	Задать панели состояние
6	Text Area	Нажатие клавиши	Показать панель
7	Droplist	Нажатие мышью	Спрятать панель
8	Checkbox	Наведение мыши	Включить виджет
9	Radiobutton	Уход мыши	Выключить виджет
10	Listbox	Наведение фокуса	Свернуть дерево
11	Menu (Horizontal)	Потеря фокуса	Развернуть дерево
12	Menu (Vertical)	Нажатие клавиши	Установить фокус на виджет
13	Tree	Нажатие мышью	Передвинуть панель
14	Inline Frame	Наведение мыши	Переместить панель на передний план
15	Button Shape	Уход мыши	Открыть в текущем окне
16	Hyperlink	Наведение фокуса	Открыть во всплывающем окне
17	Rectangle	Потеря фокуса	Закрыть текущее окно
18	Placeholder	Нажатие клавиши	Открыть во фрейме
19	Dynamic Panel	Нажатие мышью	Задать панели состояние
20	Checkbox	Наведение мыши	Показать панель
21	Droplist	Уход мыши	Спрятать панель
22	Text Field	Наведение фокуса	Включить виджет
23	Menu (Horizontal)	Потеря фокуса	Выключить виджет
24	Menu (Vertical)	Нажатие клавиши	Свернуть дерево

Вопросы для контроля и самостоятельной работы

1. Что такое Wireframe-ы и зачем они нужны?

2. Опишите способы проектирования пользовательского интерфейса приложений.

3. Какие средства разработки для этого используются, каковы их возможности, относительные преимущества и недостатки.

4. Оцените условия целесообразности применения таких методик и средств разработки.