Примеры проектирования макетов экранов

Пример 1. Информационная система «Музыкальная школа» (фрагмент)

В качестве макета выбран формат сайта с панелью навигации слева. На рис. Ж1 представлен макет главной страницы сайта.

Рис. Ж1. Шаблон для страниц сайта Шаблон структуры всех страниц сайта (см. рис. Ж1) делится на четыре блока:

• 1) шапка (header). Содержит название сайта, логотип сайта и ссылки для осуществления авторизации (вход) и регистрации. Если пользователь уже авторизован на сайте, то вместо этих ссылок, будет «Приветствие» и ссылка для входа в личный кабинет;
• 2) навигационная панель (navigation). Содержит главное меню и поиск по сайту;
• 3) контентная часть (content). Отображает контент разделов сайта;
• 4) подвал (footer). Содержит копирайт.

В главном меню фиксируется раздел, контент которого отображается в момент просмотра.

Страница «О музыкальной школе» (рис. Ж2) содержит контактную информацию, информацию об условиях поступления, учебных направлениях и преподавателях.

Рис. Ж2. Макет страницы «О музыкальной школе».

Страница «Афиша» (рис. ЖЗ) содержит информацию о расписании концертов.

Рис. ЖЗ. Макет страницы «Афиша».

Раздел «Обратная связь» (рис. Ж4) предназначен для связи с модераторами и разработчиками сайта. В этом разделе посетитель сайта может написать им сообщение и при необходимости прикрепить к нему скриншот. Через некоторое время ему должен прийти ответ на электронную почту.

Раздел «Помощь» (рис. Ж5) представлен в виде гипертекстовых ссылок и состоит из двух частей. В верхней части перечислены темы, по которым в справке предусмотрены вопросы и ответы на них. Вопросы сгруппированы по темам, поэтому нижняя часть страницы (перечень вопросов по выбранной теме) появляется после того, как в верхней части выбрана соответствующая тема. При выборе вопроса открывается новая страница, где подробно описывается ответ на него или возможное решение (рис. Ж6).

Страница «Расписание» содержит информацию о расписании преподавателей и учебных групп. Поиск можно осуществить по этим двум направлениям, выбрав нужный пункт (рис. Ж7—Ж9).

Рис. Ж4. Содержание контента «Обратная связь».

Рис. Ж5. Содержание контента в разделе «Помощь» (список тем.

и вопросов).

Рис. Ж6. Содержание контента для раздела «Помощь» (пример представления ответа на вопрос).

Рис. Ж7. Содержание контента «Расписание» (пример для выбора расписания по преподавателю).

Рис. Ж8. Содержание контента «Расписание» (по конкретному преподавателю).

Рис. Ж9. Содержание контента «Расписание» (по группе и учебной дисциплине).

Пример 2. Информационная система по определению потенциально сейсмоопасных регионов Прибайкалья (фрагмент)

После открытия приложения, созданного для работы по созданию карт, пользователь видит приветственное окно программы (рис. Ж10). Пользователь может начать работу с приложением, либо осуществить выход. Далее пользователь видит главное окно, на котором предлагается выбрать режим работы либо осуществить выход из программы (рис. Ж11). Если пользователь выбирает режим работы «Нанесение эпицентров землетрясений на карту», то откроется окно программы с рабочей областью, изображенное на рис. Ж12. Если пользователь выбирает режим работы «Выделение потенциальных сейсмоопасных районов», то откроется окно программы с рабочей областью, изображенное на рис. Ж13. Из окон, изображенных на рис. Ж11 и Ж12, можно либо перейти на главное окно (см. рис. Ж10), либо осуществить выход из системы.

Рис.ЖЮ. Приветственное окно приложения.

Рис.ЖП. Главное окно приложения.

Рис.Ж12. Окно приложения, работающего в режиме «Нанесение эпицентров землетрясений на карту».

