8 решений структурирования для улучшения дизайна
Янв 4, 2012 Верстка дизайна сайта
Организационная структура материала, наверняка, один из важнейших и влиятельных качеств хоть какого неплохого веб-дизайна. Структурировать информацию в одно отлично сложенное целое — основная задачка при разработке вебсайта, которую необходимо решать до его дизайна. Без неплохой структуры вебсайт смотрится неправильно, а разные части его кажутся очень уж разрозненными.
В этой статье мы обсудим 8 нужных методов и решений, как сделать лучше структуру веб-сайта, что поможет вам лучшим образом структурировать его содержимое.
8 методов включают в себя слайдеры, ярлычки, прогрессивное структурирование, структурированные сетки, всплывающие окна, элементы пролонгирования, структуру «аккордеона» и мега ниспадающие меню.
1. Слайдеры и «карусели»
Слайдеры, также известные как карусели, это интерактивный, организованный и очень увлекательный метод для преподнесения инфы. Слайдеры — пользующийся популярностью инструмент, потому что вы сможете заключить тонны инфы в одну закрепленную и малогабаритную область — без слайдера пришлось бы располагать информацию где-нибудь на страничке, а в большинстве случаев либо не будет хватать места на одной страничке либо вы бы вожделели, чтоб предстоящая информация статьи, к примеру, была доступна только «по просьбе». Это помогает ловить внимание гостя на одном определенном блоке, что есть очень полезно и удобно. Это конкретно тот случай, когда слайдеры могут быть применимы.
Примеры слайдеров
Миниатюры и иконки в области навигации.
При разработке информационного слайдера либо слайдшоу, идеальнее всего предоставить юзерам в области навигации разные иконки для интуитивного перемещения по веб-сайту. Разные миниатюрки и иконки предоставляют юзерам некую ориентацию, разъясняют, в какой части слайд-шоу они на данный момент находятся, и куда еще они могут перейти (например, у слайдшоу может быть как вертикальная, так и горизонтальная навигация). Не считая того, юзер может стремительно избрать определенное изображение из слайдера.
На слайдере, использованном на веб-сайте , можно узреть ярлычки поверх слайдера, что сформировывает смешанный элемент «ярлык-слайдер». Это хорошая мысль, потому что, посмотрев на миниатюрку, юзер сходу может отыскать подходящую страничку. Также, иконки гарантируют очень сильную визуальную поддержку, которая навечно запоминается. Для той же цели можно использовать как миниатюрки, так и любые другие изображения, числа и т.д.
Слайдер употребляется в товарных наименованиях
Обратно предшествующему применению слайдеры можно использовать не только лишь, чтоб предоставлять массы текстовой инфы, да и для предоставления гостю способности просматривать тыщи наименований продуктов. К примеру, (изображение снизу) употребляет мультислайдеры (горизонтальный и вертикальный), которые делают навигацию по обложкам CD неописуемо симпатичной.
У слайдера огромные круглые кнопки с 2-ух концов для разъяснения правильной навигации. Перемещения смотрятся очень плавными, потому слайдер смотрится очень мило и презентабельно. Вы также сможете увидеть, что меж иллюстрациями сохраняется хорошее расстояние, что позволяет просто кликать на каждую обложку по отдельности, что, в свою очередь, гласит о точной организованности. Не считая того, над каждой обложкой изготовлен прекрасный нисходящий световой эффект.
Слайдеры вертикального прокручивания контента при помощи больших кнопок, размещенных понизу и вверху
Давайте разглядим слайдер, использованный на . Это очень многофункциональный вертикальный слайдер. который отлично вписывается во многие дизайны. Слайдер вмещает в себя огромное количество частей. Он прекрасно структурирован, и чтоб вы не находили — вы отыщите его достаточно просто. Самые бросающиеся элементы слайдера — это кнопки снизу и сверху от него. Они растянуты на всю длину слайдера. Такие широкие кнопки делают внедрение слайдера неописуемо легким.
К примеру, если вы избрали один из продуктов, а позже, по каким-то причинам, решили поглядеть другие, то вы просто кликает снизу либо сверху на кнопки для просмотра имеющегося ассортимента. Это очень комфортно и просто в использовании. Также, если вы зайдете на веб-сайт и попробуете поиграться с этими клавишами, то заметите, что у их есть очень прекрасный эффект при наведении на их мышкой. Это не только лишь прекрасно, да и комфортно в использовании.
Скрипты слайдеров
Вы сможете применить вышеперечисленные примеры, используя последующие бесплатные скрипты и обучающие материалы:
2. НАВИГАЦИОННЫЕ Ярлычки
В 2-ух словах, навигационные ярлычки очень похожи на слайдеры. Можно располагать неограниченное количество инфы в малогабаритном пространстве, намного меньше, чем было бы нужно без использования ярлычков либо слайдеров. Ярлыки - популярная практика, и есть несколько методов дизайна данных инструментов у себя на веб-сайте. Мы обратим ваше внимание на использования ярлыков на страничке, а не на их использовании для навигации основного контента. Ярлычек, естественно, служит методом делить разные информационные блоки и в то же время соединяет их в одно целое.
Примеры ярлычков
Ясные фоны, огромные активные области, точное разделение
1-ый пример - из раздела «Performance» на вебсайте — потрясающе показывает отлично обмысленные ярлычки. Наименования на ярлычках можно ясно прочесть, расстояние меж ярлычками достаточно огромное, а сама активная область ярлычков — большая. Конкретно таковой формат больше всего нравится юзерам. Также вы сможете увидеть, что открытый ярлычок — выделен таким же цветом, как и цвет области с главным контентом. Неактивные ярлычки обозначены более темным цветом и имеют падающую тень под собой, что присваивает им огромную выразительность и объем. Это очень обычный эффект, но очень действенный.
Незапятнанные ярлычки с разделением кнопок
Вот очередной неплохой метод использования ярлычков для демонстрации инфы в сжатой форме. Из-за структуры дизайна веб-сайта свободного места для контента фактически не было. Потому разработчики сделали три ярлычка, оставив общую структуру веб-сайта нетронутым. Видите ли, тут тоже активные ярлычки соединяются с главным фоном области текста, а неактивные ярлычки выделены более темным фоном. Не считая того, кнопки разбиты очень аккуратной линией, что добавляет большей особенности каждому из ярлычков.
Аккуратное отделение целого блока ярлычков
разработала собственный свой блок ярлычков, который по стилю идет в ногу со времени. Невзирая на то, что в этом дизайне неактивные кнопки не разбиты, активный ярлычек очень верно выделяется. Также вы заметите, что весь блок ярлычков разделен снизу и сверху. Фон ярлыков насыщен иконками и светлым фоном, которые очень очень делают лучше их восприятие.
Скрипты ярлычков
Вы сможете применить вышеперечисленные примеры, используя последующие бесплатные скрипты и обучающие материалы:
3. ВСПЛЫВАЮЩИЕ ОКНА
Всплывающие окна — хороший метод преподнести больше инфы, которая уже никак не помещается на страничке. В плавающих окнах вы сможете расположить огромные изображения, дополнительный материал, подсказки/предупреждения, видео и много чего еще. Все это будет просто увидено юзером. Но если вы используете всплывающее окно, то вы должны верно разъяснить юзеру как его закрыть.
Также очень принципиально проследить за тем, чтоб ссылка, иконка либо хоть какой другой графический элемент, нажатием на который всплывает окно, имели четкую смысловую связь с заполнением всплывающего окна. Схожая иконка, название либо зрительное средство помогает юзерам установить связь меж самой ссылкой и всплывающим окном.
Примеры всплывающих окон
Всплывающие окна для входа на веб-сайт и регистраций
Самыми всераспространенными целями использования всплывающих окон (не считая «классические» медиа-файлы вроде изображений, аудио, видео и т.д.) — это окна для входа на веб-сайт и для регистрации. Когда вы используете всплывающие окна для входа и регистрации, вы экономите сильно много места на каждой страничке. А еще юзеру не надо загружать новейшую страничку только для того, чтоб зайти на веб-сайт. Заместо этого, он(а) может залогиниться на хоть какой страничке вебсайта без окончания собственной текущей «рабочей» сессии — естественно, если дизайнеру удалось разъяснить юзеру, что логиниться можно «за кулисами» при помощи Ajax.
употребляет привлекательное всплывающее окно регистрации на каждой страничке по всему собственному вебсайту. направьте внимание, что кнопка «Войти» не открывает отдельную страничку, а просто подменяет одно всплывающее окно другим. Это очень комфортно и просто в использовании.
Исчезающая страничка и/либо внедрение тени
Если вы собираетесь использовать всплывающее окно, очень принципиально сделать, чтоб страничка на фоне стала более неприметной. Можно использовать полупрозрачный фон, падающую тень либо и то и это. Делая это, вы выполняете два принципиальных дизайнерских решения. Во-1-х, вы перемещает фокус юзера на всплывающее окно с основной странички.
Вы также добавляете больше глубины и разделения меж окном и страничкой, чем придаете окну иллюзии физического движения. На снимке экрана ниже (), вы увидите поля для входа во всплывающем окне, а страничка сзади этого окна — наименее выразительна. Не считая того, поглядите как выразительно изготовлены кнопки «Войти» и «Отменить». Прекрасный дизайн.
А на применена падающая тень от всплывающего окна. Это — кандидатура приглушению головного окна на фоне. Таковой метод тоже эффективен, потому что делает глубину и отделение.
Скрипты всплывающих окон
Вы сможете применить вышеперечисленные примеры, используя последующие бесплатные скрипты и обучающие материалы:
4. ЭЛЕМЕНТЫ ПРОЛОНГИРОВАНИЯ
Элемент пролонгирования подробностей — это еще один элемент дизайна, которые набирает больше популярности, в особенности на корпоративных сайтах, папках с рисунками и сайтах для продаж разных продуктов. Мысль такового элемента лежит в том, что когда юзер наводит мышкой на чего-нибудть вроде кнопки, то автоматом возникает контент в определенном дизайнером месте. Поглядите на примеры, чтоб лучше осознать, о чем речь идет.
Примеры частей пролонгирования
Ярлычки пролонгирования
Ниже вы отыщите снимок экрана домашней странички , где очень успешно использован элемент пролонгирования. Этот элемент похож на слайдер, но в отличие от последнего, не употребляет кнопок для движения по страничкам — движение обеспечивается автоматом.
Осторожные автоматические элементы пролонгирования
— прекрасный пример элемента пролонгирования, который предоставляет дополнительную информацию очень прекрасным м обычным методом (этот эффект был использован поначалу на веб-сайте Coda, но мы решили как пример показать конкретно этот веб-сайт). Информация представлена очень ясно; все, что необходимо сделать — навести мышку на кнопку.
Если вы навестите веб-сайт, то вы увидите, что у этого элемента очень красивые и мягенькие переходы. А еще, сам фон такового эффекта — полупрозрачен. Не считая того, вокруг окошка — выделенная рамочка, которая очень отлично отделяет его от остального контента.
Карта контента с элементами пролонгирования
употребляет элемент пролонгирования для другого эффекта. Также как и карта, страничка поделена на ряд частей с подсказками; когда гость двигает мышкой по подсказке, автоматом выскакивает дополнительная информация. Этот эффект может быть в особенности полезен для веб-сайтов, которые предполагают описание собственных продуктов, также в случаях, когда необходимо чего-нибудть разъяснить либо просто сделать вступление.
Элемент пролонгирования, встроенный в слайдшоу
Очередной увлекательный дизайнерский подход представлен — карусельное меню употребляет эффект пролонгирования на определенных кнопках для того, чтоб гость мог созидать следующий либо предшествующий навигационный раздел. В неких ситуациях и таковой подход может быть полезным.
Скрипты атоматически появляющихся частей
Вы сможете применить вышеперечисленные примеры, используя последующие бесплатные скрипты и обучающие материалы:
5. ПРОГРЕССИВНОЕ СТРУКТУРИРОВАНИЕ
«Прогрессивное структурирование» — это один из методов обрисовать набор контентных вставок, которые должны быть показаны на вебсайте в определенной последовательности. Это достаточно необыкновенный метод структурировать информацию, но все таки он встречается на многих веб-сайтах. Прогрессивное структурирование позволяет юзерам совсем не сложно передвигаться по тоннам инфы.
Примеры прогрессивного структурирования
Целый вебсайт состоит из прогрессивных страничек
Все, что есть на (смотрите ниже), основано на прогрессивном структурировании. Вы видите кнопку «Go» в правом верхнем углу странички. К каждой страничке можно получить доступ со странички перед ней. Эта прогрессивная система страничек подменяет панель навигации либо меню. Естественно, основное неудобство такового структурирования — это обычный факт, что становится достаточно тяжело передвигаться по веб-сайту, потому что цель такового структурирования быстрее служит эталонам комплексности.
Хотя отдельные странички при таком структурировании могу быть отмечены (используя #-якорь), все таки они не позволяют стремительно получить более широкий обзор вероятных навигационных опций. Не считая того, такое структурирование обычно имеет только одно «направление» навигации — вперед. Это не есть отлично исходя из убеждений юзера.
Прогрессивная вертикальная страничка
(пример снизу) указывает проект, сделанный стопроцентно на прогрессивном структурировании контента. В нем находятся отдельные элементы, любой из которых отображается на одной страничке. Авто-прокручивание позволяет передвигаться от элемента к элементу по страничке. Снова же, никакого меню либо основной навигации не употребляется, только кнопки, перемещающие юзера от 1-го элемента к другому и напротив.
Скрипты прокручивания
— это плагин Jquery, который можно использовать для вертикального прогрессивного структурирования, как в примере, представленном выше.
6. СЕТКА (Grid System)
Никакая статья не представляется законченной, если она не ведает о сетках. Сетки нередко считают базовой частью хоть какого равновесного, упорядоченного и обмысленного веб-структурирования. Многие дизайнеры считают, что они предоставляют самый действенный метод передачи огромного количества инфы юзерам. Сетки могут быть применены только для передачи инфы без использования каких-то других приемов. Отменная система сеток соединит весь контент на страничке в одно структурированное целое и в то же время оставит возможность неплохого восприятия отдельных разделов.
На примере вебсайта ниже, можно узреть в действии очень серьезное рамочное структурирование. На этом веб-сайте — только одна страничка с контентом, потому на ней довольно огромное количество инфы. Невзирая на это, информация организована в строгую сетку с 2-мя столбиками, что является точным, сильным и целостным структурированием с достаточным количеством пробелов; контент читаемый и отлично воспринимаемый.
Внедрение разных фонов для раздела секций сетки
Когда вы делаете сетку, вы сможете поместить огромное количество инфы в очень малогабаритное место. Вам необходимо делать сетки аккуратненько, но не переусердствовать, чтоб не было огромного количества (положительного либо негативного) белоснежного цвета. Потому вы сможете использовать разные фоны для каждой секции сетки. На (смотрите набросок понизу) вы заметите эту стратегию в действии, использованную для сотворения отлично равновесного структурирования. Вы заметите, что секции разбиты очень узкой линией, но также принципиально отметить, что цветовые цвета тоже сыграли свою роль в делении.
Генераторы сеток, шаблоны и другое
- (включая сеточные ресурсы)
7. СТИЛЬ АККОРДЕОНА
Меню в стиле аккордеона основаны на том же принципе, что и слайдеры и ярлычки: берется огромное количество инфы, которое помещается в минимальное пространство. «Аккордеоны» — это блоки, организованные вертикально либо горизонтально так, чтоб при нажатии на один из блоков, он съезжал на другой, неактивный блок в движении, схожем на движение аккордеона. Отсюда и заглавие.
Примеры аккордеонов
Функциональность и большая область нажатия
употребляет прекрасное «аккордеоновое» меню. Держать все пункты в структуре аккордеона — очень умное решение, потому что он прячет (ненадобные) детали о проектах и указывает при желании юзера. Этот аккордеон сотворен отлично по несколько причинам. Во-1-х, вы заметите, что активная область каждого блока — очень большая, что упрощает ее внедрение. Также, вы заметите, что блок, который употребляется, отмечается треугольником. В конце концов, в этом дизайне, название текущего ярлычка имеет отлично выделяющийся фон.
Горизонтальный слайдер
употребляет аккордеон для размещения всего контента на одной страничке. В данном случае аккордеон неописуемо отлично вписывается в общий дизайн вебсайта, особо не выделяясь как отдельный элемент. В добавок, этот аккордеон горизонтальный (невзирая на то, что функции навигации имеют вертикальную ориентацию). Также направьте внимание на ярлычки. Вы сперва заметите большущее место меж каждым из ярлычков. У этих ярлычков нету разъединений, как вы лицезрели в последнем снимке экрана, потому было применено свободное место. Также, огромные легкочитаемые наименования делают этот аккордеон увлекательным для гостя. Такие мелкие детали — важны, так как гостю необходимо точно знать, чего ждать от каждого ярлычка.
Аккордеоны, содержащие изображения и информацию
употребляет другой вертикальный аккордеон для содержания портфолио-изображений. Каждый информационный блок — это изображение. Но в отличие от прошлых примеров, этот блок имеет текстовые лейблы для каждого изображения. Вы сможете узреть, что маленькая кнопка может открыть/закрыть более подробные описания. Вы также сможете отыскать ссылку на более глубочайшее и подробное описание каждого из пт портфолио. Нельзя выложить тонну инфы в небольшом аккордеончике вроде этого, потому всегда полезно делать ссылки к наличию большего количества информацию на более детализированное описание того либо другого пт.
Скрипты «Аккордеона»
Вы сможете применить вышеперечисленные примеры, используя последующие бесплатные скрипты и обучающие материалы:
8. МЕГА НИСПАДАЮЩИЕ МЕНЮ
Навигация не непременно должна быть обычным набором ссылок; с недавнешних пор стало модным не только лишь демонстрировать все способности навигации, да и всю иерархию и структуру контента на вебсайте. Так именуемы «Мега» ниспадающие меню нередко встречаются в электрической коммерции либо в структурировании продуктов как метод предоставить детализированную информацию о товарах. Такие меню, как эти — новый тренд, который стремительно развивается, потому что мега ниспадающие меню могут стремительно предоставлять юзерам информацию, которую они разыскивают — без одного клика — очень похоже на пролонгирование.
Примеры мега ниспадающих меню
Традиционный пример мега ниспадающего меню — это поисковый указатель на , который можно именовать отлично организованным и красиворазработанным второстепенным меню, направьте внимание, что в отличие от прошлых, это меню употребляет «тумблер», который находится справа для управления ниспадающим меню понизу. Также направьте внимание на мягенькую тень, которая присваивает меню тень и выделяют его на страничке.
Мультиуровневые меню с информацией
(ниже) — потрясающий пример. Домашняя страничка германского производителя содержит мультиуровневое меню, позволяющее юзерам передвигаться по всем моделям, выпущенным Porsche без едино нажатия мышкой. На 3-ем уровне вы заметите окошко с информацией о модели — изображение, огромное количество ссылок и короткая информация. Для наилучшего осознания такового вида меню — посетите веб-сайт Porsche и малость оглядитесь.
Поисковые результаты, отображаемые в выпадающем перечне
Не так давно показавшийся тренд, относящийся к этому пт, это стратегия включения поисковых результатов в выпадающем меню. Эту технику применили . Заместо использования стопроцентно другой странички для того, чтоб показать юзерам поисковые результаты, дизайнеры решили демонстрировать в выпадающем перечне, который обновляется, в то время как вы печатаете. Хотя не запамятовывайте, что все равно у их есть ссылка на все поисковые результаты, если вдруг вы не отыскали то, что находили, сходу.
Предоставление больше инфы в выпадающих окнах
На вы сможете узреть мега меню, применяемое для того, чтоб демонстрировать информацию о товарах (вместе со ссылками). Продукты в этом выпадающем перечне прекрасно организованы, плюс к ним привязаны картинки, что делает таковой перечень неописуемо комфортным. Этот перечень, не считая того, предоставляет малость инфы, таковой как: стоимость продукта. Это помогает юзерам выбирать продукты до открытия странички, потому что большая часть возможных клиентов вероятнее всего будут сначала заинтересованы в стоимости, по последней мере сначала. Мега меню, такие как это, делает навигацию по веб-сайту обычный и предлагает метод лучше для презентации инфы, которую отыскивают юзеры.
Скрипты меню
Popularity: 4% [?]
Загрузка ...