Na hora de criar um layout para as telas de app, seja para aplicações disponíveis na Play Store ou Apple Store, é possível pegar atalhos, e esse é o tema deste artigo. Abaixo, confira o tutorial de como fazer e as dicas fundamentais para layouts responsivos.
Para dicas iniciais sobre UI (user interface), UX (user experience) para apps e Design de interface, aproveite para conferir esses conteúdos.
Como criar telas de app para celulares Android
Aqui utilize o Layout Editor. Essa ferramenta oferecida pelo Android consiste em um editor de design visual com elementos pré-estabelecidos. Assim, é possível arrastar essas estruturas para criar as telas do app.
Outra vantagem da ferramenta é que ela oferece a visualização do layout final em diferentes dispositivos e versões do Android. Aproveite para redimensionar os elementos visuais, garantindo que o layout fique funcional em diversas resoluções de tela.
Recursos disponíveis no Layout Editor
- Palette: contém visualizações do que pode ser arrastado para o layout;
- Component tree: apresenta a hierarquia dos itens que serão exibidos na tela;
- Toolbar: altera a aparência do layout e os respectivos atributos;
- Design editor: fornece visualizações “Design” e “Blueprint” para edição;
- View mode: veja o layout em 3 diferentes tipos de exibição;
- Zoom and pan controls: controla o tamanho e a posição do visualizador.
Como criar um novo layout
Para produzir um layout, primeiro é necessário idealizar um estilo padrão e depois explorar as variações. Para isso, vá até a seção “Layout / Padrão”. Nesse caso, ele é aplicado de forma genérica e, para adequar às diferentes telas, elabore variações.
Como criar telas de app para celulares iOS
Já para celulares com sistema operacional iOS, a plataforma que auxilia no desenvolvimento de telas de app e design de aplicativos é o Xcode, uma IDE (Integrated Development Environment) da Apple.
É importante lembrar que, na Apple, por exemplo, existem diversos tamanhos de iPhone, por isso o wireframe deve ser pensado de modo que se adapte a cada device.
Na etapa de conceber um novo projeto no Xcode, duas observações são relevantes: primeiramente, selecione “Swift” como a linguagem utilizada; e em segundo lugar, use “Universal” para os devices.
A seção “View Controller” é o primeiro passo. Esse painel principal permite visualizar e editar todas as telas de aplicativo a partir de elementos pré-definidos. A principal dica aqui é começar editando na menor resolução de tela possível. Dessa forma, fica mais fácil adicionar mais elementos para telas maiores depois.
Recursos disponíveis no Xcode
- Object Library: apresenta linhas guias para alinhamento dos elementos da tela, além dos recursos para adição de botões;
- Background: local em que é possível alterar a cor de fundo da tela;
- Text: insira o nome do app;
- View Controller Scene: visualize todas as telas do storyboard hierarquicamente;
- Text Color: altere a cor do texto da cor do fundo do layout proporcionando maior legibilidade.
Atalhos para uma elaboração de telas mais rápida? Temos! A dica é clicar e arrastar uma “Label” com o botão “Option” selecionado em Mac ou “Alt” em computadores com sistema Windows e Linux. Dessa maneira, criam-se cópias da janela, tornando a estruturação dos elementos mais rápida.
Por dentro do mobile marketing!
O desenvolvimento do aplicativo exige diversas etapas, desde a elaboração do protótipo até a publicação na Apple Store e Play Store. A ideia do RankMyAPP é fornecer dicas e boas práticas para desenvolvedores projetarem de forma mais ágil, eficiente e otimizada.
Por que isso é importante? A usabilidade é um dos diferenciais na experiência do usuário considerado na hora de baixar um aplicativo na store. Isso influencia em visibilidade orgânica dentro da loja, notas e avaliações, taxa de download e por aí vai.
Portanto, é fundamental considerar todo o projeto e o objetivo final do aplicativo na hora de desenvolver o protótipo, layout, linguagem, cores e demais detalhes de UX.
Para ficar por dentro das diversas frentes do universo mobile, assine a newsletter do RankMyAPP. Somos uma empresa referência global no mercado mobile, atuando com clientes de diferentes segmentos e no desenvolvimento de tecnologia própria para análise constante desse mercado.
