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

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

Номерация столов каклучше оформить варианты

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

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

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

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

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

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

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

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

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

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

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

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

Нумерация страниц что это такое

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

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

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

Как делают нумерацию страниц в журнале?

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

Нумерация страниц HTML

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

Как сделать пагинацию css?

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

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

Нумерация страниц 1 из 6

Пагинатор

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

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

Нумерации страниц javascript

Блоггер как добавить страницы нумерация

Нумерация в досье

Пример нумерации страници

Css нумерация страниц

Как сделать пагинацию css?

Нумерация страниц 1 из 6

Пагинатор

Как нумеровать страницы в css?

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

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

HTML нумерация страниц примеры

Как сделать верстку для нумерации страниц?

Как сделать ниже нумерацию страниц?

Красивая нумерация страниц css

Нумерация страниц blogger

Нумерация страниц 1 из 6

Пагинатор

Ошибка в нумерации листов

Как сделать нумерацию страниц на сайте?

Сделать скрипт нумерация страниц

Автоматическая расстановка страниц ошибка

Расстановка страниц Wordpress

Все о нумерации

Как сделать пагинацию css?

Нумерация страниц 1 из 6

Пагинатор

Wordpress нумерация страниц

Нумерация страницы в HTML

Нумерация страниц это

Нумерация страниц Wordpress

Нумерация страниц HTML

Как сделать пагинацию css?

Нумерация страниц 1 из 6

Пагинатор

Нумерация страниц javascript

Вариант оформления нумерации

Нумерация страниц оформление

Где должна находиться нумерация страниц?

Css нумерация страниц

Как сделать пагинацию css?

Нумерация страниц 1 из 6

Пагинатор

Нумерация страниц для сайта css

HTML нумерация страниц

Как сделать нумерацию страниц яркой?

Пример нумерации страниц

Нумерация страниц сайта

Как сделать пагинацию css?

Нумерация страниц 1 из 6

Пагинатор

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

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

Wordpress темы videozone поставить нумерацию страниц

Оформление нумерации

Задачи про нумерацию страниц

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

Как добавить узор к нумерации страниц?

Расстановка страниц Wordpress

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




Смотрите также:

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

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>