Разработка электронных образовательных ресурсов: графика и дизайн - Учебно - методическое пособие (Темников Д.А.)

Навигация и управляющие элементы интерфейса

 

Оптимальная навигация внутри мультимедийной программы – достаточно сложная задача для разработчика мультимедиа ресурса. Для обеспечения удобства навигации автору приходится просчитывать все возможные варианты переходов внутри и между обучающими страницами, между целыми блоками (обучающий, вспомогательный, контролирующий и т.п.), то есть гарантировать пользователю такое прохождение по программе от начала до конца, чтобы не было пропущено ни одного важного информационного блока.

Стандартная мультимедийная обучающая программа начинается с оглавления и заканчивается блоком контрольных вопросов. Пункты оглавления содержат гиперссылки на определенную главу, раздел, подраздел и т.п. С помощью навигационных управляющих элементов пользователь имеет возможность пройти весь курс от первого до последнего основного экрана. Учащийся также может познакомиться с дополнительными текстовыми, графическими, аудио- или видеоматериалами, расположенными на вложенных экранах. Эти экраны вызываются с помощью «экранных» управляющих элементов.

 

Структура мультимедиа-программы (тип «дерево»)

 

На следующем рисунке приведены минимально необходимые типы переходов между частями ЭОР. Каждый такой переход должен быть обеспечен своим управляющим элементом (гиперссылкой).

 

 

Стрелками показаны возможные переходы между частями программы. Черными стрелками показаны переходы с кнопок навигации, зеленым – переходы  с  экранных  управляющих  элементов,  красным  –  переходы  по

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

 

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

 

 

Примеры интерфейса ЭОР для 10-11 класса «Путешествие в страну

«Политика»» [14]

 

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

«просторным», не перегруженным управляющими элементами. Присутствие кнопок и ссылок на экране подчиняется принципу «необходимости и достаточности». Универсального набора таких элементов не существует. Автор конкретного учебного курса разрабатывает их в зависимости от целей и задач программы.

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

 

Примеры управляющих элементов мультимедийных программ по биохимии и политологии

 

Еще  один  важный  момент  при  разработке  интерфейса,  о  котором следует упомянуть, — это баланс между интерактивными возможностями программы и сложностью изобразительного ряда. Простая программа не имеет права сложно управляться, но она также не имеет права на слишком изощренную графику. Основной проблемой в интерфейсе является синхронизация точки внимания пользователя и точки активности системы. Эта проблема, по мнению специалистов [15], должна решаться с учетом взаимодействия обеих сторон «пользователь–компьютер». С одной стороны, пользователь должен иметь возможность «сообщить» системе, где и что необходимо изменить. С другой стороны, мультимедиа-система должна обладать возможностью привлечения внимания пользователя к точке, где происходят наиболее актуальные изменения. Привлечь внимание пользователя можно, например, размещением анимационного фрагмента в нужном месте на экране. Пользователю необходимо определенное время, чтобы вступить во взаимодействие с новым изображением на экране. В этот

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

5. Подготовка графических файлов для размещения в среде электронных образовательных ресурсов

 

 
В этом разделе мы поговорим о наиболее распространенных приемах работы с графикой в среде одной из самых популярных программ Corel PhotoPaint. Сегодня на рынке представлена уже 13-ая версия этого графического редактора (и обновления  происходят  каждый  год),  но если понять основные  функции и операции, то можно с легкостью работать с любой из версий и даже с любой подобной программой других фирм-производителей программного обеспечения для дизайнеров. При  рассмотрении  технических  вопросов мы воспользуемся исходным изображеним – графическим  файлом  фотографии Соборной мечети Кул-Шариф в Казанском кремле,   сделанной   автором   летом   2007 года.

 

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

 

Выделение фрагмента графики.

В любом графическом редакторе (программе для работы с графикой) эта функция   одна    из        главных,            и          представлена различными   вариантами

выделений графических фрагментов (см. рисунок): прямоугольное, овальное, свободное, выделение по границе цвета (позволяет, например, «вырезать» объект или группы объектов из однородного фона) и мн. др. На рисунке показан графический фрагмент, выделенный (и затем перемещенный) с помощью инструмента «прямоугольное выделение».

 

Копирование и вставка.

Выделенный фрагмент изображения может быть копирован и вставлен. В основное изображение (точнее, над ним) может быть вставлено очень большое количество независимых объектов. Эти «плавающие» объекты можно размещать друг относительно друга (компоновать) по желанию дизайнера: менять порядок слоев, выравнивать и распределять в рамках линейных размеров изображения.

 