Нанесение данных на карту осуществляется следующим образом. Долгота и широта землетрясений, взятые из БД, преобразуются информационной системой в координаты карты с помощью специально разработанных алгоритмов. Эпицентры землетрясений наносятся на карту исходя из настроек оформления эпицентров, полученных из БД, по вычисленным координатам. Цвет эпицентров можно изменить с помощью цветовой панели, расположенной в левом нижнем углу экрана. В соответствии с алгоритмом работы программы рассчитываются параметры, определяющие сейсмоопасные районы. Эти районы выделяются особым цветом на карте.

Рис.ЖТЗ. Окно приложения, работающего в режиме «Выделение потенциальных сейсмоопасных районов».

Пример 3. Автоматизированная диспетчерская система транспортного муниципального предприятия (фрагмент)

Внешний вид меню с раскрытием пунктов главного меню изображен на рис. Ж14, Ж15.

Главное меню имеет белый цвет и хорошо выделяется на светлосером фоне окна системы. При наведении курсором мыши на один из пунктов меню он подсвечивается голубым цветом, а при клике курсором появляется подменю светло-серого цвета. Оно содержит ссылки на различные функции системы.

Учет остановок. При выборе подпункта «Остановки» пункта «Учет» главного меню в окне «ДИС» (диспетчерская информационная система), которое показано на рис. Ж16, появится таблица, описывающая остановки маршрутного транспорта в городе Иркутске (рис. Ж17).

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

При нажатии на кнопку «Добавить» появляется окно, показанное на рис. Ж18.

Рис. Ж14. Внешний вид меню с раскрытием пункта «Учет».

Рис.Ж15. Внешний вид меню с раскрытием пункта «Поиск».

Рис.ЖТб. Начальный вид окна ДИС.

Рис.Ж17. Учет остановок.

Рис. Ж18. Окно добавления остановки Здесь необходимо ввести наименование остановки и указать направление. При нажатии на кнопку «Отмена» введенные данные не сохранятся и окно закроется. При нажатии на кнопку «ОК», если поля пустые, система укажет на это и попросит их заполнить (рис. Ж19, Ж20).

На рис. Ж21 и Ж22 показана реакция системы на ввод некорректных символов.

При вводе направления движения транспорта реакция программы аналогична.

Если остановка с такими данными уже есть в списке, то система выдаст предупреждение, показанное на рис. Ж23.

Рис.Ж19. Предупреждение об отсутствии названия остановки.

Рис. Ж20. Реакция системы на отсутствие названия остановки при ее добавлении.

Рис. Ж21. Предупреждение о неверном вводе названия остановки.

Рис. Ж22. Реакция системы на неверный ввод названия остановки при ее добавлении (поле «Остановка» выделено красным цветом) Если ввод осуществлен верно, то при нажатии на кнопку «ОК» произойдет добавление остановки с введенным названием в БД и в дальнейшем название остановки будет включено в список остановок, а окно добавления автоматически закроется.

Рис. Ж23. Предупреждение о том, что остановка уже есть в списке При изменении остановки (путем выбора остановки в списке и нажатия кнопки «Изменить», рис. Ж17) открывается окно, показанное на рис. Ж24.

Рис. Ж24. Окно изменения данных об остановке При нажатии на кнопку «Отмена» изменения не будут сохранены, а окно изменения данных об остановке автоматически закроется.

При нажатии на кнопку «ОК» произойдет проверка правильности ввода, аналогичная проверке при добавлении остановки. Если ошибок не выявлено, произойдет изменение данных по выбранной остановке.

При выборе остановки в главном окне программы и нажатии на кнопку «Удалить» система попросит подтверждения на удаление выбранной остановки. Окно подтверждения показано на рис. Ж25.

Рис. Ж25. Подтверждение удаления остановки Если выбранную установку нельзя удалить, то система выдаст предупреждение с объяснением причины отказа в удалении, показанное на рис. Ж26.

Рис. Ж26. Отказ в удалении остановки Окна учетов маршрутов, типов остановок, водителей и ТС (транспортных средств) являются аналогичными как для отображения записей, так и для их добавления или изменения, за исключением того, что поля ввода при добавлении являются пустыми, а при изменении — заполненными данным, с которыми в конкретный момент времени работает диспетчер. Проверка ввода, добавление и изменение происходит аналогично действиям, осуществляемым при учете остановок.