La tarjeta es un tipo de componente que vemos a menudo en todos los sitios web y en todas las aplicaciones debido a la simplicidad y conveniencia que brinda. Una tarjeta a menudo resume brevemente la información de un registro que queremos transmitir al usuario, en lugar de utilizar un formato tabular.
mesa y tarjeta
El diseño de la interfaz de usuario de la tarjeta es un pequeño componente de etiqueta, con imágenes y texto. La tarjeta es el primer punto por el que los usuarios acceden a la información que queremos transmitir, un lugar estimulante para que los usuarios hagan clic para ver los detalles. En comparación con el diseño de interfaz tradicional, la ventaja de la simplicidad y la visualización hace que la experiencia del usuario sea más amigable.
El diseño de la interfaz de usuario de tarjetas existe desde hace mucho tiempo, pero para mejorar la experiencia del usuario, el diseño de tarjetas se ha convertido en la corriente principal del diseño de interfaz de usuario moderno y ha sido un componente indispensable de la interfaz de usuario de un sitio web o aplicación. Especialmente cuando la popularidad del diseño de materiales de Google, el diseño de tarjetas es aún más popular.
Tarjeta en el famoso sistema de diseño.
Para tener una tarjeta bonita y clara separada del fondo, necesitas tener un borde alrededor de la etiqueta, los elementos del interior dependen de lo que quieras transmitir a través de la tarjeta, pero los siguientes elementos normalmente los verás en la tarjeta.
Elementos en una tarjeta
El contenido que se muestra en una tarjeta trata sobre un solo tema y debe ser fácil para los usuarios escanear rápidamente información importante y tomar medidas. Elementos como el texto de la imagen deben ser jerárquicos. Cada tarjeta se compone de bloques de contenido. Todos los bloques, en su conjunto, están relacionados con un único tema o destino. El contenido puede recibir diferentes niveles de énfasis, dependiendo de su nivel de jerarquía.
En la tarjeta, tenemos la información más refinada de un registro, por lo que al usar la tarjeta, el usuario se concentrará en la información importante. Fácil de responder en sitios web y dispositivos móviles. Muchos sitios web y aplicaciones ahora usan tarjetas para describir información, por lo que los usuarios Se les ha enseñado a reconocerlas, por lo que es más fácil absorber la información. Las tarjetas ayudan a mantener la interfaz ordenada y realzan el minimalismo del diseño.
1. Publicaciones de blog
Una tarjeta de publicaciones de blog es un componente que muestra sus publicaciones en la página de su blog. Incluye muchos componentes, como fecha y hora de creación, título, contenido, ilustraciones y tipo de artículo… Para crear una hermosa tarjeta de blog, debemos confiar en muchos factores como: un diseño claro, fácil comprensión y una división razonable de componentes.
Demostración de la tarjeta de publicaciones de blog.
Tarjeta de publicaciones de blog.
Puede ver que en la tarjeta de publicaciones del blog tenemos componentes comunes como medios, título principal, descripción breve y CTA (llamado a la acción). Puede personalizar los componentes comunes que necesite para su diseño, como cambiar el botón “Leer más” a “Guardar publicación” o agregar más botones “Compartir”, “Me gusta”,…
2. Tarjeta de producto
La tarjeta de producto se usa ampliamente en sitios web y aplicaciones de comercio electrónico. Su objetivo es atraer el interés de los compradores por los productos. El uso de la jerarquía visual hace que las tarjetas de productos sean más eficientes, las imágenes de los productos suelen ser más grandes que el resto del contenido, seguidas del producto y el precio.
El objetivo principal de la tarjeta de producto es proporcionar información preliminar sobre los productos a los compradores; dependiendo del producto que desee vender, debe considerar la información al diseñar.
Además del título de los productos, imágenes interesantes y el botón CTA (Agregar al carrito, Comprar ahora), su tarjeta de producto debe tener una breve descripción, los parámetros del producto, el número de compras y la calificación.
Demostración de la ficha del producto.
La imagen es un factor muy importante porque es el primer elemento que atrae la atención del usuario cuando visualiza nuestros productos, por lo que es necesario que la imagen sea lo más clara y fiel posible. Tampoco debes usar demasiadas fuentes y el contenido no es demasiado porque a los usuarios les dará pereza leer, por lo que solo necesitas describir las características más destacadas del producto para la tarjeta del producto.
3. Reseñas
Con la función de calificación, a menudo vemos que el formulario de calificación con estrellas (de 1 a 5 estrellas) es el más popular. Según la calidad de los productos y servicios, los usuarios los califican de 1 a 5 estrellas. Este método de evaluación es muy adecuado para evaluar el nivel de productos o servicios. Muchos sitios de comercio electrónico, reseñas de películas y alquileres de habitaciones utilizan esta clasificación para su sistema.
Pero, de hecho, los usuarios no son como pensamos que no les importa esta evaluación. Si tienen una buena experiencia dan 5 estrellas, si no les gustan dan 1 estrella. Desde entonces, los desarrolladores solían calificar como “me gusta” o “no me gusta”. Además, contamos con tipos de reseñas que describen su experiencia con el producto o servicio.
A partir de ahí, deberíamos diseñar tarjetas adecuadas para cada tipo de evaluación.
En las tarjetas de revisión veremos muchos tipos diferentes. Agregue todas las reseñas y calcule el número promedio de estrellas. O una visualización de la reseña de cada usuario, incluida la cantidad de estrellas calificadas o no me gusta y nota información sobre su experiencia con el producto o servicio.
Demostración de tarjeta de reseñas.
4. Tarjeta de paneles
Los paneles ayudan a transmitir información importante rápidamente a los administradores del sistema. El objetivo principal de la tarjeta del panel es presentar los datos y recursos actuales y mostrar su estado, ayudando al administrador a trabajar de forma rápida y proactiva en su sistema.
Para cada elemento de información importante, cada información tendrá 1 tarjeta para describir, dependiendo de la información que queramos describir, elegimos el diseño de gráfico más óptimo. Los gráficos de columnas y de líneas son probablemente los más utilizados, además, también podemos encontrarnos con gráficos circulares.
Componentes comúnmente necesarios de una tarjeta de tablero: nombre del elemento de información, datos actuales, un gráfico que muestra la volatilidad actual, porcentaje de cambio. Utilice la jerarquía visual y el color para ayudar a los usuarios a distinguir fácilmente.
Demostración de la tarjeta del tablero.
Resumen
Las tarjetas en el diseño de sitios web y aplicaciones son innumerables, pero los 4 tipos anteriores son los más comunes. Normalmente, se diseñará como los ejemplos de demostración anteriores, pero en realidad, al diseñar también debemos observar los requisitos del proyecto y organizar la información de manera que sea más razonable.
Espero que esto haya sido útil para ti. Gracias por leer hasta el final.