Melhores 15 Exemplos de Design de UI de Cartão Popular para Inspiração em 2018

Amy Smith Blocked Unblock Seguir Seguindo 29 de dezembro de 2018

O design da interface do usuário do cartão ajuda a melhorar a interface e a experiência do usuário. As 15 melhores práticas de design de UI de cartão para a nova inspiração de design de web / aplicativo em 2018.

Como uma das grandes tendências de design de interface do usuário de 2018 , o design da interface de usuário de cartão ganhou status de mainstream no design de interface moderno e foi profundamente incorporado no design de UI de vários setores e setores. Muitos aplicativos móveis e da Web usaram o design de UI baseado em cartão , especialmente com a popularidade do Material Design .

Como contêiner de informações, os cartões armazenam todos os elementos, como texto, rich media, botões, etc. Com base nesse conteúdo, ele pode adaptar seu tamanho ao de diferentes dispositivos e telas, equilibrando a interface do usuário e a experiência do usuário.

Comparado ao design tradicional da interface do usuário, uma vantagem simples, mas intuitiva da interface do usuário do cartão é que ele proporciona uma experiência de usuário mais personalizada, tornando toda a interface mais clara, equilibrada, esteticamente agradável, simples e elegante com boa usabilidade.

Dispositivos e aplicativos inteligentes tornam nossa vida simples e lógica. Design de interface de usuário baseado em cartão e padrões de interação também foram assimilados em nossa vida diária. Portanto, os designers precisam levar em consideração os hábitos dos usuários quando estiverem em frente a diferentes dispositivos. Em suma, o design responsivo deve ser implementado para garantir uma interface perfeita em qualquer dispositivo.

Relacionado: 12 Melhor Tutorial Responsivo Web Design para você começar

Neste artigo, explicarei o que design de interface com cartão significa dentro do contexto do design da interface do usuário da Web e do design da interface do usuário do aplicativo móvel. Além disso, compartilharei alguns projetos baseados em interface de usuário com excelente cartão para sua inspiração. Se você estiver interessado em criar seu próprio design de UI baseado em cartão, poderá fazer o download e criar um protótipo com o Mockplus gratuitamente.

Relacionado: 10 Melhor Design UI UI para sua inspiração em 2017

O que é um design de interface do usuário de cartão?

Um cartão é um pequeno módulo retangular com imagens e texto. É um ponto de entrada para os usuários aprenderem mais detalhes. Para equilibrar a estética e a usabilidade da interface, o design da interface com o cartão é basicamente uma opção padrão. Como os cartões são fáceis de usar, eles também podem exibir conteúdo que contém elementos diferentes.

Quais são as vantagens do design de interface do usuário do cartão?

O Google chama de dentro para fora, o que é essencialmente uma melhor coleção de informações. Então, quais são as vantagens do design da interface do usuário do cartão?

(1) Aumentar a utilização do espaço

Ao usar uma lista tradicional, é necessário continuar rolando na vertical para obter mais conteúdo e o conteúdo exibido é limitado. Com o layout do cartão, mesmo em um fluxo de conteúdo vertical, também é possível exibir mais conteúdo deslizando horizontalmente.

(2) melhorar a operabilidade

Um cartão é um elemento material que pode ser coberto, empilhado, movido e deslizado. Isso poderia ajudar a expandir a profundidade visual e operacionalidade do conteúdo.

Por exemplo, o “Lembrete” no iPhone é um design de empilhamento de cartões. Os usuários podem encontrar rapidamente o memorando de destino de acordo com o título e, simultaneamente, clicar para abrir ou excluir o conteúdo do cartão.

(3) Conduzindo à Integração de Informação

No design de cartão, um cartão é um módulo de informações lógicas. Os usuários não ficarão confusos, mesmo que naveguem rapidamente. O cartão de blocos torna a página mais arrumada e mais agradável aos olhos. Com a capacidade de vários cartões terem tamanhos diferentes na mesma página, é fácil distinguir a hierarquia de informações.

