Design como ferramenta para o aprimoramento de aplicativos: Tutorial passo a passo

A criação de uma interface de usuário pode fazer a diferença entre um bom e um ótimo aplicativo. Neste tutorial, focaremos em como você pode usar designcomo ferramentapara tornar seu aplicativo mais atraente. Vamos abordar uma nova tela que se destaca visualmente dos elementos existentes e cativa o usuário com um design envolvente. Vamos começar.

Principais aprendizados

• Cores e contrastes diferentes aumentam a atratividade visual.
• Estruturas de layout claras ajudam os usuários a se orientarem melhor.
• Tamanhos e designs de fonte uniformes promovem uma experiência agradável para o usuário.

Guia passo a passo

Adicionar novo controlador

Para criar a nova tela, começamos adicionando um novo controlador. Vá para seu construtor de interface, clique em “Adicionar controlador” e posicione-o de modo que se ajuste abaixo das telas existentes.

Ajuste do controlador

Nomeie seu novo controlador como “Controlador de Curso” para facilitar a atribuição futura. Certifique-se de que o nome obsoleto “iPhone 8 copy” seja substituído por “Controlador de Perfil”.

Ajustar cor de fundo

Paraa atratividade visual do aplicativo, é importante escolher uma cor de fundo dominante. Opte por um verde vibrante que já está sendo usado em outros lugares do seu aplicativo. Essa estratégia aumenta o contraste com os elementos brancos e traz mais dinamismo.

Configurar a barra de status

Defina a barra de status como “Escura”, para que o texto em fundo verde fique legível. Verifique a posição e assegure-se de que está perfeitamente ajustada.

Criar rótulo

Criar um novo rótulo para exibir o curso. Comece com um cabeçalho que se estenda por toda a largura do controlador. Escolha a fonte H4 e pinte o texto em branco.

Adicionar rótulos adicionais

Adicione outro rótulo para o título do curso. Use um tamanho de fonte de 40 pixels e certifique-se de que está posicionado corretamente – não deve haver espaço entre ele e o rótulo anterior.

Exibir mais informações

Para fornecer mais informações aos usuários, adicione um terceiro rótulo. Use uma fonte menor de 17 pixels, para que o texto não se destaque demais até que seja necessário.

Criar a tabela

Por fim, adicione uma tabela para apresentar as lições de forma clara. Comece com um retângulo simples que ocupe toda a largura e torne o fundo um pouco mais escuro, para poder trabalhar com texto em branco.

Lições como células

Criar uma célula para a primeira lição com o título “Noções Básicas Parte 1”. Preste atenção no espaço e no alinhamento apropriados.

Inserir separador

Para criar uma clara distinção entre as lições, adicione um separador (uma linha fina). Essa linha deve ser posicionada entre as células para criar uma separação visual.

Criar botão de cancelar

Para permitir que os usuários saiam dessa visualização, adicione um botão de cancelar na forma de um “X”. Certifique-se de que ele esteja visível no centro da tela.

Perspectiva dos próximos passos

Após a criação bem-sucedida do novo controlador de curso, o próximo passoserá a integração de um login. Isso permitirá que os usuários salvem seu progresso dentro do aplicativo.

Resumo – Design como ferramenta para refinamento de aplicativo

Neste tutorial, você aprendeu como criar uma experiência de usuário melhorada através do design eficaz do seu aplicativo. Desde a adição de um novo controlador, passando pela escolha de cores apropriadas até a inclusão de células e botões – você percorreu todos os passos necessários para tornar seu aplicativo visualmente atraente.