APP INVENTOR 2 - Conseils avant propres (+4 exemples) : 6 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:07

Nous allons voir comment nous pouvons rendre votre App sur AI2 esthétique:)

Pas de code cette fois, seulement des astuces pour une application fluide comme l'exemple 4 ci-dessus !

Fournitures

Étape 1: Présentation

Ce Instructable s'adresse à tous ceux qui apprennent ou utilisent App Inventor 2, un logiciel développé par le MIT.

MIT AI2 est un développement d'applications pour smartphone gratuit, simple et étonnant, qui est parfait pour chaque Arduino DIY ou appareil électronique. Mais sa simplicité le rend également assez limité, surtout lorsque vous essayez de rendre votre application esthétique.

Le but de ce Instructable est de vous donner quelques conseils pour créer une façade cool pour votre future application, qui aura l'air simple et élégante, comme chaque façade devrait l'être.

Nous allons voir les bases pour créer une application qui ressemblera à l'exemple 4 montré.

Commençons !

PS: Si vous aimez ce projet, vous pouvez voter pour moi au concours scientifique en classe. Merci beaucoup !!

PS2: Des erreurs d'anglais seront commises, pardonnez-moi:)

Étape 2: l'arrière-plan

J'ai fait la suite de la création sur Figma, un logiciel vectoriel gratuit, à la manière d'une peinture avancée, qui permet de créer facilement des formes et des couleurs: C'est très intuitif, je le recommande: www.figma.com !

Vous n'avez pas besoin d'utiliser Figma pour votre façade, mais j'aime faire le design avant de créer l'application elle-même.

Comme vous pouvez le voir sur la photo, le fond doit être très doux, puisque nous allons y mettre des boutons, des images, etc…

Je recommande une transparence de 30% sur la couleur que vous utilisez, et un fond avec seulement 1 couleur.

Étape 3: Les couleurs

Les couleurs que vous choisissez et leur intensité sont très importantes dans une application.

Le premier conseil que je donne est de choisir 3 couleurs maximum (+ noir et blanc): on essaie toujours d'être doux:)

Pour les 4 exemples que j'ai fait, voici les conseils que j'ai choisis (vous pouvez aussi les voir sur la photo, pour récapituler):

Le Fond: un fond doux et léger sans forme (30% de transparence de la couleur). N'oubliez pas cette couleur pour intégrer vos boutons !

Le titre: Le texte fin de couleur gris foncé a fière allure ! Pour le sous-titre et le texte suivants, restez en noir, mais changez la nuance de noir (gris quand ce n'est pas une grosse information), et jouez avec la taille et l'attribut que vous pouvez (gras, italique).

Le Bouton: Une seule couleur, en général votre couleur de fond avec (80-100% de transparence), puis du noir ou du blanc pour finir.

Les Sliders: n'utilisez pas 2 couleurs pour eux, une seule couleur sur le côté gauche, et le côté droit dans une nuance de noir.

C'est ça !!

Moins est plus !!!! N'utilisez pas trop de couleurs, de formes et de tailles, soyez subtil !

Étape 4: Définissez le bon paramètre de l'écran

Sur l'écran principal de la partie App Inventor Designer, vous pouvez sélectionner la caractéristique principale de l'écran.

Sur Screen1 -> Properties, suivez l'action suivante pour supprimer le cadre supplémentaire de AI2 qui n'a pas vraiment l'air bien ^_^.

1 - Orientation de l'écran

Choisissez une seule orientation car l'application ne s'adapte pas très bien lorsque vous la tournez.

J'ai choisi l'orientation Portrait.

2 - Désactivez 'Title Visible' et 3- Désactivez 'ShowStatusBar'

Je désactive le titre et la barre d'état, car cela ajoute une barre sur l'application, qui ne sont pas très esthétiques (à mon avis).

4 - Dimension

La dimension de l'application commune est de 505x320 (hauteur x largeur). N'oubliez pas ces dimensions pour créer votre fond et vos images (au moins avoir la même proportion) ! Si vous utilisez Figma, vous pouvez créer instantanément la bonne taille de votre application.

5 - Dimensionnement

Si vous choisissez Fixe, l'application aura une taille de 505x320. Si vous choisissez Responsive, alors l'application s'adaptera à votre smartphone, mais attention, vous devrez adapter vos photos.

Étape 5: Comment le faire:)

Pour reproduire le premier exemple, nous allons suivre 3 étapes (comme les images):

1 - Prendre les dimensions

Ce qui est cool sur figma c'est que tu peux voir la taille de tes cadres et de ton objet, donc tu peux voir quelle sera la taille de tes objets, et du blanc ! Les blancs sont très importants sur App Inventor car nous allons les créer en mettant une étiquette invisible !

2 - Remplir le blanc sera des étiquettes invisibles

Comme vous pouvez le voir sur la deuxième photo, nous reproduisons le recto que nous voulons en plaçant une étiquette à la taille appropriée. Rendez-le ensuite invisible (décochez le bouton 'visible').

Utilisez également la mise en page -> Disposition pour placer vos articles

3 - Essayez de créer vos Buttons sur le logiciel

Lorsque cela est possible, créez vos boutons sur le site AI2, ils seront de haute qualité et la petite animation 'au clic' sera plutôt sympa:). Lorsque vous ne pouvez pas créer vos propres boutons, vous pouvez les créer sur un autre logiciel, puis les importer sous forme d'image.

Étape 6: Le résultat:)

A gauche: une capture d'écran de mon smartphone sur AI2.

A droite: le brouillon réalisé sur Figma.

J'espère vraiment que ce Instructable vous aidera à créer une magnifique application sur AI2.

Merci beaucoup d'avoir regardé. Si vous avez besoin d'autres conseils, n'hésitez pas à me le faire savoir…

Un autre Instructable sur le backend d'AI2 sortira bientôt !

Respectueusement vôtre, Thomas, de Technofabrique