APP INVENTOR 2 - Curățați vârfurile frontale (+4 Exemplu): 6 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:43

Vom vedea cum putem face ca aplicația dvs. pe AI2 să arate estetic:)

Fără cod de data aceasta, doar sfaturi pentru o aplicație simplă, cum ar fi exemplul 4 din partea de sus!

Provizii

Pasul 1: Introducere

Acest instructabil este pentru toată lumea care învață sau folosește App Inventor 2, software dezvoltat de MIT.

MIT AI2 este o dezvoltare gratuită, simplă și uimitoare de aplicații pentru smartphone-uri, care este perfectă pentru fiecare Arduino DIY sau dispozitiv electronic. Dar simplitatea lui îl face, de asemenea, destul de limitat, mai ales atunci când încercați ca aplicația dvs. să arate estetică.

Scopul acestui instructabil este de a vă oferi câteva sfaturi pentru a crea un front rece pentru viitoarea dvs. aplicație, care va arăta simplu și elegant, așa cum ar trebui să fie fiecare front.

Vom vedea elementele de bază pentru a crea o aplicație care va arăta așa cum a arătat exemplul 4.

Să începem !

PS: Dacă îți place acest proiect, poți să mă votezi la Concursul de științe în clasă. Iti multumesc foarte mult !!

PS2: Unele greșeli în limba engleză vor fi comise, iartă-mă:)

Pasul 2: BackGround

Am făcut o creație suplimentară pe Figma, un software gratuit vectorial, ca o vopsea avansată, care vă permite să creați cu ușurință forme și culori: Este foarte intuitiv, îl recomand: www.figma.com!

Nu trebuie să utilizați Figma pentru partea din față, dar îmi place să fac designul înainte de a crea aplicația în sine.

După cum puteți vedea pe imagine, fundalul trebuie să fie foarte moale, deoarece vom pune câteva butoane, imagini, etc … pe el …

Vă recomandăm o transparență de 30% pentru culoarea pe care o folosiți și un fundal cu doar 1 culoare.

Pasul 3: Culorile

Culorile pe care le alegeți și intensitatea lor sunt foarte importante într-o aplicație.

Primul sfat pe care îl dau este să alegi maximum 3 culori (+ alb-negru): încă încercăm să fim moi:)

Pentru exemplul 4 pe care l-am făcut, iată sfaturile pe care le-am ales (le puteți vedea și pe imagine, ca o recapitulare):

Fundalul: un fundal moale și ușor, fără formă (30% transparență a culorii). Amintiți-vă această culoare pentru a vă integra butoanele!

Titlul: Textul subțire în culoarea gri închis arată bine! Pentru următorul subtitlu și text, rămâneți în negru, dar schimbați nuanța de negru (gri când nu este o informație mare) și jucați-vă cu dimensiunea și atributul pe care le puteți (bold, italic).

Butonul: o singură culoare, în general culoarea fundalului cu (80-100% transparență), apoi negru sau alb pentru ao termina.

Sliderele: nu utilizați 2 culori pentru ele, doar o culoare pe partea stângă și partea dreaptă într-o nuanță de negru.

Asta e !!

Mai puțin este mai mult !!!! Nu folosiți prea multe culori, formă și dimensiune, fiți subtil!

Pasul 4: Setați parametrul corect al ecranului

Pe ecranul principal al părții App Inventor Designer, puteți selecta caracteristica principală a ecranului.

Pe ecranul 1 -> Proprietăți, urmați acțiunea următoare pentru a șterge cadrul suplimentar din AI2 care nu arată cu adevărat bine ^ _ ^.

1 - Orientarea ecranului

Alegeți o singură orientare, deoarece aplicația nu se adaptează foarte bine atunci când o rotiți.

Am ales orientarea Portret.

2 - Dezactivați „Titlu vizibil” și 3- Dezactivați „ShowStatusBar”

Dezactivez titlul și bara de stare, deoarece adaugă niște bare în aplicație, care nu sunt foarte estetice (în opinia mea).

4 - Dimensiune

Dimensiunea aplicației comune este de 505x320 (înălțime x lățime). Amintiți-vă acele dimensiuni pentru a vă crea fundalul și imaginile (cel puțin au aceeași proporție)! Dacă utilizați Figma, puteți crea instantaneu dimensiunea corectă a aplicației.

5 - Dimensionare

Dacă alegeți Fix, atunci aplicația va avea dimensiunea 505x320. Dacă alegeți Responsive, atunci aplicația se va potrivi smartphone-ului dvs., dar aveți grijă, va trebui să vă adaptați imaginile.

Pasul 5: Cum se face:)

Pentru a reproduce primul exemplu, vom urma 3 pași (cum ar fi imaginile):

1 - Luați dimensiunile

Ce este interesant pe figma este că puteți vedea dimensiunea cadrelor și a obiectului dvs., astfel încât să puteți vedea ce dimensiune vor avea obiectele dvs. și golul! Semifabricatul este foarte important pe App Inventor, pentru că le vom crea punând o etichetă invizibilă!

2 - Umpleți spațiul gol Etichete invizibile

După cum puteți vedea în a doua imagine, reproducem fața dorită prin plasarea etichetei cu dimensiunea corespunzătoare. Apoi faceți-l să pară invizibil (debifați butonul „vizibil”).

De asemenea, utilizați Aspect -> Aranjament pentru a plasa articolele

3 - Încercați să creați butoanele pe software

Când este posibil, creați-vă butoanele pe site-ul AI2, acestea vor fi de înaltă calitate, iar mica animație „la clic” va fi cam tare:). Când nu vă puteți crea propriile butoane, le puteți crea pe un alt software și apoi să le importați ca imagine.

Pasul 6: Rezultatul:)

În stânga: o captură de ecran de pe smartphone-ul meu pe AI2.

În dreapta: schița realizată pe Figma.

Sper cu adevărat că acest Instructable vă va ajuta să construiți o aplicație magnifică pe AI2.

Vă mulțumesc mult că ați urmărit. Dacă aveți nevoie de alte sfaturi, vă rugăm să ne anunțați …

Un alt instructabil pe backend-ul AI2 va fi lansat în curând!

Cu respect a ta, Thomas, de la Technofabrique