Sistema de diseño
Link
Los enlaces son componentes interactivos que, cuando se hacen clic o se tocan, llevan a los usuarios a otro lugar, ya sea dentro del mismo sitio web o a un destino externo.
Figma
Storybook
AEM
Overview
Los links juegan un papel crucial en la facilitación de la navegación y la conexión de varias partes de una interfaz de usuario.
Buenas prácticas
El texto del enlace debe proporcionar información clara y concisa sobre el destino o la acción. Las etiquetas descriptivas contribuyen a la usabilidad y ayudan a los usuarios a entender el propósito del enlace.
Accesibilidad
Los diseñadores deben asegurarse de que los links sean accesibles para los usuarios con discapacidades. Esto incluye proporcionar un contraste de color suficiente, opciones de navegación con el teclado y el uso de elementos HTML semánticos para lectores de pantalla.
Consistencia
Mantener la consistencia en el estilo y el comportamiento de los links a través del sistema de diseño ayuda a crear una experiencia de usuario unificada y predecible. Los usuarios deben poder reconocer fácilmente los enlaces.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Oxygen permite que los enlaces vayan acompañados de “arrows” para reforzar la navegación a otros lugares del site. O acompañados por iconos, para reforzar la acción que el usuario está realizando. Además, se permiten variaciones de diferentes esquemas de color según el contexto de la interfaz.
La decisión del uso de una u otra variante dependerá del diseño de producto.
Uso de variantes de links según el token de color
Nombre
Descripción / Uso
Ejemplo
Turquoise
Siempre sobre fondos blancos o grises (Background 1 y 2). Mantienen el color clicable y son muy fácilmente reconocibles como elementos de navegación para los usuarios.
Inverse
Para usos sobre fondos de color y fotografía.
Grey
En ocasiones en las que haya mucha densidad de links en pantalla, se puede utilizar la versión gris y reducir la jerarquía de los enlaces y el ruido visual (footers, navegación, etc.). El icono que acompaña el label siempre es color turquesa.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Cualquiera de las variantes de links de Oxygen tiene la opción de configurarse con el icono o el arrow a la derecha o a la izquierda.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Overflow / Resizing
No se recomienda la existencia de links con más de una línea de texto.
Grupos
Al agrupar links con botones, se recomienda insertar dentro de un frame el link y espaciarlo adecuadamente, para equilibrar visualmente los elementos.
Inline links
Si el link se encuentra dentro de un bloque de texto, se utilizará el token Underline correspondiente al body utilizado en el bloque de texto, siguiendo las pautas marcadas en el patrón.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes