место в рейтинге
  • 405009
  • 11143
  • 405
Нравится блог?
Подписывайтесь!

Примеры креативных меню: Хорошие и плохие примеры

Перед вами перевод этой статьи: SmashingMagazine.com
Авторы статьи: Sarah & Adrienne Kahn
Просто решил поупражняться в английском. Да и статья интересная
Перевод достаточно вольный

(?) - Означает, что это предложение я не до конца понял

Примеры креативных меню: Хорошие и плохие примеры

Хорошая навигация - это главный краеугольный камень любого вебсайта. Однако, часто на практике,  это - трудная задача: придумать способ для организации, размещения, и показа контента пользователю; и это часто не так легко - найти интересное визуальное решение. Широкое применение библиотек JavaScript наподобие jQuery делает добавление различных видов плавной анимации намного легче для навигационного дизайна. Например, большое количество недавно созданных промо-сайтов, по существу, одностраничных использует для навигации большое количество анимационных эффектов для сглаживания и увеличения удобства работы пользователя.

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

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

Смещение и прокрутка (Parallax and Scrolling)

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

Богатая графика и эффект 3D смещения

(113.82 Kb, 1264x790)

Вертикальная скроллинговая навигация с эффектом смещения заднего фона

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

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

Сайт Rosso Carmilla (Россо Кармилла)

(162.98 Kb, 1259x811)

Горизонтальная анимация смещения

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

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

Откройте для себя трассы Теннесси и Byways (хз как переводится) (Discover Tennessee Trails & Byways)

Горизонтальная  уточняющая навигация прокрутки

Горизонтальный скроллинг с анимацей смещения и уточняющая навигация

TnTrailsAndByways.com содержит в себе “трассопоказывательную” (?) навигацию для своих пользователей. Дизайнеры сайта использую анимацию со смещением, но они решили объяснять вначале пользователям как ее использовать на сайте. Обычно, это не является признаком хорошей навигации, но это работает очень хорошо в данном примере, в особенности, потому что общий дизайн каждый раз появляется очень оригинально, ярко и неожиданно для пользователей. В случае необычной или особенной инновационной дизайнерской техники, этот вид инструкции может быть необходим до тех пор пока пользователь не начнет понимать парадигму нового навигационного шаблона.

Когда пользователь щелкает по иконке трассы, соответствующие данные показываются во всплывающем окне (лайтбоксе). А также выделение на карте трасс на нижней правой стороне двигается когда пользователь использует “трассопоказывательную” навигацию. Другое интересное навигационное меню на сайте находится внизу страницы; когда пользователь выбирает зону, вторичные опции отображаются в меню на правой стороне и это выделение не меняется где бы не находился курсор мышки. Это навигационное меню также очень привлекательно внедрено в общий дизайн сайта.

А я не понял, что это за меню такое

Сайт "Siebennull"

Стиль ‘Беспорядок на рабочем месте’ в сочетании со смещением

(225.22 Kb, 1264x838)

Уникальное и оригинальное применение стиля "Беспорядок на рабочем месте"

Поразительно оригинальные черты у сайта SiebenNull.com, стиль "Беспорядок на рабочем столе" и деревянная тема дополняются 3D эффектом, который достигается эффектом теней и другой реалистичной графики, а также использованием эффекта смещения, которое применяется ко всей странице. Чувствуется общая связь всего при небольшом беспорядке.

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

Storytelling (Повествование)

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

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

Сайт "Бэн-телохранитель" (Ben the Bodyguard)

Страница со встроенным рассказом

(163.41 Kb, 1280x998)

Захватывающий эксперимент, привлекающий пользователя дизайном и эффектами.

Дизайнеры Бена-телохранителя выбрали очень запоминающуюся метафору для их главного персонажа при просмотре страницы. Вместо показа обыденной страницы "Скоро..." с описанием следующего действия, сайт эффектно рассказывает историю. Основной слоган страницы - это “Француз защищает ваши секреты. Да, серьезно.” Рядом с этим утверждением, идет тонко представленная презентация инструмента. Таинственный персонаж показывается на фоновом рисунке, до тех пор пока заинтересованные  пользователи не проявят интерес и внимание.

Самая интересная часть истории случается на странице, когда вы медленно ее прокручиваете. Если вы проявите внимание к иллюстрациям и рассмотрите все детали внимательно, то вы можете посмотреть как разворачивается история. Пока рассказчик идет вниз по улице, он дает вам объяснение, но заканчивает, потеряв ваш интерес. По мере того, как вы продолжаете прокручивать, история достигает кульминации и заканчивается выводом кнопок для вызова какого-либо действия. Обратите внимание, что дизайн интерактивный и иллюстрации регулируемы пользователем. В целом, это неклассическая навигация, но и сам сайт не совсем традиционный. Бэн-телохранитель - замечательный сайт и такое повествование очень хорошо работает в рекламных целях. Это и есть, причина тому, что сайт получил так много внимания, когда он был создан.

Youzee

Плавное, спокойное повествование

(76.69 Kb, 1152x838)

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

Обратите внимание, как тщательно дизайнеры используют повествование для привлечения пользователя к истории и занимают их в процессе обучения инструменту. В противоположность Телохранителю Бену, дизайн основывается в большей степени не на персонаже, а, скорее на применении более знакомых, действующих метафор для развития истории. Главная зона наверху не говорит, о чем, собственно, ресурс; пользователь узнает это в процессе прокрутки страницы вниз. А также обратите внимание, как хорошо дизайнеры используют метафору “Включение” на кнопке в верхней части сайта; она выглядит так, как если бы она хотела, чтоб на нее нажали и отвечает надлежащим образом при клике. Неплохо, парни, неплохо.

Скроллинговая навигация (Scrolling Navigation)

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

Сайт "Хорька" (Polecat)

(110.4 Kb, 1152x838)

Простая сквозная навигация прокрутки

Назад к основам

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

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

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

Сайт "Корнерд" (Cornerd)

(117.14 Kb, 1152x838)

Простая вертикальная навигация прокрутки

На хорька очень похож Cornerd.Com, который содержит много нарисованных глаз-конфеток (?). Тема монстров работает очень хорошо и еле заметные движения глаз монстров создают дружелюбную и игривую атомосферу. Дизайнер Denise Chandler ведет себя не очень серьезно и это то, что вызывает сопереживание и симпатию к сайту, развивает доверие к дизайнеру, который делает интересные и привлекательные работы.

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

Сайт Группы "Любопытное поколение" (Curious Generation Group)

(116.03 Kb, 1152x838)

Одностраничный скроллинг с поворотом

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

Сайт Эрика Йохансона (Eric Johansson)

(114.72 Kb, 1152x838)

Езда на скутере

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

Как только пользователи прокручивают страницу, им нужно высматривать стрелки и указатели которые нужно будет нажать для того, чтобы остальные возможности навигации были показаны. Эрик играет с пользователями, и применяет для этого оригинальный способ. Для пользователей, которым не очень комфортно с ним, есть опция расширенного просмотра “нормального” сайта. Графика на ресурсе может быть улучшена небольшим приведением дизайна к большей реалистичности, хотя, возможно, он и разработан с такой целью. Но он может быть более привлекательным если пользователи смогли бы прокручивать страницу без обязательного применения встроенного скроллбара внизу сайта (см. Прокрутка страницы горизонтально с помощью колесика).

Часто посещаемый Дом Кошки (Haunted Cathouse)

(131.13 Kb, 1152x838)

Вертикальная скроллинговая навигация с графикой из сборника рассказов

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

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

Сайт "Sam Web"

(30.09 Kb, 500x484)

Горизонтальный скроллинг без вертикального

(Там, на том сайте, короче, закончился хостинг и скриншота моего нету, поэтому взял из оригинала)

Горизонтальные панели для прокрутки на сайтеSamWeb.Com очень чисто выполнены, в то время как достаточно классической навигационной модели. Также хороши некоторые секции, которые скользят горизонтально, пока ссылка скрывается вниз, поскольку этот элемент присутствует глобально (?).

