Transcript Навигация

ас.Елена Първанова
2011
ТЕМА 4 Стратегии на web дизайна.
Навигационни схеми.
• Дизайнът е художествено проектиране на
предмети и среда.
• Дизайнът е приложно изкуство за проектиране
на предмети и среда.
• Резултат от добрия дизайн е добре изразената
същност, която изпълнява по-добре своите
функции, отколкото ги е изпълнявала преди
дизайна.
1. Web-дизайнът е просто дизайн.
Грешно.
• Изграждането на един качествен сайт изисква
усилията на множество профилирани специалисти –
аналитици, които анализират нуждите на клиентите
и съставят нужното задание за работа, програмисти,
които програмират или приспособяват софтуер към
нуждите на сайта (за по-сложни сайтове са
необходими няколко различни вида програмисти), HTML
специалисти, които “превеждат” графичния проект на
езика на Интернет и естествено – дизайнери, които
изработват (само!) графичния проект.
2. Дизайнът на успешните сайтове е
произведение на изкуството
Погрешна идея.
• Потребителите предпочитат
съдържанието на сайтовете да идва при тях
“незамърсено” с “красоти” и с реклама.
• На върха се задържаха тези сайтове, които
запазиха простотата на поднасяне на
информацията.
3. Съдържанието на един Интернет сайт се
променя лесно и бързо.
Вредна идея.
www.archive.org
4. Добрият сайт е гаранция за успех.
Грешен отговор.
5. Съществува начин сайтове да се правят на
конвейр.
Упорита грешка.
6. Всеки може да направи сайт.
Вече не.
7. Успешният сайт е евтино и лесно начинание.
Невярно.
Определение на Brad Wieners:
“Интерактивният дизайн е хомогенна
смес от графични изкуства,
технология и психология.”
• Откриване – включва
среща с клиентите и
запознаване с това какво
искат да направят
(покажат).
 С какво се занимава
компанията?
 Каква е вашата ролия в
компанията?
 Има ли компанията лого?
 Какво целите с
изграждането на web сайта?
 Каква информация желаете
да поддържате online?
• Изгражадне – на този
етап се използва
наученото от клиента за
създаване на дизайна на
сайта.
• Дизайн със съдържание обградено от рисунка
Фиг 4.1: The Bus Full of Hippies template
• Бързо придвижване посредстовм интуитивна
навигация
Фиг. 4.2 Навигационно меню от Iconfactory’s Halloween 2006
• Еднакъв дизайн за всички web страници от сайта
Фиг.4.3 Web страници на Ordered List
• Съществува голямо разнообразие на позициониране
на елементите на сайта. Голяма част от web сайтовете
имат компонентите показани на фиг.4.4.
Фиг.4.4 Широко разпространена структура на web страница
• Елементи на структурата на
web станица:
 Containing Block (обхващащ
блок -контейнер) – може да
бъде форма от body таг на
страницата, div таг обхващащ
всички елементи или таблица.
Ширината на контейнера
(width) може да бъде течна
(liquid) – разширява се и
запълва прозореца на
браузъра или фиксирана
(fixed) – има фиксирана
ширина.
 Logo (Блок с лого) – може да
съдържа логото на
компанията или нейното име.
 Navigation (Блок с навигация –
меню) – трябва да е възможно
по-близо до горните елементи.
 Content (Блок със съдържание) –
важен елемент оказващ влияние
за времето на пребиваване в
сайта.
 Footer (завършващ блок) –
съдържа copyright, контакт,
информация за легализиране,
линкове към основните секции
на сайта.
 Whitespace (Бяло пространство)
