Las tarjetas están por toda la parte. Sitios em, redes sociales, comercio electrónico. Ele ganhou popularidade muito facilmente y tenemos muchas razones para esto.
https://dribbble.com/shots/2845710-Invision-Projects-Spaces-iOS
Quando você usa cards todo parece limpo y arrumado. Melhora o engajamento, organiza bem o conteúdo e ajuda os usuários a olhar rapidamente a página.
Mas os Cards precisam ser bem pensados para tornar a experiência do usuário mais eficiente, senão pode dar bem errado.
Para esto, enumerarás algunas cosas prácticas:
Simplicidad: Como la tarjeta puede contener varios elementos diferentes, debemos tener cuidado para ser sobre un único assunto. Esto permite que los usuarios seleccionen la parte del contenido que deseen consumir, compartir o interactuar.
aplicación maravilla
Espacio en blanco: Las tarjetas están representadas por un contenido individual altamente coherente, dividido en pequeños bloques. Por eso es esencial dar un espacio para cada bloque del cartón, ya que podría estar limpio y entendido con mayor facilidad. Acrescente bastante espacio en blanco Ao redor de cada bloque también, para fornecer aos usuários tempo e tranquilidade para redefinir visualmente a medida que eles aparecem de un cartão para o outro.
Límite de conversación: El mapa debe contener solo información esencial y ofrecer un camino para más detalles, en lugar de los detalles completos del logotipo de la cara. La mayor parte de la tentación es colocar mucho contenido en un único cartón, ele pode ficar muito grande ou muito longo y, por su vez, perder su conexión original con la metáfora del “cartao”Já que ele não parece mais um cartão.
Animación y movimientos: Las animaciones pueden contribuir mucho con la experiencia del usuario, si se usan correctamente. Ele estabele relações visuais em state diferentes do cartão y orientam o usuário dentro de la interfaz.
https://dribbble.com/shots/5104293-3D-Car-Presentation
Dicas visuales: Estas imágenes ayudan a los usuarios a entender mejor cómo interactuar con la interfaz del usuario. Este tipo de animación se usa cuando necesitas demostrar cómo funcionan ciertas funcionalidades del diseño.
Además, la retroalimentación visual es extremadamente importante en la interfaz. Funciona bien porque atrai o deseo “natural” de reconhecimento do usuário. Na vida real, como coisas respondem naturalmente à nuestra interacción, y es así que as pessoas esperanm que as coisas funcionem.
Para aplicaciones o sitios, puedes usar el efecto de foco para mostrar que el elemento es interactivo. Una animación suspendida agregada a un nivel de descubrimiento y, al mismo tiempo, hará una experiencia más divertida.
Grito jerarquía de conteúdo: La jerarquía dentro de los cartões ayuda a dirigir la atención de los usuarios para las informaciones más importantes. Coloque el mensaje principal en la parte superior del cartón y utilice una tipografía para enfatizar el mensaje principal. Utilice divisores para separar como áreas de contacto que requieran una separación visual más distinta.
https://material.io/design/components/cards.html#anatomy
Clicavel: Faça o cartão inteiro clicável, não only algumas partes. Esta área de toque mayor mejora sustancialmente la usabilidad en dispositivos con tela sensible al toque y también en todos los demás.
http://uigarage.net/
Pensamiento no usuário: El diseño bonito es óptimo, pero la usabilidad impecable es aún mejor y debe ser su prioridad, o seja, la tarjeta necesita ser visualmente mejorada y simple al mismo tiempo. Una imagen es la clave del diseño del cartón, necesita una imagen óptima para atraer a los usuarios a cada cartón individualmente. Opte por fuentes simples y básicas (como sans-serif con peso normal)pois a tipografia basica maximiza a legibilidade e ajuda na navegação.
https://www.awwwards.com/
Usar cuadrícula: É uma regra simples. Isso ayudará a alinhar as coisas correctamente, mantendrá el diseño consistente y también garantizará que o conteúdo seja realinhado sem problemas, independientemente del tamaño de la tela.
Seja criativo com os Cards: ¿Tienes algo que decir para diseñar qué vas a compartir? Se sim, deixe seu comentário abaixo — vou adorar ler as suas inspirações.
— — — —
Fuente: