APP INVENTOR 2 - tīri priekšējie padomi (+4 piemērs): 6 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:54

Mēs redzēsim, kā mēs varam padarīt jūsu lietotni AI2 estētisku:)

Šoreiz bez koda, tikai padomi nevainojamai lietotnei, piemēram, 4 piemērs augšpusē!

Piegādes

1. darbība. Ievads

Šī pamācība ir paredzēta ikvienam, kurš mācās vai izmanto App Inventor 2 - MIT izstrādātu programmatūru.

MIT AI2 ir bezmaksas, vienkārša un pārsteidzoša viedtālruņu lietotņu izstrāde, kas ir lieliski piemērota katrai DIY Arduino vai elektroniskai ierīcei. Bet viņa vienkāršība arī padara viņu diezgan ierobežotu, it īpaši, ja jūs mēģināt padarīt savu lietotni estētisku.

Šīs pamācības mērķis ir sniegt jums dažus padomus, kā izveidot vēsu priekšpusi savai nākotnes lietotnei, kas izskatīsies vienkārši un eleganti, kā tam vajadzētu būt.

Mēs redzēsim pamatus, lai izveidotu lietotni, kas izskatīsies tā, kā parādīts 4 piemērā.

Sāksim !

PS: Ja jums patīk šis projekts, varat balsot par mani Classroom Science konkursā. Liels paldies !!

PS2: Tiks pieļautas dažas angļu valodas kļūdas, piedodiet:)

2. solis: BackGround

Turpmāko radīšanu esmu veicis, izmantojot bezmaksas vektorgrafikas programmatūru Figma, piemēram, modernu krāsu, kas ļauj viegli izveidot formas un krāsas: tas ir ļoti intuitīvi, es to iesaku: www.figma.com!

Jums nav jāizmanto Figma priekšpusē, bet man patīk izveidot dizainu pirms pašas lietojumprogrammas izveides.

Kā redzat attēlā, fonam jābūt ļoti mīkstam, jo mēs tam uzliksim dažas pogas, attēlus utt.…

Es ieteiktu 30% caurspīdīgumu jūsu izmantotajai krāsai un fonu ar tikai 1 krāsu.

3. solis: krāsas

Jūsu izvēlētās krāsas un to intensitāte ir ļoti svarīga lietotnē.

Pirmais padoms, ko es dodu, ir izvēlēties maksimāli 3 krāsas (+ melnbalts): mēs joprojām cenšamies būt mīksti:)

Četriem piemēriem, kurus es izveidoju, šeit ir manis izvēlētie padomi (kā kopsavilkumu tos var redzēt arī attēlā):

Fons: mīksts un gaišs fons bez formas (30% krāsas caurspīdīgums). Atcerieties šo krāsu, lai integrētu pogas!

Nosaukums: Plāns teksts tumši pelēkā krāsā izskatās labi! Sekojošajam apakšvirsrakstam un tekstam palieciet melnā krāsā, bet mainiet melno nokrāsu (pelēko, ja tā nav liela informācija) un spēlējiet ar iespējamo izmēru un atribūtu (treknrakstā, slīprakstā).

Poga: viena krāsa, parasti jūsu fona krāsa ar (80–100% caurspīdīgumu), pēc tam melna vai balta, lai to pabeigtu.

Slīdņi: neizmantojiet tiem divas krāsas, tikai vienu krāsu kreisajā pusē un labo pusi melnā tonī.

Tieši tā !!

Mazāk ir vairāk !!!! Nelietojiet pārāk daudz krāsu, formu un izmēru, esiet smalks!

4. solis: iestatiet ekrāna labo parametru

App Inventor Designer daļas galvenajā ekrānā varat atlasīt ekrāna galveno raksturojumu.

Ekrānā 1 -> Rekvizīti veiciet tālāk norādītās darbības, lai no AI2 izdzēstu papildu rāmi, kas īsti neizskatās labi ^_ ^.

1 - ekrāna orientācija

Izvēlieties tikai vienu orientāciju, jo, pagriežot, lietojumprogramma ne pārāk labi pielāgojas.

Es izvēlējos portreta orientāciju.

2 - atspējot opciju “Redzams nosaukums” un 3 - atspējot “ShowStatusBar”

Es atspējoju nosaukumu un statusa joslu, jo tas lietotnei pievieno kādu joslu, kas nav ļoti estētiska (manuprāt).

4 - dimensija

Kopējās lietotnes izmērs ir 505x320 (augstums x platums). Atcerieties šo dimensiju, lai izveidotu savu fonu un attēlus (vismaz tādā pašā proporcijā)! Ja izmantojat Figma, varat uzreiz izveidot pareizo lietotnes izmēru.

5 - Izmēru noteikšana

Ja izvēlaties Fiksēts, lietotne būs 505x320 izmēra. Ja izvēlaties atsaucīgu, lietotne būs piemērota jūsu viedtālrunim, taču uzmanieties, jums būs jāpielāgo attēli.

5. solis: kā to izdarīt:)

Lai atveidotu pirmo piemēru, mēs veiksim 3 darbības (piemēram, attēlus):

1 - ņemiet izmērus

Figmā forši ir tas, ka jūs varat redzēt savu rāmju un objekta izmēru, lai jūs varētu redzēt, kāda izmēra būs jūsu objekti, un tukšu! Tukšs ir ļoti svarīgs App Inventor, jo mēs to izveidosim, uzliekot neredzamu etiķeti!

2 - Aizpildiet tukšu būs neredzamas etiķetes

Kā redzams otrajā attēlā, mēs atveidojam vēlamo priekšpusi, ievietojot atbilstošā izmēra etiķeti. Pēc tam padariet to neredzamu (noņemiet pogu “redzama”).

Izmantojiet arī izkārtojumu -> izkārtojumu, lai novietotu savus priekšmetus

3 - Mēģiniet izveidot pogas programmatūrā

Ja iespējams, izveidojiet savas pogas AI2 vietnē, tās būs augstas kvalitātes, un mazā animācija “klikšķis” būs diezgan forša:). Ja nevarat izveidot savas pogas, varat tās izveidot citā programmatūrā un pēc tam importēt kā attēlu.

6. solis: rezultāts:)

Kreisajā pusē: ekrānuzņēmums no mana viedtālruņa, izmantojot AI2.

Labajā pusē: melnraksts, kas izveidots uz Figmas.

Es patiešām ceru, ka šī pamācība palīdzēs jums izveidot lielisku lietojumprogrammu AI2.

Liels paldies, ka skatījāties. Ja jums ir nepieciešami papildu padomi, lūdzu, dariet man zināmu…

Drīzumā tiks izlaists cits Instructable AI2 aizmugurē!

Ar cieņu, Tavs, Tomass, no Technofabrique