интернет2

26
Информа- ционная архитектура

Upload: nickvladislav

Post on 07-Jul-2015

79 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: интернет2

Информа-ционная

архитектура

Page 2: интернет2

Информационная архитектураИнформационная архитектура – структурированная информация, которая будет представлена на сайте.

• Прежде чем создавать сайт его необходимо спланировать

Page 3: интернет2

• Например создать группы информации

Page 4: интернет2

Заголовки страниц

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

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

Page 5: интернет2

Контент страницы

После получения структуры сайта, пронумеруйте все страницы и создайте краткое описание.

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

Page 6: интернет2

Контент страницы Здесь требуется поместить столько деталей, сколько

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

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

Page 7: интернет2

Домашняя страница

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

Page 8: интернет2
Page 9: интернет2

Какая страница главная

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

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

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

Page 10: интернет2

Удобство навигации

Всё это означает, что хотя и нужно разделить контент на отдельные страницы, необходимо подумать

− о том, как посетители найдут то, что они могут фактически искать,

− куда они могут перейти дальше на сайте, когда начнут его дополнительно исследовать.

Page 11: интернет2

Удобство навигации

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

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

Например, когда пользователь перемещается по сайту, главное меню сохраняет своё местоположение.

Page 12: интернет2

Удобство навигации

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

Последовательность перемещения по сайту (например, при покупке товара) должна быть понятна не только автору сайта, но и остальным

Слишком большой выбор последующих действий парализует пользователя также как и отсутствие выбора.

Page 13: интернет2

Схожесть страниц

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

Большинство сайтов используют некоторую форму брендинга, логотипа или титульные данные

Заголовок (в верхней части страницы) может содержать больше чем просто логотип. Он может содержать средства навигации

Нижний колонтитул (последняя область страницы) должен содержать дополнительную информацию, такую как указание на авторские права и ссылки на полезные вспомогательные страницы на сайте

Page 14: интернет2
Page 15: интернет2

Схожесть страниц

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

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

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

Page 16: интернет2

Контекст определяет все

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

Контент должен быть однозначно адресуем (иметь место, где он окончательно находится, с уникальным URL) и логически упорядочен (как на сайте, так и на самой странице), чтобы его можно было легко найти.

Page 17: интернет2

Цвет, оттенки, и тени

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

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

Page 18: интернет2

Цвет, оттенки, и тени

Вторичные цвета смешиваются из первичных цветов. Третичные цвета смешиваются из вторичных цветов.

Page 19: интернет2

Цвет, оттенки, и тени

• Существует несколько схем выбора цвета сайта:– Монохромная схема цветовая схема

соответствует одному цвету и всем его оттенкам, тональностям и теням.

Это наиболее простая схема позволяющая выделятьтребуемые значения

Page 20: интернет2

Цвет, оттенки, и тени

• Следующим рассматриваемым семейством цветовых схем являются диадические схемы, где вы подбираете цвета, которые расположены друг против друга на цветовом круге

Page 21: интернет2

• Сайт организации Гринпис является одним из многих сайтов, которые используют контрастную цветовую схему. Да, вы видите серые, белые и черные цвета, но доминирующими цветами являются зеленый и красный — два цвета, которые являются прямо противоположными друг другу на цветовом круге. Вы почти никогда не проиграете с этим методом дополнительных цветов. Фактически, использование цветовой комбинации "теплого" и "холодного" заставляет сайт сверкать цветовым контрастом.

Page 22: интернет2

Цвет, оттенки, и тени

• Триадическая цветовая схема создается при выборе одного цвета и добавлении затем двух других цветов, которые должны лежать на одинаковом расстоянии друг от друга на цветовом круге, следующим образом:

Page 23: интернет2

Цвет, оттенки, и тени

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

• Использование триадической схемы отлично подходит для выставления акцентов и направления движение глаз по странице.

Page 24: интернет2
Page 25: интернет2

Цвет, оттенки, и тени

• Тетрадические цветовые схемы похожа на диадическую схему, только используется две пары дополнительных цветов, расположенных на равном расстоянии друг от друга

Page 26: интернет2

Цвет, оттенки, и тени

• Хотя комбинации цветов могут казаться сложными, все цветовые схемы подчиняются определенным "правилам". Эти рекомендации облегчат понимание, как взаимодействуют цвета, чтобы сделать Web-сайт интереснее и контрастнее.

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

• Мы рассмотрели четыре цветовые схемы: монохромная, диадическая, триадическая и тетрадическая. Хотя существуют и другие цветовые схемы, эти четыре схемы являются самыми простыми для понимания и реализации.