O início de um App-Designdeve ser sempre bem pensado e atraente. Neste tutorial, você aprenderá como revisar o HomeController do seu App para adicionar mais interatividade e atratividade visual. Vamos começar!
Principais descobertas
- O Home Controller pode ser mais atraente através do uso criativo de cores e layouts.
- Arquivos SVG oferecem vantagens em editabilidade e nitidez.
- O uso de gradientes e diferentes seções pode melhorar significativamente a experiência do usuário.
Guia passo a passo
Primeiro, daremos uma olhada no Home Controller existente. Aqui, você notará que temos diferentes seções: uma visão geral dos cursos, um chat interativo e o perfil. O foco está no Home Feed. Neste tutorial, ajustaremos a navegação e otimizaremos o design.
Passo 1: Revisar a navegação
Para melhorar o design do seu Home Controller, começaremos revisando a barra de navegação. Removeremos os elementos existentes, como a navegação, inicialmente.
Agora, adicionamos um retângulo como novo cabeçalho, que deve ter uma altura de 250 pixels. O retângulo não deve ter borda para garantir um visual limpo.
Passo 2: Adicionar cabeçalho e texto
No próximo passo, você escolherá a Cor do Documento e adicionará um novo texto. Defina o texto como "Todos os Cursos" e experimente com os estilos de texto. Um tamanho recomendável para o cabeçalho seria 110 pixels. É importante que o cabeçalho seja ajustado à barra de status.
Passo 3: Ajustar fundos e cores
Um design atraente também envolve o uso de gradientes. Volte ao seu retângulo e escolha um gradiente que seja dinâmico e harmônico no layout geral. Um gradiente diagonal proporciona mais profundidade.
Passo 4: Adicionar nova seção
Agora vamos criar uma nova seção abaixo do cabeçalho. Adicione outro retângulo com uma altura de 350 pixels e remova a borda. Aqui você pode escolher uma cor de contraste para dar mais vida ao App.
Passo 5: Conteúdo e ícones
Nesta seção, poderíamos adicionar um botão para oferecer mais conteúdo ao usuário, como um vídeo. Adicione o texto "Power of Mobility" no formato H3 e posicione-o a 16 pixels do topo.
Agora adicionamos um ícone, que pode ser criado por você ou importado de recursos. Recomenda-se o uso de arquivos SVG, já que são facilmente editáveis.
Passo 6: Criar seção da Pro versão
Crie uma nova seção que ofereça aos usuários a oportunidade de adquirir a versão Pro do App. Adicione um novo retângulo com uma altura de 250 pixels e coloque sua chamada para ação "Get Pro Version" lá.
Aqui, é importante que o texto seja projetado de forma chamativa. Você pode usar uma variante de cor mais escura para garantir que o texto seja bem legível.
Passo 7: Clareza através de grupos
Crie grupos das diferentes seções para aumentar a clareza. Isso ajudará você a organizar melhor as diferentes áreas.
Passo 8: Últimos ajustes e verificação
Por fim, você pode revisar todos os elementos nas seções e, se necessário, ajustar os espaços e posições para garantir um layout limpo.
Resumo – Redesign do Home: Seu caminho eficaz para uma interface de usuário atraente
Você aprendeu agora como pode redesenhar seu Home Controller para torná-lo mais interativo e visualmente atraente. Através do uso criativo de gradientes, da implementação de ícones SVG e da estruturação em seções, você melhorou significativamente o layout do seu App.
FAQ
Como posso garantir que meu cabeçalho pareça bom?Certifique-se de usar tamanhos de texto e combinações de cores que sejam coerentes em todo o design.
Quais são as vantagens de usar arquivos SVG?Os arquivos SVG são escaláveis e mantêm sua nitidez, independentemente do nível de zoom.
Como posso adicionar gradientes no Sketch?Selecione o elemento desejado, vá para as opções de preenchimento e escolha "Gradiente" para criar gradientes atraentes.
