Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Разработка информационных систем. Пользовательский интерфейс. Учебное пособие для СПО
.pdf
Ё
2.1. Проектирование и создание прототипа пользовательского интерфейса приложения
Ё
В табл. 2.3 описано исключение из типичного хода событий.
Таблица 2.3
Аутентификация. Раздел «Исключения»
Исключение 1
Указаны невер‑
но логин
и (или) пароль
Действия
актера
Пользователь вво‑
дит логин и пароль
и нажимает кнопку
«Вход»
Отклик системы
4.а. На экране по‑
является сообщение
«Логин или пароль
введены неверно»
Элемент
интерфейса
Стандарт‑
ное диалоговое
окно с текстом
Рассмотрим пример описания задания для системы тестирова‑
ния. На рис. 2.4 показана диаграмма вариантов использования
для этой системы.
Система тестирования нужна следующим заинтересованным
лицам:
·обучаемому (студенту);
·составителю тестов (преподавателю);
·преподавателю, принимающему экзамен;
·сотруднику деканата, осуществляющему контроль за успе‑
ваемостью;
·администратору сети и баз данных учебного учреждения.
На начальном этапе создания системы мы можем ограничить‑
ся только двумя важными для нас ролями действующих лиц:
·студент (тестируемый);
·администратор (преподаватель, составитель тестов).
Соответственно, основными прецедентами (вариантами исполь‑
зования) для нашей системы являются следующие:
1) прецедент для студента:
·П1 — пройти тестирование;
2) прецеденты для администратора:
·П2 — создать/изменить тест;
·ПЗ — просмотреть результаты тестирования;
·П4 — добавить/изменить пользователей и др.
Краткая форма описания содержит название варианта исполь‑
зования, его цель, действующих лиц, тип варианта использования
(базовый, второстепенный или дополнительный) (см. табл. 2.4).
41
Ё
в
Глава 2. Разработка интерфейса программного обеспечения
Ё
Преподаватель
Составитель тесто
Внешняя системаПользователь
тестами
Обменяться
Администратор
роваться
Аутентифици -
список
Создать
Создать тест
Пройти тест
студентов
результаты
Контролировать
42
Рис. 2.4. Диаграмма вариантов использования для системы тестирования
Студент
пользователь)
(авторизированный
Ё
2.1. Проектирование и создание прототипа пользовательского интерфейса приложения
Краткое описание варианта использования
Ё
Таблица 2.4
Название варианта
использования
Роль Студент
Цель Прохождение тестирования, получение оценки
Краткое описание
Тип варианта Базовый
Регистрация студента, запуск теста, выбор ответа или
ввод ответа, завершение теста, получение оценки
Прохождение тестирования
Подробная форма описания варианта использования представ‑
лена в табл. 2.5.
Таблица 2.5
Подробное описание варианта использования прохождения теста
Действия актера Отклик системы
Ввод своих данных (ФИО, группа)
в текстовые поля формы, то есть реги‑
страция в системе
Выбор теста из списка Запуск теста
Последовательные ответы на вопросы
путем проставления отметок в специаль‑
ных полях
Завершение тестирования путем нажа‑
тия на кнопку «Завершить»
Ожидание результата
Сохранение результата или не сохране‑
ние результата путем нажатия на кнопку
«Сохранить»
Завершение работы путем нажатия
на кнопку «Выход»
Создание на диске файла с ре‑
зультатом тестирования и пред‑
ложение выбрать тест
Регистрация правильных
и неправильных ответов
Подсчет процента правильных
ответов
Демонстрация результата и пред‑
ложение сохранить его
Если выбрано сохранение, систе‑
ма записывает результат в файл
Завершение работы
Описание задания
Для закрепления материала студентам предлагается выполнить
индивидуальные задания по проектированию и созданию прото‑
типа ПИ. В начале работы необходимо определиться с тематикой
разрабатываемого приложения. Выбранная тема должна быть ин‑
тересна и понятна студенту. Разрабатываемое приложение долж‑
но обязательно содержать механизм аутентификации, главное
меню, контекстное меню и табличное отображение информации.
43
Ё
Глава 2. Разработка интерфейса программного обеспечения
Ё
После анализа выбранной темы и определения функций при‑
ложения необходимо разработать диаграмму вариантов исполь‑
зования языка UML.
Затем необходимо построить сценарии вариантов использова‑
ния для более полного описания работы приложения. Сценарий
варианта использования — текстовое описание, которое поясня‑
ет суть варианта использования, при разработке используется
для определения элементов интерфейса, реализующих отдельные
действия сценария. Результаты оформите в виде таблиц, приме‑
ры которых представлены в начале раздела 2.1. Для пояснения
предлагаемых интерфейсных решений необходимо подготовить
эскизы экранных форм. Эскизы могут быть сделаны вручную
или с помощью программ, например, Visio.
2.2. Проектирование пользовательского интерфейса
на этапе высокоуровневого проектирования
Высокоуровневое проектирование — разработка на основе
сценариев вариантов использования общей модели пользователь‑
ского интерфейса приложения с описанием структуры форм и пе‑
реходов между ними.
Изучая пользовательские сценарии и диаграмму вариантов
использования, можно выделить функциональные блоки прило‑
жения, а также операции, выполняемые пользователями в этих
блоках, и объекты, над которыми эти операции делаются. После
этого необходимо сгруппировать отдельные выделенные элемен‑
ты, исходя из их логической связи. Таким образом, получает‑
ся структура главного меню и других навигационных элементов
(выпадающих меню, кнопок, инструментальных панелей).
При разработке меню следует придерживаться определенных
стандартов — это ускорит обучение пользователя работе с но‑
вым приложением за счет использования им уже сформиро‑
ванных ранее привычек. Перечислим некоторые рекомендации
(см. рис. 2.5):
·пункты меню, относящиеся к одной функциональной группе,
следует отделять разделителем (черта или пустая строка);
44
Ё
2.2. Проектирование пользовательского интерфейса на этапе высокоуровневого проектирования
Ё
·названия пунктов меню пишутся с большой буквы, жела‑
тельно, чтобы название состояло максимум из двух слов;
·название меню, к которому относится каскадное меню, сле‑
дует заканчивать стрелкой;
·в названиях меню можно использовать пиктограммы;
·недоступные пункты меню следует показывать другим цве‑
том (обычно серым);
·недоступные пункты меню можно делать невидимыми.
Рис. 2.5. Пример оформления пунктов меню
Для получения практических навыков по проектированию
пользовательского интерфейса на этапе высокоуровневого про‑
ектирования необходимо решить следующие задачи:
1) ознакомиться с возможностями создания форм в Visual
Studio C#;
2) разработать интерфейс приложения в соответствии с вы‑
бранной темой в разделе 2.1;
45
Ё
Глава 2. Разработка интерфейса программного обеспечения
Ё
3) убедиться, что разработанный интерфейс не содержит ти‑
пичных проблем, возникающих на этапе разработки прото‑
типа ПИ (см. раздел 1.1.4).
Ниже приводится пример создания приложения Windows
Forms в среде разработки Visual Studio 2015.
1. Запустить среду разработки Visual Studio.
2. Создать новое приложение, выбрав в меню File à New à
Project. На экране появится следующая картинка (рис. 2.6).
Рис. 2.6. Форма создания нового приложения
На форме необходимо выбрать шаблон (Template) — Visual
C# à Windows à Windows Forms Application, а затем указать
название приложения, место на диске, куда оно будет сохране‑
но, и нажать OK. После этого Visual Studio создаст и откроет
проект (см. рис. 2.7).
Рабочее окно состоит из следующих частей:
· Toolbox («Панель инструментов») — располагается слева,
содержит элементы управления, которые формируют поль‑
зовательский интерфейс (рис. 2.8). Вызвать ее также мож‑
но через меню View à Toolbox;
46
Ё
2.2. Проектирование пользовательского интерфейса на этапе высокоуровневого проектирования
Рис. 2.7. Форма созданного приложения
Ё
Рис. 2.8. Toolbox «Панель инструментов»
47
Ё
Глава 2. Разработка интерфейса программного обеспечения
Ё
·окно Solution Explorer («Обозреватель решений») — рас‑
полагается справа, содержит информацию о составе проек‑
та: Properties — настройки проекта, Links — подключенные
к проекту библиотеки, созданные и подключенные к проек‑
ту файлы исходных кодов (с расширением.cs) и подключен‑
ные к проекту формы (например Form1) см. рис. 2.9.
Рис. 2.9 Solution Explorer («Обозреватель решений»)
·окно Properties («Свойства») — окно, позволяющее просмо‑
треть и настроить свойства и методы выбранного элемент
управления или формы (см. рис. 2.10).
Рис. 2.10. Properties («Свойства»)
48
Ё
2.2. Проектирование пользовательского интерфейса на этапе высокоуровневого проектирования
Ё
3. На основе выбранного шаблона Visual Studio появился кар‑
кас оконного приложения с главной формой Form1. Класс, ко‑
торый ее описывает, выглядит следующим образом (рис. 2.11):
Рис. 2.11. Описание класса Form1
Существует несколько способов переключения между дизай‑
ном формы и описанием класса:
1) выбрать в Solution Explorer Form1 (описание класса) или
Form1.cs (вид формы) (рис. 2.12);
2) выбрать в меню View à Code (F7) или View à Designer
(«Shift + F7»).
Рис. 2.12. Выбор в Solution Explorer описание класса Form1
49
Ё
Глава 2. Разработка интерфейса программного обеспечения
Ё
Создание оконных приложений сводится к созданию всех необ‑
ходимых диалоговых окон, а также к размещению на них необхо‑
димых элементов. В дальнейшем необходимо прописать обработ‑
ку событий, создаваемых пользователем, и настроить технические
аспекты работы программы.
4. Приведем пример размещения кнопки на форме и написа‑
ния обработчика события Click (нажатие кнопки).
Найти на панели инструментов (Toolbox) нужный элемент But‑
ton («Кнопка») и переместить на форму (см. рис. 2.13).
Рис. 2.13. Размещение кнопки на форме
В окне Properties («Свойства») найти свойство Text и изме‑
нить его значение на «Закрыть» (рис. 2.14).
В окне Properties («Свойства») нужно переключиться на вклад‑
ку Event («События»), нажав кнопку
, и найти событие Click
(см. рис. 2.15).
Двойным щелчком мыши на событии создать его обработчик
(см. рис. 2.16).
50
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]