(4? Fornecer experiência personalizada ao usuário

Comparando com o design tradicional da interface do usuário, uma vantagem simples, mas intuitiva da interface do usuário do cartão é que ela oferece mais. O que torna toda a interface clara, equilibrada, estética, simples e elegante, com boa usabilidade.

Excelentes exemplos de design de UI de cartão para inspiração

Práticas de design de interface do usuário de cartão real para o site

1. Google Play – Cartões de Material Design

Como produto do Google, o Google Play é um ótimo exemplo de material design. Qualquer que seja a cor e o tema do site, todos eles seguem o design do Google. Você pode ver o design do cartão em todo o site, não apenas na página inicial, mas também na página de detalhes do aplicativo.

A tela modular faz com que toda a interface do site pareça organizada, espaçosa e organizada. Os gestos implementados na coleção de cartões, incluindo deslizar, pegar e mover, e rolagem, dão aos usuários uma resposta rápida e aprimoram a operacionalidade dos usuários.

2. Quora

Como um site de conteúdo, o que o Quora deve primeiro considerar é o fluxo de informações. Ou seja, como exibir o conteúdo da página dentro de seu layout limitado e equilibrar o design do site e a experiência do usuário. A solução é cartões! Em termos de hábitos de leitura do usuário, os usuários preferem ler conteúdo em bloco e suave. Os cartões reúnem informações em pequenos blocos, tornando-os mais adequados para leitura.

Como os cartões extraem e otimizam o conteúdo em blocos significativos, diferentes tipos de conteúdo podem ser combinados em cartões como um agregado orgânico e coerente. Quando comparado a um artigo mais longo, o conteúdo curto permite que os usuários se sintam mais à vontade. Isso encoraja os leitores a continuar lendo.

3. Linkedin

De acordo com a lei de Fitz: quanto maiores os alvos de cliques, mais rápida a operação do usuário. O formato do LinkedIn usa texto, imagens e links. Quando todos os elementos acima são selecionados dentro do mesmo cartão, a imagem grande aparece no centro do cartão e se torna a maior área clicável do cartão inteiro (o ponto de entrada para a página de conteúdo detalhada). Conforme o mouse se move e interage com a página da Web, o usuário recebe um feedback "clicável".

4. Pinterest

Como pioneiro no design de cartões, o design da página em cascata do Pinterest oferece aos usuários uma experiência suave e perfeita. Além disso, reduz o número de cliques. ajuda muito a reter os usuários. A combinação de design de cartão e fluxo de cascata, que chama o cartão de fluxo.

Semelhante ao rich media clicável do LinkedIn, cada imagem do fluxo de imagens do Pinterest também é clicável. Material Design dá às cartas um tom sutil, especialmente ao interagir com o mouse. Sombra e profundidade aumentam a visibilidade e dão aos elementos a percepção de “clicabilidade”.

5. Dribbble

Quando se trata de design de UI de cartão, o Dribbble é talvez o melhor exemplo. Há muitos designers no Dribbble fazendo upload de inúmeros desenhos criativos todos os dias. Para mostrar cada peça engenhosa, o Dribbble usa um banquete visual de cartas para o prazer dos usuários.

Foi demonstrado que as imagens podem atrair a atenção dos usuários rapidamente. Isso torna a abordagem visual do design baseado em cartão ainda mais relevante e uma escolha natural para o Dribbble.

Práticas de Design de UI de Cartão Real para Aplicativos Móveis

6. Instagram

O contêiner de cartões é mais proeminente no design da interface do usuário do aplicativo para dispositivos móveis. Instagram é um aplicativo móvel baseado em imagem. Todas as imagens são publicadas em um quadrado, o que padroniza a largura da imagem no fluxo de feed. Além das imagens, os cartões também carregam outros elementos, como texto e informações funcionais. Todos os elementos na tela formam um módulo funcional completo para este aplicativo.

7. Trello

O design da interface do usuário do cartão para este aplicativo móvel ajuda os usuários a categorizar melhor as listas. O sucesso de Trello vem do design de cartões. Essa também é a maior diferença entre o Trello e as ferramentas tradicionais de gerenciamento de transações. As listas de tarefas baseadas em cartão podem ser usadas de maneira flexível para otimizar a maneira como elas funcionam, ajudando os usuários a gerenciar tarefas e trabalhar.

8. Airbnb

Como software de aluguel, o Airbnb se concentra no design visual para atrair usuários. A simplicidade do design do cartão é suficiente para melhorar a experiência do usuário e ajuda a distinguir cada parte do conteúdo. Além disso, com base no design da interface do cartão, o Airbnb também usa design sem moldura. Isso, combinado com elementos de informações unificados e repetidos, padroniza o conteúdo, aprimorando a coesão do design geral.

Excelentes designs de UI de cartão no Dribbble

9. Mecânico de Automóveis AR

Designer: Maciej Dyjak

URL: https: //dribbble.com/shots/5306051-AR-Car-Mechanic …

10. Página do artigo de viagem

Designer: Faria

URL: https: //dribbble.com/shots/5278735-Travel-Article -…

11. App de viagem

Designer: Hippie Mao

URL: https://dribbble.com/shots/5270259-Travel-App

12. Cate APP

Designer: Liu GouDan

URL: https://dribbble.com/shots/5020742-Cate-APP

13. Resto Friends App Exploration

Designer: Masudur Rahman

URL: https: //dribbble.com/shots/5093616-Resto-Amigos-A …

14. Análise de Experimentação: Resumo do Desempenho

Designer: Uber Design

URL: https: //dribbble.com/shots/4965024-Experimentation …

15. App de compras de mobília personalizada

Designer: Jack W.

URL: https: //dribbble.com/shots/4611632-Customized-Furn …

Conclusão

O cartão é uma prancheta criativa para designers de interface do usuário. Não é apenas um controle de interface de usuário de cartão materializado, é um importante elemento de layout para criar conteúdo de qualidade e proporcionar uma excelente experiência do usuário. Os 15 exemplos acima demonstram as melhores práticas para implementar cartões de design. Se você deseja obter mais inspiração de design de UI de cartão, pesquise Dribbble para obter mais exemplos e recursos.

Mais sobre design de interface do usuário:

10 designs de interface de aplicativos móveis mais recentes para sua inspiração

Os 10 principais exemplos práticos de design de interface do usuário para aplicativos Android para inspiração

10 Melhor Design UI para sua inspiração em 2017