| Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера |
8 решений структурирования для улучшения дизайна
| 22.06.14, 19:24:43 | |
 8 решений структурирования для улучшения дизайнаОрганизационная структура материала, наверное, один из самых важных и влиятельных аспектов любого хорошего веб-дизайна. Структурировать информацию в одно хорошо сложенное целое – основная задача при создании вебсайта, которую нужно решать до его оформления. Без хорошей структуры вебсайт выглядит некорректно, а различные части его кажутся слишком уж разрозненными. В этой статье мы обсудим 8 полезных способов и решений, как улучшить структуру сайта, что поможет вам наилучшим образом структурировать его содержимое. 8 способов включают в себя слайдеры, ярлыки, прогрессивное структурирование, структурированные сетки, всплывающие окна, элементы пролонгирования, структуру «аккордеона» и мега ниспадающие меню. 1. Слайдеры и «карусели» Слайдеры, также известные как карусели, это интерактивный, организованный и очень интересный способ для преподнесения информации. Слайдеры – популярный инструмент, так как вы можете заключить тонны информации в одну закрепленную и компактную область – без слайдера пришлось бы размещать информацию где-нибудь на странице, а чаще всего или не будет хватать места на одной странице или вы бы желали, чтобы дальнейшая информация статьи, например, была доступна только «по требованию». Это помогает ловить внимание посетителя на одном конкретном блоке, что есть очень полезно и практично. Это именно тот случай, когда слайдеры могут быть применимы. Примеры слайдеров Миниатюры и иконки в области навигации. При разработке информационного слайдера или слайдшоу, лучше всего предоставить пользователям в области навигации различные иконки для интуитивного перемещения по сайту. Различные миниатюрки и иконки предоставляют пользователям некоторую ориентацию, объясняют, в какой части слайд-шоу они сейчас находятся, и куда еще они могут перейти (к примеру, у слайдшоу может быть как вертикальная, так и горизонтальная навигация). Кроме того, пользователь может быстро выбрать определенное изображение из слайдера. На слайдере, использованном на сайте Coda, можно увидеть ярлыки поверх слайдера, что формирует смешанный элемент «ярлык-слайдер». Это отличная идея, так как, посмотрев на миниатюрку, пользователь сразу может найти нужную страницу. Также, иконки гарантируют очень сильную визуальную поддержку, которая надолго запоминается. Для той же цели можно использовать как миниатюрки, так и любые другие изображения, цифры и т.д.
