Tu es confronté au défi de créer un Prototyping attrayant pour une Mobility-App. Il ne s'agit pas seulement du design; il s'agit de concevoir l'expérience utilisateur de manière efficace dès le départ, afin qu'elle aide l'utilisateur à naviguer intuitivement dans l'application. Dans ce tutoriel, tu seras guidé pas à pas à travers le processus de création d'un prototype dans Sketch. Commençons ce voyage passionnant dans le monde du design!
Principales conclusions
- Le prototypage est une étape cruciale dans le développement d'applications.
- Dans Sketch, tu peux commencer avec des formes et des designs simples.
- Une structure claire et une navigation utilisateur sont essentielles au succès de ton application.
Guide étape par étape
Commence par créer la structure de base de ton application dans Sketch. Tu peux utiliser l'outil pinceau pour dessiner tes premiers éléments de design. Il te suffit de sélectionner l'outil pinceau ou d'appuyer sur la touche « P ».
Crée un rectangle qui représentera l'écran de ton application. Maintiens la touche « Alt » enfoncée tout en traçant le rectangle avec ta souris. Cela permettra de garder le rectangle proportionnel. Cela commence déjà à bien se présenter.
Nous allons maintenant concevoir la première page de l'application. Commence avec la barre d'onglets inférieure. Utilise à nouveau l'outil pinceau et trace une ligne droite en maintenant la touche Shift enfoncée pour garantir que tu obtiens une ligne droite.
Une fois que tu as conçu la barre d'onglets, ajoute trois icônes représentant les principales fonctionnalités de l'application. Avec la touche ALT, tu peux aisément dupliquer les figures tout en les déplaçant à la bonne place.
Nous nous consacrerons maintenant à la barre de navigation supérieure. Maintiens à nouveau la touche ALT enfoncée tout en traçant un autre area rectangulaire pour la barre de navigation.
Les bulles de chat sont la prochaine partie de ton application que nous souhaitons concevoir. Utilise l'outil pinceau pour dessiner une bulle de chat. Celle-ci s'affichera immédiatement pour accueillir l'utilisateur. Ajoute un court texte s'adressant à l'utilisateur, comme par exemple: « Bonjour et bienvenue dans l'application Mobility! »
Pour t'assurer que l'ensemble est attrayant, tu peux copier et ajuster les bulles. Sélectionne les bulles et déplace-les vers le bas en maintenant la touche ALT enfoncée pour ajouter un autre texte de bienvenue, comme « Commence avec ta première session Mobility ».
Le prochain pas consiste à insérer le bouton vidéo, permettant aux utilisateurs de lire leurs leçons. Dessine un bouton rond avec l'outil pinceau et combine-le avec un triangle pour clarifier la représentation et la fonction.
Copie maintenant tous les éléments UI importants – comme les barres de navigation supérieure et inférieure – sur la page suivante pour assurer la cohérence dans le design. Tu peux simplement cliquer sur une capture d'écran en maintenant la touche ALT enfoncée pour dupliquer les éléments sur la page suivante.
Sur ce nouvel écran que tu as créé, conçois les options de cours. Ici, tu devrais créer une vue d'ensemble simple des cours disponibles que l'utilisateur peut sélectionner.
Dans la vue de profil, tu peux créer un espace pour la photo de profil, le nom d'utilisateur et le nombre d'heures de cours complétées. Il est important de présenter les informations de manière claire et précise.
Enfin, pour terminer le design des sélection de cours et de leçons, crée la vue d'ensemble pour les leçons et ajoute un bouton de fermeture pour que l'utilisateur puisse fermer le choix à tout moment.
Avec ceci, le prototype de base de ton application Mobility est terminé. Tu as maintenant un design attrayant qui structure clairement la navigation utilisateur tout en t'aidant en tant que designer à visualiser clairement la vision de l'application.
Résumé – Prototypage d'une Mobility App dans Sketch
Au cours de ce tutoriel, tu as appris étape par étape comment prototyper une application Mobility dans Sketch. De la première idée aux derniers éléments de conception, tu as pu élargir tes connaissances et créer un outil utile pour le développement futur de ton application.
Questions Fréquemment Posées
Comment puis-je commencer à concevoir dans Sketch?Sélectionne l'outil pinceau (P) et commence à créer les premiers éléments.
Comment puis-je dupliquer des éléments de manière efficace?Maintiens la touche ALT enfoncée en déplaçant l'élément avec la souris.
Que faire si je ne suis pas satisfait du design?Tu peux toujours ajuster ou redessiner des éléments existants pour obtenir le résultat souhaité.
Comment puis-je m'assurer que la navigation est claire?Veille à ce que toutes les fonctionnalités soient logiquement disposées et que l'utilisateur puisse naviguer intuitivement.
Puis-je également concevoir pour des appareils mobiles dans Sketch?Oui, tu peux ajuster le type et la taille des éléments en fonction de la taille de l'écran des appareils mobiles.
