Лаб_11 Головков И.Е. 12002108 ООП
.docxФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ БЕЛОГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ (НИУ «БелГУ») ИНСТИТУТ ИНЖЕРЕНЕРНЫХ И ЦИФРОВЫХ ТЕХНОЛОГИЙ
КАФЕДРА ИНФОРМАЦИОННЫХ И РОБОТОТЕХНИЧЕСКИХ СИСТЕМ
Отчет по лабораторной работе №11
Вариант №5 Тема работы «Проектирование графического интерфейса пользователя» по дисциплине «Объектно-ориентированное программирование»
студента очного отделения
2 курса группы 12002108
Головкова Игоря Евгеньевича
Проверил:
Резников Н. Г.
Белгород 2022
Цель работы: познакомиться с основными элементами управления и
приобрести навыки проектирования графического интерфейса пользователя.
Общая постановка задачи
1. Изучить предлагаемый теоретический материал, а также лекционный материал по данной теме.
2. Создать карту навигации для выбранной системы. На карте в зависимости от специфики системы выделите разделы, доступные различным пользователям в зависимости от роли, опишите условия перехода из различных разделов (при необходимости)
3. Используя графический редактор на выбор, создайте макеты графического интерфейса пользователя. Предлагаемые системы: Microsoft Visio, Software Ideas Modeler, Axure RP, cacoo.com
4. Для разработанных макетов подготовьте их текстовое описание в следующем виде: Таблица 1 Название поля Тип Условия видимости Условия доступности Описание Формат, допустимые значения, макс. и мин. длина, поведение
5. Оформить отчет по работе
Содержание отчета
1. Титульный лист.
2. Задание к лабораторной работе.
3. Постановка задачи Вашего варианта
4. Навигационная схема (карта навигации)
5. Макеты графического интерфейса пользователя
6. Описание элементов управления по таблице 1
7. Ответы на контрольные вопросы.
Вариант задания: 5, Ветеринарная клиника.
Ход работы:
1) Для создания навигационной схемы взят сайт ветклиники «Четыре с хвостиком» (https://4shvostikom.com)
Рисунок 1 - Навигационная схема сайта
2) Макеты графического интерфейса пользователя:
а) Главная страница
Рисунок 2 – Макет главной страницы
б) Страница информации об услугах
Рисунок 3 – Макет страницы информации об услугах
в) Страница прайс-листа
Рисунок 4 – Макет страницы прайс-листа
г) Страница новостей
Рисунок 5 – Макет страницы новостей
д) Страница статей
Рисунок 6 – Макет страницы статей
е) Страница контактов
Рисунок 7 – Макет страницы контактов
3) Описание элементов макета На сайте отсутствует личный кабинет или подобная система, поэтому для всех элементов условия видимости и доступности одинаковы – элементы видны и доступны всем.
а) Элементы, общие для каждой страницы сайта
Таблица 1 – Общие элементы страниц сайта
Название поля |
Тип |
Описание |
Логотип и контактная информация |
Изображение, ссылка |
Логотип компании и ссылка на главную страницу |
Главная |
Ссылка |
Ссылка на главную страницу |
Услуги |
Ссылка |
Ссылка на страницу услуг |
Прайс-лист |
Ссылка |
Ссылка на страницу прайс-листа |
Новости |
Ссылка |
Ссылка на страницу новостей |
Статьи |
Ссылка |
Ссылка на страницу статей |
Контакты |
Ссылка |
Ссылка на страницу контактов |
Популярная информация |
Ссылки |
Ссылки на часто используемые страницы и контакты |
б) Элементы главной страницы
Таблица 2 – Элементы главной страницы
Название поля
|
Тип |
Описание |
Информация о клинике |
Изображения, текст |
Текст с информацией об истории клиники и специалистах |
Популярные услуги |
Изображения, ссылки |
Подборка популярных услуг |
Интересные статьи |
Текст, ссылки |
Подборка интересных статей |
Краткий блок новостей |
Изображения, ссылки |
Последние новости |
в) Элементы страницы информации об услугах
Таблица 3 – Элементы страницы информации об услугах
Название поля |
Тип |
Описание |
Категория услуг (Приём вет. врача, Ультразвук. диагностика, Амбулаторн. процедуры, Хирургия, Вакцинация, Стоматология) |
Кнопка, текст |
Название категории услуг с кнопкой для показа подробной информации и подкатегорий |
Подкатегории услуг (Выезд врача на дом, Диагностика беременности, Подрезка клюва, Стрижка когтей, Гигиеническ. стрижка, Родовспоможение, Кастрация животных, Онихэктомия, Подрезание зацепов) |
Кнопка, текст |
Название подкатегории услуг с кнопкой для показа подробной информации о ней |
Поиск |
Текстовое поле |
Поиск по словам в информации об услугах |
г) Элементы страницы прайс-листа
Таблица 4 – Элементы страницы прайс-листа
Название поля |
Тип |
Описание |
Категория услуг (Приём вет. врача, Ультразвук. диагностика, Амбулаторн. процедуры, Хирургия, Вакцинация, Стоматология, Кастрация животных, Кесарево сечение) |
Тест |
Название категории услуг |
Список названий услуг |
Текст |
Название услуг, входящих в опр. категорию |
Стоимость |
Текст |
Стоимость каждой услуги в рублях |
д) Элементы страницы новостей
Таблица 5 – Элементы страницы новостей
Название поля |
Тип |
Описание |
Изображение |
Изображение |
Картинка, соответствующая новости |
Популярные услуги |
Изображения, ссылки |
Подборка популярных услуг |
Заголовок |
Текст |
Заголовок соответствующей новости |
Текст новости |
Текст |
Краткая информация о соответствующей новости |
Подробнее |
Ссылка |
Ссылка на полный текст соответствующей новости |
е) Элементы страницы статей
Таблица 6 – Элементы страницы статей
Название поля |
Тип |
Описание |
Изображение |
Изображение |
Картинка, соответствующая новости |
Заголовок |
Текст |
Заголовок соответствующей статьи |
Текст статьи |
Текст |
Краткая информация из соответствующей статьи |
Читать далее |
Ссылка |
Ссылка на полный текст соответствующей статьи |
ё) Элементы страницы контактов
Таблица 7 – Элементы страницы контактов
Название поля |
Тип |
Описание |
Карта с расположением клиники |
Изображение |
Карта, на которой изображена соответствующая клиника |
Клиника на улице Засечной/Щорса |
Текст |
Название (часть адреса) клиники, к которой относится перечисленная информация о контактах |
Адрес |
Текст |
Полный адрес |
График работы |
Текст |
График работы |
Телефоны |
Текст |
Номер телефона |
Электронная почта |
Ссылка |
Адрес электронной почты |
Вывод: в ходе лабораторной работы были изучены основные элементы управления и приобретены навыки проектирования графического интерфейса пользователя.