8 макета решения для улучшения ваших проектов

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

В этой статье we’ обсудим 8 полезных решений планировки и techniques, которые помогут вам создать чистый и организованный содержание макета.8-методы включают в себя ползунки, аккорды, прогрессивные схемы, структурированных сеток, модальные окна, опрокидывание элементов, аккордеоны и мега выпадающий menus.

Вы также можете быть заинтересованы в следующих связанные должности:

1.Слайдеры и Carousels

Слайдеры, известные также как карусели, являются организованными, интерактивные и довольно гладко способ представления информации.Ползунки популярный метод, потому что they’ повторно очень полезным, и вы можете положить хорошее количество содержания в основной, компактный район – без слайдера этом контент должен быть размещен в любом месте страницы и во многих случаях у вас может неместо для него, и вы можете намеренно хотят показать некоторую информацию только “ по demand”.Это помогает пользователю сосредоточиться свое внимание на одной содержание блока в то время, которое является полезным и удобным.И это именно то, где ползунки может прийти в handy.

Примеры Sliders

Эскизы и иконки в навигации area
При проектировании слайдер контента или изображений слайд-шоу, it’ лучшие, чтобы предоставить пользователям значки или эскизы в области навигации, чтобы предложить простую и интуитивно понятную навигацию.Эскизы и значки дать пользователю некоторую ориентацию, объясняя, где они в настоящее время находятся в слайд-шоу и то, что навигация варианты (например, слайд-шоу может быть горизонтальной или вертикальной навигации).Кроме того, пользователь может быстро выбрать конкретную страницу на слайдер.

В ползунок используется на Coda site Вы можете видеть, что есть тексты представлены в верхней части слайдера.Они создают своего рода " slider/tab" элемента смешиваются.Это отличная идея, потому что просто глядя на эскизов, пользователь может легко найти страницы в элементе.Кроме того, значки добавить очень сильные, запоминающиеся и ясно визуальной поддержки.Кроме значки и наклейки можно также использовать уменьшенные изображения или даже номераже purpose.

Slider используется для навигации в продукте items
В отличие от примера выше, слайдеры могут использоваться не только для отображения большие куски информации, но и чтобы помочь пользователям перемещаться по несколько десятков или сотен доступных элементов продукта вудобным способом.Например, SourceBits (см. изображение ниже) использует несколько ползунков (горизонтальной и вертикальной), которые обеспечивают пользователям с привлекательным навигации по CD covers.

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

вертикальных слайдеров содержания с большими горизонтальными “ clickbars”
Let’ S взглянуть на ползунок используется на QuickSnapper.Это очень функциональный вертикальный слайдер, который идеально работает в макете.Слайдер имеет большое количество снимков пунктов.Это очень хорошо организована, и это легко найти элементы внутри элемента.Большая часть этого слайдера кнопки на нижней и на верхней части ее.Они распространяются на всю ширину слайдера.Большие кнопки делают его гораздо проще использовать slider.

Например, если you’ ве взял один из представленных элементов, а затем решил проверить дальнейшие вопросы, вы можете просто нажать на большом баре на верхней или в нижней части для навигации.That’ с удобным и удобным.Также, если вы заходите на сайт и попробовать его, вы увидите, что кнопки имеют очень хорошие: активный и: фокус-эффект, который выглядит хорошо и улучшает usability.

Slider Scripts

Вы можете реализовать эти методы, используя следующую свободном доступе сценарии, методы и учебные пособия:

2.Вкладок навигации Elements

В принципе, вкладок навигации является метод, который очень похож на ползунки.Вы можете хранить большое количество данных в компактной области, что значительно меньше, чем то, что вы обычно нужно.Вкладки навигации является обычной практикой, и несколько различных способов ее проведения.We’ будете сосредоточены на использовании вкладок элементы навигации внутри страницы, вместо того чтобы сосредоточиться на использовании вкладок для главной навигации содержания.Вкладками элемента, очевидно, разделяет различные блоки содержания, но объединяет их в одной области, которая только занимает небольшое количество space.

Примеры Tab Elements

Отличительные фоны, большие активные области, ясное separation
Первый пример взят из " Performance" раздел Mac Pro website, и является прекрасным примером того, хорошо построены вкладке элемента.Надписи на этих вкладках можно было прочесть, есть большая активная область, и хорошо визуального разделения, так что они выглядят именно так, как большинство пользователей ожидают от них выглядеть.Кроме того, вы можете видеть, что в настоящее время открыта вкладка имеет опыт работы соответствующие фоне основного Контант области.Неактивных вкладок есть немного темнее фона, и тень от содержания блока, чтобы добавить глубину и размерность.That’ са очень простой эффект, но очень эффективный one.

Чистая вкладки с разделением buttons
Here’ другая хорошая использования вкладок, чтобы представить информацию в компактной форме.Путь Atebits ‘ с макета был построен, не было огромное количество места для нескольких разделов содержания.Таким образом, они размещены в трех разделах вкладок, поэтому макет остается очень чистой и организованной.Опять же, открытая вкладка приобретает цвет фона области основного содержания, в то время как неактивные вкладки имеют более темный серый фон.Кроме того, вы заметите, хорошее разделение между вкладками для дальнейшего определения каждой отдельной кнопкой.Небольшой скос используется для чисто отделить buttons.

Четкое разделение всей вкладку set
Fontcase имеет еще хорошо разработана вкладке установите с сильным современный вид и ощущение.Хотя эта конструкция doesn’ т есть разделение между вкладками unopen, открытой имеет четкую границу.Кроме того, вы можете видеть, что есть границы выше и ниже набор вкладок.Эти вкладки использовать значки и пробелы в поддержку текста, что делает вкладки легче use.

Tab Scripts

Вы можете реализовать эти методы, используя следующую свободном доступе сценарии, методы и учебные пособия:

3.Модальные Windows

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

Это также важно, чтобы ссылки, миниатюры, иконы, или любой другой графический элемент, который вызывает модальное окно, чтобы открыть сильно (и, очевидно), связанных с содержанием модальное окно.Аналогичная значок, заголовок или визуальные может помочь пользователям установить связь между оригинальной ссылке и открыл window.

Примеры Модальные Windows

Модальные окна для входа и signups
Наиболее распространенный элемент, где модальных окон используется (кроме “ traditional” медиа-файлы, такие как изображения, аудио, видео, видеоролики и т.д.), логин и подписаться-окна.При использовании плавающего окна для входа / регистрации, вы сохраняете хорошее количество пространства на каждой странице.Кроме того, пользователь doesn’ т придется загрузить совершенно новой странице, просто войдите в систему.Они могут зайти на любую страницу на весь сайт без их текущей сессии прерывается – Конечно, если дизайнер сайта убедились, чтовход или регистрация процесса может произойти за кулисами с Ajax.

Grooveshark использует хороший регистрации окна на каждой странице на протяжении всей своей веб-сайта.Обратите внимание, что вход-кнопка в регистрации окна не открыть новую страницу, но заменяет регистрационную форму ниже с логин-форму поля ввода (с использованием аккордеона эффект, см. ниже).That’ S очень удобно и пользователю friendly.

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

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

На RealMacSoftware DropShadow используется за окном, а не всей страницы, которая исчезли.Этот метод до сих пор прекрасно работает, создавая глубину и separation.

Модальные Scripts

Вы можете реализовать эти методы, используя следующую свободном доступе сценарии, методы и учебные пособия:

4.Выделите Elements

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

Примеры Rollovers

Rollover tabs
Ниже you’ найдете скриншот Miro’ S homepage где большой и очень хорошо разработан опрокидывание элемент используется.Этот элемент похож на слайдер, но он doesn’ т использовать кнопку, чтобы скользить по страницам – скольжение происходит automatically.

Тонкие опрокидывания при наведении elements
TaoEffect представляет собой блестящий пример опрокидывание элементов, которые представляют дополнительную информацию в очень стильные и чистые макета (этот эффект был использован на Coda-сайте первыми, но мы выбралиИспользование этого примера, а).Информация представлена в очень удобной для пользователя форме все, что вам нужно сделать, это навести курсор мыши на button.

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

содержание карта с опрокидыванием elements
OneHub использует опрокидывание элемента для другого � …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Вебдизайн → 19.05.2009 by Newsbot