Интересный момент здесь во вложенных горизонтальных скроллерах страницы портфолио. Интерес в том, что они прокручивается в том же направлении что и часть сайта с основным контентом, но не контролируется той же навигацией. Она может сбить с толку пользователя. Левая и правая стрелки - это визуальные индикаторы чего-то другого в этом разделе, но они также могут быть отлично использованы для другого вида скроллеров, или в использовании других связей управления контентом. Это хитрая вещь, обозначение пути для плавного добавления навигацию к допконтенту, который уже внутри какого-либо вида интерактивной навигации. (?)

Ресторан Дэнни

Слишком много чего-то - это плохо

(156.42 Kb, 1152x838)

Комбинированная горизонтальная и вертикальная прокрутки

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

Экспериментальные навигационные меню

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

Ежеквартально ужасный (Ferocious Quarterly)

Больше нетрадиционных вкладок

(144.89 Kb, 1152x838)

Интересные иллюстрации

Вкладки сайта fe.rocious.com в верхней части сайта немного необычны. Факт в том, что они показаны необычно, создавая иллюзию глубины и делая дизайн немного выделяющимся. Хороший пример того, как маленькая деталь в противном случае может сделать довольно посредственный дизайн, который мог бы выглядеть немного интересней.(?)

Сайт "Zut Alors" [Осторожно: первые пять секунд могут привести к головной боли!]

Попап-мания в ее наилучшем виде

(87.18 Kb, 1152x838)

Фронтальная и центрированная навигация вкладок

В общем, дизайн сайта ZUT ALORS! экстремально авангардный и совершенно нетрадиционный. Буквы огромного размера, расположенные по центру и есть весь контент на странице, и они же являются навигацией. Каждая буква открывает серию тщательно организованных попап-окон с последующей страницей содержимого.

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

Сайт "Лаборатории методов проектирования "(Method Design Lab)

Актуальные новости

(84.05 Kb, 1152x838)

Графически управляемый эквалайзер

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

Шерпа Веб стандартов (The Web Standards Sherpa)

(Наверно там имелось в виду слово "Sphere" (Сфера), но его переделали для оригинальности, ваш К.О.)

Пропуская содержание...

(111.23 Kb, 1152x838)

Чистенько и легко — до тех пор пока содержание ограничено

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

БунЛук (BonLook)

Иллюстрированное ниспадающее меню

Предоставление выбора с помощью пиктограмм

Сайт BonLook.Com представляет собой хороший пример чистого и простого иллюстрированного ниспадающего меню. При выборе очков, их форма а не бренд делает каталог продукции легче для любого браузера. В основном, использование пиктограмм облегчает ориентацию и помогает клиенту найти то, что он ищет.

Дизайн мышления (Design Intellection)

Интерактивные навигационные вкладки по правой стороне


Правосторонняя навигация меняет свой облик

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

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

Я не увидел этого меню, возможно, стиль этого сайта уже поменяли

Сайт "Bernat Fortet Unanue"

Креативный и интересный способ показать вашу работу

Чистый и категоризированный дизайн меню

Сайт BernatFortet.Com содержит 22 категории работ в форме круглых кнопок навигации. Полное меню появляется в конце каждой страницы, делая сайт понятным для ознакомления. Даже если пространство достаточно интенсивно занято, пользователь использует его внешний вид для того, что увидеть уже посещенные категории. Это другой пример ясной визуальной индикации, способствующей удобному просмотру и работе на сайте.

Lega-Lega

Интуитивно понятные и недвусмысленные пиктограммы с прокручиваемыми названиями

(146.17 Kb, 1280x998)

Простая навигация

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

Bluecadet Interactive (имя собственное, хуле, не переведешь дословно)

Простое подменю

(194.58 Kb, 1280x998)

Возможность выбрать категорию пользователем

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

Данило Юрлало (Danilo Iurlaro)

(129.46 Kb, 1280x998)


Креативные анимационные эффекты

Сайт DaniloiUrlaro.Com креативно применяет скроллинг, и это безусловно выделяет его среди множества других. Однако, текст который прыгает сверху вниз всякий раз когда элемент навигации нажат, все-таки раздражает и отвлекает. Во-первых, это создает впечатление, что этот текст является текстом страницы, а не просто двигающейся графикой, который на самом деле таковым не является. Разрешение пользователям прокручивать вниз вручную для просмотра фактического содержания с большой навигационной зоной, является достаточно сложной задачей.(?)

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

