Главная   /   Web-разработка   /   Все, что Вам необходимо знать о нумерации страниц — досье и примеры

Все, что Вам необходимо знать о нумерации страниц — досье и примеры

Web-разработка
Просмотров: 2892
Комментарии (11)

Автор: SmashingMagazine.com
Перевод: Всеволод Козлов

Misal

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

Для удобства перемещения между страницами Вашего сайта, где представлен контент, либо помещают текстовые ссылки, наподобие «назад» и «вперед», либо используют более продвинутый и удобный способ – нумеруют страниц и позволяют пользователю самому выбирать, на какую страницу ему перейти.

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

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

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

7 рекомендаций по оформлению нумерации страниц

  1. Кликабельные зоны должны быть достаточного размера
  2. Не используйте подчеркивание
  3. Выделяйте особым стилем активный номер страницы
  4. Оставляйте пустое место между номерами страниц
  5. Предоставляйте ссылки, перемещающие пользователя на 1 страницу как вперед, так и назад
  6. Отображайте ссылки, перемещающие за 1 клик на первую и последнюю страницы
  7. Ссылки из 6 пункта помещайте вне нумерации, по краям.

Полезные ресурсы по теме

  • Различные варианты оформления нумерации страниц, доступные для бесплатного скачивания.
  • Если Ваш блог работает на WordPress, то Вы можете использовать плагин WP-PageNavi, автоматически добавляющий нумерацию страниц на Ваш блог (требуется вставить одну строку кода в шаблон Вашей темы оформления).

Ошибка №1. Нумерация страниц еле видна на странице

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

В основном этой ошибки не совершают, но встретить ее можно, например на скриншоте ниже это видно наглядно:

Screenshot Pagination

Ошибка №2. Нумерация страниц непонятна на интуитивном уровне

Эту ошибку совершают любители украшать все и вся. Украшая, не забывайте про юзабельность.

Яркий пример такой нумерации можно посмотреть ниже:

Screenshot Pagination

Некоторые вообще делают нумерацию абсолютно обычной:

Screenshot Pagination

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

Screenshot Pagination

Креативные решения должны быть юзабельны

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

Screenshot Pagination

Screenshot Pagination

Стандартная нумерация

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

Facebook

Screenshot Pagination

Businessweek

Slanted

Cpluv

Stylegala

Screenshot Pagination

Overture

Misal

Использование цветов и форм

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

StylishLabs

Apple Store

Bildblog

Screenshot Pagination

Sitepoint

Amazon

Maple

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Flickr

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

UXMag

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Designshack

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Screenshot Pagination

Использование форм в нумерации

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

Screenshot Pagination

Veer

Screenshot Pagination

Необычные решения

Screenshot Pagination

Screenshot Pagination

Оригинал статьи: Pagination Gallery: Examples And Good Practices

Автор: Всеволод Козлов написал 327 статей.
Об авторе

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

Один из последних кейсов - увеличение объема продаж за короткий срок с 420 210 руб/мес до 13 906 950 руб/мес, т.е. в 33 раза!

Я на Google+, Facebook, Vkontakte, LinkedIn

Комментарии:

11 комментария(-ев) к статье “Все, что Вам необходимо знать о нумерации страниц — досье и примеры”

  1. gudoshi (8.02.2008)

    Замечательная статья,помещаю в мемориз))) :grin:

  2. Абсурдный Людь (8.02.2008)

    Как обычно — отлично

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

  3. VLAD (9.02.2008)

    Как всегда великолептны !
    > кто юзает сапу, лучше использовать полный список страниц.
    А ето как ? подскажите пожалуста

  4. Юрий (13.02.2008)

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

  5. hellveen (19.02.2008)

    Спасибо, за столь детальный пост. Очень полезная информация.

  6. Ich (7.06.2008)

    И как это сделать? скачать скрипт pagstyle , а дальше???
    куда? что? как? подскажите!!!

  7. Donat (7.01.2009)

    А файл pagination.css где должен находиться?

  8. Богдан (27.02.2009)

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

  9. SeoMazzi (9.03.2009)

    Спасибо за подробный обзор. Ушел качать WP-PageNavi :razz:

  10. buy chi flat irons (1.09.2009)

    Спасибо, за столь детальный пост. Очень полезная информация.
    :sad:

  11. Леонид (19.08.2011)

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

Добавить комментарий:

Комментарий: *

Hide me
Как увеличить продажи интернет-магазина в 33 раза за 2 месяца
Ваше имя: * Ваш E-Mail: *
Show me
Rambler's Top100