Turinys:

APP INVENTOR 2 - Išvalykite priekinius patarimus (+4 pavyzdys): 6 žingsniai
APP INVENTOR 2 - Išvalykite priekinius patarimus (+4 pavyzdys): 6 žingsniai

Video: APP INVENTOR 2 - Išvalykite priekinius patarimus (+4 pavyzdys): 6 žingsniai

Video: APP INVENTOR 2 - Išvalykite priekinius patarimus (+4 pavyzdys): 6 žingsniai
Video: Part 2 - Tom Swift Among the Diamond Makers Audiobook by Victor Appleton (Chs 12-25) 2024, Lapkritis
Anonim
APP INVENTOR 2 - švarūs priekiniai patarimai (+4 pavyzdys)
APP INVENTOR 2 - švarūs priekiniai patarimai (+4 pavyzdys)

Pažiūrėsime, kaip galime padaryti, kad jūsų programa AI2 atrodytų estetiškai:)

Šį kartą jokio kodo, tik patarimai sklandžiai programai, kaip 4 pavyzdys viršuje!

Prekės

1 žingsnis: Įvadas

Įvadas
Įvadas
Įvadas
Įvadas
Įvadas
Įvadas
Įvadas
Įvadas

Ši instrukcija skirta visiems, besimokantiems ar naudojantiems „App Inventor 2“, programinę įrangą, kurią sukūrė MIT.

„MIT AI2“yra nemokamas, paprastas ir nuostabus išmaniųjų telefonų programų kūrimas, kuris puikiai tinka kiekvienam „pasidaryk pats“„Arduino“ar elektroniniam įrenginiui. Tačiau dėl savo paprastumo jis taip pat yra gana ribotas, ypač kai bandote padaryti savo programą estetišką.

Šios „Instructable“tikslas yra duoti jums keletą patarimų, kaip sukurti vėsią būsimos programos frontą, kuris atrodys paprastas ir elegantiškas, kaip ir turėtų būti kiekviename priekyje.

Mes pamatysime pagrindus, kaip sukurti programą, kuri atrodys taip, kaip parodyta 4 pavyzdyje.

Pradėkime !

PS: Jei jums patinka šis projektas, galite už mane balsuoti mokslo klasėje „Classroom“. Ačiū tau labai !!

PS2: bus padarytos kai kurios anglų kalbos klaidos, atleisk man:)

2 žingsnis: „BackGround“

Fonas
Fonas

Toliau sukūriau „Figma“- nemokamą vektorinę programinę įrangą, panašią į pažangius dažus, leidžiančius lengvai sukurti formas ir spalvas: tai labai intuityvu, rekomenduoju: www.figma.com!

Jums nereikia naudoti „Figma“savo priekyje, bet man patinka sukurti dizainą prieš kuriant pačią programą.

Kaip matote paveikslėlyje, fonas turi būti labai minkštas, nes ant jo įdėsime keletą mygtukų, vaizdų ir tt …

Aš rekomenduoju 30% skaidrumą jūsų naudojamai spalvai ir tik 1 spalvos fone.

3 žingsnis: spalvos

Spalvos
Spalvos

Jūsų pasirinktos spalvos ir jų intensyvumas yra labai svarbūs programoje.

Pirmas patarimas, kurį aš duodu, yra pasirinkti ne daugiau kaip 3 spalvas (+ juoda ir balta): mes vis dar stengiamės būti švelnūs:)

Pateikdamas 4 mano pateiktą pavyzdį, čia yra mano pasirinkti patarimai (juos taip pat galite pamatyti paveikslėlyje):

Fonas: minkštas ir šviesus fonas be formos (30% spalvos skaidrumas). Prisiminkite šią spalvą, kad integruotumėte mygtukus!

Pavadinimas: Plonas tamsiai pilkos spalvos tekstas atrodo gerai! Jei norite sekančių subtitrų ir teksto, likite juodos spalvos, bet pakeiskite juodos spalvos atspalvį (pilką, kai tai nėra didelė informacija) ir žaiskite su dydžiu ir atributu, kurį galite (paryškintas, kursyvas).

