APP INVENTOR 2 - Reinig de voorste tips (+4 voorbeeld): 6 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:16

We gaan kijken hoe we je App op AI2 er esthetisch uit kunnen laten zien:)

Geen code deze keer, alleen tips voor een soepele app zoals het 4 voorbeeld bovenaan!

Benodigdheden

Stap 1: Inleiding

Deze Instructable is voor iedereen die App Inventor 2, software ontwikkeld door MIT, leert of gebruikt.

MIT AI2 is een gratis, eenvoudige en geweldige app-ontwikkeling voor smartphones, die perfect is voor elke doe-het-zelf Arduino of elk elektronisch apparaat. Maar zijn eenvoud maakt hem ook behoorlijk beperkt, vooral als je probeert je app er esthetisch uit te laten zien.

Het doel van deze Instructable is om u enkele tips te geven om een cool front voor uw toekomstige app te creëren, dat er eenvoudig en elegant uitziet, zoals elk front zou moeten zijn.

We gaan de basis bekijken om een app te maken die eruit zal zien als het voorbeeld dat wordt getoond.

Laten we beginnen !

PS: Als je van dit project houdt, kun je op mij stemmen in de Classroom Science Contest. Heel erg bedankt !!

PS2: Er zullen wat Engelse fouten worden gemaakt, vergeef me:)

Stap 2: De achtergrond

Ik heb de verdere creatie gemaakt op Figma, een vectoriële gratis software, zoals een geavanceerde verf, waarmee je gemakkelijk vormen en kleuren kunt maken: het is heel intuïtief, ik raad het aan: www.figma.com!

Je hoeft Figma niet voor je voorkant te gebruiken, maar ik maak graag het ontwerp voordat ik de applicatie zelf maak.

Zoals je op de foto kunt zien, moet de achtergrond erg zacht zijn, aangezien we er wat knoppen, afbeeldingen, enz. op gaan plaatsen…

Ik raad een transparantie van 30% aan op de kleur die je gebruikt, en een achtergrond met slechts 1 kleur.

Stap 3: De kleuren

De kleuren die je kiest en hun intensiteit zijn erg belangrijk in een App.

Het eerste advies dat ik geef is om maximaal 3 kleuren te kiezen (+ zwart en wit): we proberen nog steeds zacht te zijn:)

Voor de 4 voorbeelden die ik heb gemaakt, zijn hier de adviezen die ik heb gekozen (je kunt ze ook op de foto zien, als een samenvatting):

De achtergrond: een zachte en lichte achtergrond zonder vorm (30% transparantie van de kleur). Onthoud deze kleur om uw knoppen te integreren!

De titel: Dunne tekst in de donkergrijze kleur ziet er goed uit! Voor de volgende ondertitel en tekst, blijf in het zwart, maar verander de schaduw van zwart (grijs als het geen grote informatie is), en speel met de grootte en het kenmerk dat je kunt (vet, cursief).

De knop: Een enkele kleur, in het algemeen je achtergrondkleur met (80-100% transparantie), dan zwart of wit om het af te maken.

De schuifregelaars: gebruik er geen 2 kleuren voor, slechts één kleur aan de linkerkant en de rechterkant in een zwarte tint.

Dat is het !!

Minder is meer !!!! Gebruik niet te veel kleuren, vormen en maten, wees subtiel!

Stap 4: Stel de juiste parameter van het scherm in

Op het hoofdscherm van het App Inventor Designer-gedeelte kunt u het hoofdkenmerk van het scherm selecteren.

Op Scherm1 -> Eigenschappen, volg de volgende actie om het extra's frame van AI2 te verwijderen dat er niet echt goed uitziet ^_^.

1 - Oriëntatie van het scherm

Kies slechts één richting omdat de applicatie zich niet goed aanpast als je hem draait.

Ik koos voor de portretoriëntatie.

2 - Schakel 'Title Zichtbaar' uit en 3- Schakel 'ShowStatusBar' uit

Ik schakel de titel en de statusbalk uit, omdat het een balk aan de app toevoegt, die niet erg esthetisch zijn (naar mijn mening).

4 - Afmeting

De afmeting van de gemeenschappelijke app is 505x320 (hoogte x breedte). Onthoud die dimensies om je achtergrond en foto's te maken (hebben tenminste dezelfde verhouding)! Als u Figma gebruikt, kunt u direct de juiste grootte van uw app maken.

5 - Maatvoering

Als u Vast kiest, heeft de app het formaat 505x320. Kies je voor Responsive, dan past de app wel op je smartphone, maar let op, je zult je foto's moeten aanpassen.

Stap 5: Hoe het te doen:)

Om het eerste voorbeeld te reproduceren, gaan we 3 stappen volgen (zoals de foto's):

1 - Neem de afmetingen

Wat cool is aan figma is dat je de grootte van je frames en object kunt zien, zodat je kunt zien hoe groot je objecten zullen zijn, en de blanco! De blanco's zijn erg belangrijk op App Inventor omdat we ze gaan maken door een onzichtbaar label te plaatsen!

2 - Vul de blanco zal onzichtbare labels

Zoals je op de tweede foto kunt zien, reproduceren we de voorkant die we willen door een label te plaatsen met het juiste formaat. Maak het dan onzichtbaar (klik op de knop 'zichtbaar').

Gebruik ook de Lay-out -> Arrangement om uw items te plaatsen

3 - Probeer uw knoppen in de software te maken

Maak indien mogelijk je knoppen op de AI2-website, ze zullen van hoge kwaliteit zijn en de kleine animatie 'op klik' zal best cool zijn:). Als u geen eigen knoppen kunt maken, kunt u deze in een andere software maken en deze vervolgens als afbeelding importeren.

Stap 6: Het resultaat:)

Links: een screenshot van mijn smartphone op AI2.

Rechts: het ontwerp gemaakt op Figma.

Ik hoop echt dat deze Instructable je zal helpen bij het bouwen van een prachtige applicatie op AI2.

Heel erg bedankt voor het kijken. Als je nog meer advies nodig hebt, laat het me dan weten…

Een andere Instructable op de backend van AI2 zal binnenkort worden vrijgegeven!

Hoogachtend, Thomas, van Technofabrique