Основы компьютерного дизайна. 1.Основы композиции в дизайне. 2.Цветоведение 3.Выбор шрифта 4.Психологические особенности восприятия визуальной информации. - презентация

1 Основы компьютерного дизайна

2 1.Основы композиции в дизайне. 2.Цветоведение 3.Выбор шрифта 4.Психологические особенности восприятия визуальной информации 5.Рекомендации к разработке интерфейсов образовательных продуктов

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

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

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

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

7 Начало Динамика неявная Подобно тому, как любое движение определяет линию, вдоль которой оно происходит, любая линия подразумевает движение. Если, например, линии подвешены «в воздухе» и у них нет преград, то движение взгляда вдоль них ускоряется: Если один конец свободен, а другой привязан к статическому объекту, то контраст сильнее, а ускорение еще больше: Если один конец в виде стрелы, то возникает ощущение неудержимости движения:

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

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

10 Начало Существуют различные способы акцентирования направлений внутри пространства картины - горизонтальные, вертикальные, диагональные, круговые или их сочетания. Каждое из этих направлений имеет свой особый выразительный смысл. "Горизонтальное" - подчёркивает тяжесть, протяженность пространства и его ширину. "Вертикальное" является полной противоположностью "горизонтальному" и выражает лёгкость, высоту и глубину. Точка пересечения горизонтали и вертикали предстает особо акцентированным местом. Оба эти направления носят плоскостной характер и при одновременном использовании создают чувство равновесия, прочности и материальной устойчивости. "Диагональные" направления создают движение и развивают пространство картины в глубину.

11 Начало Четкость и простота Любой элемент, от отсутствия которого композиция не пострадает, должен быть убран. Перегруженность разными стилями шрифта, слишком мелкими буквами, негативами, иллюстрациями или ненужным текстом, усложняет и загромождает композицию. Страница становится трудной для восприятия, и её эффект снижается. Выделение пробелами (паузами) Пробелы - это часть экрана, не занятая другими элементами. Это название сохраняется, даже если эти части закрашены черным или другим цветом. Пробелы играют важную роль в создании образа, ибо пауза в музыке - тоже музыка

12 Начало Понятие интерфейса Интерфейс – средство взаимодействия между различными субъектами. В данном случае между человеком и машиной. Общее требование к интерфейсу выразил американский специалист по эргономике интерфейсов Стив Круг (Steve Krug) в заголовке своей замечательной книги «Не заставляйте меня думать».

13 Начало Первый пункт этого разговора – экран. Его активные зоны и принципы размещения информации и элементов управления.

14 Начало Левый верхний угол первым попадает в поле зрения. Что мы говорим человеку, когда с ним встречаемся впервые? Правильно, говорим «здравствуйте!» и сообщаем цель визита. Следовательно, в левом верхнем углу должен быть расположен логотип (вместо здравствуйте), или верхний уровень иерархии элементов интерфейса (вместо цели визита). Также там может располагаться актуальная на текущий момент информация (например, время, оставшееся для прохождения теста, или личные данные тестируемого). Куда следует взгляд далее? Далее он следует практически горизонтально по всей ширине экрана, но устает и, не доходя до конца, скользит вниз зигзагообразно.

15 Начало Принципы формирования учебного материала Принцип первый. Минимизация. Небольшое количество графики, особенно декоративной. Принцип второй. Используйте однотипные форматы. Изменение формата страницы рекомендуется делать для новых модулей курса. Не используйте разнообразные шрифты в пределах страницы.

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

17 Начало Использование опорных элементов Основными опорными элементами являются: Название страницы; Главы и подглавы; Внутристраничные индексы; Навигационные ссылки; Ссылки; Курсив; Альтернативный текст; Подписи к рисункам. Одним из ключевых моментов в представлении информации - это использование опорных элементов - коротких частей текста, которые дают краткое содержание материала.

18 Начало Ограничивайте число связей, разделов, подразделов и т.д. Организуйте информацию так, чтобы она легко делилась на разделы. Содержание текста должно состоять из 5-6 разделов, длиной не более 600 слов каждый с 3-4 выделенными ссылками.

19 Начало Особенности восприятия шрифтов Работа со шрифтом по своей природе ничем не отличается от творческого процесса создания натюрморта, пейзажа, портрета или любой другой композиции. Здесь, как во всякой творческой работе, все диктуется чувством меры, чувством пропорции и пластики. Буква – это абстрактная форма. Теоретически буква может рассматриваться отвлеченно, независимо от других, но свое подлинное звучание она приобретает только в связи с другими. Практически буква – часть алфавита, которому она принадлежит, или часть композиции, в которой она участвует.

