APP INVENTOR 2 - Maak voorste wenke skoon (+4 voorbeeld): 6 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:25

Ons gaan kyk hoe ons u app op AI2 esteties kan laat lyk:)

Hierdie keer geen kode nie, slegs wenke vir 'n gladde app, soos die vier voorbeelde hierbo!

Voorrade

Stap 1: Inleiding

Hierdie instruksies is vir almal wat App Inventor 2 leer of gebruik, sagteware wat deur MIT ontwikkel is.

MIT AI2 is 'n gratis, eenvoudige en ongelooflike slimfoon -app -ontwikkeling wat perfek is vir elke DIY Arduino of elektroniese toestel. Maar sy eenvoud maak hom ook redelik beperk, veral as jy probeer om jou program esteties te laat lyk.

Die doel van hierdie Instructable is om u 'n paar wenke te gee om 'n koel voorkant vir u toekomstige app te skep, wat eenvoudig en elegant sal lyk, soos elke front behoort te wees.

Ons gaan die basiese beginsels sien om 'n app te skep wat sal lyk soos die vier voorbeelde.

Laat ons begin !

PS: As u van hierdie projek hou, kan u vir my stem in die Klaskamer Wetenskapwedstryd. Baie dankie !!

PS2: 'n Paar Engelse foute sal gemaak word, vergewe my:)

Stap 2: Die agtergrond

Ek het die verdere skepping gemaak op Figma, 'n vektorvrye sagteware, soos 'n gevorderde verf, waarmee u maklik vorms en kleure kan skep: Dit is baie intuïtief, ek beveel dit aan: www.figma.com!

U hoef nie Figma as voorkant te gebruik nie, maar ek hou daarvan om die ontwerp te maak voordat u die toepassing self skep.

Soos u op die foto kan sien, moet die agtergrond baie sag wees, aangesien ons 'n paar knoppies, beelde, ens … daarop sal sit …

Ek beveel 30% deursigtigheid aan oor die kleur wat u gebruik, en 'n agtergrond met slegs 1 kleur.

Stap 3: Die kleure

Die kleure wat u kies en die intensiteit daarvan is baie belangrik in 'n app.

Die eerste raad wat ek gee, is om die maksimum kleur van drie (+ swart en wit) te kies: ons probeer steeds sag wees:)

Hier is die advies wat ek gekies het vir die vier voorbeelde wat ek gemaak het (u kan dit ook as 'n opsomming op die foto sien):

Die agtergrond: 'n sagte en ligte agtergrond sonder vorm (30% deursigtigheid van die kleur). Onthou hierdie kleur om u knoppies te integreer!

Die titel: Dun teks in die donkergrys kleur lyk goed! Vir die volgende ondertitels en teks, bly in swart, maar verander die swart kleur (grys as dit nie 'n groot inligting is nie), en speel met die grootte en kenmerk wat u kan (vet, kursief).

Die knoppie: 'n enkele kleur, in die algemeen jou agtergrondkleur met (80-100% deursigtigheid), dan swart of wit om dit af te handel.

Die skuifbalkies: moenie 2 kleure daarvoor gebruik nie, slegs een kleur aan die linkerkant en die regterkant in 'n swart kleur.

Dis dit !!

Minder is meer !!!! Moenie te veel kleure, vorm en grootte gebruik nie, wees subtiel!

Stap 4: Stel die regte parameter van die skerm in

Op die hoofskerm van die App Inventor Designer -deel kan u die belangrikste kenmerk van die skerm kies.

Op skerm1 -> Eienskappe, volg die volgende aksie om die ekstrarame uit AI2 te verwyder wat nie regtig goed lyk nie ^_ ^.

1 - Oriëntasie van die skerm

Kies slegs een rigting, want die toepassing pas nie baie goed aan as u dit draai nie.

Ek het die portret -oriëntasie gekies.

2 - Skakel 'Titel sigbaar' uit en 3- Skakel 'ShowStatusBar' uit

Ek deaktiveer die titel en die statusbalk, want dit bevat 'n balk in die app, wat volgens my nie baie esteties is nie.

4 - Afmeting

Die afmeting van die gewone app is 505x320 (hoogte x breedte). Onthou die dimensie om u agtergrond en foto's te skep (ten minste dieselfde verhouding)! As u Figma gebruik, kan u die regte grootte van u app onmiddellik skep.

5 - Grootte

As u 'n vaste opsie kies, is die grootte van die app 505x320. As u Responsief kies, pas die app by u slimfoon, maar pasop, u moet u foto's aanpas.

Stap 5: Hoe om dit te doen:)

Om die eerste voorbeeld weer te gee, volg ons 3 stappe (soos die foto's):

1 - Neem die afmetings

Wat op figma interessant is, is dat u die grootte van u rame en voorwerp kan sien, sodat u kan sien watter grootte u voorwerpe en die leegte sal wees! Die leegte is baie belangrik vir App Inventor, want ons gaan dit skep deur onsigbare etiket te plaas!

2 - Vul die leë, onsigbare etikette in

Soos u op die tweede prent kan sien, reproduseer ons die voorkant wat ons wil hê deur die etiket met die toepaslike grootte te plaas. Laat dit dan onsigbaar lyk (klik op die knoppie 'sigbaar').

Gebruik ook die uitleg -> reëling om u items te plaas

3 - Probeer om u knoppies op die sagteware te skep

Skep u knoppies op die AI2 -webwerf, indien moontlik, van hoë gehalte, en die klein animasie 'op klik' is nogal cool:). As u nie u eie knoppies kan maak nie, kan u dit met 'n ander sagteware skep en dit dan as 'n prent invoer.

Stap 6: Die resultaat:)

Links: 'n kiekie van my slimfoon op AI2.

Regs: die konsep gemaak op Figma.

Ek hoop regtig dat hierdie Instructable u sal help om 'n wonderlike toepassing op AI2 te bou.

Baie dankie dat u gekyk het. Laat weet my as u nog advies nodig het …

Nog 'n Instructable op die agterkant van AI2 word binnekort vrygestel!

Respektiewelik joune, Thomas, van Technofabrique