Реферат: Компьютерная графика

«Графическоеобоснование на разработку Web-сайта»

2010

1. Выбор интерфейса

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

Разработка usability – это методологический подход к созданию сайта или любого другогопользовательского интерфейса. Прежде, чем приступить к разработке usability, необходимо определить цели сайта, егоаудиторию.

Первое и главное правило удобства сайтов:разработчику всегда следует смотреть на свою работу глазами пользователя.Именно он является конечным потребителем сайта, поэтому его ожидания и интересыдолжны учитываться в первую очередь.

Характеристики, которые определяютуспешность пользовательского интерфейса:

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

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

Если панель внизу – это удобно, так какчтение страницы обычно заканчивается именно там. Однако эта область остаетсяневидимой пока страницу не прокрутят до конца вниз.

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

Навигационная система может состоять из:

1. Текстовых ссылок – наиболеепростая форма навигации. Обычно это 1–3 слова, которые описывают то, кудаприведет данная ссылка. Например: карта сайта, связь с нами, ссылки, гостеваякнига и т.д. Преимущества таких ссылок в высокой скорости загрузки. Легкомасштабируются и редактируются. Читаемость во всех браузерах.

2. Графических ссылок, которые делятся на две категории:графические карты (image maps) и кнопки.

1. Графические карты – отдельныйграфический элемент, разделенный на несколько участков, которые, в своюочередь, являются гиперссылками. Карты могут выглядеть достаточно эффектно. Ониудобны для установки одного графического элемента вместо нескольких. Служатдовольно сильным средством коммуникации с пользователем.

2. Графические кнопки.Их преимущество в том, что привлекают внимание пользователя. Могутбыть более описательными (визуально), нежели простые текстовые ссылки. Болеегибки, чем графические карты. Более быстрая загрузка, чем у карты. Кнедостаткам можно отнести следующее. Часто, кнопки менее наглядны, чем простойтекст. Необходимость делать новую кнопку для любых дополнительных разделовсайта. Плохо применимо для больших сайтов.

Панель навигации по основным разделам сайта позволитпользователю легко понять структуру сайта и сразу переместиться в необходимыйраздел с любой страницы.

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

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

Основной текст на страницах обычно имеетнебольшой размер. Такой текст воспринимается значительно лучше, еслииспользуются рубленые шрифты, например, Arial, Verdana, а не шрифты с засечками(например, Times New Roman). Текст должен быть достаточно крупным, чтобы егобыло удобно читать всем. Размер шрифта должен быть маштабируемым. Его размер влистах стилей (или непосредственно в коде страницы) нужно задать вотносительных единицах измерения.

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

2. Графический дизайн. Выбор цветовойсхемы

Графический дизайн – это художественно-проектнаядеятельность. От того, как оформлен сайт, как он предстает перед аудиторией, вомногом зависит и его популярность.

Считается, что графическое наполнение web-страницыдолжно быть выполнено в едином стиле. Нет ничего важнее правильного подборацветов для оживления веб-страницы.

Выбор цветовой гаммы сайта – важный аспектуспеха сайта.

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

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

Цвета фона и основного текста должны бытьконтрастными. Чем контрастнее, тем удобнее будет читать текст.

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

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

Веб-страница, кроме текстовой информациисодержит еще и графическую. На сегодняшний день самым основным графическим форматомв Internet является GIF (Graphics Interchange Format). Обусловлено этотем, что файлы картинок, сохраненные в формате GIF, весьма компактны. GIF оченьплотно сжимает графический файл, при этом на качестве самой картинки подобноесжатие практически не отражается. В формате JPEG имеется только одно очевидноепреимущество: JPEG способен работать не только с 256 цветами (количество цветовв GIF может быть от 2 до 256), а с полноцветными картинками с 16 миллионамицветов. Кроме того, для стандартных рисунков формат JPEG вообще противопоказан,так как этот формат не способен сохранять всю насыщенность гаммы. GIF обладает ещеодной необыкновенной возможность. Этот графический формат позволяет определятьв исходной картинке прозрачные цвета, т.е. части картинки при ее просмотре вобозревателе становятся невидимыми. Таким образом, в формате GIF сохраняют рисунки,а в формате JPEG фотографии.

3. Техническая реализация

Весь процесс созданиявеб-сайта я разделила на несколько этапов. Это разработка дизайна и подготовкаграфики, создание навигации, наполнение контента.

Дизайн веб-сайтаразрабатывался в программе Photoshop. Длярешения выбора цветовой схемы мой выбор пал в пользу оранжевых и нежно-зеленыхтонов. Я использовала три основных цвета: оранжевый (#e7834f), белый(#FFFFFF) и нежно-зеленый (#9be28e). Для создания связности ицелостности была соблюдена верность одной цветовой схеме.

Были прорисованы кнопки, созданы различныесостояния кнопок.

/> />

/> />

интерфейс пользовательский навигационныйсайт

После чего, дизайн веб-страницы былпорезан на функциональные куски, которые были оптимизированы и сохранены впапку images, которая, в свою очередь находится впапке site.

Для создания сайта я воспользоваласьпрограммой Dreamweaver. Сайт состоит из 5 страниц, представлена фотогалерея.Все страницы связаны между собой с помощью ссылок. Использовалась линейнаясистема навигации.

Для форматирования текста применялиськаскадные таблицы стилей. Как наиболее удобочитаемый использовался шрифт «Courier New»,темный на светлом фоне (правило контраста).

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

Библиография

1. Нильсен Я. Веб-дизайн: книга Якоба Нильсена – Пер. сангл. – СПб: Символ-Плюс, 2003 -512 с:

2. Леонтьев Б. Web-дизайн: Тонкости,хитрости и секреты. – М.: Познавательная книга плюс, 1999. – 192 с.

3. Кирсанов Д. Веб-дизайн: 2006 г.