Mygtukas: viena spalva, paprastai jūsų fono spalva (80–100% skaidrumo), tada juoda arba balta, kad ją užbaigtumėte.

Slankikliai: nenaudokite jiems dviejų spalvų, tik vienos spalvos kairėje pusėje, o dešinėje - juodos spalvos.

Viskas !!

Mažiau yra daugiau !!!! Nenaudokite per daug spalvų, formos ir dydžio, būkite subtilus!

4 veiksmas: nustatykite tinkamą ekrano parametrą

Nustatykite tinkamą ekrano parametrą
Nustatykite tinkamą ekrano parametrą

Pagrindiniame „App Inventor Designer“dalies ekrane galite pasirinkti pagrindinę ekrano charakteristiką.

Ekrane1 -> Ypatybės atlikite šiuos veiksmus, kad pašalintumėte priedų rėmelį iš AI2, kuris tikrai neatrodo gerai ^_ ^.

1 - ekrano orientacija

Pasirinkite tik vieną orientaciją, nes programa pasukant nelabai prisitaiko.

Aš pasirinkau portreto orientaciją.

2 - Išjunkite „Pavadinimas matomas“ir 3 - „ShowStatusBar“

Aš išjungiu pavadinimą ir būsenos juostą, nes ji prideda tam tikrą juostą programoje, kuri nėra labai estetiška (mano nuomone).

4 - Matmenys

Bendros programos matmenys yra 505 x 320 (aukštis x plotis). Prisiminkite šiuos matmenis, kad sukurtumėte savo foną ir paveikslėlius (bent jau tą pačią proporciją)! Jei naudojate „Figma“, galite iš karto sukurti tinkamo dydžio programą.

5 - Dydžio nustatymas

Jei pasirinksite Fiksuotas, programa bus 505 x 320 dydžio. Jei pasirinksite „Responsive“, programa tiks jūsų išmaniajam telefonui, tačiau saugokitės, kad turėsite pritaikyti savo nuotraukas.

5 žingsnis: kaip tai padaryti:)

Kaip tai padaryti:)
Kaip tai padaryti:)

Norėdami atkurti pirmąjį pavyzdį, atliksime 3 veiksmus (kaip paveikslėliai):

1 - Paimkite matmenis

„Figmoje“yra tai, kad galite pamatyti savo rėmelių ir objekto dydį, kad pamatytumėte, kokio dydžio bus jūsų objektai, ir ruošinį! Ruošinys yra labai svarbus „App Inventor“, nes mes jį sukursime uždėdami nematomą etiketę!

2 - Užpildykite tuščias bus nematomas etiketes

Kaip matote antroje nuotraukoje, norimą priekinę dalį atkuriame uždėdami atitinkamo dydžio etiketę. Tada padarykite jį nematomą (spustelėkite mygtuką „matomas“).

Taip pat naudokite išdėstymą -> išdėstymą, kad padėtumėte daiktus

3 - Pabandykite sukurti mygtukus programinėje įrangoje

Jei įmanoma, sukurkite mygtukus AI2 svetainėje, jie bus aukštos kokybės, o maža animacija „paspaudimas“bus nuostabi:). Kai negalite sukurti savo mygtukų, galite juos sukurti naudodami kitą programinę įrangą ir tada importuoti kaip vaizdą.

6 žingsnis: rezultatas:)

Rezultatas:)
Rezultatas:)
Rezultatas:)
Rezultatas:)

Kairėje: ekrano kopija iš mano išmaniojo telefono AI2.

Dešinėje: juodraštis, padarytas Figmoje.

Aš tikrai tikiuosi, kad šis „Instructable“padės jums sukurti nuostabią AI2 programą.

Labai ačiū, kad žiūrite. Jei jums reikia daugiau patarimų, praneškite man…

Kitas „Instructable“AI2 užpakalinėje dalyje netrukus bus išleistas!

Pagarbiai Jūsų, Tomas, iš Technofabrique

Rekomenduojamas: