APP INVENTOR 2 - Tisztítsa meg az első tippeket (+4 példa): 6 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:41

Látni fogjuk, hogyan tehetjük esztétikusnak az AI2 -n lévő alkalmazást:)

Ezúttal nincs kód, csak tippek a sima alkalmazáshoz, mint a fenti 4 példa!

Kellékek

1. lépés: Bevezetés

Ez az utasítás mindenki számára, aki az MIT által kifejlesztett App Inventor 2 szoftvert tanulja vagy használja.

Az MIT AI2 egy ingyenes, egyszerű és elképesztő okostelefon -alkalmazásfejlesztés, amely tökéletes minden DIY Arduino vagy elektronikus eszközhöz. De az egyszerűsége miatt nagyon korlátozott is, különösen akkor, ha az alkalmazás esztétikus megjelenését szeretné elérni.

Ennek az utasításnak az a célja, hogy néhány tippet adjon a jövőbeli alkalmazás hűvös frontjának létrehozásához, amely egyszerűnek és elegánsnak tűnik, ahogy minden frontnak lennie kell.

Látni fogjuk az alkalmazás létrehozásának alapjait, amely úgy fog kinézni, mint a 4 példa.

Lássunk neki !

PS: Ha szereted ezt a projektet, szavazhatsz rám az osztálytermi tudományos versenyen. Köszönöm szépen !!

PS2: Néhány angol hibát elkövetnek, bocsáss meg:)

2. lépés: A BackGround

A további alkotást a Figmán végeztem, egy vektoros ingyenes szoftver, mint egy fejlett festék, amely lehetővé teszi a formák és színek egyszerű létrehozását: Nagyon intuitív, ajánlom: www.figma.com!

Nem kell használnia a Figmát az előlaphoz, de én szeretem megtervezni az alkalmazást, mielőtt magát az alkalmazást létrehoznám.

Amint a képen is látszik, a háttérnek nagyon lágynak kell lennie, mivel néhány gombot, képeket stb. Teszünk rá…

Azt javaslom, hogy 30% -os átlátszóságot biztosítson az Ön által használt színhez, és csak 1 színű hátteret.

3. lépés: A színek

A választott színek és azok intenzitása nagyon fontosak egy alkalmazásban.

Az első tanács, amit adok, hogy válasszon maximum 3 színt (+ fekete -fehér): továbbra is lágyak akarunk lenni:)

Az általam készített 4 példához itt vannak az általam választott tanácsok (ezeket a képen is láthatja, összefoglalóként):

A háttér: lágy és világos háttér alak nélkül (30% -os színátlátszóság). Ne feledje ezt a színt a gombok integrálásához!

A cím: A sötét szürke színű vékony szöveg jól néz ki! A következő felirat és szöveg esetében maradjon feketén, de változtassa meg a fekete árnyalatát (szürke, ha ez nem nagy információ), és játsszon a megfelelő méretkel és attribútummal (félkövér, dőlt).

A gomb: Egy szín, általában a háttérszíne (80-100% átlátszóság), majd fekete vagy fehér a befejezéshez.

A csúszkák: ne használjon 2 színt, csak egy színt a bal oldalon, és a jobb oldalt fekete árnyalattal.

Ez az !!

A kevesebb több !!!! Ne használjon túl sok színt, formát és méretet, legyen finom!

4. lépés: Állítsa be a képernyő jobb paraméterét

Az App Inventor Designer rész fő képernyőjén kiválaszthatja a képernyő fő jellemzőit.

A képernyőn1 -> Tulajdonságok, kövesse az alábbi műveleteket, hogy törölje az extra keretet az AI2 -ből, amely nem néz ki jól ^_ ^.

1 - A képernyő tájolása

Csak egy tájolást válasszon, mert az alkalmazás nem nagyon alkalmazkodik, amikor elfordítja.

A Portré tájolást választottam.

2 - A „Cím látható” és 3 - „ShowStatusBar” letiltása

Letiltom a címet és az állapotsort, mert hozzáad egy sávot az alkalmazásban, amelyek nem túl esztétikusak (véleményem szerint).

4 - Méret

A közös alkalmazás mérete 505x320 (magasság x szélesség). Ne feledje ezeket a dimenziókat a háttér és a képek létrehozásához (legalább azonos arányban)! Ha a Figmát használja, azonnal létrehozhatja a megfelelő méretű alkalmazást.

5 - Méretezés

Ha a Fixet választja, akkor az alkalmazás mérete 505x320 lesz. Ha az Érzékeny lehetőséget választja, akkor az alkalmazás illeszkedik az okostelefonjához, de vigyázzon, módosítania kell képeit.

5. lépés: Hogyan kell csinálni?:)

Az első példa reprodukálásához 3 lépést fogunk követni (mint a képeken):

1 - Vegye ki a méreteket

A figmán az a menő, hogy láthatja a keretek és az objektumok méretét, így láthatja, hogy milyen méretűek lesznek az objektumai, és az üres! Az üres lap nagyon fontos az App Inventor alkalmazásban, mert láthatatlan címke elhelyezésével fogjuk létrehozni!

2 - Töltse ki az üres akaratlan láthatatlan címkéket

Amint a második képen látható, a kívánt méretet a megfelelő méretű címke elhelyezésével reprodukáljuk. Ezután tegye láthatatlanná (nézze le a „látható” gombot).

Az elemek elhelyezéséhez használja az Elrendezés -> Elrendezés lehetőséget is

3 - Próbálja meg létrehozni a gombokat a szoftverben

Ha lehetséges, készítse el a gombokat az AI2 webhelyen, ezek kiváló minőségűek lesznek, és a kis kattintásra készült animáció jó lesz:). Ha nem tudja létrehozni saját gombjait, létrehozhatja azokat egy másik szoftverben, majd importálhatja képként.

6. lépés: Az eredmény:)

Bal oldalon: képernyőkép az okostelefonomról az AI2 -n.

Jobb oldalon: a Figmán készült huzat.

Nagyon remélem, hogy ez az Instructable segít nagyszerű alkalmazás létrehozásában az AI2 -n.

Köszönöm szépen, hogy megnézted. Ha további tanácsokra van szüksége, kérem jelezze…

Hamarosan megjelenik egy másik Instructable az AI2 hátoldalán!

Tisztelettel, Thomas, a Technofabrique -ból