UI Design para iPhone X: Principais Elementos e o Entalhe

No mesmo espírito que a primeira publicação (UI Design para iPhone X: Bottom Elements), esta publicação tratará o design para o iPhone X. Eu uso descobertas em nossos próprios aplicativos em alguns dos exemplos.

The Notch (Caixa do Sensor)

Você não pode falar sobre este tópico sem primeiro abordar a controvérsia causada pelo entalhe.

John Gruber disse: “Isso me ofende. É desagradável e antinatural”, e Joshua Topolsky foi tão longe quanto “É, evidentemente, um elemento visivelmente nocivo”.

Independentemente dos seus sentimentos pelo entalhe, a realidade é que faça uma tela próxima à borda em um telefone em 2017; Você precisa fazer o lugar para sensores e falantes. A tecnologia para escondê-los atrás da tela simplesmente não está aqui. Vimos fabricantes diferentes escolher diferentes soluções para o problema. Este é o único que a Apple escolheu, então vamos trabalhar com o que conseguimos.

Então, como você deve lidar com isso?

A Apple escreve no HIG: “Não tente ocultar os cantos arredondados do dispositivo, a caixa do sensor ou o indicador para acessar a tela inicial colocando barras pretas na parte superior e inferior da tela.

No filme Designing for iPhone X, publicado pela Apple após o anúncio do X, Mike Stern diz: “Seu aplicativo ou jogo deve sempre preencher a exibição em que ele é executado. Colocar barras pretas na parte superior ou inferior da tela faz com que seu aplicativo se sinta pequeno, apertado e inconsistente com outras aplicações no iPhone X “.

A Apple está escolhendo destacar o fato de que a tela atinge o canto superior esquerdo e direito do dispositivo. Portanto, a recomendação é clara. Como um bom cidadão da plataforma, um deve seguir sua liderança. Ao fazê-lo, você provavelmente terá melhores chances de ser destacado pela Apple na App Store, ou até mesmo ganhar um Apple Design Award.

Eventualmente, eles vão se livrar do entalhe. Poderia ser 2, 5 ou mesmo 10 anos, mas é um intervalo, não uma solução de design permanente. Entretanto, trate-o como o elefante na sala. Todos sabemos que está lá, mas na maior parte, você deve projetar como se não fosse.

Barra de status

Por causa do entalhe, a barra de status passou por uma mudança significativa no iPhone X.

A barra de status conhecida de 20 pt de altura, a mesma altura que ocorreu desde o primeiro iPhone …

… agora tem 44 pt de altura no iPhone X.

O número 44 pt é encontrado novamente no raio da tela. Esse número foi conosco desde os primeiros dias do iPhone, pois um quadrado de 44 pt lados usou para representar o menor alvo de toque que pode ser facilmente atingido.

As barras de rolagem param antes que o raio da tela comece. Então, usando um fundo de barra de status como esse, as barras de rolagem têm uma parada visual.

A Apple aponta: “Se seu aplicativo atualmente esconde a barra de status, reconsidere essa decisão no iPhone X”. Eu sempre pensei que os aplicativos que esconderam a barra de status faziam a coisa errada porque você esconde informações importantes do usuário.

Barra de Navegação

Barra de navegação personalizada para o Vegourmet. As barras pretas funcionam especialmente bem no iPhone X. O entalhe se destaca menos, enquanto o efeito de desfocagem ainda permite que o conteúdo brilhe.

A barra de status mais alta é combinada com a altura da barra de navegação para um total de 88 pt. Como desenvolvedor, você deve usar os Guias de Layout de Área Segura.

Barra de Navegação Transparente

Ao visualizar uma receita, deixamos a foto da receita ocupar a maior parte da tela, e uma barra de navegação transparente é uma maneira natural de fazer isso. O efeito também funciona bem para o iPhone X.

Usamos um gradiente dividido em imagem de barra de navegação e imagem de sombra para uma sobreposição de gradiente extra alto e suave. Ao deixar a imagem da barra de navegação se esticar, o mesmo recurso funciona bem em dispositivos antigos também.

Cartões

Música e correio são dois exemplos de aplicativos da Apple com UI de cartão que deixam a área da barra de status em um fundo preto. Estes são usados para destacar a modalidade de uma tela, como agora, jogar ou compor um email.

Este estilo vai contra a diretriz da Apple de permitir que o conteúdo atinja os cantos e deve ser usado com moderação.

Ainda assim, é uma boa aparência quando a UI se mistura com o hardware, sempre pensei.

Títulos Grandes

Os grandes títulos funcionam bem para apresentar uma seção do seu aplicativo. Normalmente, ele pode ser usado no nível raiz de uma guia, mas em alguns casos, pode ser garantido mais adiante na hierarquia de navegação.

Os imóveis perdidos são recuperados assim que você rola.

Ir com uma UI preta é uma forma de o seu aplicativo se poder combinar mais com o hardware, seguindo as diretrizes da Apple.

Panorama

Na paisagem, os Guias de Layout da Área Segura colocam o conteúdo 44 pt da borda esquerda e direita, efetivamente evitando a caixa do sensor e os cantos arredondados. Ele também se afasta do indicador de casa na parte inferior da tela.

As células da vista da tabela e as cores de fundo atingem as bordas, dando uma espécie de experiência em falso em tela cheia.

O Safari faz um uso extensivo do preenchimento. Por padrão, o conteúdo será inserido 44 pt das bordas esquerda e direita. Os desenvolvedores da Web podem ajustar seus sites para alcançar as bordas da tela se desejarem.

Para utilizar melhor a largura total da tela, você pode olhar para a UI do player de vídeo revisada da Apple. Seus elementos flutuantes estão dobrados um pouco nos cantos da tela.

O controle de vídeo da Apple realmente usa uma forma de super livro. É também um excelente exemplo de como harmonizar UI com os cantos da tela. A distância, 27, mais o raio do controle, 17, é igual a 44.

Os mapas da Apple fazem uma coisa similar, onde alguns dos controles irão perto da borda da tela, mas, infelizmente, eles não se harmonizam com o raio do canto da tela.