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

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:34

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!

Pribor

Korak 1: Uvod

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

MIT AI2 besplatan je, jednostavan i nevjerojatan razvoj aplikacije za pametne telefone, koji je savršen za svaki DIY Arduino ili elektronički uređaj. Ali njegova jednostavnost također ga čini prilično ograničenim, pogotovo kada pokušavate učiniti da vaša aplikacija izgleda estetski.

Zadatak ovog Instructablea je dati vam nekoliko savjeta za stvaranje cool fronta 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.

Započnimo !

PS: Ako volite ovaj projekt, možete glasovati za mene na Natjecanju za učionicu. Puno ti hvala !!

PS2: Napravit će se neke engleske greške, 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 možete vidjeti na slici, pozadina mora biti vrlo mekana, jer ćemo na nju staviti neke gumbe, 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 nježni:)

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 svoje 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).

Gumb: Jedna boja, općenito vaša boja pozadine (80-100% prozirnosti), zatim crna ili bijela da biste je dovrš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 !!!! Nemojte koristiti previše boja, oblika i veličina, budite suptilni!

Korak 4: Postavite desni parametar zaslona

Na glavnom zaslonu dijela App Inventor Designer možete odabrati glavne karakteristike zaslona.

Na Screen1 -> Properties, slijedite ove radnje da biste izbrisali okvir dodataka iz AI2 koji zapravo ne izgleda dobro ^_ ^.

1 - Orijentacija zaslona

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

Odabrao sam orijentaciju Portret.

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 isti udio)! Ako koristite Figmu, možete odmah stvoriti odgovarajuću veličinu svoje aplikacije.

5 - Dimenzioniranje

Ako odaberete Fiksno, aplikacija će 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:)

Za reprodukciju prvog primjera slijedit ćemo 3 koraka (poput slika):

1 - Uzmite dimenzije

Ono što je super na figmi je to što možete vidjeti veličinu svojih okvira i objekata, pa 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 naljepnice!

2 - Ispunite prazne olovke nevidljivim oznakama

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').

Također postavite Layout -> Arrange za postavljanje stavki

3 - Pokušajte stvoriti svoje gumbe na softveru

Kad god je moguće, izradite 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 zaslona s mog pametnog telefona na AI2.

S desne strane: nacrt napravljen na Figmi.

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

Hvala vam puno na gledanju. Ako trebate dodatne savjete, javite mi…

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

S poštovanjem, Thomas, iz tvrtke Technofabrique