20 Начало Шрифт должен читаться и смотреться. Сплошной текст должен читаться без каких либо усилий, не нуждается в доказательствах. Выделенные фрагменты должны читаться не без сопротивления, задерживая на себе внимание. Это в еще большей мере относится к изолированным строкам – к заголовкам, рубрикам, логотипу.

21 Начало Размер шрифта. Размер используемого шрифта играет очень важную роль в создании эффекта. Часто относительно мелкий шрифт (например 11 пунктов) создает ощущение большей доверительности и важности информации.

22 Начало Шрифты с большими круглыми буквами «О» и «хвостиками» воспринимаются как дружественные и «человечные», возможно, потому, что их начертание подражает образу человеческого лица. Прямолинейные и угловатые шрифты ассоциируются с непреклонностью, жесткостью; они характеризуются холодностью, безликостью и механистичностью. В терминах психоанализа их определяют такие выражения, как «эмоционально зажатый» или «крепкий задним умом».

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

24 Начало Оформление текста Текст, выдаваемый на экран дисплея, усваивается иначе, чем написанный на бумаге. При этом оказывает влияние размер букв, яркость их свечения, неустойчивость изображения. Поэтому текст должен быть тщательно отобранным, ясным, конкретным, лаконичным.

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

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

27 Начало Согласованность оттенков: используйте для разных типов данных разные оттенки. Например, заголовки делайте синим цветом, предупреждения лучше делать красным, цвет основного текста должен быть тоже определён однозначно. Контрастность: цвета фона и основного текста должны быть контрастными. Чем контрастнее, тем удобнее будет читать текст. На тёмном фоне лучше всего использовать белый или жёлтый цвета, голубой читается сложнее, можно и зелёный использовать. По статистике светлый фон лучше тёмного.

28 Начало Красный: Возбуждение, энергия, страсть, желание, скорость, прочность, мощность, тепло, любовь, агрессия, опасность, огонь, кровь, война, насилие, агрессия, всё интенсивное и страстное. Это стимуляция нервной системы (повышение кровяного давление, учащается дыхание и пульс). Возбуждение, потребность действовать Желтый: Радость, счастье, оптимизм, идеализм, воображение, надежда, солнечный свет, лето, золото, философия, открытость, легкость, раскрепощенность, тепло, уют, мошенничество, малодушие, предательство, ревность, жадность, обман, болезнь, риск. Синий: Мир, спокойствие, устойчивость, гармония, объединение, доверие, истина, консерватизм, безопасность, чистота, порядок, лояльность, небо, вода, холод, торможение нервной системы (понижается давление, замедляется дыхание и пульс). Покой, удовлетворение, пассивность., технология, депрессия, подавитель аппетита.

29 Начало Оранжевый: Энергия, баланс, тепло, энтузиазм, оживленный, экспансивный, пышный, требующий внимания. Зеленый: Природа, среда, здоровая, удачи, восстановление, молодость, бодрость, весна, щедрость, плодородие, эластичное напряжение, статичность, консервативность, ревность, неопытность, зависть, неудача. Пурпурный: Авторский Гонорар, духовность, благородство, церемония, непостижимый, преобразование, мудрость, просвещение, жестокость, высокомерие. Серый: Безопасность, надежность, интеллект, степенный, скромность, достоинство, завершенность, твердый, консерватор, практический, старость, печаль, сверление

30 Начало Коричневый: Земля, очаг, дом, на открытом воздухе, надежность, удобство, выносливость, устойчивость, простота и удобство. Белый: Почтение, чистота, простота, чистота, мир, смиренность, точность, невиновность, молодость, рождение, зима, снег, хорошо, стерильность, брак (Западные культуры), смерть (Восточные культуры), холодный, клинический, стерильный. Черный: Мощность, сексуальность, сложность, формальность, элегантность, богатство, тайна, страх, зло, анонимность, недоволство, глубина, стиль, зло, печаль, раскаяние, гнев, метрополитен, хороший технический цвет, траур, смерть (Западные культуры). Фиолетовый: цвет интеллекта, духовности, также ассоциируется с инфантильностью и внушаемостью.

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