«Эргономика и дизайн Web-сайта» Занятие 4. Топология сайта Интуитивно-понятная структура: Древовидная Линейно-последовательная Гибридная Отсутствие перекрестных. - презентация

1 «Эргономика и дизайн Web-сайта» Занятие 4

2 Топология сайта Интуитивно-понятная структура: Древовидная Линейно-последовательная Гибридная Отсутствие перекрестных переходов между разными ветками Особое оформление внешних ссылок

3 Древовидная структура

4 Линейно-последовательная структура

5 Гибридная структура

6 Эргономика Web-страницы Web-страницы не читают, а просматривают!

7 Страницы должны быть понятными Ясная визуальная иерархия страниц Чем важнее элемент, тем заметнее Элементы связанные логически, связывать визуально Вложенные элементы, если они являются частями друг друга Четко разделенные области Заметные ссылки Отсутствие перегруженности лишними деталями и словами

8 Web-навигация Особенности Web-пространства: Нет ощущения масштаба сайта Нет ощущения направления Нет ощущения местоположения Назначение навигации: Помочь найти требуемую информацию Указать текущее местоположение

9 Меню Меню должно быть четко продумано Иерархия меню должна содержать не более двух уровней Меню должно находиться там, где его ожидают увидеть

10 «Хлебные крошки» Рекомендации по использованию: Размещать вверху страницы Между уровнями использовать символ > Небольшой размер шрифта Использовать слова «Вы находитесь здесь» Зоопарк > Заяц > Шутка

11 Страницы сайта Каждая страница должна иметь название Название должно «обрамлять» содержимое Название должно быть заметным Название должно соответствовать ссылке меню

12 Цель первой страницы Не дать посетителю сразу уйти Показать посетителю то, что он ищет … и то, что не ищет Показать откуда начать просмотр Вызывать доверие к сайту

13 Первая страница сайта Содержимое первой страницы: Цель и назначение сайта Иерархия сайта Поиск Анонсы содержания сайта Обновляемое содержание Обзор сервисов (персонализация, подписка) Реклама Ярлыки Регистрация

14 Шрифты Шрифт с засечками – Times New Roman Шрифт без засечек – Arial Другой шрифт – в виде картинок Не более двух типов шрифтов на странице

15 Цвет на Web-странице Цвет текста и цвет фона должны контрастировать по яркости Фоновый рисунок не должен затруднять чтение текста Количество цветов – не более 4-х Возможно использование одного цвета разной яркости Нюансировка

16 Цвет-тон контрастсближенность яркость, насыщенность сдержанность, приглушенность открытая гаммацветовая нюансировка теплая гаммахолодная гамма

17 Цвет на Web-странице Разряд Цветкрасныйзеленыйсиний A B C D E F

18 Примеры цветов Код Цвет #000000Черный #FFFFFFБелый #FF0000Красный #00FF00Зеленый Код Цвет #0000FFСиний #FFFF00Желтый #FF00FFФиолетовый #00FFFFБирюзовый

19 Стандартная палитра Web СС FF

20 Рисунки на Web-странице Формат Расширение Количество оттенков GIF*.gif256 JPEG*.jpg16 млн. PNG*.png281 трлн.

21 Формат GIF 256 цветов поддерживает загрузку файла с чередованием строк возможен прозрачный фон осуществляет анимацию изображения Используют для рисунков и gif-анимации.

22 Формат JPEG 16 млн. цветов фотографическое качество изображений позволяет задать еще более высокую степень сжатия за счет потери качества Используют для фотографий

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

24

25 «Разработка Web-сайтов и Web-дизайн» Занятие 4 Московский институт открытого образования УМЛ Информационных технологий Тел Сайт: Методист Н.И. Михайлова