Пейджинг

Постраничная навигация (пейджинг) — способ представления большого количества однородной информации, когда контент разбивается на страницы.

Когда использовать

Используйте пейджинг, когда другие способы структурирования информации (категории, фильтры) уже задействованы.

Описание работы

Размер страницы нужно подбирать таким образом, чтобы она была не слишком большой, но и не слишком маленькой. Оптимально, когда страница по размеру как 2-3 экрана пользователя.

Вид пейджинга по умолчанию:

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

Если страниц 7 и меньше, то показываются ссылки сразу на все 7 страниц:

Если больше 7 страниц, показывается ссылка на последнюю страницу после многоточия:

Слева и справа от текущей присутствуют ссылки на 2 соседние страницы. Чтобы пользователь мог перемещаться через одну. Плюс ссылки на первую и последние страницы.

Исключения — пятые страницы с начала и с конца. В таком случае показываются ссылки на все страницы. Иначе за многоточием придется скрывать 1 страницу:

Все состояния

При переходе между первые тремя страницами, ссылка «Дальше» остается неподвижной. Это позволяет прокручивать страницу колесиком мыши, и кликать «Дальше» повторно не прицеливаясь.

Работа с клавиатурой

При переходе к пейджингу клавишей Tab первая страница получает фокус — появляется синяя рамка.

Переключение фокуса между страницами производится клавишами со стрелками ←→. Tab переводит фокус на следующий контрол. Это нужно, чтобы пользователь мог быстро перемещаться по странице табом, не «залипал» на сложносоставных контролах, типа пейджинга или группы радиокнопок.

Между страницами всегда можно переключаться по сочетанию клавиш Ctrl + → и Ctrl + ←. Если позволяет место, желательно размещать об этом подсказку.

Дизайн

Для ссылки «Дальше» используется символ из шрифта Kontur Iconic размером 18 px.

Маркер текущей страницы — черный круг #000 с прозрачностью 9 %.

Маркер наведения — черный круг #000 с прозрачностью 5 %.

Область клика больше самой цифры и совпадает по размерам с маркером наведения:

Начиная с двухзначных номеров страниц, круг превращается в овал: