APP INVENTOR 2 - Malinis na Mga Tip sa Harap (+4 Halimbawa): 6 na Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:12

Susubukan naming makita kung paano namin gagawing esthetic ang iyong App sa:)

Walang code sa oras na ito, mga tip lamang para sa isang maayos na app tulad ng 4 na halimbawa sa itaas!

Mga gamit

Hakbang 1: Panimula

Ang Instructable na ito ay para sa lahat na natututo o gumagamit ng App Inventor 2, software na binuo ng MIT.

Ang MIT AI2 ay isang libre, simple at kamangha-manghang pag-unlad ng smartphone app, na perpekto para sa bawat DIY Arduino o elektronikong aparato. Ngunit ang pagiging simple niya ay ginagawang limitado din sa kanya, lalo na kapag sinusubukan mong gawing esthetic ang iyong app.

Ang pakay ng Instructable na ito ay upang bigyan ka ng ilang mga tip upang lumikha ng isang cool na harap para sa iyong hinaharap na app, na magiging simple at matikas, tulad ng dapat sa bawat harap.

Makikita namin ang mga pangunahing kaalaman upang lumikha ng isang App na magiging hitsura ng ipinakita na 4 na Halimbawa.

Magsimula na tayo !

PS: Kung gusto mo ang proyektong ito, maaari mo akong iboto sa Classroom Science Contest. Maraming salamat !!

PS2: Ang ilang mga pagkakamali sa Ingles ay magagawa, patawarin ako:)

Hakbang 2: Ang BackGround

Ginawa ko ang karagdagang paglikha sa Figma, isang libreng vectorial software, tulad ng isang advanced na pintura, na nagbibigay-daan sa iyo upang lumikha ng madaling mga hugis at kulay: Napaka-intuitive, inirerekomenda ko ito: www.figma.com!

Hindi mo kailangang gumamit ng Figma para sa iyong harapan, ngunit nais kong gawin ang disenyo bago lumikha ng mismong application.

Tulad ng nakikita mo sa larawan, ang background ay kailangang maging napakalambot, dahil maglalagay kami ng ilang mga pindutan, imahe, atbp… dito …

Inirekomenda ko ang isang 30% transparency sa kulay na iyong ginagamit, at isang background na may 1 kulay lamang.

Hakbang 3: Ang Mga Kulay

Ang mga kulay na pinili mo at ang kanilang kasidhian ay napakahalaga sa isang App.

Ang unang payo na ibinibigay ko ay pumili ng maximum na 3 kulay (+ itim at puti): sinusubukan pa rin naming maging malambot:)

Para sa 4 na halimbawang ginawa ko, narito ang mga payo na pinili ko (maaari mo ring makita ang mga ito sa larawan, bilang isang recap):

Ang Background: isang malambot at magaan na background na walang hugis (30% transparency ng kulay). Tandaan ang kulay na ito upang isama ang iyong mga pindutan!

Ang Pamagat: Ang manipis na teksto sa maitim na kulay-abo na kulay ay mukhang mahusay! Para sa sumusunod na subtitle at teksto, manatili sa itim, ngunit baguhin ang lilim ng itim (kulay-abo kapag hindi ito isang malaking impormasyon), at i-play ang laki at katangian na maaari mong (naka-bold, italic).

Ang Button: Isang solong kulay, sa pangkalahatan ang iyong kulay sa background na may (80-100% transparency), pagkatapos itim o puti upang matapos ito.

Ang Slider: huwag gumamit ng 2 mga kulay para sa kanila, isang kulay lamang sa kaliwang bahagi, at ang kanang bahagi sa isang lilim ng itim.

Ayan yun !!

Mas kaunti pa !!!! Huwag gumamit ng masyadong maraming mga kulay, hugis at sukat, Maging banayad!

Hakbang 4: Itakda ang Tamang Parameter ng Screen

Sa pangunahing screen ng bahagi ng App Inventor Designer, maaari mong piliin ang pangunahing katangian ng screen.

Sa Screen1 -> Mga Katangian, sundin ang sumusunod na pagkilos upang tanggalin ang mga extra frame mula sa AI2 na hindi maganda ang hitsura ^ _ ^.

1 - Oryentasyon ng screen

Pumili lamang ng isang oryentasyon sapagkat ang application ay hindi masyadong umaangkop kapag binuksan mo ito.

Kinuha ko ang oryentasyong Portrait.

2 - Huwag paganahin ang 'Pakitang Pamagat' at 3- Huwag paganahin ang 'ShowStatusBar'

Hindi ko pinagana ang pamagat at ang status bar, dahil nagdaragdag ito ng ilang bar sa app, na hindi masyadong kaaya-aya (sa palagay ko).

4 - Dimensyon

Ang sukat ng karaniwang app ay 505x320 (taas x lapad). Tandaan ang mga sukat na iyon upang likhain ang iyong background at mga larawan (hindi bababa sa parehong proporsyon)! Kung gagamit ka ng Figma, maaari kang lumikha ng tamang sukat ng iyong app kaagad.

5 - Sizing

Kung pinili mo ang Naayos, pagkatapos ang app ay magiging 505x320 laki. Kung pinili mo ang tumutugon, pagkatapos ay magkakasya ang app sa iyong smartphone, ngunit mag-ingat, kakailanganin mong iakma ang iyong mga larawan.

Hakbang 5: Paano Ito Gawin:)

Upang kopyahin ang unang halimbawa, susundan namin ang 3 mga hakbang (tulad ng mga larawan):

1 - Kunin ang mga sukat

Ang cool sa figma ay maaari mong makita ang laki ng iyong mga frame at object, upang makita mo kung anong laki ang iyong mga object, at ang blangko! Napakahalaga ng blangko sa App Inventor sapagkat lilikha namin ang mga ito sa pamamagitan ng paglalagay ng hindi nakikitang label!

2 - Punan ang blangko ay hindi nakikita Labels

Tulad ng nakikita mo sa pangalawang larawan, muling ginagawa namin ang harap na nais namin sa pamamagitan ng paglalagay ng label na may sukat na naaangkop. Pagkatapos gawin itong hindi nakikita (i-unclick ang pindutan na 'nakikita').

Gamitin din ang Layout -> Pagsasaayos upang mailagay ang iyong mga item

3 - Subukang likhain ang iyong mga Pindutan sa software

Kung posible, likhain ang iyong mga pindutan sa website ng AI2, magiging mataas ang kalidad ng mga ito at ang maliit na animation na 'on click' ay medyo cool:). Kapag hindi ka makagawa ng sarili mong mga pindutan, maaari mo itong likhain sa ibang software, at pagkatapos ay mai-import ito bilang isang imahe.

Hakbang 6: Ang Resulta:)

Sa kaliwa: isang screenshot mula sa aking smartphone sa AI2.

Sa kanan: ang draft na ginawa sa Figma.

Inaasahan kong makakatulong sa iyo ang Instructable na ito na bumuo ng kahanga-hangang application sa AI2.

Maraming salamat sa panonood. Kung kailangan mo ng karagdagang mga payo mangyaring ipaalam sa akin …

Ang isa pang Maituturo sa backend ng AI2 ay ilalabas sa lalong madaling panahon!

Magalang sa iyo, Si Thomas, mula sa Technofabrique