Слайдер используется в товарных наименованиях Противоположно предыдущему применению слайдеры можно использовать не только, чтобы предоставлять массы текстовой информации, но и для предоставления посетителю возможности просматривать тысячи наименований товаров. Например, SourceBits (изображение снизу) использует мультислайдеры (горизонтальный и вертикальный), которые делают навигацию по обложкам CD невероятно привлекательной. У слайдера большие круглые кнопки с двух концов для объяснения правильной навигации. Перемещения выглядят очень плавными, поэтому слайдер выглядит очень мило и привлекательно. Вы также можете заметить, что между иллюстрациями сохраняется отличное расстояние, что позволяет легко кликать на каждую обложку по отдельности, что, в свою очередь, говорит о четкой организованности. Кроме того, над каждой обложкой сделан великолепный нисходящий световой эффект.
Слайдеры вертикального прокручивания контента с помощью огромных кнопок, размещенных внизу и вверху Давайте рассмотрим сладйер, использованный на QuickSnapper. Это очень функциональный вертикальный слайдер. который отлично вписывается во многие дизайны. Слайдер вмещает в себя множество элементов. Он очень хорошо структурирован, и чтобы вы не искали – вы найдете его довольно легко. Самые бросающиеся элементы слайдера – это кнопки снизу и сверху от него. Они растянуты на всю длину слайдера. Такие широкие кнопки делают использование слайдера невероятно легким. Например, если вы выбрали один из товаров, а потом, по каким-то причинам, решили посмотреть другие, то вы просто кликает снизу или сверху на кнопки для просмотра имеющегося ассортимента. Это очень удобно и легко в использовании. Также, если вы зайдете на сайт и попробуете поиграться с этими кнопками, то заметите, что у них есть очень красивый эффект при наведении на них мышкой. Это не только красиво, но и удобно в использовании.
Скрипты слайдеров Вы можете применить вышеописанные примеры, используя следующие бесплатные скрипты и обучающие материалы:
2. НАВИГАЦИОННЫЕ ЯРЛЫКИ В двух словах, навигационные ярлыки очень похожи на слайдеры. Можно размещать огромное количество информации в компактном пространстве, намного меньше, чем было бы необходимо без использования ярлыков или слайдеров. Ярлычки – известная практика, и есть несколько способов оформления данных инструментов у себя на сайте. Мы обратим ваше внимание на использования ярлычков на странице, а не на их использовании для навигации основного контента. Ярлык, естественно, служит способом разделять различные информационные блоки и в то же время соединяет их в одно целое. Примеры ярлыков Отчетливые фоны, большие активные области, четкое разделение Первый пример – из раздела «Performance» на вебсайте Mac Pro – превосходно демонстрирует хорошо продуманные ярлыки. Названия на ярлыках можно отчетливо прочитать, расстояние между ярлыками довольно большое, а сама активная область ярлыков – большая. Именно такой формат больше всего нравится пользователям. Также вы можете заметить, что открытый ярлычок – выделен таким же цветом, как и цвет области с основным контентом. Неактивные ярлыки обозначены более темным цветом и имеют падающую тень под собой, что придает им большую выразительность и объем. Это очень простой эффект, но очень эффективный.  Чистые ярлыки с разделением кнопок Вот еще один хороший способ использования ярлыков для демонстрации информации в сжатой форме. Из-за структуры дизайна сайта Atebits свободного места для контента практически не было. Поэтому разработчики создали три ярлыка, оставив общую структуру сайта нетронутым. Как видите, здесь тоже активные ярлыки сливаются с основным фоном области текста, а неактивные ярлыки выделены более темным фоном. Кроме того, кнопки разделены очень аккуратной линией, что добавляет большей индивидуальности каждому из ярлыков.
Аккуратное отделение целого блока ярлыков Fontcase разработала свой собственный блок ярлыков, который по стилю идет в ногу со времени. Несмотря на то, что в этом дизайне неактивные кнопки не разделены, активный ярлык очень четко выделяется. Также вы заметите, что весь блок ярлыков отделен снизу и сверху. Фон ярлычков насыщен иконками и светлым фоном, которые очень сильно улучшают их восприятие.
Скрипты ярлыков Вы можете применить вышеописанные примеры, используя следующие бесплатные скрипты и обучающие материалы:
3. ВСПЛЫВАЮЩИЕ ОКНА Всплывающие окна – отличный способ преподнести больше информации, которая уже никак не помещается на странице. В плавающих окнах вы можете разместить большие изображения, дополнительный материал, подсказки/предупреждения, видео и много чего еще. Все это будет легко замечено пользователем. Но если вы используете всплывающее окно, то вы должны четко объяснить пользователю как его закрыть. Также очень важно проследить за тем, чтобы ссылка, иконка или любой другой графический элемент, нажатием на который всплывает окно, имели четкую смысловую связь с наполнением всплывающего окна. Похожая иконка, заглавие или визуальное средство помогает пользователям установить связь между самой ссылкой и всплывающим окном. Примеры всплывающих окон Всплывающие окна для входа на сайт и регистраций Самыми распространенными целями использования всплывающих окон (не считая «традиционные» медиа-файлы вроде изображений, аудио, видео и т.д.) – это окна для входа на сайт и для регистрации. Когда вы используете всплывающие окна для входа и регистрации, вы экономите очень много места на каждой странице. А еще пользователю не нужно загружать новую страницу только для того, чтобы зайти на сайт. Вместо этого, он(а) может залогиниться на любой странице вебсайта без завершения своей текущей «рабочей» сессии – конечно, если дизайнеру удалось объяснить пользователю, что логиниться можно «за кулисами» с помощью Ajax. Grooveshark использует симпатичное всплывающее окно регистрации на каждой странице по всему своему вебсайту. обратите внимание, что кнопка «Войти» не открывает отдельную страницу, а просто заменяет одно всплывающее окно другим. Это очень удобно и легко в использовании.  Исчезающая страница и/или использование тени Если вы собираетесь использовать всплывающее окно, очень важно сделать, чтобы страница на фоне стала более незаметной. Можно использовать полупрозрачный фон, падающую тень или и то и другое. Делая это, вы выполняете два важных дизайнерских решения. Во-первых, вы перемещает фокус пользователя на всплывающее окно с основной страницы. Вы также добавляете больше глубины и разделения между окном и страницей, чем придаете окну иллюзии физического движения. На скриншоте ниже (KissMetrics), вы увидите поля для входа во всплывающем окне, а страница сзади этого окна – менее выразительна. Кроме того, посмотрите как выразительно сделаны кнопки «Войти» и «Отменить». Великолепный дизайн.
А на RealMacSoftware использована падающая тень от всплывающего окна. Это – альтернатива приглушению главного окна на фоне. Такой способ тоже эффективен, так как создает глубину и отделение.  Скрипты всплывающих окон Вы можете применить вышеописанные примеры, используя следующие бесплатные скрипты и обучающие материалы:
4. ЭЛЕМЕНТЫ ПРОЛОНГИРОВАНИЯ Элемент пролонгирования подробностей – это еще один элемент дизайна, которые набирает все больше популярности, особенно на корпоративных веб-сайтах, папках с рисунками и веб-сайтах для продаж различных товаров. Идея такого элемента лежит в том, что когда пользователь наводит мышкой на что-нибудь вроде кнопки, то автоматически появляется контент в определенном дизайнером месте. Посмотрите на примеры, чтобы лучше понять, о чем идет речь. Примеры элементов пролонгирования Ярлыки пролонгирования Ниже вы найдете скриншот домашней страницы Miro, где очень удачно применен элемент пролонгирования. Этот элемент похож на слайдер, но в отличие от последнего, не использует кнопок для движения по страницам – движение обеспечивается автоматически.   Аккуратные автоматические элементы пролонгирования TaoEffect – великолепный пример элемента пролонгирования, который предоставляет дополнительную информацию очень красивым м простым способом (этот эффект был применен сначала на сайте Coda, но мы решили как пример показать именно этот сайт). Информация представлена очень ясно; все, что нужно сделать – навести мышку на кнопку. Если вы навестите сайт, то вы увидите, что у этого элемента очень симпатичные и мягкие переходы. А еще, сам фон такого эффекта – полупрозрачен. Кроме того, вокруг окошка – выделенная рамочка, которая очень хорошо отделяет его от остального контента. Карта контента с элементами пролонгирования OneHub использует элемент пролонгирования для другого эффекта. Также как и карта, страница поделена на ряд частей с подсказками; когда посетитель двигает мышкой по подсказке, автоматически выскакивает дополнительная информация. Этот эффект может быть особенно полезен для сайтов, которые подразумевают описание своих товаров, а также в случаях, когда нужно что-нибудь объяснить или просто сделать вступление.  Элемент пролонгирования, интегрированный в слайдшоу Еще один интересный дизайнерский подход представлен SquaredEye – карусельное меню использует эффект пролонгирования на определенных кнопках для того, чтобы посетитель мог видеть последующий или предыдущий навигационный раздел. В некоторых ситуациях и такой подход может быть полезным.
Скрипты атоматически появляющихся элементов Вы можете применить вышеописанные примеры, используя следующие бесплатные скрипты и обучающие материалы:
5. ПРОГРЕССИВНОЕ СТРУКТУРИРОВАНИЕ «Прогрессивное структурирование» - это один из способов описать набор контентных вставок, которые должны быть показаны на вебсайте в определенной последовательности. Это довольно необычный способ структурировать информацию, но все же он встречается на многих сайтах. Прогрессивное структурирование позволяет пользователям очень легко передвигаться по тоннам информации. Примеры прогрессивного структурирования Целый вебсайт состоит из прогрессивных страниц Все, что есть на Sursly.com (смотрите ниже), основано на прогрессивном структурировании. Вы видите кнопку «Go» в правом верхнем углу страницы. К каждой странице можно получить доступ со страницы перед ней. Эта прогрессивная система страниц заменяет панель навигации или меню. Конечно, основное неудобство такого структурирования – это простой факт, что становится довольно тяжело перемещаться по сайту, так как цель такого структурирования скорее служит идеалам комплексности. Хотя отдельные страницы при таком структурировании могу быть отмечены (используя #-якорь), все же они не позволяют быстро получить более широкий обзор возможных навигационных опций. Кроме того, такое структурирование обычно имеет только одно «направление» навигации – вперед. Это не есть хорошо с точки зрения пользователя.  Прогрессивная вертикальная страница Danny Blackman (пример снизу) показывает проект, созданный полностью на прогрессивном структурировании контента. В нем присутствуют отдельные элементы, каждый из которых отображается на одной странице. Авто-прокручивание позволяет перемещаться от элемента к элементу по странице. Опять же, никакого меню или основной навигации не используется, только кнопки, перемещающие пользователя от одного элемента к другому и наоборот.  Скрипты прокручивания ScrollTo – это плагин Jquery, который можно использовать для вертикального прогрессивного структурирования, как в примере, представленном выше. 6. СЕТКА (Grid System) Никакая статья не представляется законченной, если она не рассказывает о сетках. Сетки часто считают фундаментальной частью любого сбалансированного, упорядоченного и продуманного веб-структурирования. Многие дизайнеры считают, что они предоставляют самый эффективный способ передачи большого количества информации пользователям. Сетки могут быть использованы исключительно для передачи информации без использования каких-либо других приемов. Хорошая система сеток соединит весь контент на странице в одно структурированное целое и в то же время оставит возможность хорошего восприятия отдельных разделов. На примере вебсайта ниже, можно увидеть в действии очень строгое рамочное структурирование. На этом сайте – только одна страница с контентом, поэтому на ней достаточно большое количество информации. Несмотря на это, информация организована в строгую сетку с двумя столбиками, что является четким, сильным и целостным структурированием с достаточным количеством пробелов; контент читаемый и хорошо воспринимаемый.  Использование различных фонов для раздела секций сетки Когда вы делаете сетку, вы можете поместить большое количество информации в очень компактное пространство. Вам нужно делать сетки аккуратно, но не переусердствовать, чтобы не было большого количества (позитивного или негативного) белого цвета. Поэтому вы можете использовать различные фоны для каждой секции сетки. На Valleycreek.org (смотрите рисунок внизу) вы заметите эту тактику в действии, использованную для создания хорошо сбалансированного структурирования. Вы заметите, что секции разделены очень тонкой линией, но также важно отметить, что цветовые оттенки тоже сыграли свою роль в делении.
Генераторы сеток, шаблоны и другое
7. СТИЛЬ АККОРДЕОНА Меню в стиле аккордеона основаны на том же принципе, что и слайдеры и ярлыки: берется большое количество информации, которое помещается в очень маленькое пространство. «Аккордеоны» - это блоки, организованные вертикально или горизонтально так, чтобы при нажатии на один из блоков, он съезжал на другой, неактивный блок в движении, похожем на движение аккордеона. Отсюда и название. Примеры аккордеонов Функциональность и большая область нажатия Alex Cohaniuc использует красивое «аккордеоновое» меню. Держать все пункты в структуре аккордеона – очень умное решение, так как он скрывает (ненужные) детали о проектах и показывает при желании пользователя. Этот аккордеон создан отлично по несколько причинам. Во-первых, вы заметите, что активная область каждого блока – очень большая, что упрощает ее использование. Также, вы заметите, что блок, который используется, отмечается треугольником. Наконец, в этом дизайне, заглавие текущего ярлыка имеет хорошо выделяющийся фон.
Горизонтальный слайдер Jason Reed использует аккордеон для размещения всего контента на одной странице. В данном случае аккордеон невероятно хорошо вписывается в общий дизайн вебсайта, особо не выделяясь как отдельный элемент. В добавок, этот аккордеон горизонтальный (несмотря на то, что опции навигации имеют вертикальную ориентацию). Также обратите внимание на ярлыки. Вы первым делом заметите огромное пространство между каждым из ярлыков. У этих ярлыков нету разъединений, как вы видели в последнем скриншоте, поэтому было использовано свободное пространство. Также, большие легкочитаемые названия делают этот аккордеон интересным для посетителя. Такие маленькие детали – важны, потому что посетителю нужно точно знать, чего ожидать от каждого ярлыка.  Аккордеоны, содержащие изображения и информацию Marius Roosendaal использует другой вертикальный аккордеон дл содержания портфолио-изображений. Каждый информационный блок – это изображение. Но в отличие от предыдущих примеров, этот блок имеет текстовые лейблы для каждого изображения. Вы можете увидеть, что небольшая кнопка может открыть/закрыть более подробные описания. Вы также можете найти ссылку на более глубокое и подробное описание каждого из пунктов портфолио. Нельзя выложить тонну информации в маленьком аккордеончике вроде этого, поэтому всегда полезно делать ссылки к наличию большего количества информацию на более детальное описание того или иного пункта.  Скрипты «Аккордеона» Вы можете применить вышеописанные примеры, используя следующие бесплатные скрипты и обучающие материалы:
8. МЕГА НИСПАДАЮЩИЕ МЕНЮ Навигация не обязательно должна быть простым набором ссылок; с недавних пор стало модным не только показывать все возможности навигации, но и всю иерархию и структуру контента на вебсайте. Так называемы «Мега» ниспадающие меню часто встречаются в электронной коммерции или в структурировании товаров как способ предоставить детальную информацию о товарах. Такие меню, как эти – новый тренд, который быстро развивается, так как мега ниспадающие меню могут быстро предоставлять пользователям информацию, которую они разыскивают – без единого клика – очень похоже на пролонгирование. Примеры мега ниспадающих меню Классический пример мега ниспадающего меню – это поисковый указатель на Ruby On Rails Guide, который можно назвать хорошо организованным и красиворазработанным второстепенным меню, обратите внимание, что в отличие от предыдущих, это меню использует «переключатель», который находится справа для управления ниспадающим меню внизу. Также обратите внимание на мягкую тень, которая придает меню тень и выделяют его на странице.
Мультиуровневые меню с информацией Porsche (ниже) – превосходный пример. Домашняя страница немецкого производителя содержит мультиуровневое меню, позволяющее пользователям передвигаться по всем моделям, выпущенным Porsche без едино нажатия мышкой. На третьем уровне вы заметите окошко с информацией о модели – изображение, множество ссылок и краткая информация. Для лучшего понимания такого вида меню – посетите сайт Porsche и немного осмотритесь.  Результаты поиска, отображаемые в выпадающем списке Недавно появившийся тренд, относящийся к этому пункту, это тактика включения результатов поиска в выпадающем меню. Эту технику применили Media Temple Knowledge Base. Вместо использования полностью другой страницы для того, чтобы показать пользователям результаты поиска, дизайнеры решили показывать в выпадающем списке, который обновляется, в то время как вы печатаете. Хотя не забывайте, что все равно у них есть ссылка на все результаты поиска, если вдруг вы не нашли то, что искали, сразу.  Предоставление больше информации в выпадающих окнах На Gateway.com вы можете увидеть мега меню, используемое для того, чтобы показывать информацию о товарах (совместно со ссылками). Товары в этом выпадающем списке очень хорошо организованы, плюс к ним привязаны рисунки, что делает такой список невероятно удобным. Этот список, кроме того, предоставляет немного информации, такой как: цена товара. Это помогает пользователям выбирать товары до открытия страницы, так как большинство потенциальных клиентов скорее всего будут сперва заинтересованы в цене, по крайней мере сперва. Мега меню, такие как это, делает навигацию по сайту простой и предлагает способ получше для презентации информации, которую ищут пользователи.
Скрипты меню
| |
| Просмотров: 766 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |