web master | Элементы интерфейса
Главная » Элементы интерфейса
    РейтингРейтингРейтингРейтингРейтинг

Элементы интерфейса

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

Содержание:
  • §1. Логотип
  • §2. Меню
  • §3. Строка поиска
  • §4. Кнопки
  • §5. Банеры
  • §6. Графические элементы
  • §7. Элементы главной страницы
  • §8. Внутренние страницы

§1. Логотип

Логотип -  это знак (символ), состоящий из текста и/или графики, элемент фирменного стиля, наиболее часто регистрируемая форма товарного знака. 

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


§2. Меню

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

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

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

Дополнительное меню сайта – как правило, представляет собой наиболее сложную структуру.

Бывает трех видов:
1. Выпадающее меню - раскрывается (выпадает) при наведении на пункт меню.
2. Раскрывающееся меню - имеет раскрывающуюся структуру по клику на кнопку меню.
3. Раскрытое меню - статическое меню, часто имеет древовидную структуру.


§3. Строка поиска

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


§4. Кнопки

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

<FORМ>
< INPUT type= " s ubmit " vаluе= " послать " >
< / FORМ>

На выходе вы получите кнопку, вид которой определяют ваша операционная система и браузер. 

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

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

 Размещение кнопок относительно элементов форм

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


§5. Банеры

Баннер  — графическое изображение рекламного характера. Размещают для привлечения клиентов, для информирования или для создания позитивного имиджа.

Если вы делаете сайт и планируете размещать рекламу, лучше заранее узнать, какую именно и где. Самые дорогие баннерные места должны располагаться высоко и на виду, а вовсе не где-то в подвале. Задача  - сделать так, чтобы баннер, каким бы он ни был, вписывался в сетку сайта.
Лучше всего встраиваются в дизайн: текстовая контекстная реклама наподобие Google Adsense, "тизеры" (реклама с картинкой стандартного размера и текстом), затем - флеш-баннеры, растягивающиеся по заданной ширине, и наконец - реклама одной строкой на всю ширину сайта. Реклама на современном сайте - это неизбежность, которую нужно просто принять как часть нашей повседневной работы.

Основные виды баннеров

JPG баннер —  состоит из простого изображения в формате JPG. Минус такого баннера в его большом размере и не совсем идеальными показателями кпд.
GIF баннер —  простое изображение, но уже в формате GIF. Плюсы этого формата это уменьшение *веса* баннера. Минусы проявляются при использовании формата GIF для анимированных баннеров.
Flash баннер —  являются самыми эффективными из анимированных баннеров. Плюсом является почти безграничность возможностей в создании таких баннеров. Свободная реализация любых дизайнерских идей.

Форматы и размеры баннеров

Основной единицей измерения являются пиксели. Существуют несколько общепринятых стандартов: это баннеры таких размеров: 468x60, 120x60, 100x100, 88x31. Есть и множество других размеров, но они менее популярны в использовании. Важным является размер (объем) самого файла баннера не более 15Kb. С введением новых форматов (flash) достичь этого будет уже невозможно.


§6. Графические элементы

Графические элементы являются важной составляющей оригинального  дизайна веб-сайта.

Основная особенность оформления веб-страниц - это необходимость размещения максимально возможного объема информации на сравнительно небольшом пространстве.

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

Недоверие к вашему сайту может вызвать некачественная графика, используемая в дизайне или в оформлении контента.

В веб-дизайне используются два вида графики: растровый и векторный.

Программы растровой графики работают с точками экрана (пикселями). Точки не знают, какие объекты они представляют — окружности, линии, прямоугольники.

растровое изображение

Достоинства растровой графики:

Является  наилучшим средством обработки фотографий и рисунков, т.к. обеспечивают высокую точность передачи градаций цветов и полутонов.

Недостатки растровой графики:

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

Самой популярной программой для обработки растровой графики является Adobe Photoshop. 

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

векторная графика

Достоинства векторной графики:

Векторная картинка масштабируется без искажений. Достоинством  является их компактность.  Маленький графический файл. Рисовать быстро и просто. Независимое редактирование частей рисунка. Высокая точность прорисовки (до 1 000 000 точек на дюйм). Редактор быстро выполняет операции.

Недостатки векторной графики:

Векторные изображения выглядят искусственно. Ограниченность в живописных средствах.

Самыми популярными программами по созданию векторной графики являются: Adobe Illustrator, Corel Draw, Adobe Flash.


§7. Элементы главной страницы

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

1.Wеlсоте-текст:  приветствие, краткий рассказ о компании. Такое небольтое вступление располагают обычно сразу под шапкой сайта.
2. Раздел новостей компании. 
3. Краткий перечень услуг, предоставляемых компанией.
Есть еще самые разнообразные дополнительные элементы,  на сайтах: голосования, подписка на рассылку, счетчики посещений, календари, блоки с обширной контактной информацией, ссылки на другие сайты по той же тематике
Добавление любых функций на сайт должно быть осмысленным и практически оправданным.


§8. Внутренние страницы

На внутренних страницах  обязательно правильно создать всевозможные разделы и подразделы для упорядочения информации.

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




css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!