1.2.5.2 Количественные требования
Система разрабатывается в единственном экземпляре и будет располагаться на серверной машине на кафедре «Графические информационные системы». На данный момент доступ к ней возможен только с компьютеров, подключенных к сети кафедры. В дальнейшем планируется перенос системы на свое доменное имя, что даст возможность зайти в систему с любого устройства с возможностью выхода в интернет.
1.2.5.3 Требования к интерфейсу
Интерфейс пользователя должен иметь следующие характеристики:
Простой в работе с системой. Система управления содержимым данного проекта должна быть простой и понятной для любого из администраторов проекта. Одна из задач заключается в поиске такой системы, в которой не запутался бы редактор. В дальнейшем, добавление и обновление фотографий должен осуществлять другой человек. Необходимо настроить систему таким образом, что бы человек не запутался в ее настройках, а так же случайно не повредил целостность и работоспособность системы.
Простой в использовании пользователем. Не только администратор, но и пользователь должен хорошо ориентироваться системе. Расположение элементов должно быть понятно на интуитивном уровне не только молодому поколению, но и старшему – теми, кто ездил в лагерь в ранние года и решил вспомнить молодость.
Разделение на десятилетия. Так как в системе будет храниться достаточно большой объем исторических фотографий, то это требует правильного разделения на разделы. За 55 лет существования лагеря в год могло проходить до 5 смен, а это значит уже более 200 разделов, и это не считая разделы «События года». Что бы проще ориентироваться в таком количестве разделов, принято решение разделить разделы по десятилетиям. Попадая в раздел определенного десятилетия пользователю показываются года данного периода, при нажатии на который должны открываться разделы смен и событий года.
Дизайн интерфейса должен передавать веселую летнюю лагерную атмосферу. Таким образом он должен быть выполнен в теплых светлых тонах, а на фоне использовать фотографию/фотографии с лагерных смен. Сделать их переходом от черно-белых старых до цветных новых. Что бы создавалось впечатление, что они идут вместе со шкалой времени (рис. 9)
Должно быть несколько типов страниц: с боковой колонкой и без нее. В боковой колонке должен быть блок с годами, а так же должна быть возможность добавить дополнительную колонку.
Рисунок 9 – прототип дизайна интерфейса системы
Как видно из рис. 9 сверху располагается шкала времени – меню-ориентир по десятилетиям. Нажав на одну из них пользователь попадает в соответствующий раздел, где слева представлены года. Нажав на одно из них, сверху, над блоком с фотографиями, содержащее лагерные смены и вкладку событий года (в дальнейшем, дизайн был немного видоизменен, причины и вид нового дизайна описан в пункте 2.2). Выбрав интересующий пользователя раздел, он начинает выяделяться относительно остальных и по центру открывается содержимое данной страницы.
2 Реализация информационной системы
2.1 Разработка интерфейса и дизайна информационной системы
Исходя из требований по дизайну интерфейса информационной системы, указанных в пункте 1.2.5.3, была начата разработка. Первым делом необходимо было определиться с типом дизайна всего сайта – пусть это адаптивный, резиновый или обычный дизайн с фиксированной шириной. Причина была в том, что теперь при верстке необходимо учитывать разрешения экранов, которые колеблются в пределах от 320 пикселей, до 2560 на 27-ми дюймовых мониторах, а значит и размер сайта должен меняться вместе с ним. Решением было отказаться от адаптивного дизайна (способного подстраиваться под размеры экрана устройства, на котором просматривается система), несмотря на его современность, в пользу фиксированной ширины. Сделано это по причине того, что одной из задач адаптивного дизайна является облегчение пользователю чтение текста с мобильного телефона, при этом уменьшение размера изображения, а так как первоочередная задача фотоархива является демонстрация фотографий, то такой подход был бы не совсем рационален. Поэтому было решено оставить обычный дизайн с фиксированной шириной.
Исходя из заданный требований необходимо разработать два типа страниц:
полноширинные;
с боковой колонкой.
Первым делом необходимо было определиться с шириной всех блоков для обоих типов страниц. Несмотря на стремительное продвижение технологий, все еще остаются мониторы с шириной экрана 1024x768, меньше, такие как 800x600 уже вышли их эксплуатации. И так как это различие присутствует, возьмем ширину всех блоков и промежутков между ними в 1000 пикселей (рис. 12 а). Соответственно это ширина для полноширинного варианта, в случае с боковой колонкой возьмем 760 пикселей для блока с содержимым и 200 для боковой колонки, соответственно (рис. 12 б).
а |
б |
Рисунок 12 – Ширина блоков на страницах ИС а – для полноширинной страницы, б – для страницы с боковой колонкой
Следующим этапом разработки графической составляющей выпускной квалификационной работы стали создание фонового изображения и подбор цветовой гаммы под это изображение.
Первоначальное требование к фоновому изображению, звучало как “на фоне использовать фотографию/фотографии с лагерных смен. Сделать их переходом от черно-белых старых до цветных новых. Что бы создавалось впечатление, что они идут вместе со шкалой времени.”. Исходя из этого требования был составлен первый вариант фонового изображения (рис. 13).
Рисунок 13 – Первоначальный вариант фонового изображения
Такой вариант оказался не очень привлекательным, после чего был изменен на вариант, когда соседние изображения немного налезали друг на друга создавая впечатление “перетекания времени” (рис. 14). По причине того, что первый вариант в хорошем качестве занимал достаточно много места – 3 мб (по меркам веб – это очень много. Необходимо не более 300 кб), а в плохом выглядел ужасно, то изображение было уменьшено по высоте и повторялось по оси Y. Но и такой вариант оказался не соответствующим ожиданию.
Рисунок 14 – Фрагмент второй версии фонового изображения
Тогда изображения на фоне были перемешаны между собой (рис. 15). Но и этот вариант был не подходящим. Было решено изменить техническое задание и отказаться от варианта с фотографиями на фоне.
Рисунок 15 – Третий вариант фонового изображения
Было принято решение об использовании в качестве фона рисованных изображений. Такой шаг значительно бы снизил размер получаемого изображения в хорошем качестве при его неизменном разрешении (2560х1500px) c 3-4 мб, до 700 кб. Идеальный размер для фонового изображения не должен превышать 300 кб, поэтому качество фонового изображение было немного ухудшено, что было не сильно заметно.
Так как лагерь находится в сосновом лесу, мною было выбрана следующая концепция: в шапке сайта небо с облаками, середина нейтрального цвета с возможностью увеличиваться при увеличении высоты сайта и в футере земля с елочками (рис. 16).
Этот вариант тоже был отброшен. Надо было показать, что лагерь находится на берегу горьковского моря, поэтому была введена еще одна правка в требования к дизайну интерфейса, а именно наличие моря на фоне. В результате был оставлен вариант с рисунка 17. Он получился ярким, манящим и не столь отвлекающим на себя внимание, при всей своей яркости. При увеличении высоты сайта больше ширины картинки, появившееся пространство должно было заполняться цветом песка, так что создавалось бы впечатление неразрывности картинки.
Рисунок 16 – Первоначальный вариант рисованного фонового изображения
Рисунок 17 – Второй вариант рисованного фонового изображения
Дальнейшим этапом необходимо было определиться со стилистикой шкалы времени. Здесь так же было несколько вариантов, от многих из которых пришлось отказаться в пользу более красивого изображения. На рис. 18 видно как изменялся дизайн шкалы времени.
|
а |
|
б |
|
в |
Рисунок 18 – Варианты дизайна шкалы времени а – первоначальный, б – одобренный, в – реализованный
зеленым цветом (рис. 21). Сверху, в шапке, добавились логотипы лагеря.
Рисунок 21 – Итоговый дизайн страницы с боковой колонкой