APP INVENTOR 2 - Limpar pontas da frente (+4 exemplo): 6 etapas

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-23 15:03

Vamos ver como podemos fazer seu aplicativo em AI2 parecer estético:)

Sem código desta vez, apenas dicas para um aplicativo suave como o 4 exemplo acima!

Suprimentos

Etapa 1: Introdução

Este Instructable é para todos que estão aprendendo ou usando o App Inventor 2, software desenvolvido pelo MIT.

MIT AI2 é um desenvolvimento de aplicativo de smartphone gratuito, simples e incrível, que é perfeito para cada Arduino DIY ou dispositivo eletrônico. Mas sua simplicidade também o torna bastante limitado, especialmente quando você está tentando fazer seu aplicativo parecer estético.

O objetivo deste Instructable é dar a você algumas dicas para criar uma frente bacana para seu futuro aplicativo, que terá uma aparência simples e elegante, como toda frente deveria ser.

Vamos ver o básico para criar um aplicativo que se pareça com o exemplo 4 mostrado.

Vamos começar !

PS: Se você adora este projeto, você pode votar em mim no Concurso de Ciências da Sala de Aula. Muito obrigado !!

PS2: Alguns erros de inglês serão cometidos, me perdoe:)

Etapa 2: The BackGround

Fiz a nova criação no Figma, um software livre vetorial, como uma pintura avançada, que permite criar facilmente formas e cores: É muito intuitivo, recomendo: www.figma.com!

Você não precisa usar o Figma para a sua frente, mas eu gosto de fazer o design antes de criar o próprio aplicativo.

Como você pode ver na foto, o fundo precisa ser bem suave, pois vamos colocar alguns botões, imagens, etc … nele …

Recomendo uma transparência de 30% na cor que você usa e um fundo com apenas 1 cor.

Etapa 3: as cores

As cores que você escolhe e sua intensidade são muito importantes em um aplicativo.

O primeiro conselho que dou é escolher no máximo 3 cores (+ preto e branco): ainda estamos tentando ser suaves:)

Para os 4 exemplos que fiz, aqui estão os conselhos que escolhi (você também pode vê-los na foto, para recapitular):

O Fundo: um fundo suave e claro sem forma (30% de transparência da cor). Lembre-se desta cor para integrar seus botões!

O Título: Texto fino na cor cinza escuro parece bom! Para o subtítulo e o texto a seguir, fique em preto, mas mude o tom de preto (cinza quando não é uma grande informação), e brinque com o tamanho e os atributos que você puder (negrito, itálico).

O Botão: Uma única cor, em geral sua cor de fundo com (80-100% de transparência), então preto ou branco para finalizá-la.

Os controles deslizantes: não use 2 cores para eles, apenas uma cor no lado esquerdo e o lado direito em um tom de preto.

É isso !!

Menos é mais !!!! Não use muitas cores, formas e tamanhos, seja sutil!

Etapa 4: definir o parâmetro correto da tela

Na tela principal da parte do App Inventor Designer, você pode selecionar a característica principal da tela.

Em Screen1 -> Propriedades, siga a seguinte ação para excluir o quadro de extras de AI2 que realmente não parece bom ^ _ ^.

1 - Orientação da tela

Escolha apenas uma orientação porque o aplicativo não se adapta muito bem quando você o vira.

Escolhi a orientação Retrato.

2 - Desativar 'Título visível' e 3- Desativar 'ShowStatusBar'

Desabilito o título e a barra de status, pois adiciona algumas barras no app, que não são muito estéticas (na minha opinião).

4 - Dimensão

A dimensão do aplicativo comum é 505x320 (altura x largura). Lembre-se dessas dimensões para criar seu plano de fundo e fotos (pelo menos tenham a mesma proporção)! Se você usa o Figma, pode criar o tamanho certo do seu aplicativo instantaneamente.

5 - Dimensionamento

Se você escolher Fixo, o aplicativo terá o tamanho 505x320. Se você escolher Responsivo, o aplicativo caberá no seu smartphone, mas cuidado, você terá que adaptar suas fotos.

Etapa 5: como fazer:)

Para reproduzir o primeiro exemplo, vamos seguir 3 passos (como as fotos):

1 - Pegue as dimensões

O que é legal no figma é que você pode ver o tamanho das suas molduras e do objeto, então você pode ver qual será o tamanho dos seus objetos, e o espaço em branco! Os espaços em branco são muito importantes no App Inventor porque vamos criá-los colocando uma etiqueta invisível!

2 - Preencha o espaço em branco com rótulos invisíveis

Como você pode ver na segunda foto, reproduzimos a frente que queremos colocando etiqueta com o tamanho adequado. Em seguida, faça com que pareça invisível (desmarque o botão 'visível').

Use também Layout -> Arranjo para colocar seus itens

3 - Tente criar seus botões no software

Quando possível, crie seus botões no site da AI2, eles estarão em alta qualidade e a pequena animação 'no clique' será bem legal:). Quando você não pode fazer seus próprios botões, você pode criá-los em outro software e, em seguida, importá-lo como uma imagem.

Etapa 6: o resultado:)

À esquerda: uma captura de tela do meu smartphone no AI2.

À direita: o calado feito na Figma.

Eu realmente espero que este Instructable ajude você a construir um aplicativo magnífico no AI2.

Muito obrigado por assistir. Se precisar de mais conselhos, por favor me avise …

Outro Instructable no backend do AI2 será lançado em breve!

Respeitosamente, Thomas, da Technofabrique