APP INVENTOR 2 - puhastage näpunäiteid (+4 näide): 6 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:47

Vaatame, kuidas saaksime muuta teie rakenduse AI2 -l esteetilise välimuse:)

Seekord koodi pole, ainult näpunäiteid sujuva rakenduse jaoks, nagu ülaltoodud näide 4!

Tarvikud

Samm 1: Sissejuhatus

See juhend on mõeldud kõigile, kes õpivad või kasutavad MITi arendatud tarkvara App Inventor 2.

MIT AI2 on tasuta lihtne ja hämmastav nutitelefonirakenduste arendus, mis sobib ideaalselt igale isetegijale Arduinole või elektroonilisele seadmele. Kuid tema lihtsus muudab ta ka üsna piiratuks, eriti kui proovite oma rakendust esteetilise väljanägemisega muuta.

Selle juhendi eesmärk on anda teile näpunäiteid, kuidas luua tulevasele rakendusele lahe esiosa, mis näeb välja lihtne ja elegantne, nagu iga esikülg peaks olema.

Vaatame rakenduse loomise põhitõdesid, mis näevad välja nagu näidatud 4 näites.

Alustame !

PS: Kui teile see projekt meeldib, saate Classroom Science'i konkursil minu poolt hääletada. Suured tänud sulle !!

PS2: Mõningaid ingliskeelseid vigu tehakse, andke andeks:)

Samm 2: BackGround

Edasise loomise tegin joonisel tasuta tarkvaraga Figma, nagu täiustatud värv, mis võimaldab teil hõlpsalt kujundeid ja värve luua: see on väga intuitiivne, soovitan seda: www.figma.com!

Te ei pea Figmat oma esiosa jaoks kasutama, kuid mulle meeldib enne rakenduse loomist kujundus teha.

Nagu pildilt näha, peab taust olema väga pehme, sest paneme sellele mõned nupud, pildid jne …

Soovitan teie kasutatava värvi 30% läbipaistvust ja ainult ühevärvilist tausta.

3. samm: värvid

Teie valitud värvid ja nende intensiivsus on rakenduses väga olulised.

Esimene nõuanne, mille ma annan, on valida maksimaalselt 3 värvi (+ must ja valge): me üritame ikka pehmed olla:)

Nelja näite puhul, mille ma tegin, on siin minu valitud nõuanded (näete neid ka kokkuvõtteks pildil):

Taust: pehme ja hele taust ilma kujundita (30% värvi läbipaistvus). Pidage seda värvi oma nuppude integreerimiseks meeles!

Pealkiri: Tumehalli värvi õhuke tekst näeb hea välja! Järgmise alapealkirja ja teksti puhul jääge mustaks, kuid muutke musta tooni (hall, kui see pole suur teave) ning mängige sobiva suuruse ja atribuudiga (paks, kaldkiri).

Nupp: üks värv, üldiselt teie taustavärv (80–100% läbipaistvus), seejärel must või valge selle lõpetamiseks.

Liugurid: ärge kasutage nende jaoks kahte värvi, ainult ühte värvi vasakul küljel ja paremal pool musta tooni.

See on see !!

Vähem on rohkem !!!! Ärge kasutage liiga palju värve, kuju ja suurust, olge peen!

Samm: määrake ekraani parem parameeter

App Inventor Designeri osa põhiekraanil saate valida ekraani põhiomadused.

Ekraanil 1 -> Atribuudid toimige järgmiselt, et kustutada lisaraam AI2 -st, mis ei tundu päris hea ^_ ^.

1 - ekraani orientatsioon

Valige ainult üks suund, kuna rakendus ei kohandu selle pööramisel eriti hästi.

Valisin portree orientatsiooni.

2 - Keela „Pealkiri nähtav” ja 3 - „ShowStatusBar”

Keelan tiitli ja olekuriba, kuna see lisab rakendusele mõne riba, mis pole minu arvates eriti esteetilised.

4 - Mõõtmed

Tavalise rakenduse mõõtmed on 505x320 (kõrgus x laius). Tausta ja piltide loomiseks pidage neid mõõtmeid meeles (vähemalt sama proportsiooniga)! Kui kasutate Figmat, saate oma rakenduse koheselt õige suuruse luua.

5 - Suuruse määramine

Kui valite fikseeritud, on rakenduse suurus 505x320. Kui valite Responsive, sobib rakendus teie nutitelefoniga, kuid olge ettevaatlik, peate oma pilte kohandama.

Samm: kuidas seda teha:)

Esimese näite reprodutseerimiseks järgime kolme sammu (nagu pildid):

1 - Võtke mõõtmed

Figuuril on lahe see, et näete oma raamide ja objekti suurust, nii et näete, kui suured on teie objektid ja tühi! Toorik on App Inventoris väga oluline, sest me loome need nähtamatu sildi abil!

2 - täitke tühjad nähtamatud sildid

Nagu näete teisel pildil, reprodutseerime soovitud esiosa, pannes sobiva suurusega sildi. Seejärel tehke see nähtamatuks (tühjendage nupp "nähtav").

Asjade paigutamiseks kasutage ka paigutust -> paigutust

3 - Proovige oma nupud tarkvarale luua

Kui võimalik, looge oma nupud AI2 veebisaidil, need on kvaliteetsed ja väike animatsioon klõpsamisel on lahe:). Kui te ei saa oma nuppe ise teha, saate need luua mõne muu tarkvara abil ja seejärel selle pildina importida.

6. samm: tulemus:)

Vasakul: ekraanipilt minu nutitelefonist AI2 -s.

Paremal: joonisel Figma tehtud mustand.

Loodan tõesti, et see juhendab teid AI2 -le suurepärase rakenduse loomiseks.

Suur tänu vaatamast. Kui vajate veel nõuandeid, andke mulle teada…

Teine Instructable AI2 taustal ilmub peagi!

Lugupidamisega, Thomas, Technofabrique'ist