APP INVENTOR 2 - Čisti sprednji nasveti (+4 primer): 6 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:04

Bomo videli, kako lahko naredimo vašo aplikacijo na AI2 estetsko privlačno:)

Tokrat brez kode, le nasveti za nemoteno aplikacijo, kot je primer 4 na vrhu!

Zaloge

1. korak: Uvod

Ta Instructable je namenjen vsem, ki se učijo ali uporabljajo App Inventor 2, programsko opremo, ki jo je razvil MIT.

MIT AI2 je brezplačen, preprost in neverjeten razvoj aplikacije za pametne telefone, ki je kot nalašč za vsako DIY Arduino ali elektronsko napravo. Toda njegova preprostost ga tudi precej omejuje, še posebej, ko poskušate narediti svojo aplikacijo estetsko.

Namen tega navodila je dati nekaj nasvetov za ustvarjanje kul sprednje strani za vašo prihodnjo aplikacijo, ki bo videti preprosta in elegantna, kot bi morala biti vsaka sprednja stran.

Ogledali si bomo osnove za ustvarjanje aplikacije, ki bo videti tako, kot je prikazano v primeru 4.

Začnimo !

PS: Če vam je ta projekt všeč, lahko glasujete zame na tekmovanju za učilnico. Najlepša hvala !!

PS2: Naredile se bodo nekatere angleške napake, oprostite mi:)

2. korak: Ozadje

Nadaljnje ustvarjanje sem izvedel na Figmi, vektorski brezplačni programski opremi, kot je napredna barva, ki vam omogoča enostavno ustvarjanje oblik in barv: zelo intuitivno je, priporočam jo: www.figma.com!

Za prednjo stran vam ni treba uporabljati Figme, vendar mi je všeč, da oblikujem, preden ustvarim samo aplikacijo.

Kot lahko vidite na sliki, mora biti ozadje zelo mehko, saj bomo nanj postavili nekaj gumbov, slik itd …

Priporočam 30% preglednost barve, ki jo uporabljate, in ozadje samo z 1 barvo.

Korak: Barve

Barve, ki jih izberete, in njihova intenzivnost so v aplikaciji zelo pomembne.

Prvi nasvet, ki ga dam, je, da izberemo največ 3 barve (+ črno -belo): še vedno se trudimo biti mehki:)

Za štiri primere, ki sem jih naredil, so tukaj izbrani nasveti (lahko jih vidite tudi na sliki, kot povzetek):

Ozadje: mehko in svetlo ozadje brez oblike (30% transparentnost barve). Zapomnite si to barvo, če želite integrirati gumbe!

Naslov: Tanko besedilo v temno sivi barvi izgleda dobro! Za naslednje podnapise in besedilo ostanite v črni barvi, vendar spremenite odtenek črne (siva, če to ni velika informacija) in se igrajte z velikostjo in atributi, ki jih lahko (krepko, ležeče).

Gumb: Enobarvna, na splošno vaša barva ozadja (80-100% preglednost), nato črna ali bela, da jo zaključite.

Drsniki: zanje ne uporabljajte 2 barv, le eno barvo na levi strani in desno stran v črnem odtenku.

To je to !!

Manj je več !!!! Ne uporabljajte preveč barv, oblike in velikosti, bodite subtilni!

4. korak: Nastavite desni parameter zaslona

Na glavnem zaslonu dela App Inventor Designer lahko izberete glavne značilnosti zaslona.

Na zaslonu Screen1 -> Properties sledite spodnjemu dejanju, da izbrišete okvir dodatkov iz AI2, ki v resnici ne izgleda dobro ^_ ^.

1 - Usmerjenost zaslona

Izberite samo eno usmeritev, ker se aplikacija, ko jo obrnete, ne prilagaja najbolje.

Izbral sem portretno usmerjenost.

2 - Onemogočite »Naslov viden« in 3- Onemogočite »ShowStatusBar«

Onemogočim naslov in vrstico stanja, ker dodaja vrstico v aplikacijo, ki po mojem mnenju ni zelo estetska.

4 - Mera

Dimenzija skupne aplikacije je 505x320 (višina x širina). Ne pozabite na te dimenzije, da ustvarite svoje ozadje in slike (vsaj enak delež)! Če uporabljate Figma, lahko takoj ustvarite pravo velikost aplikacije.

5 - Velikost

Če izberete Fiksno, bo aplikacija velikosti 505x320. Če izberete Odziven, bo aplikacija ustrezala vašemu pametnemu telefonu, vendar pozor, slike boste morali prilagoditi.

5. korak: Kako to storiti:)

Za reprodukcijo prvega primera bomo sledili 3 korakom (kot so slike):

1 - Vzemite dimenzije

Kar je kul pri figmi, je, da lahko vidite velikost svojih okvirjev in predmetov, tako da vidite, kakšne velikosti bodo vaši predmeti in prazno! Praznine so za App Inventor zelo pomembne, ker jih bomo ustvarili z nevidno oznako!

2 - Izpolnite prazne nevidne oznake

Kot lahko vidite na drugi sliki, reproduciramo sprednjo stran, ki jo želimo, tako da nalepimo ustrezno velikost. Nato naj bo videti nevidno (odstranite gumb 'Vidno').

Za postavitev predmetov uporabite tudi postavitev -> razporeditev

3 - Poskusite ustvariti gumbe v programski opremi

Če je mogoče, ustvarite svoje gumbe na spletnem mestu AI2, ti bodo kakovostni in majhna animacija 'na klik' bo nekako kul:). Če ne morete ustvariti lastnih gumbov, jih lahko ustvarite v drugi programski opremi in jih nato uvozite kot sliko.

6. korak: rezultat:)

Na levi: posnetek zaslona mojega pametnega telefona na AI2.

Na desni: osnutek na Figmi.

Resnično upam, da vam bo ta Instructable pomagal zgraditi veličastno aplikacijo na AI2.

Najlepša hvala za ogled. Če potrebujete dodatne nasvete, mi sporočite …

Še en Instructable v ozadju AI2 bo kmalu izdan!

S spoštovanjem, Thomas, iz podjetja Technofabrique