APP INVENTOR 2 - Suggerimenti per la pulizia della parte anteriore (+4 esempio): 6 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Vedremo come possiamo rendere estetica la tua App su AI2:)

Nessun codice questa volta, solo suggerimenti per un'app fluida come l'esempio 4 in alto!

Forniture

Passaggio 1: Introduzione

Questo Instructable è per tutti coloro che imparano o utilizzano App Inventor 2, software sviluppato dal MIT.

MIT AI2 è uno sviluppo di app per smartphone gratuito, semplice e sorprendente, perfetto per ogni Arduino fai da te o dispositivo elettronico. Ma la sua semplicità lo rende anche piuttosto limitato, specialmente quando stai cercando di rendere la tua app estetica.

Lo scopo di questo Instructable è di darti alcuni suggerimenti per creare una facciata interessante per la tua futura app, che sembrerà semplice ed elegante, come dovrebbe essere ogni facciata.

Vedremo le basi per creare un'app che avrà l'aspetto mostrato nell'esempio 4.

Iniziamo !

PS: Se ami questo progetto, puoi votarmi al Classroom Science Contest. Grazie mille !!

PS2: verranno commessi alcuni errori in inglese, perdonatemi:)

Passaggio 2: lo sfondo

Ho realizzato l'ulteriore creazione su Figma, un software vettoriale gratuito, come un avanzato paint, che permette di creare facilmente forme e colori: E' molto intuitivo, lo consiglio: www.figma.com!

Non è necessario utilizzare Figma per la tua facciata, ma mi piace creare il design prima di creare l'applicazione stessa.

Come puoi vedere nell'immagine, lo sfondo deve essere molto morbido, poiché ci metteremo alcuni pulsanti, immagini, ecc … su di esso…

Consiglio una trasparenza del 30% sul colore che usi e uno sfondo con un solo colore.

Passaggio 3: i colori

I colori che scegli e la loro intensità sono molto importanti in un'app.

Il primo consiglio che do è di scegliere 3 colori al massimo (+ bianco e nero): stiamo ancora cercando di essere morbidi:)

Per i 4 esempi che ho realizzato, ecco i consigli che ho scelto (li potete vedere anche nella foto, come riassunto):

Il Fondo: uno sfondo morbido e chiaro senza forma (30% di trasparenza del colore). Ricorda questo colore per integrare i tuoi bottoni!

Il titolo: il testo sottile nel colore grigio scuro sembra buono! Per i seguenti sottotitoli e testo, rimani in nero, ma cambia la tonalità del nero (grigio quando non è una grande informazione) e gioca con le dimensioni e gli attributi che puoi (grassetto, corsivo).

Il pulsante: Un singolo colore, in generale il colore di sfondo con (trasparenza 80-100%), quindi nero o bianco per finirlo.

I cursori: non usare 2 colori per loro, solo un colore sul lato sinistro e il lato destro in una sfumatura di nero.

Questo è tutto !!

Meno è di più !!!! Non usare troppi colori, forme e dimensioni, sii sottile!

Passaggio 4: impostare il parametro corretto dello schermo

Nella schermata principale della parte App Inventor Designer, è possibile selezionare la caratteristica principale della schermata.

Su Screen1 -> Properties, segui la seguente azione per eliminare il frame extra da AI2 che non ha un bell'aspetto ^_^.

1 - Orientamento dello schermo

Scegli un solo orientamento perché l'applicazione non si adatta molto bene quando la giri.

Ho scelto l'orientamento verticale.

2 - Disabilita 'Titolo visibile' e 3- Disabilita 'ShowStatusBar'

Disattivo il titolo e la barra di stato, perché aggiunge qualche barra sull'app, che non è molto estetica (secondo me).

4 - Dimensione

La dimensione dell'app comune è 505x320 (altezza x larghezza). Ricorda quelle dimensioni per creare il tuo sfondo e le immagini (almeno hanno la stessa proporzione)! Se usi Figma, puoi creare la giusta dimensione della tua app all'istante.

5 - Dimensionamento

Se scegli Fisso, l'app avrà dimensioni 505x320. Se scegli Responsive, l'app si adatterà al tuo smartphone, ma attenzione, dovrai adattare le tue immagini.

Passaggio 5: come farlo:)

Per riprodurre il primo esempio, seguiremo 3 passaggi (come le immagini):

1 - Prendi le dimensioni

La cosa interessante di figma è che puoi vedere le dimensioni delle tue cornici e degli oggetti, così puoi vedere quale sarà la dimensione dei tuoi oggetti e lo spazio vuoto! Gli spazi vuoti sono molto importanti su App Inventor perché li creeremo mettendo un'etichetta invisibile!

2 - Riempi lo spazio vuoto con etichette invisibili

Come potete vedere nella seconda foto, riproduciamo la parte anteriore che vogliamo apponendo un'etichetta con la dimensione appropriata. Quindi fallo sembrare invisibile (deseleziona il pulsante "visibile").

Usa anche il Layout -> Disposizione per posizionare i tuoi oggetti

3 - Prova a creare i tuoi pulsanti sul software

Quando possibile, crea i tuoi pulsanti sul sito Web di AI2, saranno in alta qualità e la piccola animazione "al clic" sarà piuttosto interessante:). Quando non puoi creare i tuoi pulsanti, puoi crearli su un altro software e quindi importarli come immagine.

Passaggio 6: il risultato:)

A sinistra: uno screenshot dal mio smartphone su AI2.

A destra: il progetto realizzato su Figma.

Spero davvero che questo Instructable ti aiuti a creare una magnifica applicazione su AI2.

Grazie mille per aver guardato. Se hai bisogno di altri consigli fammi sapere…

Un altro Instructable sul backend di AI2 verrà rilasciato presto!

Distinti saluti, Thomas, di Technofabrique