0
respostas

[Projeto] Consistência visual do apicativo Spotify

Um ótimo exemplo de consistência, inclusive citado nas aulas, é o aplicativo Spotify. Nele, podemos notar diversos grupos de componentes que se repetem na própria tela inicial:

Print da tela inicial do aplicativo Spotify com destaques coloridos em cada grupo de componentes

  • Vermelho: filtro para localizar os diferentes tipos de faixas salvos na biblioteca;
  • Verde: Playlists criadas/salvas na sua biblioteca na barra lateral para acesso mais rápido;
  • Laranja: outro tipo de filtro para a tela principal;
  • Azul: recomendações de playlists criadas pelo próprio spotify com músicas salvas e músicas parecidas a elas;
  • Amarelo: faixa que está tocando no momento, com informações básicas e úteis, como de qual playlist essa faixa é, capa do álbum, nome da música, artista e se está salva ou não;
  • Roxo: uma barra fixa de navegação rápida entre as faixas, com um “layout universal” e outras funcionalidades, como visualizar a letra da música, o volume e o tamanho da tela, etc.

Todos esses grupos de componentes possuem um padrão único, mas que se repete. Perceba que na listagem de playlists (destacado em verde) não precisou criar um layout diferente para cada playlist: cada uma tem o mesmo alinhamento, tamanho de texto, título destacado, mesmo tamanho da capa… Criou-se uma consistência e é fácil de identificar que são várias divisões das mesmas coisas (grupos de músicas).

Além disso, a fonte de todo o texto encontrado na tela inicial não varia muito: é a mesma fonte, mas em negrito para textos de destaque e outros menos chamativos para informações adicionais, que não requerem tanta atenção.

Em conclusão, todos os grupos de componentes, inclusive os que não citei nesta atividade, possuem uma consistência e um padrão que se perpetua em todas as telas, gerando maior confiabilidade e menos carga cognitiva do usuário, onde ele consegue se localizar muito bem nas funcionalidades e telas do aplicativo.