– блок не запълнен с текст или
илюстрации.
• Решетката (grid) в web дизайна се
използва за порпорционалност на
елементите.
• Концепцията за разпеределяне на
елементите в композиция стояща зад
тях е математическа идея основана на
Питагор.
• Златна пропорция (golden ratio) –
Φ=1.6180339
Фиг.4.5 Слънчогледа е пример
за златната пропорция в природата
• Опростена версия на
златната пропорция е
правилото на
третините.
Фиг.4.6 Решетка създадена чрез правило на третините
Фиг.4.7 Четири позиционирания в решетки следващи правилото на третините
• Визуален баланс (подобен
на физическия):
 Симетричен;
 Асиметричен.
• Симетричен баланс
(баланс на формата) –
среща се когато
елементите са
композирани от двете
страни на осова линия
(фиг.4.8).
Фиг.4.8 Симетричен баланс - Размисъл от Дейвид Ланхарм
• Този тип на симетрия в
web дизайна,наречен
хоризонтална
симетрия може да се
прилага към web
страница с
централизирано
съдържание или с
балансиране на
съдържанието между
колкони.
Фиг.4.9 Пример за страница с
хоризонтална симетрия
• Две други форми на симетричен баланс по-малко
застъпени в web дизайна са:
 Двустранна симетрия – композицията е балансирана на
повече от една оси;
 Радиална симетрия – елементите са поравно
разпределени около една точка.
• Асиметричен баланс е
по-абстрактен и
визуално поинтересен от
симетричния
(фиг.4.10).
• Използва
изображения с
различен размер,
форма, тоналност или
позициониране.
Фиг.4.10 Асиметричен баланс
от Джереми Дарти
Фиг.4.11 Пример за web сайт с асиметричен дизайн
• В дизайна единството
се отнася до начина по
който различни
елементи от
композицията
взаимодействат един с
друг.
Фиг.4.12 Единство между
изображения с маймуни
• Съседството цели да направи група от обекти
да изглеждат като едно цяло.
Фиг.4.13 Съседство между заглавие и съдържание
• Повторението на цветове, форми, текстури или
подобни обекти спомага web страницата да
изглежда като едно цяло.
Фиг.4.14 Ляво позиционирана заглавна страница
• Контраста се
формулира като
съпоставяне на
различни графични
елементи.
• Найразпространения
начин да се наблегне
на съдържанието.
• В web дизайна
контраста може да
бъде представен в
цвят, размер или
форма.
Фиг.4.15 Пример за използването на
оранжев цвят за контраст
• Навигация с лява колона
• Навигация с дясна колона
Фиг.4.16 Навигация с дясна колона в сайта на Ауди
• Три-колконна навигация
Фиг.4.17 Три-колконна навигация в Apple Store
• Разширена навигация в края на страницата
Фиг.4.18 Представяне на разширена навигация в JeffCroft.com
• Три колони със съдържание първо
• Фиксирана и течна ширина на страница
Пример: http://www.maxdesign.com.au/articles/liquid/
• Алтернатива: варираща фиксирана дължина
Фиг. Страница с ширина 800 и 1024 пиксела
• Навигацията трябва да бъде организирана по
един същ начин в целия сайт.
• Тя трябва да бъде елементарна и ясна, а за да се
постигне съвместимост с всички браузери трябва
да дублираме графичната навигация с текстови
връзки.
• Решенията относно навигацията на сайта трябва
да бъдат прецизно разгледани и подбрани, с
оглед постигане на максимална функционалност
на сайта и успешно, удобно, ненатрапчиво водене
на посетителя.
• Необходимо е всяка страница да има минимум един
линк.
• Линковете вътре в сайта трябва да са в помощ на
потребителя, а не да го объркват с големия избор,
който му предлагат.
• При външните линкове е необходимо посетителя да е
наясно, че му предстои да напусне сайта, в който е бил
до момента.
• Опцията “open in new window” не бива да се прилага
за връзките на вътрешните нива на сайта, удачно за
външните линкове .
• Навигацията или менюто е един от
задължителните елементи на уеб сайта.
 Менюто трябва да е ясно и разбираемо за новите
посетители и затова по тази причина навигацията
трябва да не е обременена със специфични и неясни
думи и съкращения.
 Менюто трябва да е ясно и разбираемо за редовните
посетители на сайта за тези, които вече добре
познават неговата структура и обща информация, и
ползват предимно новите неща в него.
 Често срещана практика е в сайта да има не една, а
две и дори три навигации.
• През последните години изследванията
показват едно и също поведение на
потребителите: потребителите гледат
направо съдържанието и пренебрегват
навигационните области, когато
прегледжат нова страница.
• Изледванията на потребителите обикновено показват, че:
 Потребителите първо коментират съдържанието; ако съдържанието не е от
практическо значение, те не се обръщат внимание и на другите аспекти от
дизайна.
 Когато пристигнат на една страница, потребителите пренебрегват
навигационните менюта и другите общи елементи на дизайна: вместо това те
гледат единствено в областта със съдържанието.
 Потребителите не разбират къде се намират в информационната архитектура на
сайта.
 Потребителите са изключително движени от целта си - те не губят много време
за други неща.
 В преследване на целта си, потребителите често разчитат на търсенето като своя
основна стратегия.
 Потребителите рядко гледат логото, заявленията за мисията или различните
други елементи, които считат за излишни (в частност, те пренебрегват
рекламата или всичко, което прилича на реклама).
 Ако изглежда, че страницата не е свързана с настоящите цели на потребителя,
то тогава потребителят ще кликне Back бутона след две или три секунди.
 Ако потребителите не разбират даден елемент на дизайна, те не отделят време
да го изучават - вместо това, те го пренебрегват и продължават преследването
на собствената си цел.
• Breadcrumb trails (“следи от трохички” в уеб
дизайна означава поредица от връзки, обозначаващи
точното място на потребителя в сайта, премерно
Главна > За нас > Шефът) служат по-два начина:
• Контекстът на настоящата страница (как се вписва
страницата в него) позволява на потребителите да си
обяснят страницата по-добре.
• Връзките позволяват на потребителите да отидат
директно на по-високо ниво в сайта в случай, че
настоящата страница не е това, което са търсели, но
те искат нещо подобно
• Структурата помага на потребителите да навигират.
В мрежата структурата се подценява поради четири
причини:
• Повечето сайтове имат лоша информационна
архитектура.
• Дизайнът на повечето страници скрива важната
структурна информация .
• Всички уеб браузъри пренебрегват нуждата да се
визуализира информацията относно структурата.
• Потребителите са толкова нетърпеливи в мрежата,
че не отделят време да изучават някой отделен
сайт и неговата структура.
• Заливането на потребителите със стотици връзки
в навигацията е също безотговорно.
• Трябва да има някакви граници за броя на
елементите в едно навигационно меню.
• Критерии при планове за информационната
архитектура на сайт:
1) дълбочина или широчина (вертиклана или плоска
структура);
2) начина за показване на информацията.
• Меню с вертикална
структура
• Меню с плоска
(хоризонталана)
структура
• Решения за представяне на широка навигация:
• Подреждане по важност на видовете навигация основна, вторична и третична навигации.
• Групиране на подобните елементи - потребителите
да преглеждат на ниво отделни групи и след това да
се съсредоточат върху подкатегориите.
• Показване на много нива едновременно - портален
стил за подреждане на връзките, показва две нива на
йерархията едновременно.
• Скриване на елементите във второто ниво на
менютата.
• Постигане на
йерархична
структура с падащо
вертикално меню
• Постигане на
йерархична структура
с падащо вертикално
меню с под меню
• Постигане на
йерархична
структура с падащо
хоризонтално меню
с под меню
• Пример за DHTML падащо прозрачно вертикално меню с
подменю
www.essentialtrend-bg.com
• Текстова навигация.
• Графична навигация.
• Flash навигация
• Навигация с форми
• Навигация с
фреймове
Сайт с фреймова навигация