INVENTOR DE L'APLICACIÓ 2: netejar els consells frontals (+4 exemple): 6 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:13

Veurem com podem fer que la vostra aplicació a AI2 sembli estètica:)

Aquesta vegada no hi ha cap codi, només consells per a una aplicació fluida com l’exemple 4 de la part superior.

Subministraments

Pas 1: Introducció

Aquest instructiu és per a tothom que aprèn o utilitza App Inventor 2, programari desenvolupat pel MIT.

MIT AI2 és un desenvolupament d'aplicacions per a telèfons intel·ligents gratuït, senzill i increïble, que és perfecte per a qualsevol Arduino o dispositiu electrònic de bricolatge. Però la seva simplicitat també el fa bastant limitat, sobretot quan intenteu que la vostra aplicació sembli estètica.

L’objectiu d’aquest instructiu és donar-vos alguns consells per crear un frontal genial per a la vostra futura aplicació, que tindrà un aspecte senzill i elegant, com hauria de ser cada frontal.

Veurem els conceptes bàsics per crear una aplicació que tindrà l'aspecte que es va mostrar al 4 exemple.

Comencem !

PD: Si us agrada aquest projecte, podeu votar-me al Concurs de ciències de l’aula. Moltes gràcies !!

PS2: Es cometran alguns errors en anglès, perdoneu-me:)

Pas 2: el fons

He fet la nova creació a Figma, un programari lliure vectorial, com una pintura avançada, que us permet crear formes i colors fàcilment: és molt intuïtiu, ho recomano: www.figma.com!

No cal que utilitzeu Figma per al vostre frontal, però m'agrada fer el disseny abans de crear l'aplicació mateixa.

Com podeu veure a la imatge, el fons ha de ser molt suau, ja que hi posarem alguns botons, imatges, etc …

Us recomano una transparència del 30% en el color que utilitzeu i un fons amb només 1 color.

Pas 3: Els colors

Els colors que trieu i la seva intensitat són molt importants en una aplicació.

El primer consell que tinc és triar un màxim de 3 colors (+ blanc i negre): seguim intentant ser suaus:)

Per al 4 exemple que he fet, aquí teniu els consells que he triat (també els podeu veure a la imatge, com a resum):

El fons: un fons suau i clar i sense forma (30% de transparència del color). Recordeu aquest color per integrar els vostres botons.

El títol: el text prim en color gris fosc té bon aspecte. Per al següent subtítol i text, mantingueu-vos en negre, però canvieu la tonalitat del negre (gris quan no és una informació gran) i jugueu amb la mida i l'atribut que pugueu (negreta, cursiva).

El botó: un sol color, en general el color de fons amb (80-100% de transparència), després negre o blanc per acabar-lo.

Els control lliscants: no utilitzeu 2 colors per a ells, només un color a la part esquerra i el dret a una tonalitat de negre.

Això és !!

Menys és més !!!! No utilitzeu massa colors, forma i mida, sigueu subtils.

Pas 4: definiu el paràmetre correcte de la pantalla

A la pantalla principal de la part de App Inventor Designer, podeu seleccionar la característica principal de la pantalla.

A la pantalla 1 -> Propietats, seguiu l'acció següent per suprimir el marc d'extres d'AI2 que realment no es veu bé ^ _ ^.

1 - Orientació de la pantalla

Trieu només una orientació perquè l'aplicació no s'adapta molt bé quan la gireu.

Vaig triar l’orientació Retrat.

2 - Desactiva "Títol visible" i 3 - Desactiva "ShowStatusBar"

Desactivo el títol i la barra d'estat, perquè afegeix una barra a l'aplicació que no és molt estètica (al meu parer).

4 - Dimensió

La dimensió de l'aplicació comuna és de 505x320 (alçada x amplada). Recordeu aquestes dimensions per crear el fons i les imatges (almenys tenen la mateixa proporció). Si utilitzeu Figma, podeu crear la mida correcta de la vostra aplicació a l’instant.

5 - Mida

Si trieu Fix, l'aplicació tindrà una mida de 505x320. Si trieu Responsive, l’aplicació s’adaptarà al vostre telèfon intel·ligent, però vés amb compte, haureu d’adaptar les vostres imatges.

Pas 5: Com fer-ho:)

Per reproduir el primer exemple, seguirem 3 passos (com les imatges):

1 - Agafeu les dimensions

El que és interessant a figma és que podeu veure la mida dels vostres marcs i objectes, de manera que podeu veure quina mida tindran els vostres objectes i el blanc. Els espais en blanc són molt importants a App Inventor, perquè els crearem posant una etiqueta invisible.

2 - Empleneu les etiquetes invisibles en blanc

Com podeu veure a la segona imatge, reproduïm la part frontal que volem col·locant una etiqueta amb la mida adequada. A continuació, feu que sembli invisible (desmarqueu el botó "visible").

Utilitzeu també el Disseny -> Disposició per col·locar els vostres articles

3 - Intenteu crear els vostres botons al programari

Quan sigui possible, creeu els vostres botons al lloc web AI2, tindran una alta qualitat i la petita animació "en fer clic" serà una mica interessant:). Quan no pugueu crear els vostres propis botons, podeu crear-los en un altre programari i després importar-los com a imatge.

Pas 6: el resultat:)

A l’esquerra: una captura de pantalla del meu telèfon intel·ligent a AI2.

A la dreta: l'esborrany fet a Figma.

Realment espero que aquest Instructable us ajudi a construir una aplicació magnífica a AI2.

Moltes gràcies per mirar-ho. Si necessiteu més consells, feu-m'ho saber …

Aviat es llançarà un altre instructiu al fons d’AI2.

Respectuosament, Thomas, de Technofabrique