Display Customization — SwiftUI

Published in

Apple Developer Academy | Mackenzie

3 min readAug 24, 2023

O SwiftUI tem uma gama muito grande de recursos para personalizar a exibição, incluindo texto em negrito, aumento de contraste, redução de transparência, inversão inteligente, diferenciação sem cor, e muito mais. Tudo isso para melhorar a experiência do seu aplicativo, tornando-o cada vez mais acessível.

Redução de Movimento

Você conhece o Parallax Effect, ou Efeito Parallax? Esse efeito tem como base uma ilusão de ótica, que dá impressão de que objetos ou pessoas estão em movimento. Muitos desenvolvedores utilizam essa técnica para aproximar o usuário do aplicativo, pois pode parecer mais divertido, porém, para muitas pessoas, isso pode ser desorientador, e pode causar enjôo.

Por isso, o SwiftUI agora tem uma ferramenta chamada Reduce Motion, onde os aplicativos podem ler e responder apropriadamente.

Aqui está um exemplo de como utilizar:

Ao utilizar essa ferramenta, o usuário espera que os seguintes ajustes sejam feitos:

Movimento ocioso
Efeito Parallax e outros efeitos
Vídeos e gifs que começam automaticamente
Transições de slide

Dynamic Type

O Dynamic Type (“Tipo Dinâmico”, em inglês) permite que o usuário escolha o tamanho da fonte que ele achar melhor para seu uso, facilitando a leitura de conteúdos presentes em sua tela. Para que o usuário desfrute dessa função, verifique se o design do seu app é dimensionável e se tanto o texto quanto os símbolos são legíveis em todos os tamanhos de fonte. Para efeitos de teste, no iPhone ou iPad, ative tamanhos de texto Tamanhos de Texto de Acessibilidade Maiores em Configurações > Acessibilidade > Exibição e Tamanho de Texto > Texto Maior e verifique se seu app permaneceu confortavelmente legível.

Boas Práticas:

À medida que o tamanho da fonte aumentar, mantenha o truncamento de texto no mínimo;
Considere ajustar o layout para fontes grandes;
Aumente o tamanho dos ícones de interface significativos à medida que o tamanho da fonte aumentar;
Mantenha uma hierarquia de informações consistente, independentemente do tamanho da fonte atual;
Prefira pesos de fonte regulares ou pesados em seu aplicativo;
Certifique-se de que seu aplicativo responda corretamente e tenha boa aparência quando as pessoas ativarem o texto em negrito;
Certifique-se de que as fontes personalizadas sejam legíveis;
Evite a justificativa de texto completo;
Evite usar itálico ou todas as letras maiúsculas para longas passagens de texto

Cores

Sempre quando for desenhar sua interface, utilize cores com alto contraste, verificando isso em calculadoras de contraste online, sempre dando preferência às cores do sistema para textos. Nunca use apenas cores para diferenciar itens diferentes, utilize de outros métodos para dar suporte a cor como formas, símbolos e textos.

Algumas pessoas têm dificuldades em diferenciar cores, então para poder diferenciar dois estados diferentes, evite combinações como azul e laranja, verde e vermelho, vermelho e preto e verde ou vermelho com cinza. Se for utilizar essas cores, use outros elementos para diferenciar, assim como foi falado acima.

Além disso, prepare seu app para a função de “inverter cores”, pois na função de “Inversão Inteligente”, fotos, vídeos, ícones de app não invertem. Então, verifique o seu app para garantir que as imagens não invertam cores nessa função, para isso utilize o modificador “accessibilityIgnoresInvertColors”.

Outra função que pode ser ativada pelo usuário é o “Reduzir Transparência” que irá reduzir a transparência de todos os elementos da interface, e para isso, é possível preparar o seu app com a variável Environment accessibilityReduceTransparency utilizando ela como uma variável booleana para diminuir a opacidade dos elementos.

A lista abaixo tem alguns links para te ajudar a aprofundar nos seus estudos, além de auxiliar no desenvolvimento do seu app.