Презентация создавалась для демонстрации онлайн и предусматривает наложение изображений друг на друга

1. РАЗРАБОТКА
МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ
Гусаревич Ирина Валерьевна
ст. преподаватель кафедры Информационных систем и технологий РГППУ
по дисциплине «Разработка интерактивных мультимедийных продуктов»
E-mail: irina-gusarevich@mail.ru
Skype: irina-gusarevich

2. ПОНЯТИЙНЫЙ АППАРАТ

3. ПОНЯТИЙНЫЙ АППАРАТ
МУЛЬТИМЕДИА
Происходит он от соединения английских слов – «multy»,
«multiple» (множественный, складной, состоящий из многих
частей) и «media» (среда, средство) или, точнее, от латинских
слов multum (много) и media, medium (средоточие, средство,
способ).

4. ПОНЯТИЙНЫЙ АППАРАТ
МУЛЬТИМЕДИА
В 1965 году термин «мультимедиа» был использован для
описания Exploding Plastic Inevitable – шоу, совместившего в
себе живую рок-музыку, кино, экспериментальные световые
эффекты и нетрадиционное искусство.

5. ПОНЯТИЙНЫЙ АППАРАТ
МУЛЬТИМЕДИА
В конце 1970-х годов этот термин обозначал презентации,
составленные из изображений, получаемых от нескольких
проекторов, синхронизированных со звуковой дорожкой

6. ПОНЯТИЙНЫЙ АППАРАТ
МУЛЬТИМЕДИА
В 1988 г. Европейская комиссия по проблемам внедрения и
использования новых технологий предложила следующее
определение:
мультимедиа – продукт, содержащий «коллекции
изображений, текстов и данных, сопровождающихся звуком,
видео, анимацией и другими визуальными эффектами
(Simulation), и включающий интерактивный интерфейс и
другие механизмы управления».

7. ПОНЯТИЙНЫЙ АППАРАТ
МУЛЬТИМЕДИА
В статье Сергея Новосельцева «Мультимедиа – синтез трех
стихий» опубликованной в 1991 году в журнале
«КомпьютерПресс» дается следующее определение
«мультимедиа» (multimedia) – это интерактивные системы,
обеспечивающие работу с неподвижными изображениями и
движущимся видео, анимированной компьютерной графикой
и текстом, речью и высококачественным звуком.

8. ПОНЯТИЙНЫЙ АППАРАТ
МУЛЬТИМЕДИА
• ГОСТ 7.83-2001 ЭЛЕКТРОННЫЕ ИЗДАНИЯ ОСНОВНЫЕ ВИДЫ
И ВЫХОДНЫЕ СВЕДЕНИЯ определяет мультимедийное
электронное издание как электронное издание, в котором
информация различной природы присутствует
равноправно и взаимосвязано для решения
определенных разработчиком задач, причем эта
взаимосвязь обеспечена соответствующими программными
средствами.

9. ПОНЯТИЙНЫЙ АППАРАТ
МУЛЬТИМЕДИА
ГОСТ Р ИСО 14915-1-2010 приводит следующее определение
мультимедиа (multimedia): Комбинации статических и
динамических форм представления информации, которые
могут быть интерактивно управляемы и представлены в
приложении одновременно.

10. ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность

11. МНОГОЗНАЧНОСТЬ ПОНЯТИЯ
МУЛЬТИМЕДИА
Особый обобщающий вид информации, которая объединяет в себе как
традиционную статическую (текст, графику), так и динамическую информацию
разных типов (речь, музыку, видеофрагменты, анимацию и т.п.)
Компьютерное аппаратное обеспечение (наличие привода BD-R/RE &
DVD±R/RW/RAM & CD-R/RW BD-R/RE/XL & DVD RAM&DVD±R/RW, звуковой и
видеоплаты, с помощью которых возможно воспроизведение звуковой и
видеоинформации, джойстика и других специальных устройств);
Мультимедиа программа;
Издание, созданное на основе мультимедийной технологии;
Технология, описывающая порядок разработки, функционирования и
применения средств обработки информации разных типов;