Сохранение и компрессия.

При сохранении графических файлов важно представлять, в какой среде этот файл будет использоваться в дальнейшем. Если нет необходимости стремиться к уменьшению веса (размера в Мб) файла, т.е. если файл войдет в мультимедиа-программу на компакт-диске, то сохранение возможно в формате bmp без применения компрессии (уменьшение размера файла (в мегабайтах), влекущее за собой ухудшение качества изображения).

Если же файл предназначается для использования в Интернет или пересылается по электронной почте, тогда при сохранении необходимо найти

«золотую середину», т.е. применить компрессию, но в таком объеме, чтобы внешний вид изображения не сильно пострадал. В этом случае, оптимальным форматом сохранения может быть формат jpg. На следующем рисунке приведено диалоговое окно сохранения файла в графическом редакторе. Видно, что существует большое количество типов графических файлов. При выборе дизайнером типа (формата) файла учитывается универсальность (дружественность) данного формата к различным программным пакетам. Самыми распространенными универсальными форматами являются tif, bmp, gif и jpg. Важно помнить, что во всех этих форматах можно сохранять только однослойные изображения (фоны). Если же есть необходимость сохранения многослойного файла (в процессе работы над ним) с «плавающими» объектами, то необходимо воспользоваться специальными программными форматами: для Corel Photopaint – cpt, для Adobe Photoshop – psd.

 

 

 
На рисунке слева показано окно предварительной настройки файла для сохранения изображения в формате jpg. Обратите внимание на широкий спектр настроек будущего изображения и на изменение его качества относительно оригинала. Важнейшими настраиваемыми параметрами      являются:      субформат

(фактически, это выбор

 

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

 

Настройка изображения.

Под настройкой изображения обычно понимается изменение параметров яркости,  контрастности  и  интенсивности  пикселей  (точек),  из  которых состоит изображение (рисунок слева). Настройка не предполагает кардинального изменения цвета пикселей. Обратите внимание, что сильное увеличение контрастности приводит к затемнению итогового изображения, по сравнению с исходным изображением.

К группе корректировки изображений можно отнести также и замену одного цвета на другой (рисунок справа).

 

 

 

 
Простые эффекты.

Глубокое изменение цвета пикселей по всему изображению создает впечатление смещения границ объектов изображения, т.е. изменения его формы. Простые эффекты служат для внесения стандартных изменений в изображение   по   определенному   заданному   алгоритму.   Это   совсем   не означает, что эти эффекты примитивны. Напротив, их умелое использование позволяет добиться потрясающего графического результата. А «простыми» их называют, поскольку изменение в изображение вносится одним нажатием на кнопку в диалоговом окне настроек. Прокомментируем графически три разнообразных простых эффекта. Названия, которые им дали программисты- авторы эффектов, чаще всего говорят сами за себя.

 

3D-эффекты (чеканка)          Текстура (холст)

 

 

 

Выбор (алхимия).

 

Приведено 6 вариантов эффекта «выбор» (с применением различных фильтров)

 

Сложные эффекты.

 

 
Описать алгоритм действий для создания сложных эффектов практически невозможно. Результат применения каждого эффекта не может точно повторить даже его автор. Сложные (составные, эстафетные) эффекты придумывает дизайнер в момент творческой работы над проектом. При этом, финальное изображение какого-либо объекта получается в результате последовательного применения большого количества простых эффектов. Например, при подготовке данного изображения были по порядку применены следующие действия и эффекты: копирование всего изображения, вставка и перетяжка на 180 град., эффект «искажение (рябь)» в нескольких вариантах для создания отражения в «пологой волне»; для мечети,

«отражающейся в озере» был применен эффект «вычитание цвета» (когда выбранный цвет на изображении становится прозрачным), наложение зеленоватого  прямоугольника  на отражение (инструмент рисование), перемещение его под «отражающуюся» мечеть    и    использование    инструмента

«градиентная  прозрачность» (прозрачность зеленого прямоугольника линейно возрастает по вертикали снизу вверх – создается эффект плавного перетекания одного цвета в другой), применение инструмента «спрей (облака)» и, наконец, инструмента «рисование (мазок

–  звезда)»  для  расположения  на  ночном небе «звезд». Работа над этим «пейзажем» заняла около 20 минут. Опытный дизайнер при ближайшем рассмотрении заметит не один десяток огрех. Однако, здесь мы не ставили себе цель сделать графический продукт высокого класса. Данная работа – лишь иллюстрация возможностей использования сложных эффектов.