Reglas para crear una página de destino. Estructura ideal de la página de destino según LPgenerator. Limita tus opciones

26.12.2016

Las tarjetas son pequeños contenedores de información.. Las tarjetas se han convertido en un elemento casi imprescindible cuando se trata de equilibrar la estética con la facilidad de uso. El diseño de tarjetas fue introducido originalmente por servicios como Pinterest y Facebook, y hoy su influencia se ha extendido a muchas industrias.

Un diseño de tarjeta bien ejecutado puede mejorar la UX (experiencia de usuario) de su aplicación. En este artículo describiré 5 técnicas útiles para la implementación diseño de tarjeta y te daré algunos ejemplos interesantes.

• Lea también:

1. Siga la regla "Una tarjeta, un concepto".

2. Se debe poder hacer clic en toda la superficie de la tarjeta.

Seguir Ley de Fitts y permitir a los usuarios hacer clic/tocar en cualquier parte de la tarjeta, no solo enlaces de texto o imágenes. Una gran área de contacto mejora significativamente la usabilidad tanto en pantallas táctiles como en dispositivos que utilizan un mouse.

Consejo: es bueno cuando las cartas proyectan una sombra, mostrando profundidad; esto es confirma visualmente la capacidad de hacer clic en la tarjeta.

3.Haz que las tarjetas sean atractivas

El diseño de tarjetas funciona porque buen diseño y excelente usabilidad. Al agregar estética a las tarjetas, las haces reconocibles y creativas.

Cuando se trata de diseño de tarjetas, debes centrarte en los siguientes puntos:

Imágenes

El énfasis en las imágenes es el punto fuerte del diseño de tarjetas. Investigación confirmar que las imágenes “eleven” el diseño. Por tanto, centrarse en el uso de imágenes hace que el diseño de la interfaz de la tarjeta sea más atractivo para los usuarios.

Sombras y degradados

Las sombras y los degradados desaparecieron. largo recorrido ser sentido y asociado con su análogos físicos. Pero piense detenidamente en cómo utiliza las sombras y los degradados: si las sombras se proyectan desde todos los ángulos y lados, se arruinará la ilusión de que la tarjeta es un objeto físico.

Tipografía

También puedes atraer la atención del usuario mediante texto. Todo el diseño de la tarjeta debe ser fácil de leer y comprender:

• Usar fuentes simples Y paletas de colores(Es mejor leer el texto sobre un fondo contrastante).
• Intente utilizar una cantidad mínima de fuentes. Para el diseño de tarjetas, una fuente es más que suficiente.

Consejo: La fuente sans-serif normal es ideal para tarjetas.

• Lea también:

4. Limitar el contenido de la tarjeta

Las tarjetas suelen ser concisas y contienen un enlace para acceder a información más detallada. Cuando intentas incluir demasiado contenido en una tarjeta haciéndola demasiado ancha o demasiado larga, pierde su mensaje original porque ya no parece una tarjeta.

A continuación se muestra un ejemplo de una interfaz de tarjeta. Observe la tarjeta en el medio. El problema es que contiene mucha información, lo que dificulta la comprensión de la tarjeta.

5. Aprovecha la animación y el movimiento.

Las animaciones pueden tener un impacto positivo en la UX si se usan correctamente. Ayudan a las personas a navegar mejor por la interfaz de la tarjeta e instalarla. conexiones visuales entre diferentes condiciones para cada tarjeta.

Señales visuales

Las señales visuales ayudan a los usuarios a comprender cuál es la mejor manera de interactuar interfaz de usuario. Este tipo de animación se utiliza cuando es necesario demostrar cómo funciona determinada funcionalidad de diseño.

Comentarios visuales

La retroalimentación visual es muy importante en el diseño de la interfaz. Funciona porque satisface el deseo natural del usuario de confirmación. EN vida real Los objetos responden a la interacción, y esto es lo que la gente espera de los objetos. Para aplicaciones de escritorio o sitios web que puede utilizar efecto de desplazamiento para mostrar que se puede interactuar con los objetos. La animación al pasar el mouse aumenta el nivel de comprensión y al mismo tiempo hace que la experiencia del usuario sea más entretenida.

Usando el efecto de desplazamiento también puedes abrir opciones. En el siguiente ejemplo, el efecto de desplazamiento permite a los usuarios cambiar colores, responder mensajes, enviarlos o eliminarlos.