12. ИНТЕРАКТИВНОСТЬ
Одна из основных особенностей и преимуществ мультимедийного
продукта. Интерактивность позволяет пользователю
взаимодействовать с информацией: выбирать последовательность,
способ подачи, темп, уровень сложности, длительность и т.д.
Пользователь, зритель имеет возможность как творческая личность
– режиссер – управлять потоком информации, за счет чего
возникает наиболее мощное психологическое и эмоциональное
воздействие.

13. ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их
интерактивность. Роде и Азбелл (Rhodes and Azbell, 1985;
цитируется по изданию: Schulmeister, 1997) указывают три
различных типа интерактивности:
• реактивное взаимодействие;
• активное взаимодействие;
• обоюдное взаимодействие.

14. ВИДЫ ИНТЕРАКТИВНОСТИ
Реактивное взаимодействие: пользователи проявляют
ответную реакцию на представляемые им ситуации.
Последовательность ситуаций жестко фиксирована и
возможности управления программой незначительны.

15. ВИДЫ ИНТЕРАКТИВНОСТИ
Активное взаимодействие: пользователи контролируют
программу, т.е. сами решают, в каком порядке выполнять
задания и по какому пути следовать в изучении материала
в рамках мультимедийного продукта.

16. ВИДЫ ИНТЕРАКТИВНОСТИ
Обоюдное взаимодействие: пользователи и программы
способны взаимно адаптироваться друг к другу, например
в системах виртуальной реальности. Возможности
контроля пользователем, как и при активном
взаимодействии, расширяются.

17. УРОВНИ ИНТЕРАКТИВНОСТИ
Согласно международным стандартам выделяют четыре
уровня интерактивности:
• простой;
• ограниченный;
• полный;
• уровень реального масштаба времени.

18. УРОВНИ ИНТЕРАКТИВНОСТИ
Первый уровень интерактивности. Условно-пассивные формы
взаимодействия.
Этот уровень характеризируется минимальным
взаимодействием пользователя с моделью. Пассивными
данные формы названы с некоторой долей условности потому,
что от пользователя все-таки требуются некоторые
управляющие воздействия (работа с клавишами «пуск», «стоп»,
«пауза» и т.п.). Цель и требуемый результат работы заранее
определены: восприятие и усвоение «готовой» информации.

19. МОДЕЛИ, ИМЕЮЩИЕ ПЕРВЫЙ
УРОВЕНЬ ИНТЕРАКТИВНОСТИ.
(ФИЗИКА, 7–11 КЛ. БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1С:ОБРАЗОВАНИЕ)

20. УРОВНИ ИНТЕРАКТИВНОСТИ
Этот уровень характеризуется простым взаимодействием
пользователя с составляющими интерфейса модели (уровень
выбора элементарных операций из некоторого множества и их
исполнения).
Цель и требуемый результат работы, как и на предыдущем
уровне, заранее определены: восприятие и усвоение
«готовой» информации, но число возможных операций с
информационным контентом заметно увеличено

21. «ВИРТУАЛЬНАЯ ФИЗИКА»
(ПЕРМСКИЙ РЦИ ПГТУ

22. УРОВНИ ИНТЕРАКТИВНОСТИ
международные эксперты характеризуют разнообразием
реакций учащегося на многочисленные учебные запросы
и расширением спектра способов взаимодействия с
элементами мультимедиа средства;

23. «ОТКРЫТАЯ ФИЗИКА»

24. УРОВНИ ИНТЕРАКТИВНОСТИ
характеризуется вовлечением учащегося во
взаимодействие со средой, моделирующей реальные
объекты и процессы.
Пользователь управляет элементами среды, отвечает на
сложные учебные запросы. В средствах такого уровня
интерактивности максимально используются возможности
моделирования реальных объектов и процессов с целью
их исследования, формирующие учебную среду.

25. Допустимые упрощения, определяющие степень близости электронного
образовательного ресурса к «виртуальной реальности», характеризуются:
• неполной адекватностью мультимедиа представлений реальным
объектам (замена 3D на 2D, стерео на моно, реалистических
изображений на синтезированные)
• ограниченным (хотя и достаточно большим) количеством включенных в
сложную модель более простых моделей объектов и процессов.
УРОВНИ ИНТЕРАКТИВНОСТИ

26. Формы взаимодействия пользователя с такой моделью не определены
(недетерминированы), и поэтому перечислить их почти невозможно. При
этом можно указать на изменения, которые при исследовательском
подходе претерпевают некоторые формы взаимодействия третьего уровня:
1. Совмещение объектов модели для изменения их свойств или
получения новых объектов.
2. Составление произвольных композиций объектов.
3. Объединение объектов связями с целью организации их новой
системы.
УРОВНИ ИНТЕРАКТИВНОСТИ

27. 4. Изменение параметров/характеристик процессов в неограниченных
пределах.
5. Введение структурных/конструктивных изменений в исследуемую систему.
6. Импорт произвольных элементов для введения в активное поле контента.
7. Эти и другие формы взаимодействия пользователя с моделью приближают
эту модель к фрагменту реального мира.
УРОВНИ ИНТЕРАКТИВНОСТИ

28. ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень
интерактивности
Уровень учителя Уровень ученика
Реактивное
взаимодействие
Управление – запуск, возвращение к
предыдущему фрагменту.
Простейшие средства навигации
Оперативное реагирование на
запросы программы и задания учителя
Активное
взаимодействие
Контроль над программой. Выбор
траектории учебного занятия
Управление программой или
ресурсом: выбор темпа, объема
траектории обучения
Обоюдное
взаимодействие
Моделирование и конструирование
учебного занятия инструментами
обучающей среды
Взаимодействие с обучающей средой.
Моделирование реальных объектов и
процессов. Управление элементами
среды. Решение сложных учебных
задач.

29. ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-
ИЗДАНИЙ НА CD/DVD ROM
• энциклопедии;
• музыкальные диски;
• художественные и музейные диски;
• мультимедиа-учебники и обучающие программы;
• каталоги продукции (включая диски для выставок, конференций и
мультимедиа- журналы);
• техническую документацию на CD/DVD ROM.

30. ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных
путеводителей. Такие путеводители создаются, как правило, в виде
мультимедийных киосков.
Задачи мультимедийного киоска:
• помогать ориентироваться посетителю в музее;
• привлечение внимания или возможность быстрого получения интересующей
информации.

37. ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник, как компонент дистанционного обучения содержит:
• содержательный теоретический материал;
• практикум;
• системы самоконтроля знаний (тестов).

38. ЭЛЕКТРОННЫЙ УЧЕБНИК
Многообразие мультимедийных возможностей в электронном учебнике
может быть реализовано через следующие составляющие:
• построение интересных и наглядных практических занятий;
• тестовые системы, которые могут использоваться не только для
проверки знаний, но и для самоконтроля учащегося (вопросы в конце
параграфа учебника);
• сопроводить электронный учебник справочным материалом и
дополнительной литературой;

39. ЭЛЕКТРОННЫЙ УЧЕБНИК
• Web- компоненты учебных курсов для организации и
администрировании учебного процесса, составления расписания,
учета студентов и их успеваемости;
• Web- компоненты для осуществления удаленных консультаций
преподавателями;
• Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении.

40. ЭТАПЫ СОЗДАНИЯ
МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ

41. ЭТАПЫ СОЗДАНИЯ
МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
Эскиз
Схема
интерфейса
Прототип Макет РеализацияИдея
Создание базового
концепта/основы
всего проекта
Визуализация
концепта/основа
дизайна
Взаимодействие
между элементами/
основа UX
Создание графики и
контента
Реализация на
используемой
платформе

42. ИДЕЯ
• Не думайте о том, что ваше приложение обязательно
должно быть новаторским или делать что-то умное, оно не
должно быть революционным или уникальным, оно должно
быть визуально привлекательным, легким в использовании и
полезным. Сделайте простое приложение, которое будет
действительно нужно вашей целевой аудитории.

43. • https://habrahabr.ru/post/199200 - Путь от идеи до макета.
Размышляя о концепции продукта
• https://habrahabr.ru/company/edison/blog/267569 -
Проектирование программного обеспечения
• https://habrahabr.ru/post/131115 - Роль бизнес-процессов в
проектировании интерфейсов
• https://habrahabr.ru/users/magicstyle/topics -

44. ИДЕЯ И ЕЕ
ОФОРМЛЕНИЕ
Краткое описание сути
будущего продукта.
Вкратце описывает что это
за продукт, каковы цели и
задачи его создания, кто
его пользователи и каковы
основные возможности
будущей системы.

45. ИДЕЯ И ЕЕ
ОФОРМЛЕНИЕ
Продумайте структуру
приложения и метафоры,
которые могут быть
применены при ее
реализации. Решению
указанной проблемы
способствует наблюдение за
работой пользователей при
выполнении ими задач в
данной предметной области.

46. ОПИСАНИЕ РЕШАЕМЫХ
МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧ
Для этого необходимо ответить на следующие вопросы:
• для кого создается продукт?
• какова главная идея продукта?
• почему мультимедиа-среда будет лучше традиционной?
• для чего будут использоваться текст, графика, анимация,
видео, звук?
• какой стиль изложения (риторика) будет использоваться?
• на чем будет сфокусировано содержание проекта?

47. СТРУКТУРА
ПРОЕКТА
Важным понятием в разработке
сайта является схема навигации,
определяющая, как пользователь
будет перемещаться между
страницами. С помощью схемы
навигации пользователь получает
представление о структуре сайта, а
также представление о том, в каком
месте узла он находится в данный
момент.

48. ЭСКИЗ (SKETCH)
Создание эскиза спустит вас с
небес на землю и позволит
наконец-таки задуматься о
пресловутом user experience. Вы
уже знаете ЧТО вы хотите от
вашего приложения, но
создание эскиза поможет вам
выяснить КАК приложение будет
вести пользователей к
желаемому результату.
Эскизирование позволит вам визуализировать
поведение пользователя. Таким образом ваша идея
перестанет быть просто плодом вашего воображения и
станет чем-то более значимым и доступным.

49. ЭСКИЗ – ЭТО
НЕ ПРОТОТИП
И НЕ СХЕМА
Делая эскиз (sketch), вы
должны получить базовый
концепт того, как будет
работать приложение в
пользовательском интерфейсе.
Существует множество вариантов интерфейсного воплощения идеи. На этом этапе вы должны
выяснить что это за варианты и какой из них будет оптимален. Детали и специфика
пользовательского интерфейса здесь не так важны. Куда более важно сейчас понять, что
пользователь увидит на каждом шаге своего экспириенса, прежде чем достигнет цели.

50. СХЕМА
ИНТЕРФЕЙСА
(WIREFRAME)
Здесь мы создаем
структурные схемы
страниц (wireframes),
которые показывают,
какая информация и
элементы управления
должны располагаться
на страницах системы.
https://habrahabr.ru/post/1486
00 - Прототип, блочная
схема, макет – что выбрать?

51. СХЕМА
ИНТЕРФЕЙСА
(WIREFRAME)
Должна четко отображать:
• основные группы содержимого
(что?)
• структуру информации (где?)
• описание и основные
визуализации взаимодействия
пользователя и системы (как?)

52. ПРОТОТИПИРОВАНИЕ
(PROTOTYPE)
• процесс создания прототи́па
программы – макета (черновой,
пробной версии) программы,
обычно – с целью проверки
пригодности предлагаемых для
применения концепций,
архитектурных и/или
технологических решений, а
также для представления
программы заказчику на ранних
стадиях процесса разработки.

53. ПРОТОТИП
(PROTOTYPE)
Ключевая особенность
прототипа – его
интерактивность. Т.е. он
полностью повторяет
поведение будущего
приложения. Отличие от
финального варианта
заключается в упрощении
графики и контента и,
разумеется, в полном
отсутствии бекэнда.

54. БЫСТРОЕ ПРОТОТИПИРОВАНИЕ
(АНГЛ. RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)
Выбор инструмента
1. Как велика наша команда?
2. Где находится люди, которые будут
оценивать наш прототип?
3. Какой у нас бюджет на средство
прототипирования?
4. Насколько гибким должен быть
наш инструмент
прототипирования?
Название
инструмента/
Платформа/Цена
Описание
Balsamiq Mockups/
Веб / $ 79
Позволяет очень быстро
макеты вашего ПО.
содержимое выглядит как скетчи
CogTool/Кроссплат
орменный/
Бесплатный
Создаёт простые макеты
пользовательского интерфейса и
позволяет оценить их
Visio Professional Многие называют Visio «золотым
стандартом» для инструментов
создания экранных форм. Может
создавать интерактивные
https://habrahabr.ru/post/70001 -
Инструменты быстрого
прототипирования

55. МАКЕТ (MOCKUP)
Макет является средне или высоко детализированным статичным
дизайном проекта. Очень часто макет представляет собой конечный
дизайн частей или в целом проекта.
Метод Детализация Затраты Применение Особенности
Блочная
схема
Низкая $
Документация,
облегчение понимания
Набросок ч/б
Прототип Средняя/высокая $$$
Юзабилити-
тестирование, структура
продукта
Динамичный
Макет Средняя/высокая $$
Утверждение с
заказчиком, чистовой
дизайн
Статичный

56. МАКЕТ
(MOCKUP)
Качественно сделанный макет:
• передает структуру информации,
визуализирует содержание и
демонстрирует основные
функциональные возможности в
виде статистических
изображений;
• позволяет людям понять, как
будет выглядеть конечный
продукт.

57. МАКЕТ
(MOCKUP)
На этом этапе продукт
обретает внешний вид — до
этого мы занимались его
сутью и принципами работы.

59. РЕАЛИЗАЦИЯ
После получения макетов,
гайдлайна и нарезки, начинается
работа разработчика. Мы передаем
в разработку все то, что придумали,
и ожидаем ранний результат:
• Разработать альфа-версию.
• Разработать бета-версию.
• Разработать окончательную
версию.

60. РЕАЛИЗАЦИЯ
АЛЬФА-ВЕРСИЯ
• Программисты построили полностью работоспособную (или почти
работоспособную) версию программного продукта (функциональный
прототип). Проект разработан во всех деталях, включая все средства
для задания условий на значения, исправления ошибок, обеспечения
защиты и создания отчетов.
• Основные функциональные возможности реализованы и работают,
хотя некоторые специальные средства могут быть не готовы и имеется
большое число ошибок. На основе альфа-версии можно проводить
тесты над всем программным продуктом.

61. РЕАЛИЗАЦИЯ
БЕТА-ВЕРСИЯ
• Следует убедиться, что пользователь может инсталлировать программу.
Для этого требуется установить программный продукт во всех
операционных средах, которые могут применяться пользователем.
• Разработчики должны также устранить все серьезные ошибки. Число и
степень серьезности ошибок должны быть достаточно низкими, хотя
все зависит от цели выпуска опытной версии и отношений с
пользователями.

62. ПРОЕКТИРОВАНИЕ
ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА
http://www.kedilivideo.com/izle/QvoGXN4d1Vc/
http://www.youtube.com/watch?v=6aiKtySlqJ4

63. ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ
МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ

64. ХУДОЖЕСТВЕННЫЙ ДИЗАЙН
ИНТЕРФЕЙСА И СРЕДСТВ
НАВИГАЦИИ

65. ХУДОЖЕСТВЕННЫЙ ДИЗАЙН
ИНТЕРФЕЙСА И СРЕДСТВ
НАВИГАЦИИ

66. ХУДОЖЕСТВЕННЫЙ ДИЗАЙН
ИНТЕРФЕЙСА И СРЕДСТВ
НАВИГАЦИИC:Program Files (x86)MacromediaAuthorware 7.0ShowMe

67. ХУДОЖЕСТВЕННЫЙ ДИЗАЙН
ИНТЕРФЕЙСА И СРЕДСТВ
НАВИГАЦИИ

68. ХУДОЖЕСТВЕННЫЙ ДИЗАЙН
ИНТЕРФЕЙСА И СРЕДСТВ
НАВИГАЦИИ

69. ХУДОЖЕСТВЕННЫЙ ДИЗАЙН
ИНТЕРФЕЙСА И СРЕДСТВ
НАВИГАЦИИ

70. ХУДОЖЕСТВЕННЫЙ ДИЗАЙН
ИНТЕРФЕЙСА И СРЕДСТВ
НАВИГАЦИИ

71. ТИПОГРАФИКА В ДИЗАЙНЕ. ЧТО
МОЖНО ДЕЛАТЬ, А ЧТО НЕЛЬЗЯ?

72. ТИПОГРАФИКА В ДИЗАЙНЕ
Создать иерархию можно
различными способами,
например, с помощью веса,
размера, цвета или контраста. Ее
главная цель — установить на
странице правильную структуру,
благодаря которой текст будет
прост для восприятия и чтения.

73. ТИПОГРАФИКА В ДИЗАЙНЕ
Не каждый имеет 100% зрение,
поэтому очень важно убедиться,
что ваш текст подходит для всех
пользователей и его удобно
читать.
Рекомендуется использовать
размер не менее 14 пт.

74. ТИПОГРАФИКА В ДИЗАЙНЕ
Текст должен легко
восприниматься и только потом
быть красивым, необычным и т.п.

75. ТИПОГРАФИКА В ДИЗАЙНЕ
Так, если использование
нестандартного шрифта в
некоторых случаях может быть
уместно (например, в заголовке
статьи), то использование в
одном предложении никогда.
Всего рекомендуется
использовать не более 3
шрифтов.

76. ТИПОГРАФИКА В ДИЗАЙНЕ
Отсутствие пробелов между
строками может сильно ухудшить
восприятие. Однако эта проблема
легко решается путем увеличения
высоты строки

77. ТИПОГРАФИКА В ДИЗАЙНЕ
В экранном дизайне стало хорошей традицией использовать
английские абзацы: это удобно при быстром чтении, каждый
абзац ясно виден и можно быстро перескакивать глазами с
абзаца на абзац.
Не допустимым является смешивание и красной строки, и
английские абзацы.

78. ТИПОГРАФИКА В ДИЗАЙНЕ
Люди не привыкли к чтению текста
набранного заглавными буквами
т.к. это усложняет восприятие еще
больше, чем нестандартные
шрифты.

79. ТИПОГРАФИКА В ДИЗАЙНЕ
Если строка слишком длинная у
пользователя возникнуть проблемы
с переходом на другую строку. Если
ли она слишком короткая, можно
нарушить ритм т.к.
«перескакивание» по строкам будет
очень частым. Отсюда оптимальная
длина должна составлять примерно
50-60 символов.

80. ТИПОГРАФИКА В ДИЗАЙНЕ
Центрированный текст труднее
читать, т.к. края каждой строки
неровные и у нас нет так
называемой отправной точки.
Поэтому, использовать
центрирование нужно в
умеренных количествах, больше
выбирая выравнивание по левому
краю.

81. ТИПОГРАФИКА В ДИЗАЙНЕ
Контрастность – еще один из
аспектов типографики, который
может повлиять на
читабельность. При выборе
цвета для шрифта убедитесь, что
он не сливается с фоном и
«виден» на странице. Так же
помните, что настройки
контрастности на мониторе
пользователя могут отличаться
от ваших.

82. ДИЗАЙН ИНТЕРФЕЙСОВ
Лучший интерфейс прост и интуитивно
понятен, он обладает продуманной
структурой и обеспечивает
непринужденное перемещение
пользователя с одной страницы ресурса на
другую.
Навигация грамотно разработанного
издания должна в любой момент отвечать
на три вопроса:
Где я сейчас нахожусь?
Где я уже был?
Куда я могу пойти дальше?

83. ДИЗАЙН ИНТЕРФЕЙСОВ
Ссылки на наиболее
важные страницы или
разделы.

84. ДИЗАЙН ИНТЕРФЕЙСОВ
Включает в себя ссылки на
страницы, которые должны быть
доступны с любой страницы
издания. Например, ссылка на
домашнюю страницу.

85. ДИЗАЙН ИНТЕРФЕЙСОВ
Навигация по
страницам и
разделам одной
тематики.

86. ДИЗАЙН ИНТЕРФЕЙСОВ
Вид навигации внутри
текста одной страницы.
Например, если в
тексте упомянуты
другие страницы, на
них можно сделать
ссылку.

87. ДИЗАЙН ИНТЕРФЕЙСОВ
Позволяет посетителю понять, в
каком разделе он находится.
Приложение должно всегда давать
возможность пользователю
определить свою текущую
позицию в пределах структуры
мультимедийного приложения,
показывая, как он попал в
заданную позицию и куда он
может перейти из нее.

88. ДИЗАЙН ИНТЕРФЕЙСОВ
На большинстве языков, нам
преподают читать слева направо
и сверху вниз. Тот же самое и
для компьютерного экрана –
внимание пользователя будет
обращено к верхней левой
части экрана как к началу, так
что наиболее важный элемент
должен быть там.

89. ДИЗАЙН ИНТЕРФЕЙСОВ
Навигация разрабатывается
после того, когда определён круг
задач решаемых
мультимедийным изданием и
объём контента (текст, таблицы и
графика, аудио и видео,
анимация).

90. СОДЕРЖАНИЕ КОНТРОЛЬНОЙ
РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания

91. ИЗУЧИТЬ
Материал по технологиям создания
мультимедийных изданий в программе
Adobe Director
Учебные материалы/ мультимедиа/
2 семестр/лабораторные работы/
Adobe Director
Создание панорам и виртуальных
туров
Учебные материалы/мультимедиа/
2 семестр/лабораторные работы/
Виртуальный тур

92. ИЗУЧИТЬ
Материал по основным принципам
и этапам проектирования
пользовательского интерфейса
используя рекомендуемые
источники.
Раздел рекомендуемые источники
в данной презентации.

93. РЕАЛИЗОВАТЬ
МУЛЬТИМЕДИЙНОЕ
ИЗДАНИЕ
При выполнении
разработки
не допускается
использование исходных
материалов и шаблонов,
прилагавшихся для
изучения лабораторных
работ
Используя знания, полученные при изучении:
• программных средств – Adobe Director, Adobe
Photoshop, Adobe Illustrator, Adobe Premier,
Adobe After Effect, Adobe Audition
• дисициплин – Компьютерная геометрия и
гарфика, Аудиовизуальные средства в
медиаиндустрии, Векторная и растровая
графика, Введение в теорию дизайна,
Алгоритмические языки и системы
программирования

94. ТРЕБОВАНИЯ К СТРУКТУРЕ
МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1. Обложка.
2. Содержание непосредственно раскрывающее тему мультимедийного
издания.
3. Поиск по ключевым терминам.
4. Навигация должна быть ясной и удобной, так чтобы даже
начинающий пользователь мог легко найти нужную ему
информацию.
5. Интерактивность, реализованную через средства навигации.
6. Художественный дизайн интерфейса и навигации.

95. ТРЕБОВАНИЯ К СТРУКТУРЕ
МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6. Использование всех способов представления информации (аудио,
видео, анимация, текст, графика) взаимодополняющих содержание
мультимедийного издания.
7. Материал экрана должен иметь некоторый завершенный смысл, но в
тоже время не быть перегружен информацией (предъявляемый в
кадре текстовый материал должен быть минимальным по объему).
8. Используемые размеры шрифтов, цвета, приемы выделения части
информации на экране должны быть обоснованы и не должны
приводить к повышенной утомляемости).

96. ТРЕБОВАНИЯ К СТРУКТУРЕ
МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
9. Текстовый материал, размещенный в кадре должен сопровождаться
иллюстративным материалом (статические и динамические
иллюстрации, мультимедийные приложения). Иллюстративный
материал предназначен облегчить восприятие и усвоение
информации, и в соответствии с этим должны выбираться его
содержание, тип и способ воспроизведения в кадре.
10. Не менее 5 экранов не включая обложку и сведения об авторе (всего
7 экранов).
11. Сведения об авторе.

97. ТРЕБОВАНИЯ К ОТЧЕТУ
Процесс проектирования и реализации предполагает разработку следующих
основных документов:
1. Описание решаемых мультимедийным изданием задач. Концепция
проекта.
2. Структурная схема проекта.
3. Эскизы страниц (2 – 3 варианта).
4. Схема интерфейса (2 – 3 варианта).
5. На основе одного из вариантов или комбинации разработанных схем
представить прототип.
6. На основе прототипа представить макет.
7. Реализацию разработанного проекта (в двух форматах .exe, .dir.).

98. ТРЕБОВАНИЯ К ИТОГОВОЙ
АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех
этапов работы по дисциплине:
1. Представление отчета по всем частям контрольной работы.
2. Освоения материала рекомендуемых источников.
3. Проверки изученного материала в тестовой форме.

99. РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1. http://www.intuit.ru/studies/courses/12643/1191/lecture/21980 -
Академия Intel: Введение в разработку приложений для ОС
Android
2. http://skillsup.ru/blog/interfejsyi/pochti-ploskij-dizajn.html - Почти
плоский дизайн.
3. http://productdesign.center - Русская школа сервисного дизайна.
4. http://lopart.by/skevomorfizm-v-tsifrovy-h-interfejsah-i-
hudozhestvenny-h-programmah - Скевоморфизм в цифровых
интерфейсах и художественных программах.

100. РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5. http://froland.ru/samodel/vbguide/ch6_8_1.html - Основы дизайна
интерфейса.
6. http://www.future.museum.ru/part03/030302.htm - ДИЗАЙН
ИНТЕРФЕЙСА. (Из статьи "Технология мультимедиа:
возможности и реалии") А.В. Лебедев
7. http://www.future.museum.ru/part03/030301.htm - НОВАЯ
ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги
"Методология и практика электронных изданий по искусству".
М., 1998) В.А. Лебедев

101. РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
8. http://smartia.me/article/mindtheculture - «Золотой батон -
вершина отечественного дизайна».
9. http://uibook2.usethics.ru – «Дизайн пользовательского
интерфейса2 Искусство мыть слона». Влад В. Головач.
10.http://designculture.exmachina.ru – Культура дизайна.
11.http://krech.livejournal.com/24595.html - Откуда берутся _плохие_
UX-специалисты.
12.https://habrahabr.ru/company/digdes/blog/141486 - Откуда
берутся UX-специалисты.

102. РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
8. http://www.dejurka.ru/articless/card-design-secrets - Секреты веб-
дизайна в стиле карточек.
9. http://naikom.ru/blog/archives/6600 - Тренд: Flat-дизайн.
10.http://womtec.ru/category/design - Блог о дизайне и веб-
мастеринге.
11.http://skillsup.ru/blog/interfejsyi/pochti-ploskij-dizajn.html - Почти
плоский дизайн.
12.http://pixmedia.ru/dizayn-koncepciya-proekta-razrabotka-
koncepcii-dizayna - Дизайн концепция проекта. Разработка
концепции дизайна.

103. РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
13.http://www.uimodeling.ru/process - Рабочий процесс
проектирования и дизайна интерфейсов.
14.http://5fan.ru/wievjob.php?id=19282 - Проектирование
пользовательского интерфейса. Основные принципы и этапы
проектирования пользовательского интерфейса.
15.http://www.itshop.ru/Prototipiruem-prilozhenie-stsenarii-
animatsiya-ikonki-yuzabiliti-test-na-primere-Moego-Mira/l9i35446 -
Прототипируем приложение: сценарии, анимация, иконки,
юзабилити-тест на примере Моего Мира.

104. РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
16.http://www.mmv.mdk.ksue.edu.ua/index.php?option=com_content
&view=article&id=205:21-15-01-10-2010&catid=78:-10-&Itemid=29
- Проблема анализа структуры и компонентов мультимедийных
изданий.
17.http://www.artlebedev.ru/kovodstvo/sections - .ру/ Ководство.
Графический и промышленный дизайн, проектирование
интерфейсов, типографика, семиотика и визуализация.
18.http://artgorbunov.ru/bb/soviet - Дизайн-бюро Артёма
Горбунова.

105. РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
19.https://habrahabr.ru/post/147003 - 20 заповедей дизайна
пользовательского интерфейса.

106. ДОПОЛНИТЕЛЬНЫЕ ИСТОЧНИКИ
• http://www.dejurka.ru/flash/flash-menu-tutorials/