APP INVENTOR 2 - Očistite prednje savjete (+4 primjer): 6 koraka

2025 Autor: John Day | [email protected]. Zadnja izmjena: 2025-01-23 14:37

Vidjet ćemo kako možemo učiniti da vaša aplikacija na AI2 izgleda estetski:)

Ovaj put bez koda, samo savjeti za glatku aplikaciju poput 4 primjera na vrhu!

Supplies

Korak 1: Uvod

Ovaj Instructable namijenjen je svima koji uče ili koriste App Inventor 2, softver koji je razvio MIT.

MIT AI2 je besplatna, jednostavna i nevjerojatna aplikacija za pametne telefone koja je savršena za svaki DIY Arduino ili elektronički uređaj. Ali njegova jednostavnost ga također čini prilično ograničenim, posebno kada pokušavate učiniti da vaša aplikacija izgleda estetski.

Zadatak ovog Instructable -a je dati vam nekoliko savjeta kako stvoriti cool front za vašu buduću aplikaciju, koja će izgledati jednostavno i elegantno, kao što bi svaki front trebao biti.

Vidjet ćemo osnove stvaranja aplikacije koja će izgledati kao što je prikazano u 4 primjera.

Hajde da počnemo !

PS: Ako vam se sviđa ovaj projekat, možete glasati za mene na takmičenju u učionici. Hvala vam puno !!

PS2: Napravit će se neke greške na engleskom, oprostite mi:)

Korak 2: Pozadina

Napravio sam daljnje stvaranje na Figmi, vektorskom besplatnom softveru, poput napredne boje, koji vam omogućuje jednostavno stvaranje oblika i boja: Vrlo je intuitivno, preporučujem ga: www.figma.com!

Ne morate koristiti Figmu za prednju stranu, ali ja volim napraviti dizajn prije nego što stvorim samu aplikaciju.

Kao što vidite na slici, pozadina mora biti vrlo mekana, jer ćemo na nju staviti neke tipke, slike itd …

Preporučujem 30% transparentnosti boje koju koristite i pozadinu sa samo 1 bojom.

Korak 3: Boje

Boje koje odaberete i njihov intenzitet vrlo su važne u aplikaciji.

Prvi savjet koji dajem je da odaberete najviše 3 boje (+ crno -bijela): i dalje pokušavamo biti meki:)

Za četiri primjera koja sam napravio, evo savjeta koje sam odabrao (možete ih vidjeti i na slici, kao rezime):

Pozadina: meka i svijetla pozadina bez oblika (30% prozirnosti boje). Zapamtite ovu boju kako biste integrirali gumbe!

Naslov: Tanki tekst u tamno sivoj boji izgleda dobro! Za sljedeće podnaslove i tekst ostanite crni, ali promijenite nijansu crne (siva ako to nije velika informacija) i igrajte se s veličinom i atributima koje možete (podebljano, kurziv).

Dugme: Jedna boja, generalno vaša boja pozadine sa (80-100% transparentnosti), zatim crna ili bela da biste je završili.

Klizači: nemojte koristiti 2 boje za njih, samo jednu boju s lijeve strane, a desnu u nijansi crne.

To je to !!

Manje je više !!!! Ne koristite previše boja, oblika i veličina, budite suptilni!

Korak 4: Postavite desni parametar ekrana

Na glavnom ekranu dijela App Inventor Designer možete odabrati glavne karakteristike ekrana.

Na ekranu1 -> Svojstva, slijedite ove radnje da biste izbrisali okvir za dodatke iz AI2 koji zaista ne izgleda dobro ^_ ^.

1 - Orijentacija ekrana

Odaberite samo jednu orijentaciju jer se aplikacija ne prilagođava baš najbolje kada je okrenete.

Izabrao sam portretnu orijentaciju.

2 - Onemogućite 'Naslov vidljiv' i 3 - Onemogućite 'ShowStatusBar'

Onemogućujem naslov i statusnu traku jer dodaju neku traku u aplikaciji koja nije baš estetska (po mom mišljenju).

4 - Dimenzija

Dimenzija uobičajene aplikacije je 505x320 (visina x širina). Zapamtite te dimenzije da biste stvorili svoju pozadinu i slike (barem imajte istu proporciju)! Ako koristite Figmu, možete odmah stvoriti odgovarajuću veličinu svoje aplikacije.

5 - Dimenzionisanje

Ako odaberete Fiksno, tada će aplikacija biti veličine 505x320. Ako odaberete Responsive, aplikacija će odgovarati vašem pametnom telefonu, ali oprez, morat ćete prilagoditi svoje slike.

Korak 5: Kako to učiniti:)

Da bismo reproducirali prvi primjer, slijedit ćemo 3 koraka (poput slika):

1 - Uzmite dimenzije

Ono što je super na figmi je to što možete vidjeti veličinu vaših okvira i objekata, tako da možete vidjeti koje će veličine biti vaši objekti i prazno! Praznine su vrlo važne za App Inventor jer ćemo ih stvoriti postavljanjem nevidljive oznake!

2 - Popunite prazne nevidljive oznake

Kao što možete vidjeti na drugoj slici, reproduciramo prednji dio koji želimo postavljanjem naljepnice odgovarajuće veličine. Zatim učinite da izgleda nevidljivo (kliknite gumb 'vidljivo').

Za postavljanje stavki koristite i Layout -> Arrange

3 - Pokušajte stvoriti svoje tipke na softveru

Kad god je moguće, stvorite svoje gumbe na web stranici AI2, oni će biti visoke kvalitete, a mala animacija "na klik" bit će nekako cool:). Kad ne možete sami izraditi gumbe, možete ih stvoriti na drugom softveru, a zatim ih uvesti kao sliku.

Korak 6: Rezultat:)

S lijeve strane: snimak ekrana mog pametnog telefona na AI2.

Desno: nacrt napravljen na Figmi.

Zaista se nadam da će vam ovaj Instructable pomoći da izgradite veličanstvenu aplikaciju na AI2.

Hvala vam puno što ste gledali. Ako trebate dodatne savjete, javite mi…

Još jedan Instructable na pozadini AI2 bit će objavljen uskoro!

S poštovanjem, Thomas, iz Technofabrique