Фэнтези Картография (Fantasy Cartography)

(150.68 Kb, 1280x998)

Карта навигации

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

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

Кофейная компания С&С (C&C Coffee Company)

Очаровательная анимация

(119.96 Kb, 1280x998)

Простая и веселая анимация, которая помогает в навигации, а не ломает ее

Навигация CandCCoffee.Com пример минималистичной, простой и остающейся при этом динамически анимированной навигации которая не акцентирует на себе внимание. Движущиеся навигационные элементы хорошо соответствуют общему дизайну страницы, которая также содержит другие “нарисованные рукой” элементы, делая сайт более персонализированным, дружественным для работы с ним. Тем не менее, просмотр анимации один раз, может быть достаточным для запоминания некоторым посетителям.

Хлебные крошки

NOS

(204.31 Kb, 1280x998)

Контекстные хлебные крошки

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

Банк МДМ (MDM Bank)

(140.9 Kb, 1280x998)

Стойкие "Хлебные крошки"

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

Кстати, сайт сделан на Студии Артемия Лебедева

Скользящие Секции

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

Directions

(150.37 Kb, 1280x998)

Навигационные ссылки в стиле аккордиона

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

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

Выставка сотрудничества

вроде как

(Coexhibitions)

(154.28 Kb, 1280x998)

Развернуть, чтобы увидеть содержимое

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

Банк Запада (Bankwest)

(175.79 Kb, 1280x998)

Несколько уровней меню

Сайт Bankwest.Com.Au не использует скользящую анимацию, но это хороший пример многоуровневой навигационной системы. У них есть привязанная к левому краю навигация верхнего уровня, которая расширяется сначала вертикально, а затем и горизонтально при более глубоком поиске пользователем. Это еще одна хорошая стратегия для сайта глубокой вложенности с большим количеством контента. Хотя это работает очень хорошо, маленький JavaScript позволил бы пользователям использовать более глубокие уровни навигации немного легче и эффективнее. Сообщение с "хлебными крошками" располагается сверху зоны контента: оно дополняет навигацию и помогает пользователю отслеживать их путь по всему сайту

Элиот Леперс (Elliot Lepers)

(179.56 Kb, 1280x998)

Скользящие блоки с анимацией

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

Дополнительные страницы для каждого проекта также отлично сделаны. Большая стрелка слева - единственная навигация, которая которая появляется на каждой такой странице, но так как основная навигация находится на главной странице, стрелка отлично выполняет свою функцию.

Мировое Сообщество Гуманитариев (Global Humanitarian Assistance)

(163.61 Kb, 1280x998)

Скрытые секции помогают бороться с большим количеством контента

Одна из первых вещей, с которой пользователь должен ознакомиться на сайте GlobalHumanitarianAssistance.Org это ярко-желтое скрываемое меню. Оно аккуратно выполнено, но из-за того, что все его элементы тоже желтого цвета, глазу нелегко быстро перестроиться. Сайт очень загружен данными и предназначен для того, чтобы показать зарегистрированным пользователям многочисленные репортажи и тематические исследования, которые скрываются за желтой панелью; в общем, это очень изящный и простой метод скрыть вторичную навигацию до тех пор пока она не понадобится (контекстно-зависимая навигация). Интересная идея: такие выдвижные панели, обычно, хороший метод скрыть контент пока он не доступен глобально для сайтов, загруженных контентом(?). Именно в этом случае, панель дополнительной навигации можно было бы сделать чуть толще для привлечения внимания пользователей.

Creative NZ


Много информации на небольшом количестве пространства

Сайт Creative NZ - это “мега-ниспадающее меню”. Это отличный пример навигации с разумным использование свободного пространства с добавлением классической навигации (типа контактной формы, дополнительного поиска, и т.д.) а также добавление информационных блоков в нижнюю часть каждого из них. Если вы собираетесь использовать такие меню, то нужно действительно потратить время изучая контент включенный в каждое подменю и будьте уверены, что вы будете использовать его эффективно.

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

Заключение

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

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

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

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

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

11 июля 2011, 22:34
5811

Загрузка...
Loading...

Комментарии

Пипец запарился переводить.
Объемная таки статья.
Скрины делал сам.
Английский - сложный язык и построение фраз у них странное.
В общем, спасибо тем, кто прочел до конца)
Дошёл до глаз-конфетки (eye candy?), дальше не смог :)

Оставьте свой комментарий

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

Школа High Tech High – дети здесь самостоятельны так же, как и профессионалы в офисах

Школа High Tech High – дети здесь самостоятельны так же, как и профессионалы в офисах

Известный казахстанский бизнесмен становится первопроходцем и создает школу, о которой можно только мечтать. То, что мы, как взрослые, делаем в бизнесе, дети будут делать в этой школе.
Zhumanova
24 апр. 2017 / 16:29
  • 22059
  • 5
Кому в Казахстане жить хорошо? Почему мы остаёмся в топ-5 стран мира по числу самоубийств

Кому в Казахстане жить хорошо? Почему мы остаёмся в топ-5 стран мира по числу самоубийств

Всё ли так хорошо у жителей Казахстана? Почему-то наша страна сохраняет твёрдые позиции в первых строчках мировых рейтингов по числу самоубийств.
openqazaqstan
24 апр. 2017 / 16:54
  • 4386
  • 20
«Казпочта» отжигает. Редкий шанс вспомнить агрессивные советские очереди

«Казпочта» отжигает. Редкий шанс вспомнить агрессивные советские очереди

Люди старшего и среднего поколений помнят шумные, недобрые, грубо ругающиеся очереди советских лет. Увидеть, как это было, можно теперь разве что в каком-нибудь фильме. Хотя не только.
openqazaqstan
26 апр. 2017 / 16:14
  • 3060
  • 33
Любовница. «Мне часто доставались мужчины, поломанные браком»

Любовница. «Мне часто доставались мужчины, поломанные браком»

Мне часто доставались мужчины, поломанные браком. Таких почти сразу видно – у них маска состоявшегося мужчины по швам трещит. И каждый из них реагирует по-своему. Поясню на паре примеров.
Jamiklisa
28 апр. 2017 / 14:21
Президент велел делиться. Почему бы казахстанским миллиардерам не послушаться?

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

Президент Назарбаев призвал крупных бизнесменов делиться с народом, следуя примеру своих коллег из развитых стран. В Казахстане, действительно, сегодня много богатых людей.
openqazaqstan
27 апр. 2017 / 14:09
  • 2610
  • 29
Юный алматинец покорил Первый канал на шоу Максима Галкина

Юный алматинец покорил Первый канал на шоу Максима Галкина

Житель Алматы по имени Марк Усачев недавно оказался на телепрограмме "Лучше всех", с успехом идущей на Первом канале России. 9-летний алматинец покорил публику своими недюжинными знаниями.
Seattle
24 апр. 2017 / 16:59
  • 2734
  • 2
Карсакпай — посёлок-музей казахстанской металлургии

Карсакпай — посёлок-музей казахстанской металлургии

Хоть здесь крайне редко бывают СМИ, посёлок Карсакпай очень интересен. Основанный англичанами, он был первенцем медеплавильной промышленности в СССР. С 70-х годов из труб завода-пионера дым не идёт...
theYakov
29 апр. 2017 / 8:14
  • 2634
  • 3
Преподаватели и ЭКСПО: «Пока газеты пишут одно, нас заставляют покупать билеты на выставку»

Преподаватели и ЭКСПО: «Пока газеты пишут одно, нас заставляют покупать билеты на выставку»

Чтобы вы знали, чем занимаются в сфере образования - педагоги являются основой массовок. Какое отношение к учителям со стороны государства, такого же уровня и качество образования.
SaukovV
26 апр. 2017 / 16:05
  • 2537
  • 16
Как стать караоке-шлюхой в Корее? Твои обязанности – развлекать гостя, вот и всё

Как стать караоке-шлюхой в Корее? Твои обязанности – развлекать гостя, вот и всё

Я думаю, многие видели различные объявления в интернете о наборе девушек в караоке-клубы в Южную Корею. Садитесь поудобнее, я вам сейчас расскажу что это за шняга.
savira6
28 апр. 2017 / 17:02
  • 2600
  • 21