Cores e Coerência em Aplicativos (Padrão iOS)

Julia Santos
Apple Developer Academy | Mackenzie
5 min readJun 19, 2019

Para o projeto de um aplicativo é essencial ter bem definidas as cores que serão utilizadas na interface e, além disso, criar uma coerência entre as cores definidas por meio de uma justificativa para sua escolha.

As cores dão personalidade ao seu projeto, é parte importante na transmissão do conceito idealizado para tal. Guiam a experiência do usuário dentro do aplicativo, ou seja, destacam ações, fornecem continuidade visual e ajudam na visualização de dados.

Paleta de Cores

Representação de uma Paleta de Cores

Ao iniciar um projeto, o ideal é reunir todas as ideias e os conceitos em formação para determinar uma paleta de cores funcional e coerente com a proposta. Ela necessariamente deve estar ligada a esses conceitos, e não ser escolhida apenas pelo gosto pessoal. A coerência é o que faz os aplicativos levarem a seus usuários o desejo de continuarem utilizando o app por mais tempo e até mesmo que sejam incluídos em suas rotinas.

A paleta de cores dita o que deve aparecer no app, porém, eventualmente é necessário adicionar cores para novas funcionalidades. Isto é permitido desde que a consistência de cores ainda seja respeitada e tenha uma justificativa para o conjunto.

Definir cores para funções interativas

As cores podem ser utilizadas para representar todas as ações dentro do app, para isso é necessário escolher uma cor e padronizá-la para todas as ações que serão executadas pelo usuário. Elas também devem estar presentes no logo do aplicativo, para manter a coerência.

Elementos interativos merecem uma atenção especial no momento de diferenciar cores, pois se elementos interativos e não interativos possuírem a mesma cor, ou uma cor muito semelhante, fica muito difícil de diferenciá-los.

As cores devem ser utilizadas com cautela para não confundir o usuário, como exemplo, a cor de um símbolo de atenção não deve ser utilizada para outro elemento pois seu efeito seria menos efetivo.

Além disso, é importante considerar como o uso das cores é utilizado em culturas diversas, por exemplo, o vermelho é utilizado por diversas culturas como uma cor para atenção ou perigo, no entanto, em algumas, ele pode ser utilizado com uma conotação positiva.

Normalmente cores como vermelho, verde, azul, entre outras, são usadas pelo sistema ou como um padrão de alerta ou ação em determinado componente e, por isso, devem ser respeitadas sendo utilizadas com cautela e moderação em outras partes do app.

Contraste

Para o contraste ser adequado, busque por cores distantes ou opostas entre si, pois elas se equilibram e garante ao usuário uma visualização clara dos elementos da tela, além de trazer uma harmonia para o projeto.

O contraste pode ser obtido a partir da matiz ou do nível de luminosidade da cor. Ele se dá pela oposição entre elementos como o preto no branco ou formas grandes em relação a pequenas. A diferença de brilho entre cores também revela um contraste que, dependendo do caso, pode vir a ser utilizado.

Light Mode no Xcode
Dark Mode no Xcode

Com a recente tendência do Dark Mode entre os dispositivos mobile, agora é necessário escolher uma segunda paleta de cores referentes à primeira escolhida, tornando-as mais brilhantes para contrastarem melhor com o tom escuro da tela.

Caso não deseje escolher tantas cores, é possível utilizar as cores padrão do sistema operacional, as System Colors. Elas já vêm com as cores definidas para o Dark Mode, e ajudam a poupar o tempo de testar as cores nos diferentes modos de tela, principalmente os tons de cinza no caso de textos, pois não necessitam de tanta variação em relação ao padrão.

System Color (iOS)

Se utilizar um System color para a sua cor, você terá suporte automático para o High Contrast. Para utilizá-las basta adicionar ao código a API da cor desejada, da forma descrita abaixo.

*Imagens retiradas da documentação oficial de Cores em iOS da Apple, o Human Interface Guidelines (HIG).

Night Shift e True Tone

O recurso Night Shift usa o relógio e a localização geográfica do dispositivo iOS para determinar a hora do pôr do sol onde você está. Em seguida, altera automaticamente as cores da tela para cores mais quentes. E então, pela manhã, a tela volta para os ajustes normais.

Os dispositivos iOS mais recentes possuem o True Tone, que é reproduzido a partir de sensores que ajustam o balanço do branco para se adequarem à luz ambiente e com isso oferecem comodidade aos olhos do usuário, já que controla o brilho e a cor da tela do dispositivo automaticamente.

No entanto, ambos modos de ajustes automáticos de brilho e cor da tela não são recomendados para testes de cor no dispositivo, já que mascaram o real tom da cor. Nesse caso, é indicado desativar ambos os modos, assim a cor escolhida será fiel à cor desejada.

Conclusão

Os aplicativos devem seguir um padrão de cores para haver uma harmonia entre suas funções. Para isso, a escolha de cores deve ser feita com cautela e ter consistência para que não fuja do que foi idealizado.

Este artigo tem como referência o Human Interface Guidelines, documento que padroniza o design de interfaces na Apple.

--

--

Julia Santos
Apple Developer Academy | Mackenzie

Escritora no incrível Medium do Coletivo Zero&umas! ~ medium.com/zeroeumas ~ Estudante de Arquitetura e apaixonada por Design