РАЗРАБОТКА МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ Гусаревич Ирина Валерьевна ст. преподаватель кафедры Информационных систем и технологий РГППУ по дисциплине «Разработка интерактивных мультимедийных продуктов» E-mail: [email protected]Skype: irina-gusarevich
РАЗРАБОТКА МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ Гусаревич Ирина Валерьевнаст преподаватель кафедры Информационных систем и технологий РГППУпо дисциплине laquoРазработка интерактивных мультимедийных продуктовraquoE-mail irina-gusarevichmailruSkype irina-gusarevich
ПОНЯТИЙНЫЙ АППАРАТ
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
Происходит он от соединения английских слов ndash laquomultyraquo laquomultipleraquo (множественный складной состоящий из многих частей) и laquomediaraquo (среда средство) или точнее от латинских слов multum (много) и media medium (средоточие средство способ)
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В 1965 году термин laquoмультимедиаraquo был использован для описания Exploding Plastic Inevitable ndash шоу совместившего в себе живую рок-музыку кино экспериментальные световые эффекты и нетрадиционное искусство
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В конце 1970-х годов этот термин обозначал презентации составленные из изображений получаемых от нескольких проекторов синхронизированных со звуковой дорожкой
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В 1988 г Европейская комиссия по проблемам внедрения и использования новых технологий предложила следующее определениемультимедиа ndash продукт содержащий laquoколлекции изображений текстов и данных сопровождающихся звуком видео анимацией и другими визуальными эффектами (Simulation) и включающий интерактивный интерфейс и другие механизмы управленияraquo
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В статье Сергея Новосельцева laquoМультимедиа ndash синтез трех стихийraquo опубликованной в 1991 году в журнале laquoКомпьютерПрессraquo дается следующее определение laquoмультимедиаraquo (multimedia) ndash это интерактивные системы обеспечивающие работу с неподвижными изображениями и движущимся видео анимированной компьютерной графикой и текстом речью и высококачественным звуком
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
bull ГОСТ 783-2001 ЭЛЕКТРОННЫЕ ИЗДАНИЯ ОСНОВНЫЕ ВИДЫ И ВЫХОДНЫЕ СВЕДЕНИЯ определяет мультимедийное электронное издание как электронное издание в котором информация различной природы присутствует равноправно и взаимосвязано для решения определенных разработчиком задач причем эта взаимосвязь обеспечена соответствующими программными средствами
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
ГОСТ Р ИСО 14915-1-2010 приводит следующее определение мультимедиа (multimedia) Комбинации статических и динамических форм представления информации которые могут быть интерактивно управляемы и представлены в приложении одновременно
ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ПОНЯТИЙНЫЙ АППАРАТ
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
Происходит он от соединения английских слов ndash laquomultyraquo laquomultipleraquo (множественный складной состоящий из многих частей) и laquomediaraquo (среда средство) или точнее от латинских слов multum (много) и media medium (средоточие средство способ)
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В 1965 году термин laquoмультимедиаraquo был использован для описания Exploding Plastic Inevitable ndash шоу совместившего в себе живую рок-музыку кино экспериментальные световые эффекты и нетрадиционное искусство
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В конце 1970-х годов этот термин обозначал презентации составленные из изображений получаемых от нескольких проекторов синхронизированных со звуковой дорожкой
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В 1988 г Европейская комиссия по проблемам внедрения и использования новых технологий предложила следующее определениемультимедиа ndash продукт содержащий laquoколлекции изображений текстов и данных сопровождающихся звуком видео анимацией и другими визуальными эффектами (Simulation) и включающий интерактивный интерфейс и другие механизмы управленияraquo
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В статье Сергея Новосельцева laquoМультимедиа ndash синтез трех стихийraquo опубликованной в 1991 году в журнале laquoКомпьютерПрессraquo дается следующее определение laquoмультимедиаraquo (multimedia) ndash это интерактивные системы обеспечивающие работу с неподвижными изображениями и движущимся видео анимированной компьютерной графикой и текстом речью и высококачественным звуком
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
bull ГОСТ 783-2001 ЭЛЕКТРОННЫЕ ИЗДАНИЯ ОСНОВНЫЕ ВИДЫ И ВЫХОДНЫЕ СВЕДЕНИЯ определяет мультимедийное электронное издание как электронное издание в котором информация различной природы присутствует равноправно и взаимосвязано для решения определенных разработчиком задач причем эта взаимосвязь обеспечена соответствующими программными средствами
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
ГОСТ Р ИСО 14915-1-2010 приводит следующее определение мультимедиа (multimedia) Комбинации статических и динамических форм представления информации которые могут быть интерактивно управляемы и представлены в приложении одновременно
ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
Происходит он от соединения английских слов ndash laquomultyraquo laquomultipleraquo (множественный складной состоящий из многих частей) и laquomediaraquo (среда средство) или точнее от латинских слов multum (много) и media medium (средоточие средство способ)
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В 1965 году термин laquoмультимедиаraquo был использован для описания Exploding Plastic Inevitable ndash шоу совместившего в себе живую рок-музыку кино экспериментальные световые эффекты и нетрадиционное искусство
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В конце 1970-х годов этот термин обозначал презентации составленные из изображений получаемых от нескольких проекторов синхронизированных со звуковой дорожкой
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В 1988 г Европейская комиссия по проблемам внедрения и использования новых технологий предложила следующее определениемультимедиа ndash продукт содержащий laquoколлекции изображений текстов и данных сопровождающихся звуком видео анимацией и другими визуальными эффектами (Simulation) и включающий интерактивный интерфейс и другие механизмы управленияraquo
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В статье Сергея Новосельцева laquoМультимедиа ndash синтез трех стихийraquo опубликованной в 1991 году в журнале laquoКомпьютерПрессraquo дается следующее определение laquoмультимедиаraquo (multimedia) ndash это интерактивные системы обеспечивающие работу с неподвижными изображениями и движущимся видео анимированной компьютерной графикой и текстом речью и высококачественным звуком
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
bull ГОСТ 783-2001 ЭЛЕКТРОННЫЕ ИЗДАНИЯ ОСНОВНЫЕ ВИДЫ И ВЫХОДНЫЕ СВЕДЕНИЯ определяет мультимедийное электронное издание как электронное издание в котором информация различной природы присутствует равноправно и взаимосвязано для решения определенных разработчиком задач причем эта взаимосвязь обеспечена соответствующими программными средствами
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
ГОСТ Р ИСО 14915-1-2010 приводит следующее определение мультимедиа (multimedia) Комбинации статических и динамических форм представления информации которые могут быть интерактивно управляемы и представлены в приложении одновременно
ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В 1965 году термин laquoмультимедиаraquo был использован для описания Exploding Plastic Inevitable ndash шоу совместившего в себе живую рок-музыку кино экспериментальные световые эффекты и нетрадиционное искусство
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В конце 1970-х годов этот термин обозначал презентации составленные из изображений получаемых от нескольких проекторов синхронизированных со звуковой дорожкой
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В 1988 г Европейская комиссия по проблемам внедрения и использования новых технологий предложила следующее определениемультимедиа ndash продукт содержащий laquoколлекции изображений текстов и данных сопровождающихся звуком видео анимацией и другими визуальными эффектами (Simulation) и включающий интерактивный интерфейс и другие механизмы управленияraquo
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В статье Сергея Новосельцева laquoМультимедиа ndash синтез трех стихийraquo опубликованной в 1991 году в журнале laquoКомпьютерПрессraquo дается следующее определение laquoмультимедиаraquo (multimedia) ndash это интерактивные системы обеспечивающие работу с неподвижными изображениями и движущимся видео анимированной компьютерной графикой и текстом речью и высококачественным звуком
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
bull ГОСТ 783-2001 ЭЛЕКТРОННЫЕ ИЗДАНИЯ ОСНОВНЫЕ ВИДЫ И ВЫХОДНЫЕ СВЕДЕНИЯ определяет мультимедийное электронное издание как электронное издание в котором информация различной природы присутствует равноправно и взаимосвязано для решения определенных разработчиком задач причем эта взаимосвязь обеспечена соответствующими программными средствами
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
ГОСТ Р ИСО 14915-1-2010 приводит следующее определение мультимедиа (multimedia) Комбинации статических и динамических форм представления информации которые могут быть интерактивно управляемы и представлены в приложении одновременно
ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В конце 1970-х годов этот термин обозначал презентации составленные из изображений получаемых от нескольких проекторов синхронизированных со звуковой дорожкой
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В 1988 г Европейская комиссия по проблемам внедрения и использования новых технологий предложила следующее определениемультимедиа ndash продукт содержащий laquoколлекции изображений текстов и данных сопровождающихся звуком видео анимацией и другими визуальными эффектами (Simulation) и включающий интерактивный интерфейс и другие механизмы управленияraquo
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В статье Сергея Новосельцева laquoМультимедиа ndash синтез трех стихийraquo опубликованной в 1991 году в журнале laquoКомпьютерПрессraquo дается следующее определение laquoмультимедиаraquo (multimedia) ndash это интерактивные системы обеспечивающие работу с неподвижными изображениями и движущимся видео анимированной компьютерной графикой и текстом речью и высококачественным звуком
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
bull ГОСТ 783-2001 ЭЛЕКТРОННЫЕ ИЗДАНИЯ ОСНОВНЫЕ ВИДЫ И ВЫХОДНЫЕ СВЕДЕНИЯ определяет мультимедийное электронное издание как электронное издание в котором информация различной природы присутствует равноправно и взаимосвязано для решения определенных разработчиком задач причем эта взаимосвязь обеспечена соответствующими программными средствами
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
ГОСТ Р ИСО 14915-1-2010 приводит следующее определение мультимедиа (multimedia) Комбинации статических и динамических форм представления информации которые могут быть интерактивно управляемы и представлены в приложении одновременно
ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В 1988 г Европейская комиссия по проблемам внедрения и использования новых технологий предложила следующее определениемультимедиа ndash продукт содержащий laquoколлекции изображений текстов и данных сопровождающихся звуком видео анимацией и другими визуальными эффектами (Simulation) и включающий интерактивный интерфейс и другие механизмы управленияraquo
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В статье Сергея Новосельцева laquoМультимедиа ndash синтез трех стихийraquo опубликованной в 1991 году в журнале laquoКомпьютерПрессraquo дается следующее определение laquoмультимедиаraquo (multimedia) ndash это интерактивные системы обеспечивающие работу с неподвижными изображениями и движущимся видео анимированной компьютерной графикой и текстом речью и высококачественным звуком
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
bull ГОСТ 783-2001 ЭЛЕКТРОННЫЕ ИЗДАНИЯ ОСНОВНЫЕ ВИДЫ И ВЫХОДНЫЕ СВЕДЕНИЯ определяет мультимедийное электронное издание как электронное издание в котором информация различной природы присутствует равноправно и взаимосвязано для решения определенных разработчиком задач причем эта взаимосвязь обеспечена соответствующими программными средствами
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
ГОСТ Р ИСО 14915-1-2010 приводит следующее определение мультимедиа (multimedia) Комбинации статических и динамических форм представления информации которые могут быть интерактивно управляемы и представлены в приложении одновременно
ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
В статье Сергея Новосельцева laquoМультимедиа ndash синтез трех стихийraquo опубликованной в 1991 году в журнале laquoКомпьютерПрессraquo дается следующее определение laquoмультимедиаraquo (multimedia) ndash это интерактивные системы обеспечивающие работу с неподвижными изображениями и движущимся видео анимированной компьютерной графикой и текстом речью и высококачественным звуком
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
bull ГОСТ 783-2001 ЭЛЕКТРОННЫЕ ИЗДАНИЯ ОСНОВНЫЕ ВИДЫ И ВЫХОДНЫЕ СВЕДЕНИЯ определяет мультимедийное электронное издание как электронное издание в котором информация различной природы присутствует равноправно и взаимосвязано для решения определенных разработчиком задач причем эта взаимосвязь обеспечена соответствующими программными средствами
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
ГОСТ Р ИСО 14915-1-2010 приводит следующее определение мультимедиа (multimedia) Комбинации статических и динамических форм представления информации которые могут быть интерактивно управляемы и представлены в приложении одновременно
ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
bull ГОСТ 783-2001 ЭЛЕКТРОННЫЕ ИЗДАНИЯ ОСНОВНЫЕ ВИДЫ И ВЫХОДНЫЕ СВЕДЕНИЯ определяет мультимедийное электронное издание как электронное издание в котором информация различной природы присутствует равноправно и взаимосвязано для решения определенных разработчиком задач причем эта взаимосвязь обеспечена соответствующими программными средствами
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
ГОСТ Р ИСО 14915-1-2010 приводит следующее определение мультимедиа (multimedia) Комбинации статических и динамических форм представления информации которые могут быть интерактивно управляемы и представлены в приложении одновременно
ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ПОНЯТИЙНЫЙ АППАРАТ МУЛЬТИМЕДИА
ГОСТ Р ИСО 14915-1-2010 приводит следующее определение мультимедиа (multimedia) Комбинации статических и динамических форм представления информации которые могут быть интерактивно управляемы и представлены в приложении одновременно
ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ОСНОВНЫЕ СОСТАВЛЯЮЩИЕ
МУЛЬТИМЕДИА
ИзображенияАудиоТекст
Анимация Видео Интерактивность
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
МНОГОЗНАЧНОСТЬ ПОНЯТИЯ МУЛЬТИМЕДИА
Особый обобщающий вид информации которая объединяет в себе как традиционную статическую (текст графику) так и динамическую информацию разных типов (речь музыку видеофрагменты анимацию и тп)
Компьютерное аппаратное обеспечение (наличие привода BD-RRE amp DVDplusmnRRWRAM amp CD-RRW BD-RREXL amp DVD RAMampDVDplusmnRRW звуковой и видеоплаты с помощью которых возможно воспроизведение звуковой и видеоинформации джойстика и других специальных устройств)
Мультимедиа программа
Издание созданное на основе мультимедийной технологии
Технология описывающая порядок разработки функционирования и применения средств обработки информации разных типов
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ИНТЕРАКТИВНОСТЬОдна из основных особенностей и преимуществ мультимедийного продукта Интерактивность позволяет пользователю взаимодействовать с информацией выбирать последовательность способ подачи темп уровень сложности длительность и тдПользователь зритель имеет возможность как творческая личность ndash режиссер ndash управлять потоком информации за счет чего возникает наиболее мощное психологическое и эмоциональное воздействие
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ВИДЫ ИНТЕРАКТИВНОСТИ
Одним из ключевых свойств мультимедиа является их интерактивность Роде и Азбелл (Rhodes and Azbell 1985 цитируется по изданию Schulmeister 1997) указывают три различных типа интерактивностиbull реактивное взаимодействиеbull активное взаимодействиеbull обоюдное взаимодействие
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ВИДЫ ИНТЕРАКТИВНОСТИРЕАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Реактивное взаимодействие пользователи проявляют ответную реакцию на представляемые им ситуации Последовательность ситуаций жестко фиксирована и возможности управления программой незначительны
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ВИДЫ ИНТЕРАКТИВНОСТИАКТИВНОЕ ВЗАИМОДЕЙСТВИЕ
Активное взаимодействие пользователи контролируют программу те сами решают в каком порядке выполнять задания и по какому пути следовать в изучении материала в рамках мультимедийного продукта
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ВИДЫ ИНТЕРАКТИВНОСТИОБОЮДНОЕ ВЗАИМОДЕЙСТВИЕ
Обоюдное взаимодействие пользователи и программы способны взаимно адаптироваться друг к другу например в системах виртуальной реальности Возможности контроля пользователем как и при активном взаимодействии расширяются
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
УРОВНИ ИНТЕРАКТИВНОСТИСогласно международным стандартам выделяют четыре уровня интерактивностиbull простойbull ограниченныйbull полныйbull уровень реального масштаба времени
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
УРОВНИ ИНТЕРАКТИВНОСТИПРОСТОЙ
Первый уровень интерактивности Условно-пассивные формы взаимодействия Этот уровень характеризируется минимальным взаимодействием пользователя с моделью Пассивными данные формы названы с некоторой долей условности потому что от пользователя все-таки требуются некоторые управляющие воздействия (работа с клавишами laquoпускraquo laquoстопraquo laquoпаузаraquo и тп) Цель и требуемый результат работы заранее определены восприятие и усвоение laquoготовойraquo информации
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
МОДЕЛИ ИМЕЮЩИЕ ПЕРВЫЙ УРОВЕНЬ ИНТЕРАКТИВНОСТИ
(ФИЗИКА 7ndash11 КЛ БИБЛИОТЕКА НАГЛЯДНЫХ ПОСОБИЙ - 1СОБРАЗОВАНИЕ)
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
УРОВНИ ИНТЕРАКТИВНОСТИОГРАНИЧЕННЫЙ
Этот уровень характеризуется простым взаимодействием пользователя с составляющими интерфейса модели (уровень выбора элементарных операций из некоторого множества и их исполнения)Цель и требуемый результат работы как и на предыдущем уровне заранее определены восприятие и усвоение laquoготовойraquo информации но число возможных операций с информационным контентом заметно увеличено
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
laquoВИРТУАЛЬНАЯ ФИЗИКАraquo (ПЕРМСКИЙ РЦИ ПГТУ
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
УРОВНИ ИНТЕРАКТИВНОСТИПОЛНЫЙ
международные эксперты характеризуют разнообразием реакций учащегося на многочисленные учебные запросы и расширением спектра способов взаимодействия с элементами мультимедиа средства
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
laquoОТКРЫТАЯ ФИЗИКАraquo (ООО laquoФИЗИКОНraquo)
>
>
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
характеризуется вовлечением учащегося во взаимодействие со средой моделирующей реальные объекты и процессыПользователь управляет элементами среды отвечает на сложные учебные запросы В средствах такого уровня интерактивности максимально используются возможности моделирования реальных объектов и процессов с целью их исследования формирующие учебную среду
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
Допустимые упрощения определяющие степень близости электронного образовательного ресурса к laquoвиртуальной реальностиraquo характеризуютсяbull неполной адекватностью мультимедиа представлений
реальным объектам (замена 3D на 2D стерео на моно реалистических изображений на синтезированные)
bull ограниченным (хотя и достаточно большим) количеством включенных в сложную модель более простых моделей объектов и процессов
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
Формы взаимодействия пользователя с такой моделью не определены (недетерминированы) и поэтому перечислить их почти невозможно При этом можно указать на изменения которые при исследовательском подходе претерпевают некоторые формы взаимодействия третьего уровня 1 Совмещение объектов модели для изменения их свойств
или получения новых объектов 2 Составление произвольных композиций объектов 3 Объединение объектов связями с целью организации их
новой системы
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
4 Изменение параметровхарактеристик процессов в неограниченных пределах
5 Введение структурныхконструктивных изменений в исследуемую систему
6 Импорт произвольных элементов для введения в активное поле контента
7 Эти и другие формы взаимодействия пользователя с моделью приближают эту модель к фрагменту реального мира
УРОВНИ ИНТЕРАКТИВНОСТИРЕАЛЬНОГО МАСШТАБА ВРЕМЕНИ
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТРИ УРОВНЯ ИНТЕРАКТИВНОСТИ
Уровень интерактивнос
тиУровень учителя Уровень ученика
Реактивное взаимодействие
Управление ndash запуск возвращение к предыдущему
фрагменту Простейшие средства навигации
Оперативное реагирование на запросы программы и задания
учителя
Активное взаимодействие
Контроль над программой Выбор траектории учебного
занятия
Управление программой или ресурсом выбор темпа объема
траектории обучения
Обоюдное взаимодействие
Моделирование и конструирование учебного
занятия инструментами обучающей среды
Взаимодействие с обучающей средой Моделирование
реальных объектов и процессов Управление
элементами среды Решение сложных учебных задач
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ОСНОВНЫЕ ВИДЫ МУЛЬТИМЕДИА-ИЗДАНИЙ НА
CDDVD ROMbull энциклопедииbull музыкальные дискиbull художественные и музейные дискиbull мультимедиа-учебники и обучающие программыbull каталоги продукции (включая диски для выставок
конференций и мультимедиа- журналы)bull техническую документацию на CDDVD ROM
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ЭЛЕКТРОННЫЙ ПУТЕВОДИТЕЛЬ
Для сопровождения экспозиций очень удобным является наличие электронных путеводителей Такие путеводители создаются как правило в виде мультимедийных киосковЗадачи мультимедийного киоскаbull помогать ориентироваться посетителю в музееbull привлечение внимания или возможность быстрого получения
интересующей информации
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
>
>
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
>
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
>
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
>
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
>
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ЭЛЕКТРОННЫЙ УЧЕБНИК
Типовой учебник как компонент дистанционного обучения содержитbull содержательный теоретический материалbull практикумbull системы самоконтроля знаний (тестов)
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ЭЛЕКТРОННЫЙ УЧЕБНИКМногообразие мультимедийных возможностей в электронном учебнике может быть реализовано через следующие составляющиеbull построение интересных и наглядных практических
занятийbull тестовые системы которые могут использоваться не
только для проверки знаний но и для самоконтроля учащегося (вопросы в конце параграфа учебника)bull сопроводить электронный учебник справочным
материалом и дополнительной литературой
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ЭЛЕКТРОННЫЙ УЧЕБНИКbull Web- компоненты учебных курсов для организации и
администрировании учебного процесса составления расписания учета студентов и их успеваемостиbull Web- компоненты для осуществления удаленных
консультаций преподавателямиbull Web- компоненты позволяющие студентам выполнять
совместные задания или советоваться при и выполнении
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ЭТАПЫ СОЗДАНИЯ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
ЭскизСхема
интерфейса
Прототип Макет РеализацияИде
я
Создание базового
концептаосновы всего проекта
Визуализация концептаоснова
дизайна
Взаимодействие между
элементамиоснова UX
Создание графики и контента
Реализация на используемой
платформе
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ИДЕЯbull Не думайте о том что ваше приложение обязательно
должно быть новаторским или делать что-то умное оно не должно быть революционным или уникальным оно должно быть визуально привлекательным легким в использовании и полезным Сделайте простое приложение которое будет действительно нужно вашей целевой аудитории
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
bull httpshabrahabrrupost199200 - Путь от идеи до макета Размышляя о концепции продуктаbull httpshabrahabrrucompanyedisonblog267569 -
Проектирование программного обеспеченияbull httpshabrahabrrupost131115 - Роль бизнес-
процессов в проектировании интерфейсовbull httpshabrahabrruusersmagicstyletopics -
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕКраткое описание сути будущего продукта Вкратце описывает что это за продукт каковы цели и задачи его создания кто его пользователи и каковы основные возможности будущей системы
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ИДЕЯ И ЕЕ ОФОРМЛЕНИЕПродумайте структуру приложения и метафоры которые могут быть применены при ее реализации Решению указанной проблемы способствует наблюдение за работой пользователей при выполнении ими задач в данной предметной области
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ОПИСАНИЕ РЕШАЕМЫХ МУЛЬТИМЕДИЙНЫМ ИЗДАНИЕМ
ЗАДАЧДля этого необходимо ответить на следующие вопросыbull для кого создается продуктbull какова главная идея продуктаbull почему мультимедиа-среда будет лучше
традиционнойbull для чего будут использоваться текст графика
анимация видео звукbull какой стиль изложения (риторика) будет
использоватьсяbull на чем будет сфокусировано содержание проекта
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
СТРУКТУРА ПРОЕКТАВажным понятием в разработке сайта является схема навигации определяющая как пользователь будет перемещаться между страницами С помощью схемы навигации пользователь получает представление о структуре сайта а также представление о том в каком месте узла он находится в данный момент
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ЭСКИЗ (SKETCH)Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience Вы уже знаете ЧТО вы хотите от вашего приложения но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату
Эскизирование позволит вам визуализировать поведение пользователя Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ЭСКИЗ ndash ЭТО НЕ ПРОТОТИП И НЕ СХЕМАДелая эскиз (sketch) вы должны получить базовый концепт того как будет работать приложение в пользовательском интерфейсе Существует множество вариантов интерфейсного воплощения идеи На этом этапе вы должны выяснить что это за варианты и какой из них будет оптимален Детали и специфика пользовательского интерфейса здесь не так важны Куда более важно сейчас понять что пользователь увидит на каждом шаге своего экспириенса прежде чем достигнет цели
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Здесь мы создаем структурные схемы страниц (wireframes) которые показывают какая информация и элементы управления должны располагаться на страницах системы
httpshabrahabrrupost148600 - Прототип блочная схема макет ndash что выбрать
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
СХЕМА ИНТЕРФЕЙСА (WIREFRAME)Должна четко отображатьbull основные группы
содержимого (что)bull структуру информации
(где)bull описание и основные
визуализации взаимодействия пользователя и системы (как)
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ПРОТОТИПИРОВАНИЕ(PROTOTYPE)
bull процесс создания прототипа программы ndash макета (черновой пробной версии) программы обычно ndash с целью проверки пригодности предлагаемых для применения концепций архитектурных иили технологических решений а также для представления программы заказчику на ранних стадиях процесса разработки
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ПРОТОТИП(PROTOTYPE)Ключевая особенность прототипа ndash его интерактивность Те он полностью повторяет поведение будущего приложения Отличие от финального варианта заключается в упрощении графики и контента и разумеется в полном отсутствии бекэнда
БЫСТРОЕ ПРОТОТИПИРОВАНИЕ(АНГЛ RAPID PROTOTYPING
ИЛИ THROWAWAY PROTOTYPING)Выбор инструмента
1 Как велика наша команда2 Где находится люди которые
будут оценивать наш прототип3 Какой у нас бюджет на
средство прототипирования4 Насколько гибким должен быть
наш инструмент прототипирования
Название инструментаПлатформаЦена
Описание
Balsamiq MockupsВеб $ 79
Позволяет очень быстро создавать макеты вашего ПО Сгенерированное содержимое выглядит как скетчи
CogToolКроссплатформенный Бесплатный
Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность
Visio Professional Многие называют Visio laquoзолотым стандартомraquo для инструментов создания экранных форм Может создавать интерактивные прототипы
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
МАКЕТ (MOCKUP)Макет является средне или высоко детализированным статичным дизайном проекта Очень часто макет представляет собой конечный дизайн частей или в целом проекта Метод Детализация Затрат
ыПрименение Особенности
Блочная схема Низкая $
Документация облегчение понимания
Набросок чб
Прототип Средняявысокая $$$
Юзабилити-тестирование структура продукта
Динамичный
Макет Средняявысокая $$
Утверждение с заказчиком чистовой дизайн
Статичный
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
МАКЕТ(MOCKUP)Качественно сделанный макетbull передает структуру
информации визуализирует содержание и демонстрирует основные функциональные возможности в виде статистических изображений
bull позволяет людям понять как будет выглядеть конечный продукт
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
МАКЕТ(MOCKUP)На этом этапе продукт обретает внешний вид mdash до этого мы занимались его сутью и принципами работы
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
РЕАЛИЗАЦИЯПосле получения макетов гайдлайна и нарезки начинается работа разработчика Мы передаем в разработку все то что придумали и ожидаем ранний результат
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
РЕАЛИЗАЦИЯАЛЬФА-ВЕРСИЯ
bull Программисты построили полностью работоспособную (или почти работоспособную) версию программного продукта (функциональный прототип) Проект разработан во всех деталях включая все средства для задания условий на значения исправления ошибок обеспечения защиты и создания отчетов bull Основные функциональные возможности реализованы и
работают хотя некоторые специальные средства могут быть не готовы и имеется большое число ошибок На основе альфа-версии можно проводить тесты над всем программным продуктом
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
РЕАЛИЗАЦИЯБЕТА-ВЕРСИЯ
bull Следует убедиться что пользователь может инсталлировать программу Для этого требуется установить программный продукт во всех операционных средах которые могут применяться пользователемbull Разработчики должны также устранить все серьезные ошибки
Число и степень серьезности ошибок должны быть достаточно низкими хотя все зависит от цели выпуска опытной версии и отношений с пользователями
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ И РЕКОМЕНДАЦИИ ПО ЕГО ПОСТРОЕНИЮ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
CProgram Files (x86)MacromediaAuthorware 70ShowMe
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
>
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ХУДОЖЕСТВЕННЫЙ ДИЗАЙН ИНТЕРФЕЙСА И СРЕДСТВ НАВИГАЦИИ
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕ ЧТО МОЖНО ДЕЛАТЬ А ЧТО НЕЛЬЗЯ
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕСОЗДАВАЙТЕ ПРАВИЛЬНУЮ ИЕРАРХИЮ
Создать иерархию можно различными способами например с помощью веса размера цвета или контраста Ее главная цель mdash установить на странице правильную структуру благодаря которой текст будет прост для восприятия и чтения
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ СЛИШКОМ МЕЛКИЙ
ТЕКСТНе каждый имеет 100 зрение поэтому очень важно убедиться что ваш текст подходит для всех пользователей и его удобно читатьРекомендуется использовать размер не менее 14 пт
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕИСПОЛЬЗУЙТЕ ПРОСТОЙ ШРИФТ ДЛЯ
ОСНОВНОГО ТЕКСТАТекст должен легко восприниматься и только потом быть красивым необычным и тп
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ МНОГО ШРИФТОВ
НА ОДНОЙ СТРАНИЦЕТак если использование нестандартного шрифта в некоторых случаях может быть уместно (например в заголовке статьи) то использование в одном предложении никогдаВсего рекомендуется использовать не более 3 шрифтов
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕДОБАВЛЯЙТЕ БОЛЬШЕ МЕСТА МЕЖДУ
СТРОКАМИОтсутствие пробелов между строками может сильно ухудшить восприятие Однако эта проблема легко решается путем увеличения высоты строки
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕАБЗАЦЫ
В экранном дизайне стало хорошей традицией использовать английские абзацы это удобно при быстром чтении каждый абзац ясно виден и можно быстро перескакивать глазами с абзаца на абзацНе допустимым является смешивание и красной строки и английские абзацы
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЕРХНИЙ РЕГИСТР
Люди не привыкли к чтению текста набранного заглавными буквами тк это усложняет восприятие еще больше чем нестандартные шрифты
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕОГРАНИЧИВАЙТЕ ДЛИНУ СТРОКИ 50-60
СИМВОЛАМИЕсли строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку Если ли она слишком короткая можно нарушить ритм тк laquoперескакиваниеraquo по строкам будет очень частым Отсюда оптимальная длина должна составлять примерно 50-60 символов
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕНЕ ИСПОЛЬЗУЙТЕ ВЫРАВНИВАНИЕ
ПО ЦЕНТРУ ОЧЕНЬ ЧАСТО
Центрированный текст труднее читать тк края каждой строки неровные и у нас нет так называемой отправной точкиПоэтому использовать центрирование нужно в умеренных количествах больше выбирая выравнивание по левому краю
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТИПОГРАФИКА В ДИЗАЙНЕДОСТАТОЧНЫЙ КОНТРАСТ МЕЖДУ
ТЕКСТОМ И ФОНОМКонтрастность ndash еще один из аспектов типографики который может повлиять на читабельность При выборе цвета для шрифта убедитесь что он не сливается с фоном и laquoвиденraquo на странице Так же помните что настройки контрастности на мониторе пользователя могут отличаться от ваших
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ДИЗАЙН ИНТЕРФЕЙСОВПОДХОДЫ К ПОСТРОЕНИЮ
Лучший интерфейс прост и интуитивно понятен он обладает продуманной структурой и обеспечивает непринужденное перемещение пользователя с одной страницы ресурса на другуюНавигация грамотно разработанного издания должна в любой момент отвечать на три вопросаГде я сейчас нахожусьГде я уже былКуда я могу пойти дальше
ДИЗАЙН ИНТЕРФЕЙСОВОСНОВНАЯ НАВИГАЦИЯ
Ссылки на наиболее важные страницы или разделы
ДИЗАЙН ИНТЕРФЕЙСОВГЛОБАЛЬНАЯ НАВИГАЦИЯ
Включает в себя ссылки на страницы которые должны быть доступны с любой страницы издания Например ссылка на домашнюю страницу
ДИЗАЙН ИНТЕРФЕЙСОВТЕМАТИЧЕСКАЯ НАВИГАЦИЯ
Навигация по страницам и разделам одной тематики
ДИЗАЙН ИНТЕРФЕЙСОВНАВИГАЦИЯ В ТЕКСТЕ
Вид навигации внутри текста одной страницы Например если в тексте упомянуты другие страницы на них можно сделать ссылку
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Позволяет посетителю понять в каком разделе он находитсяПриложение должно всегда давать возможность пользователю определить свою текущую позицию в пределах структуры мультимедийного приложения показывая как он попал в заданную позицию и куда он может перейти из нее
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯНа большинстве языков нам преподают читать слева направо и сверху вниз Тот же самое и для компьютерного экрана ndash внимание пользователя будет обращено к верхней левой части экрана как к началу так что наиболее важный элемент должен быть там
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ДИЗАЙН ИНТЕРФЕЙСОВПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
Навигация разрабатывается после того когда определён круг задач решаемых мультимедийным изданием и объём контента (текст таблицы и графика аудио и видео анимация)
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
СОДЕРЖАНИЕ КОНТРОЛЬНОЙ РАБОТЫ (2 ЧАСТЬ)
Разработка мультимедийного издания
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ИЗУЧИТЬМатериал по технологиям создания мультимедийных изданий в программе Adobe DirectorУчебные материалы мультимедиа 2 семестрлабораторные работы Adobe DirectorСоздание панорам и виртуальных туровУчебные материалымультимедиа2 семестрлабораторные работы Виртуальный тур
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ИЗУЧИТЬМатериал по основным принципам и этапам проектирования пользовательского интерфейса используя рекомендуемые источникиРаздел рекомендуемые источники в данной презентации
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
РЕАЛИЗОВАТЬ МУЛЬТИМЕДИЙНОЕ ИЗДАНИЕ
При выполнении разработки
не допускается использование
исходных материалов и
шаблонов прилагавшихся для
изучения лабораторных работ
Используя знания полученные при изученииbull программных средств ndash Adobe Director
Adobe Photoshop Adobe Illustrator Adobe Premier Adobe After Effect Adobe Audition
bull дисициплин ndash Компьютерная геометрия и гарфика Аудиовизуальные средства в медиаиндустрии Векторная и растровая графика Введение в теорию дизайна Алгоритмические языки и системы программирования
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
1 Обложка2 Содержание непосредственно раскрывающее тему
мультимедийного издания3 Поиск по ключевым терминам4 Навигация должна быть ясной и удобной так чтобы даже
начинающий пользователь мог легко найти нужную ему информацию
5 Интерактивность реализованную через средства навигации6 Художественный дизайн интерфейса и навигации
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО ИЗДАНИЯ
6 Использование всех способов представления информации (аудио видео анимация текст графика) взаимодополняющих содержание мультимедийного издания
7 Материал экрана должен иметь некоторый завершенный смысл но в тоже время не быть перегружен информацией (предъявляемый в кадре текстовый материал должен быть минимальным по объему)
8 Используемые размеры шрифтов цвета приемы выделения части информации на экране должны быть обоснованы и не должны приводить к повышенной утомляемости)
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТРЕБОВАНИЯ К СТРУКТУРЕ МУЛЬТИМЕДИЙНОГО
ИЗДАНИЯ9 Текстовый материал размещенный в кадре должен
сопровождаться иллюстративным материалом (статические и динамические иллюстрации мультимедийные приложения) Иллюстративный материал предназначен облегчить восприятие и усвоение информации и в соответствии с этим должны выбираться его содержание тип и способ воспроизведения в кадре
10Не менее 5 экранов не включая обложку и сведения об авторе (всего 7 экранов)
11Сведения об авторе
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТРЕБОВАНИЯ К ОТЧЕТУПроцесс проектирования и реализации предполагает разработку следующих основных документов
1 Описание решаемых мультимедийным изданием задач Концепция проекта
2 Структурная схема проекта3 Эскизы страниц (2 ndash 3 варианта) 4 Схема интерфейса (2 ndash 3 варианта)5 На основе одного из вариантов или комбинации разработанных
схем представить прототип6 На основе прототипа представить макет7 Реализацию разработанного проекта (в двух форматах exe dir)
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
ТРЕБОВАНИЯ К ИТОГОВОЙ АТТЕСТАЦИИ
Итоговая аттестация по дисциплине будет проходить с учетом всех этапов работы по дисциплине1 Представление отчета по всем частям контрольной работы2 Освоения материала рекомендуемых источников3 Проверки изученного материала в тестовой форме
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
1 httpwwwintuitrustudiescourses126431191lecture21980 - Академия Intel Введение в разработку приложений для ОС Android
2 httpskillsuprubloginterfejsyipochti-ploskij-dizajnhtml - Почти плоский дизайн
3 httpproductdesigncenter - Русская школа сервисного дизайна
4 httplopartbyskevomorfizm-v-tsifrovy-h-interfejsah-i-hudozhestvenny-h-programmah - Скевоморфизм в цифровых интерфейсах и художественных программах
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Дизайн интерфейсов Позиционирование элементов управления
Дизайн интерфейсов Позиционирование элементов управления (2)
Содержание контрольной работы (2 часть)
Изучить
Изучить (2)
Реализовать мультимедийное издание
Требования к структуре мультимедийного издания
Требования к структуре мультимедийного издания (2)
Требования к структуре мультимедийного издания (3)
Требования к отчету
Требования к итоговой аттестации
рекомендуемые источники
рекомендуемые источники (2)
рекомендуемые источники (3)
рекомендуемые источники (4)
рекомендуемые источники (5)
рекомендуемые источники (6)
рекомендуемые источники (7)
Дополнительные источники
РЕКОМЕНДУЕМЫЕ ИСТОЧНИКИ
5 httpfrolandrusamodelvbguidech6_8_1html - Основы дизайна интерфейса
6 httpwwwfuturemuseumrupart03030302htm - ДИЗАЙН ИНТЕРФЕЙСА (Из статьи Технология мультимедиа возможности и реалии) АВ Лебедев
7 httpwwwfuturemuseumrupart03030301htm - НОВАЯ ТЕХНОЛОГИЯ - НОВЫЕ ВОЗМОЖНОСТИ (Глава из книги Методология и практика электронных изданий по искусству М 1998) ВА Лебедев
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
Itemid=29 - Проблема анализа структуры и компонентов мультимедийных изданий
17httpwwwartlebedevrukovodstvosections - ру Ководство Графический и промышленный дизайн проектирование интерфейсов типографика семиотика и визуализация
