¿Qué es importante para usted en el diseño de la tarjeta UI? Me gustaría compartir con ustedes las mejores prácticas que he recopilado. Antes de eso, comencemos con una descripción general básica de las tarjetas UI y dónde se usan comúnmente.
Una tarjeta es un componente de la interfaz de usuario que crea un grupo visualmente distinto de información relacionada lógicamente. Por lo general, consta de un título, una breve descripción (que resume el contenido de la página resultante) y una imagen, botón o “llamado a la acción” opcional.
Anatomía básica de las cartasPáginas de catálogos de productos: los grandes sitios web de comercio electrónico como Amazon, Alibaba, Walmart y eBay utilizan componentes de tarjetas para representar cada artículo del producto. Por lo general, una tarjeta de producto consta de la imagen del producto, el título, el precio, el descuento y una “llamada a la acción” que abre la página de detalles del artículo de un producto al hacer clic en ella.
Amazon (arriba) y Alibaba (abajo)
eBay (arriba) y Walmart (abajo)Sitios de contenido (artículos de noticias, plataformas de redes sociales) utilizan diseños basados en tarjetas para representar cada historia de manera similar, de modo que el usuario pueda escanear, comparar y elegir rápidamente algo para leer o mirar.
Behance (arriba) y Dribbble (abajo)
CNN (arriba) y BBC (abajo)Visualizaciones del panel: Un tablero es un buen ejemplo de cómo se pueden usar tarjetas para agrupar información relacionada de manera que el usuario pueda comparar y analizar datos fácilmente en la interfaz.
Mixpanel (arriba) y Dribbble (abajo)Sitios de recolección: navegar y explorar es una experiencia divertida y atractiva en colecciones tan grandes, como Pinterest y Unsplash, porque el diseño basado en tarjetas con imágenes grandes atrae la atención del usuario. Es por eso que la implementación de tarjetas para navegar se volvió tan popular en la web y en las experiencias móviles.
Pinterest (arriba) y Unsplash (abajo)Herramientas colaborativas: Las tarjetas son componentes flexibles: pueden combinar diferentes tipos de información y componentes secundarios. Por ejemplo, herramientas como Figma, Miro y Framer utilizan tarjetas para presentar proyectos y archivos. Este tipo de tarjeta es limpia, interactiva y funcional: es fácil acceder a las acciones relacionadas con los archivos haciendo clic derecho con el mouse en una tarjeta.
Figma y Miró
Hay muchas pautas y bibliotecas de diseño disponibles para brindar inspiración para el diseño de su tarjeta; sin embargo, quería resaltar las que obviamente no se consideran. ¡Espero que esta colección te resulte útil e interesante!
1. Haz un buen contraste entre una tarjeta y un fondo. Para distinguir mejor la tarjeta del fondo, puede hacer que su tarjeta delineado añadiendo un borde o Elevado añadiendo una sombra.
2. Esfuércese por mantener tamaños de fuente equilibrados y evite utilizar fuentes demasiado pequeñas. La legibilidad del contenido está definida por la fuente seleccionada y los tamaños de fuente aplicados. En el siguiente ejemplo, ambas tarjetas parecen casi iguales, pero es mucho más fácil percibir la tarjeta correcta porque los tamaños de fuente se seleccionan correctamente y la tarjeta en general se vuelve visualmente equilibrada y más agradable para el ojo humano.
💁 Algunos consejos para tamaños de fuente ¡Eso puede ayudarte a mantener la jerarquía visual!
Para Titularesutilice un tamaño de fuente entre 20px — 96px o más grande, según el tamaño y el contexto de la tarjeta.Subtítulo/subtítulo debe estar entre 2px-10px menos que su Titular/Título principal para que pueda ser fácil distinguirlos. Cuerpo texto, el tamaño de fuente debe ser al menos 16px. En algunos casos, puede reducir el tamaño si utiliza una fuente específica que tenga caracteres más grandes. Por ejemplo, en las Directrices de materiales de Google, se definieron dos tamaños de texto del cuerpo como 14 px y 16 px. Etiquetas de botones, el tamaño de fuente no debe ser menor que el tamaño de fuente del cuerpo. Cuando necesite mostrar varias opciones, para las acciones principales utilice estilos de fuente más destacados (Semi-negrita/Negrita) y para las acciones secundarias utilice estilos menos destacados (Regular/Medio). Intente limitar el número de tamaños de fuente, puede utilice una herramienta de escala de tipos como el complemento Figma Tipo de escala o Herramienta web para definir una escala tipográfica.
3. Cree un sistema de espaciado para los acolchados. Rellenos: son los espacios entre los elementos de la interfaz de usuario, ayudan a crear una agrupación visual y mantienen la jerarquía. Si desea evitar el caos en sus diseños y hacerlos consistentes, entonces necesita definir el sistema de espaciado que también será útil para la transferencia del desarrollador.
💁 Algunos consejos más para el sistema de espaciado!
Seleccione una unidad base que utilizará para incrementar los valores de espacio entre los elementos de la interfaz de usuario. Comúnmente, una unidad base es 4px (0,25rem). No es una buena práctica utilizar números impares como 5 píxeles, porque en dispositivos con 1,5 x DPI (puntos por pulgada), el espaciado aumentará hasta 7,5 píxeles, lo que provocará un resultado borroso. Defina el número limitado de valores de espaciado. usando la unidad base como un incremento o multiplicando un número, por ejemplo, como se define en la biblioteca Tailwind. Consejo de Figma Pro: cambiar la cantidad de “Big Nudge” de 10 px a 8 px le permitirá mover el componente a un valor de 8 px (esto es 2 veces más que la unidad base definida) presionando la tecla Shift y una tecla de flecha. ¡Eso ahorra mucho tiempo!
Si desea obtener más información sobre un sistema espacial, consulte este fantástico artículo.
4. Diseñe un estado de carga que se parezca lo más posible al diseño del contenido. El estado del esqueleto que coincide con el estilo del diseño de su aplicación ayudará a reducir la incertidumbre del usuario sobre el contenido cargado. A continuación, puede ver cómo el estado de carga en el lado derecho comunica mejor qué tipo de contenido esperar.
Un par de ejemplos más de cargando estados del esqueleto:
Figma y Vimeo
5. Defina una altura fija para las tarjetas. En caso de que necesite diseñar un elemento de tarjeta, suponga que una tarjeta podría tener 4 líneas de texto y otra tarjeta podría tener 1 línea de texto. La mejor manera de abordar el diseño de la tarjeta es definir una altura, dejando el espacio en blanco para la tarjeta que tiene menos contenido y truncando el texto cuando la tarjeta tiene más contenido..
6. Utilice cuadrículas para diseños basados en tarjetas. Grid es la base para un diseño basado en tarjetas, ayuda a organizar el contenido de manera consistente y es por eso que son tan útiles cuando se trata de diseño de tarjetas. Puede usar una cuadrícula para extender el ancho de la tarjeta al número de columnas de la cuadrícula que necesite y, al hacerlo, puede encontrar un ancho apropiado para su tarjeta. Cuando se trata de diseño responsivo, debes crear una cuadrícula para cada punto de interrupción y organizar tus tarjetas en consecuencia.
(1) Computadora de escritorio, (2) Tableta, (3) Móvil
Puede obtener más información sobre las cuadrículas responsivas en Material Pautas o Intuit Design System.
❓🙋 Preguntas que debes hacerte al diseñar un sensible basado en tarjeta disposición:
¿El contenido de la tarjeta parece coherente en todos los puntos de interrupción? (computadora de escritorio, tableta, dispositivo móvil) ¿Son consistentes los valores de espaciado para los espacios? ¿Considera interacciones? ¿Afectarían el tamaño de la tarjeta y el espacio entre las tarjetas? ¿Considera títulos/títulos largos? ¿Cómo afectarían el contenido de la tarjeta?
💁 Algunos consejos de Figma para una basado en tarjeta disposición:
Defina restricciones para las tarjetas para determinar cómo deben responder las tarjetas en su diseño a medida que cambia el tamaño de sus marcos. Aplique el diseño automático de su tarjeta para cambiar su tamaño automáticamente de acuerdo con los elementos que contiene. Consulte este tutorial de Figma. La creación de una cuadrícula de 8 píxeles le permite organizar con precisión y cambiar el tamaño de los elementos con unidades de incremento de 8 píxeles en su diseño. Obtenga más información sobre la cuadrícula de 8 puntos en este fantástico artículo.
7. Crea un diseño de tarjeta con contenido diferente. Si sabe de antemano que la tarjeta puede tener diferentes longitudes de contenido, asegúrese de cubrir este caso en su diseño. En la transferencia, esto ayudará al desarrollador a crear un código para la tarjeta de la manera correcta y evitará romper la alineación del contenido.