Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Enseignante: Dr. Ahlem ABOUD 1 1 Module : IHM - Interface Homme Machine Auditoi

Enseignante: Dr. Ahlem ABOUD 1 1 Module : IHM - Interface Homme Machine Auditoire : 2 ING A.U : 2022-2023 TP 2- IHM Prise en Main de Logiciel Collaboratif de Prototypage « Figma » L’objectif de ce TP : • Explorer Figma. • Conception des wireframes initiaux à un prototype interactif avec Figma. • Apprendre les fonctionnalités les plus puissantes telles que la mise en page automatique, les composants et le prototypage Définition : Figma est un outil de conception vectorielle qui s’exécute dans un navigateur ou bien dans une application desktop, utilisez Figma pour réfléchir à des idées, itérer sur des conceptions, créer des prototypes et obtenir des commentaires à n’importe quelle étape du processus créatif. Figma est un logiciel collaboratif de prototypage. Il permet de réaliser des maquette filaires ou graphique, ainsi que des prototypes fonctionnels. Premiers pas avec Figma 1- Télécharger l’outil de conception Figma (https://www.figma.com/fr/downloads/ ). 2- Inscrivez-vous pour créer votre compte personnel : avec un compte Figma, vous pouvez créer des équipes - des espaces partagés, où vous pouvez collaborer sur des fichiers et les organiser en projets. Suivez toutes les étapes de création de compte (avec validation de mail) ✓ Page d’accueil « Figma » Créer un nouveau fichier de design Importer des fichiers existants Enseignante: Dr. Ahlem ABOUD 2 2 Module : IHM - Interface Homme Machine Actions élémentaires Créer un nouveau document Pour créer un nouveau fichier (page), cliquez simplement sur les boutons plus situés dans la barre latérale en haut à gauche. Créer un nouveau fichier : Exemple, j’ai créé 4 pages Espace de design (travail) Barre latérale Barre des paramètres menu principal Enseignante: Dr. Ahlem ABOUD 3 3 Module : IHM - Interface Homme Machine Barre d’outils La barre d’outils contient divers outils d’usage courant. Son contenu peut changer selon le contexte. Les outils • move/scale: déplacer/redimensionner • move: permet de déplacer • scale: permet de redimensionner • Frame/slice : créer des cadres et des zones d’export • frame: créer un cadre • Slice : permet de définir une zone à exporter indépendante du cadre • formes/images • rectangle • ligne • flèche • ellipse • polygon • étoile • placer une image • plume/crayon: • Plume : permet de faire des dessins vectoriels à base de points • Crayon : permet de dessiner directement des tracés (pour faire des notes par exemple) • Texte : permet de créer des zones de texte • Outil main : permet de se déplacer dans l’espace • Ajouter/montrer des commentaires : comme son nom l’indique La barre d’outils Enseignante: Dr. Ahlem ABOUD 4 4 Module : IHM - Interface Homme Machine Créer des cadres « Frame » Choix du format : pour choisir les formats, voici quelques recommandations : ✓ Format mobile : utilisez n’importe quel format mobile, vérifier simplement que le téléphone n’est pas une « phablette », entre mobile et tablette. Un format normal est aux alentours de 400 pixels de large. ✓ Format tablette : privilégiez à nouveau un format ne tablette pas trop grand : le format iPad mini, avec ses 768 pixels de côté, est adapté. ✓ Format Desktop : un format d’affichage sur écran d’ordinateur, autour de 1000 pixels. Créer un nouveau cadre « Frame » : pour créer un nouveau Frame, cliquez simplement sur les boutons plus situés dans la barre latérale en haut à gauche. Créer un frame Enseignante: Dr. Ahlem ABOUD 5 5 Module : IHM - Interface Homme Machine Figma : contraintes et auto-layout ✓ Les contraintes et l’auto-layout sont deux fonctionnalités d’automatisation de certains paramètres de mise en forme. ✓ Les contraintes permettant de redimensionner les cadres tout en conservant une mise en page cohérente. ✓ L’auto layout est un paramètre permettant de créer des composants à la mise en forme dynamique. Utiliser une grille Enseignante: Dr. Ahlem ABOUD 6 6 Module : IHM - Interface Homme Machine Réglage du type de grille ✓ Stretch (défaut) : la largeur des colonnes s’adapte à la largeur du cadre, vous ne pouvez-donc pas régler ce paramètre. Vous réglez leur nombre, les marges et gouttières. ✓ left/right/center : vous réglez la largeur des colonnes, leur nombre, les marges et gouttières. Les colonnes se calent selon le réglage (à droite, gauche, au centre). Note Gouttière Espace entre deux colonnes Marges Espace entre les bords du document et les colonnes situées aux extrémités. Enseignante: Dr. Ahlem ABOUD 7 7 Module : IHM - Interface Homme Machine Notez que vous pouvez faire plusieurs grilles superposées, et utiliser des rangs (rows), c’est à dire des « colonnes horizontales ». Utilisez la grille ! Ne faites pas une grille au hasard parce qu’on vous l’a demandé : pensez votre grille par rapport au format : ne mettez pas de nombreuses colonnes sur un petit format, ou deux sur un format très large. Grille horizontale : vert Grille verticale : rouge Enseignante: Dr. Ahlem ABOUD 8 8 Module : IHM - Interface Homme Machine Ajouter et ranger des éléments Maintenant que vos cadres sont prêts à l’usage, vous pouvez commencer à placer vos éléments : formes, textes, images, tracés… Nommer ses éléments Lorsque vous placez des éléments, interrogez-vous sur leur nommage : cela est-il pertinent de les renommer ? Prenons l’exemple suivant : Ici il peut être pertinent de renommer « Ellipse 1 » en « icône » (si l’on suppose que c’est une icône) et « Rectangle 1 » en « fond ». Il ne semble pas utile de renommer le texte ici (ce dont il s’agit est clair à la lecture : c’est l’heure) Grouper les éléments Il peut être utile de regrouper des éléments fonctionnant ensemble, ici par exemple nos éléments forment le menu. Cela est utile : • pour faciliter la manipulation des groupes d’éléments • pour simplifier l’arborescence du panneau Layers Enseignante: Dr. Ahlem ABOUD 9 9 Module : IHM - Interface Homme Machine Ici l’on peut regrouper les éléments constituant le menu : Et évidemment, on nomme ce nouveau groupe : Utiliser du texte Attention à : la taille de texte : utilisez une taille de texte réaliste : Elle varie selon l’écran (on ne tient pas un téléphone mobile, une tablette ou un écran à la même distance de ses yeux). Une valeur optimale pour un écran d’ordinateur est 16 pixels, mais vous pouvez descendre jusqu’à 10 pixels voir un peu moin selon le contexte. Alignement : Prenez en compte le sens de lecture du texte : n’alignez pas un texte se lisant de gauche à droite à droite ! Enseignante: Dr. Ahlem ABOUD 10 10 Module : IHM - Interface Homme Machine Créer un premier Wireframe Créer un premier Wireframe qui ressemble à la maquette fonctionnelle suivante : Les wireframes représentent une interface sobre. Les designers intègrent généralement les éléments graphiques et contenus suivants : • En tête et pied de page • Barre de navigation • Boutons call-to-action • Éléments de formulaire • Zones pour les images ou médias On peut réaliser une maquette avec un bloc-notes et un crayon ou concevoir une maquette interactive. Voici quelques exemples de Wireframes : Exemple de Wireframe à la main : Wireframe d’un site web Enseignante: Dr. Ahlem ABOUD 11 11 Module : IHM - Interface Homme Machine Découpez votre page en différentes zones La plupart des sites internet comprennent au minimum trois zones : • Le header : l’en-tête, qui se retrouve sur chacune des pages et qui permet d’identifier le site, souvent en comportant le logo de l’entreprise ; • Le body : le corps de page, qui se subdivise lui-même en différentes colonnes, voire en différents niveaux de lecture pour les pages à dérouler ; • Le footer : le pied de page, qui peut contenir des informations moins importantes, mais aussi un rappel du menu de navigation ou des liens vers les réseaux sociaux. Zoning : une découpe « à la grosse » de votre site web Dans un premier temps, il va falloir décider de l’organisation générale de vos pages web. La prochaine étape consiste donc à établir des zonings qui, comme leur nom l’indique, découperont les pages en autant de zones que nécessaire Enseignante: Dr. Ahlem ABOUD 12 12 Module : IHM - Interface Homme Machine Exercice 1 Dans cet exercice, il vous est demandé : • Observer les deux captures d’écran ci-dessous • Produire un croquis rapide de ces deux pages répondant aux attentes d’un croquis d’interface web : ✓ Définir la mise en page principale et créer un premier Frame ✓ Ajouter une grille « layout grid » ✓ Regrouper les composants sous forme des « auto layout » pour faciliter de déplacement, espacement entre les objets ✓ Créer un menu simple et ajouter un « auto layout » pour mieux regrouper et organiser les composants dans un menu ✓ Créer le bouton « se connecter » ✓ Regrouper tous les composants (logo, links et bouton) sous forme d’un menu, c’est facile à le déplacer et positionner sur votre page web ✓ Info : site pour télécharger uploads/s3/ tp2-ihm-prise-en-main-figma.pdf