APP INVENTOR 2 - Čisté přední tipy (+4 příklad): 6 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:21

Uvidíme, jak můžeme zajistit, aby vaše aplikace na AI2 vypadala esteticky:)

Tentokrát žádný kód, pouze tipy na hladkou aplikaci, jako je příklad 4 nahoře!

Zásoby

Krok 1: Úvod

Tento Instructable je pro každého, kdo se učí nebo používá App Inventor 2, software vyvinutý MIT.

MIT AI2 je bezplatný, jednoduchý a úžasný vývoj aplikací pro smartphony, který je ideální pro každé DIY Arduino nebo elektronické zařízení. Ale jeho jednoduchost ho také docela omezovala, zvláště když se snažíte, aby vaše aplikace vypadala esteticky.

Účelem tohoto Instructable je poskytnout vám několik tipů, jak vytvořit skvělou frontu pro vaši budoucí aplikaci, která bude vypadat jednoduše a elegantně, jako by každá fronta měla být.

Uvidíme základy k vytvoření aplikace, která bude vypadat, jak ukázal příklad 4.

Začněme !

PS: Pokud se vám tento projekt líbí, můžete pro mě hlasovat v soutěži Classroom Science Contest. Díky ti moc !!

PS2: Udělají se nějaké anglické chyby, promiňte:)

Krok 2: BackGround

Další tvorbu jsem provedl na Figmě, vektorovém bezplatném softwaru, jako pokročilý nátěr, který vám umožní snadno vytvářet tvary a barvy: Je to velmi intuitivní, doporučuji to: www.figma.com!

Na přední straně nemusíte používat Figmu, ale rád vytvořím design před vytvořením samotné aplikace.

Jak vidíte na obrázku, pozadí musí být velmi měkké, protože na něj dáme nějaká tlačítka, obrázky atd …

Doporučuji 30% průhlednost barvy, kterou používáte, a pozadí pouze s 1 barvou.

Krok 3: Barvy

Barvy, které si vyberete, a jejich intenzita jsou v aplikaci velmi důležité.

První rada, kterou dávám, je vybrat si maximálně 3 barvy (+ černobíle): stále se snažíme být měkcí:)

Pro příklad 4, který jsem udělal, zde jsou rady, které jsem vybral (můžete je také vidět na obrázku, jako rekapitulace):

Pozadí: měkké a světlé pozadí bez tvaru (30% průhlednost barvy). Tuto barvu si zapamatujte, chcete -li integrovat tlačítka!

Název: Tenký text v tmavě šedé barvě vypadá dobře! U následujících titulků a textu zůstaňte v černé barvě, ale změňte odstín černé (šedé, když to není velká informace) a pohrajte si s velikostí a atributem, který můžete (tučně, kurzívou).

Tlačítko: Jednobarevná, obecně barva pozadí s (80-100% průhlednost), pak černá nebo bílá pro dokončení.

Posuvníky: Nepoužívejte pro ně 2 barvy, pouze jednu barvu na levé straně a pravou stranu v odstínu černé.

A je to !!

Méně je více !!!! Nepoužívejte příliš mnoho barev, tvarů a velikostí, buďte jemní!

Krok 4: Nastavte správný parametr obrazovky

Na hlavní obrazovce části App Inventor Designer můžete vybrat hlavní vlastnosti obrazovky.

Na obrazovce Screen1 -> Vlastnosti proveďte následující akci a odstraňte rámeček doplňků z AI2, který ve skutečnosti nevypadá dobře ^_ ^.

1 - Orientace obrazovky

Vyberte pouze jednu orientaci, protože aplikace se při otočení příliš nepřizpůsobí.

Zvolil jsem orientaci na výšku.

2 - Zakažte 'Název viditelný' a 3- Zakažte 'ShowStatusBar'

Deaktivuji nadpis a stavový řádek, protože přidává do aplikace nějaký pruh, který není příliš estetický (podle mého názoru).

4 - Rozměr

Rozměr běžné aplikace je 505 x 320 (výška x šířka). Pamatujte na tyto dimenze, abyste vytvořili pozadí a obrázky (alespoň stejný podíl)! Pokud používáte Figma, můžete okamžitě vytvořit správnou velikost své aplikace.

5 - Dimenzování

Pokud zvolíte Fixní, bude mít aplikace velikost 505x320. Pokud zvolíte responzivní, bude se aplikace hodit k vašemu smartphonu, ale pozor, budete muset přizpůsobit své obrázky.

Krok 5: Jak na to:)

Abychom reprodukovali první příklad, provedeme 3 kroky (jako obrázky):

1 - Vezměte rozměry

Na figmě je skvělé to, že vidíte velikost vašich rámečků a objektu, takže můžete vidět, jakou velikost budou mít vaše objekty, a prázdné místo! Prázdné položky jsou v App Inventoru velmi důležité, protože je vytvoříme pomocí neviditelného štítku!

2 - Vyplňte prázdné neviditelné štítky

Jak vidíte na druhém obrázku, reprodukujeme požadovanou přední stranu umístěním štítku s odpovídající velikostí. Poté proveďte jeho neviditelnost (odklikněte tlačítko „viditelné“).

K umístění položek použijte také rozložení -> Uspořádání

3 - Zkuste v softwaru vytvořit svá tlačítka

Pokud je to možné, vytvořte si tlačítka na webových stránkách AI2, budou ve vysoké kvalitě a malá animace „na kliknutí“bude docela cool:). Pokud nemůžete vytvořit vlastní tlačítka, můžete je vytvořit v jiném softwaru a poté je importovat jako obrázek.

Krok 6: Výsledek:)

Vlevo: snímek obrazovky z mého smartphonu na AI2.

Vpravo: návrh provedený na Figmě.

Opravdu doufám, že vám tento Instructable pomůže vybudovat velkolepou aplikaci na AI2.

Děkuji moc za sledování. Pokud potřebujete další rady, dejte mi prosím vědět…

Další Instructable na backend AI2 bude brzy vydán!

S úctou Váš, Thomas, z Technofabrique