Проектирование корпоративной информационной системы КЭССТ.
На первом этапе проектирования разрабатывается структура системы.
2.6 Разработка структуры портала.
Структура портала должна помогать решать задачи, ради которых система создана.
Разработка структуры портала включает все, что касается ее содержимого и информационной стратегии, определяющей, как должна быть организована информация, чтобы пользователи системы могли найти ее легко и быстро, а также иметь быстрый доступ к различным информационным сервисам.
Структура системы определяется разбиением общего содержимого на отдельные страницы и объединением их в смысловые разделы.
Кроме того, структура сайта неразрывно связана с системой навигации.
Структура сайта с точки зрения разработчика — это запланированная рабочая схема, на которой разработчик указывает связи между страницами и родительскими разделами.
Иерархия - Это самая распространённая структура, на которой основано большинство сайтов Интернета.
Исходя из назначения системы и выполняемых функций, разработаны функциональные схемы структуры корпоративного портала, которые представлены на рисунках 19.
Рисунок 19 – Общая структура корпоративного портала.
На главной странице портала отображается новостная лента и следующие модули:
Боковое меню (расположено на боковой панели портала) – является основным навигационным меню портала, отображается в виде кнопки с иконкой и вызывается нажатием:
· Главная страница (переход на главную страницу портала из других разделов).
· Форум (раздел тематических форумов).
· Проекты (менеджер проектов с этапами и задачами).
· Сообщество (раздел социальной сети организации).
· Блоги сотрудников (раздел блогов).
· Медиагалерея (раздел с фото и видео галереями организации по категориям).
· Глоссарий (раздел глоссариев по категориям).
· Учебный раздел (раздел с инструкциями, обучающими материалами, и тестами).
· Поддержка (раздел для доступа к электронной системе заявок)
Верхнее меню (расположено в верхней части портала) – является второстепенным навигационным меню портала:
· Новости (раздел новостей по категориям).
· Файлы (раздел с файловым хранилищем по категориям).
· Мероприятия (раздел с мероприятиями организации).
· Сотрудники (список всех сотрудников организации с возможностью поиска и фильтрации).
· Распоряжения (раздел содержащий отраслевые и внутренние распорядительные документы).
Модуль поиска (расположен в верхней части страницы):
· Поиск (поиск по всем разделам портала).
Модуль пользователя (расположен в верхней части страницы) – содержит блок меню и блок уведомлений. Блок меню содержит:
- Авторизация (вход в систему, для этого открывается всплывающее окно).
- Профиль пользователя (просмотр и изменение данных в профиле)
- Создать заявку (быстрый доступ для создания заявки в системе электронных заявок).
- Написать статью (написать новость или запись в блоге).
- Пополнить медиагалерею (добавить фото и видео в разделе Медиагалерея).
- Выход (выход из системы).
Блок уведомлений содержит информеры личных сообщений, системных уведомлений и уведомлений о заявках в друзья.
Центральная часть:
· Новости (новостная лента - отображает последние 3 новости в виде введений с изображениями и 4 в виде ссылок из всех категорий раздела Новости).
Правая часть:
· Блок Приказы (выводит последнее распоряжение, отрасли или внутреннее).
· Блок Мои заявки в поддержку (отображает суммарно открытые и закрытые заявки в поддержку от текущего пользователя).
· Блок Календарь мероприятий (выводит календарь классического табличного вида с текущей подсвеченной датой, при наведении на числа появляются всплывающие подсказки с мероприятиями).
· Блок Опросы (показывает последний опрос, связанный с текущим пользователем).
· Блок Доска почёта (вывод 5 пользователей с наибольшим количеством заработанных балов в системе).
· Блок Образцы заявлений (выводит 6 последних файлов с раздела Файлы и категории Образцы заявлений).
· Блок Видео с последнего пуска (вывод 4 последних видео с видео галереи и категории Пусковые компании).
· Блок Новые фотографии (вывод 9 последних фото с фото галереи и категории Пусковые компании).
· Блок Сейчас на сайте (вывод в табличном представлении пользователей, в данный момент находящихся в системе с ссылкой на полный их список).
· Блок Последние обсуждения (вывод последних обсуждений с форума, с разделов, к которым пользователь имеет отношение).
Ниже на рисунке 20 представлена Графовая модель переходов по разделам информационной системы.
Рисунок 20 – Графовая модель переходов по разделам системы.
1 – Главная страница, 2 - Раздел Новости, 3 - Раздел Файлы, 4 - Раздел Форум, 5 – Мероприятия, 6 – Сотрудники, 7 - Распоряжения, 8 – Раздел Проекты, 9 – Подраздел Этапы, 10 – Подраздел Задачи, 11 – Подраздел Репозиторий, 12 – Подраздел Панель управления, 13 – Раздел Сообщество, 14 – Подраздел Профиль, 15 – Подраздел Страницы, 16 – Подраздел Группы, 17 – Подраздел Друзья, 18 – Подраздел Фотографии, 19 – Подраздел Опросы, 20 - Раздел Блоги сотрудников, 21 – Раздел Медиагалерея, 22 – Раздел Глоссарий, 23 – Учебный раздел, 24 – Подраздел Тестирование, 25 – Подраздел Учебные материалы, 26 – Раздел Поддержка.
2.7 Проектирование навигации.
Навигационные панели сайта представляют собой необходимое средство для перемещения по разделам. Навигационная панели присутствует на всех страницах сайта. Они должны быть удобными, видимыми, и информативными.
Для навигационных панелей сайта должны быть применены панели с кнопками, схематично представленные на рисунке 21 и 22, построенными на основе текстовых надписей и реализованными при помощи графического дизайна с применением иконочного шрифта FontAwesome.
В верхней части и на боковой панели каждой страницы меню перехода на основные разделы системы.
| 1А | 2А | 3А | 4А | 5А | 6А |
Рисунок 21 – Главное меню.
| 1Б | Где: 1А – Раздел Новости; 2А – Раздел Файлы; 3А – Раздел Форум; 4А – Раздел Мероприятия; 5А – Раздел Сотрудники; 6А – Раздел Распоряжения. 1Б – Главная страница портала; 2Б – Раздел Форум; 3Б – Раздел Проекты; 4Б – Раздел Сообщество; 5Б – Раздел Блоги сотрудников; 6Б – Раздел Медиагалерея; 7Б – Раздел Глоссарий; 8Б – Учебный раздел; 9Б – Раздел Поддержка. |
| 2Б | |
| 3Б | |
| 4Б | |
| 5Б | |
| 6Б | |
| 7Б | |
| 8Б | |
| 9Б |
Рисунок 22 – Боковое меню
2.8 Проектирование компоновки страниц и дизайна интерфейса системы.
2.8.1 Дизайн интерфейса.
Немаловажное значение при создании интерфейса информационной системы имеет графический дизайн отображаемых страниц и отдельных модулей системы.
Данная система предназначена для совместной работы, что в свою очередь включает в себя: хранение, поиск, просмотр и обработку текстовой и мультимедийной информации.
Для системы были выбраны пять цветов, основной синий и второстепенные зелёный, оранжевый, красный и голубой, а также дополнительно шесть оттенков серого цвета представленные на рисунках 23 и 24:
Рисунок 23 – Основной и второстепенные цвета корпоративного портала.
Рисунок 24 – Дополнительные оттенки серого цвета.
Синий цвет используется в качестве основного цвета всего дизайна, он применяется для оформления ссылок, кнопок и навигационных меню. Синий цвет призван создавать спокойную обстановку для работы и вызывать доверие и открытость, синий цвет часто применяется в дизайне корпоративных сайтов и социальных сетей.
Зелёный, оранжевый, красный и голубой цвета используются в качестве подсветки информации определённого характера:
· зелёный цвет – цвет успеха и новизны используется при оформлении информационных элементов, отвечающих за прогресс, успех, новизну, и доступность информации;
· оранжевый цвет – цвет привлекающий внимание и используется для оформления информационных элементов содержащих важную информацию;
· красный цвет – цвет опасности и тревоги, используется для оформления информационных элементов требующих особого внимания или содержащих в себе информацию критической важности;
· голубой цвет – цвет лёгкости и надёжности, используется для оформления отдельных элементов, носящих информационный характер, например, подсвечивание даты.
Оттенки серого цвета используются для оформления текста информационных элементов (сообщения, новости, блоги).
Для заднего фона используются белый и бледно-серый (белый дым) цвета.
Дизайн системы основывается на СSS (Каскадные таблицы стилей), которые являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации.
Таблицы стилей позволяют разделить смысловое содержимое веб-страницы и его визуальное оформление.
2.8.2 Компоновка страниц веб-системы.
Для наглядного представления того, как будут скомпонованы модули системы на странице, был нарисован макет структуры компоновки страниц, представленный на рисунке 25.
| 1 | 2 | 3 | 4 | 5 | ||
| 19 | 6 | |||||
| 7 | 8 | |||||
| 9 | 10 | |||||
| 11 | 12 | |||||
| 13 | 14 | |||||
| 15 | 16 | |||||
| 18 | 17 | |||||
Рисунок 25 – Структура компоновки страниц.
1. Боковая панель с основным навигационным меню.
2. Логотип.
3. Верхнее меню.
4. Модуль пользователя.
5. Модуль поиска.
6. Блок распоряжений.