O iPhone X mudou fundamentalmente o design de aplicativos. Com seu formato exclusivo e os novos elementos de interface do usuário, os designers precisam mostrar mais flexibilidade e criatividade para criar aplicativos impressionantes. Este guia explica passo a passo como você pode usar o Sketch para adaptar seu design às exigências do iPhone X.
Principais conclusões
- A altura da tela do iPhone X é de 812 pixels, o que cria espaço para novos elementos de UI.
- A navegação e a Tab Bar são mais altas e requerem ajustes no layout.
- É importante observar a Safe Area para garantir que nenhum conteúdo caia na área arredondada da tela.
- O Home Indicator é um novo elemento de interface que deve ser considerado no design.
Guia passo a passo
Comece criando um novo design do iPhone X no Sketch. Pressione A para adicionar um novo elemento e clique no design do iPhone X.
A largura permanece em 375 pixels, enquanto a altura é definida para 812 pixels. Isso lhe dá mais espaço para projetar sua interface do usuário. Considere que os cantos arredondados da tela são importantes para o layout.
Copie o Home Controller e adapte o design. É aconselhável não usar as bibliotecas padrão, mas a biblioteca específica do iPhone X para um ajuste mais preciso. Vá para as configurações no Sketch e ative a biblioteca do iOS 11, caso ainda não esteja ativada.
Adicione uma barra de navegação padrão para manter a interface consistente. Certifique-se de que a altura da Navigation Bar seja de 88 pixels em comparação aos 44 pixels do iPhone 8.
Procure pela Status Bar na biblioteca do iOS 11 e adicione-a também. Ela deve ser posicionada na borda superior da tela.
Para a Tab Bar, o mesmo se aplica: escolha uma versão com três tabs da biblioteca do iOS 11 e certifique-se de que ela tenha 83 pixels de altura para se encaixar bem no layout.
Certifique-se de que nenhum elemento do design invada a área arredondada. Na programação, isso é chamado de Safe Area Layout Guide – é o espaço que você precisa para uma visualização segura.
Adicione o Home Indicator como um elemento essencial do seu design. Ele deve ser colocado no centro da borda inferior.
Depois de adicionar os elementos básicos, você pode copiar toda a seção e colá-la no lugar desejado. Lembre-se de ajustar os espaçamentos após a cópia.
Repita esse processo para o Chat Controller. Crie uma cópia do design e renomeie-a de acordo.
Substitua os ícones das tabs e adapte a apresentação. É importante escolher cuidadosamente a simbologia e os textos corretos.
Preste atenção aos espaçamentos, especialmente entre as chat bubbles e a Tab Bar. Mantenha um espaçamento de 16 pixels para garantir que os elementos harmonizem bem entre si.
Esses passos mostram como você pode rapidamente adaptar seu design ao novo formato. No entanto, se houver dúvidas, não hesite em continuar refinando o design.
Na próxima lição, você aprenderá como trabalhar com efeitos adicionais na área de perfil, incluindo o uso de efeitos de desfoque.
Resumo – Design eficaz do iPhone X no Sketch
Adaptar seus designs ao iPhone X abre novas possibilidades. Com a compreensão correta dos novos formatos de tela e elementos de UI, você pode criar interfaces impressionantes.
Perguntas frequentes
Qual é a altura da tela do iPhone X?A altura da tela do iPhone X é de 812 pixels.
Como eu ajusto a Tab Bar?A Tab Bar deveria ter uma altura de 83 pixels para funcionar bem no layout.
O que devo considerar ao projetar?Preste atenção à Safe Area e assegure-se de que os elementos não invadam as áreas arredondadas.
Como faço as adaptações no Sketch?Copie os elementos do controlador existentes e adapte-os usando a biblioteca do iOS 11.
Preciso ajustar a Navigation Bar?Sim, a Navigation Bar tem uma altura de 88 pixels e deve ser ajustada para consistência visual.
