APP INVENTOR 2 - Limpiar puntas frontales (+4 ejemplo): 6 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

Veremos cómo podemos hacer que su aplicación en AI2 tenga un aspecto estético:)

¡Sin código esta vez, solo consejos para una aplicación fluida como el ejemplo 4 en la parte superior!

Suministros

Paso 1: Introducción

Este Instructable es para todos los que están aprendiendo o usando App Inventor 2, software desarrollado por MIT.

MIT AI2 es un desarrollo de aplicaciones para teléfonos inteligentes gratuito, simple y sorprendente, que es perfecto para todos los dispositivos electrónicos o Arduino de bricolaje. Pero su simplicidad también lo hace bastante limitado, especialmente cuando intentas hacer que tu aplicación luzca estética.

El propósito de este Instructable es darte algunos consejos para crear un frente genial para tu futura aplicación, que se verá simple y elegante, como debería ser cada frente.

Vamos a ver los conceptos básicos para crear una aplicación que se verá como el 4 Ejemplo mostrado.

Empecemos !

PD: Si te encanta este proyecto, puedes votar por mí en el Concurso de Ciencias en el Aula. Muchas gracias !!

PS2: Se cometerán algunos errores en inglés, perdóname:)

Paso 2: el trasfondo

He hecho la creación posterior en Figma, un software vectorial libre, como una pintura avanzada, que te permite crear formas y colores fácilmente: Es muy intuitivo, lo recomiendo: ¡www.figma.com!

No necesitas usar Figma para tu frente, pero me gusta hacer el diseño antes de crear la aplicación.

Como ves en la imagen, el fondo tiene que ser muy suave, ya que vamos a poner algunos botones, imágenes, etc… en él…

Recomiendo una transparencia del 30% en el color que usa y un fondo con solo 1 color.

Paso 3: los colores

Los colores que elijas y su intensidad son muy importantes en una App.

El primer consejo que te doy es que elijas 3 colores como máximo (+ blanco y negro): seguimos intentando ser suaves:)

Para el ejemplo de 4 que hice, aquí están los consejos que he elegido (también puede verlos en la imagen, como resumen):

El Fondo: un fondo suave y claro sin forma (30% de transparencia del color). ¡Recuerda este color para integrar tus botones!

El título: ¡El texto delgado en color gris oscuro se ve bien! Para el siguiente subtítulo y texto, manténgase en negro, pero cambie el tono de negro (gris cuando no es una información grande) y juegue con el tamaño y el atributo que pueda (negrita, cursiva).

El Botón: Un solo color, en general su color de fondo con (80-100% de transparencia), luego negro o blanco para terminarlo.

Los controles deslizantes: no use 2 colores para ellos, solo un color en el lado izquierdo y el lado derecho en un tono de negro.

Eso es todo !!

Menos es más !!!! No uses demasiados colores, formas y tamaños, ¡sé sutil!

Paso 4: establece el parámetro correcto de la pantalla

En la pantalla principal de la parte de App Inventor Designer, puede seleccionar la característica principal de la pantalla.

En Screen1 -> Properties, siga la siguiente acción para eliminar el marco adicional de AI2 que realmente no se ve bien ^ _ ^.

1 - Orientación de la pantalla

Elige solo una orientación porque la aplicación no se adapta muy bien cuando la giras.

Elegí la orientación vertical.

2 - Deshabilitar 'Título visible' y 3- Deshabilitar 'ShowStatusBar'

Desactive el título y la barra de estado, porque agrega alguna barra en la aplicación, que no es muy estética (en mi opinión).

4 - Dimensión

La dimensión de la aplicación común es 505x320 (alto x ancho). ¡Recuerda esas dimensiones para crear tu fondo e imágenes (al menos tienen la misma proporción)! Si usa Figma, puede crear el tamaño correcto de su aplicación al instante.

5 - Dimensionamiento

Si elige Fijo, la aplicación tendrá un tamaño de 505x320. Si elige Responsive, la aplicación se ajustará a su teléfono inteligente, pero tenga cuidado, tendrá que adaptar sus imágenes.

Paso 5: Cómo hacerlo:)

Para reproducir el primer ejemplo, vamos a seguir 3 pasos (como las imágenes):

1 - Toma las dimensiones

Lo bueno de figma es que puedes ver el tamaño de tus marcos y objetos, para que puedas ver el tamaño de tus objetos y el espacio en blanco. Los espacios en blanco son muy importantes en App Inventor porque los vamos a crear poniendo una etiqueta invisible.

2 - Llene el espacio en blanco con etiquetas invisibles

Como puede ver en la segunda imagen, reproducimos el anverso que queramos colocando una etiqueta con el tamaño adecuado. Luego haz que parezca invisible (quita el clic del botón 'visible').

También use el Diseño -> Disposición para colocar sus artículos

3 - Intenta crear tus botones en el software

Cuando sea posible, cree sus botones en el sitio web de AI2, serán de alta calidad y la pequeña animación 'al hacer clic' será algo genial:). Cuando no pueda crear sus propios botones, puede crearlos en otro software y luego importarlos como una imagen.

Paso 6: el resultado:)

A la izquierda: una captura de pantalla de mi teléfono inteligente en AI2.

A la derecha: el borrador realizado en Figma.

Realmente espero que este Instructable lo ayude a construir una aplicación magnífica en AI2.

Muchas gracias por vernos. Si necesita más consejos, hágamelo saber …

¡Pronto se lanzará otro Instructable en el backend de AI2!

Respetuosamente tuyo, Thomas, de Technofabrique