8 fragmentos de código para hacer que tu paginación destaque

La paginación es una de esas pequeñas necesidades de diseño que a menudo se pasa por alto. Pero para los blogs y otros sitios con mucho contenido, proporciona un medio importante de navegación. Un menú bien diseñado puede alentar a los usuarios a explorar más a fondo lo que tiene para ofrecer.

Lo creas o no, hay diseñadores que se atreven a llevar la paginación al siguiente nivel. Aquí hay un vistazo a algunos fragmentos de código muy creativos que puede usar para mejorar su propio sitio web.

Efectos de desplazamiento simples e intuitivos

Nuestro primer ejemplo muestra cómo algunos efectos básicos de desplazamiento pueden mejorar enormemente la paginación estándar. El subrayado ultra suave que sigue a su cursor lo convierte en una experiencia mucho más intuitiva. Además, todo el menú es muy fácil de leer. Esta es una manera simple de ayudar a los usuarios.

Cuenta en vivo

Una de las partes más frustrantes de la paginación puede ser cómo los menús manejan una gran cantidad de páginas. Este fragmento utiliza jQuery para ajustarse automáticamente para mostrar números de página adyacentes a medida que hace clic. Es un camino mucho más fácil para profundizar en un sitio.

El lavabo de la cocina

Aquí hay un concepto muy interesante. Diseñado para ser receptivo y más accesible, esta interfaz de usuario de paginación contiene múltiples formas de navegar, incluso a través del teclado. La barra similar a la línea de tiempo en la parte superior etiqueta claramente la página actual y ofrece una excelente visión general de todo lo disponible.

Deje que el Yeti se encargue de eso

Dicen que una buena ayuda es difícil de encontrar. Pero este fragmento proporciona la ayuda de un Yeti (al menos, la mano de un Yeti) al hacer clic en los números de página. Si bien Yetis puede no encajar con su motivo, este es un ejemplo de cómo podemos agregar el elemento de diversión (y sorpresa).

Mejorado para pantallas móviles

En pantallas más pequeñas, la paginación puede ser terriblemente difícil de usar. Los elementos de navegación a menudo son demasiado pequeños y difíciles de leer. Este fragmento proporciona una excelente alternativa para dispositivos móviles. Cada elemento es más grande, ya que la navegación se extiende verticalmente. El resultado es que los usuarios de dispositivos móviles pueden moverse sin tener que entrecerrar los ojos o acercarse.

No se necesitan números

A veces, no necesitamos numerar cada elemento dentro de la paginación. Este ejemplo es atractivamente mínimo con el uso de puntos, en lugar de números. Es una buena solución para presentaciones de diapositivas o para navegar por múltiples paneles de contenido.

Toque amigable

La interfaz de usuario móvil funciona mejor cuando reacciona al tacto de un usuario. Aquí tenemos una paginación que permite al usuario deslizar para llegar al elemento siguiente o anterior. Esta pequeña conveniencia puede marcar la diferencia cuando se trata de usabilidad.

Combo de paginación / desplazamiento infinito

Los diseñadores a menudo usan el desplazamiento infinito para reemplazar la paginación. Pero este es un concepto claro de cómo se pueden combinar. La frustración del desplazamiento infinito es que puede ser difícil regresar y encontrar ese elemento en particular en una larga lista. Este script agrega nuevos números de página a la navegación a medida que continúa desplazándose hacia abajo, lo que hace que retroceder sea un poco más fácil.

Mover la paginación hacia adelante

Un gran diseño web no ignora los diversos elementos que componen una página. Los profesionales anteriores muestran que la paginación tiene más que ofrecer cuando te esfuerzas por mejorarla. Por lo tanto, inspírese en estos ejemplos y cree menús de paginación que se vean y funcionen mejor.