![\"Justinmind-user-interface-face-module\"](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/02\/user-interface-face-module.png\")
\nLa barre d’outils contient des options d’\u00e9dition rapide pour l’\u00e9l\u00e9ment d’UI de l’\u00e9cran s\u00e9lectionn\u00e9. Vous trouverez dans la barre d’outils les outils et les commandes les plus courants et les plus fr\u00e9quemment utilis\u00e9s. ![\"Justinmind-module-toolbar\"](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/02\/justinmind-module-toolbar.png\")
<\/p>\n
- \n
- Accueil<\/strong> – Cliquez sur ce bouton pour revenir \u00e0 votre tableau de bord d’accueil.<\/li>\n
- Outils de s\u00e9lection :<\/strong>\n
- \n
- Outil de s\u00e9lection :<\/strong> utilisez cet outil pour s\u00e9lectionner des \u00e9l\u00e9ments dans le canevas. Un double-clic permet de s\u00e9lectionner des groupes ou des conteneurs. <\/li>\n
- Outil de s\u00e9lection directe :<\/strong> Outil de s\u00e9lection qui ignore les groupes et les conteneurs afin que vous puissiez s\u00e9lectionner des \u00e9l\u00e9ments directement.<\/li>\n
- Outil de suppression :<\/strong> Cet outil supprime tout \u00e9l\u00e9ment sur lequel vous cliquez.<\/li>\n
- Outil de copie de style :<\/strong> Cet outil vous permet de copier toutes les propri\u00e9t\u00e9s de style telles que les couleurs, les bordures, etc. d’un \u00e9l\u00e9ment \u00e0 un autre. Cliquez d’abord sur l’\u00e9l\u00e9ment contenant les styles que vous souhaitez copier, puis sur l’\u00e9l\u00e9ment auquel vous souhaitez appliquer ces styles. <\/li>\n
- Outil de copie d’\u00e9v\u00e9nements :<\/strong> Cet outil vous permet de copier tous les \u00e9v\u00e9nements d’un \u00e9l\u00e9ment vers un autre. Cliquez d’abord sur l’\u00e9l\u00e9ment contenant les \u00e9v\u00e9nements que vous souhaitez copier, puis sur l’\u00e9l\u00e9ment auquel vous souhaitez appliquer ces styles. <\/li>\n
- Outil de recadrage :<\/strong> S\u00e9lectionnez une image puis, apr\u00e8s avoir s\u00e9lectionn\u00e9 cet outil, vous pourrez la recadrer ou lui ajouter un masque.<\/li>\n<\/ul>\n<\/li>\n
- Outil Plume (raccourci clavier P) : <\/b>apr\u00e8s avoir s\u00e9lectionn\u00e9 cet outil, cliquez sur la toile pour cr\u00e9er un point d’ancrage. Cliquez \u00e0 nouveau pour cr\u00e9er une ligne ou cliquez et faites glisser pour cr\u00e9er une courbe. Continuez \u00e0 cliquer pour cr\u00e9er une forme. <\/span><\/li>\n
- Nouveau rectangle (raccourci clavier R) :<\/b> apr\u00e8s avoir s\u00e9lectionn\u00e9 cet outil, cliquez sur le canevas et faites-le glisser pour cr\u00e9er un nouveau rectangle. Maintenez la touche \u00ab\u00a0shift\u00a0\u00bb enfonc\u00e9e pour cr\u00e9er un carr\u00e9. <\/span><\/li>\n
- Nouvelle Ellipse (E) :<\/b> apr\u00e8s avoir s\u00e9lectionn\u00e9 cet outil, cliquez sur le canevas et faites-le glisser pour cr\u00e9er une nouvelle ellipse. Maintenez la touche \u00ab\u00a0shift\u00a0\u00bb enfonc\u00e9e pour cr\u00e9er un cercle. <\/span><\/li>\n
- New Line (L) :<\/b> apr\u00e8s avoir s\u00e9lectionn\u00e9 cet outil, cliquez et faites glisser dans le canevas pour cr\u00e9er une nouvelle Ellipse. Maintenez la touche \u00ab\u00a0shift\u00a0\u00bb enfonc\u00e9e pour limiter l’angle de la ligne. <\/span><\/li>\n
- Nouveau texte (T) :<\/b> Apr\u00e8s avoir s\u00e9lectionn\u00e9 cet outil, cliquez sur le canevas et faites-le glisser pour cr\u00e9er un nouveau texte. L’\u00e9l\u00e9ment de texte sera activ\u00e9 et vous pourrez commencer \u00e0 taper imm\u00e9diatement. <\/span><\/li>\n
- Nouvelle image (I) :<\/b> en cliquant sur cet outil, vous afficherez un explorateur de fichiers pour s\u00e9lectionner un fichier image. Apr\u00e8s avoir s\u00e9lectionn\u00e9 un fichier, vous pouvez choisir o\u00f9 le placer dans le canevas. Justinmind aide la plupart des formats d’image et m\u00eame les fichiers SVG. <\/span><\/span>\n
- \n
- S\u00e9lectionnez l’\u00e9l\u00e9ment Image sur le canevas, allez \u00e0 l’option de menu principal \u00ab\u00a0Edit\u00a0\u00bb. S\u00e9lectionnez \u00ab\u00a0Image\u00a0\u00bb puis \u00ab\u00a0S\u00e9lectionner un fichier…\u00a0\u00bb dans le menu contextuel et s\u00e9lectionnez un fichier image. <\/span><\/li>\n
- S\u00e9lectionnez l’\u00e9l\u00e9ment Image, cliquez sur l’aper\u00e7u de l’image dans la palette Propri\u00e9t\u00e9s et s\u00e9lectionnez un fichier image.<\/span><\/li>\n
- Faites glisser un fichier image directement de votre syst\u00e8me de fichiers vers le canevas (il n’est pas n\u00e9cessaire d’avoir un \u00e9l\u00e9ment Image sur le canevas).<\/span><\/li>\n<\/ul>\n
Apr\u00e8s avoir plac\u00e9 une image sur la toile, vous serez invit\u00e9 \u00e0 choisir parmi les options suivantes :<\/span><\/p>\n
- \n
- Inclure l’image dans le prototype – cliquez pour int\u00e9grer cette image dans le fichier du prototype.<\/span><\/li>\n
- Lien vers le fichier image – cette option cr\u00e9e un lien vers le fichier image que vous avez sur votre ordinateur. Si vous modifiez cette image avec un autre outil de design, les mises \u00e0 jour seront automatiquement appliqu\u00e9es au prototype. <\/span><\/li>\n
- Si vous cliquez avec le bouton droit de la souris sur une image, vous verrez appara\u00eetre un sous-menu Image proposant des op\u00e9rations suppl\u00e9mentaires :<\/span><\/li>\n
- S\u00e9lectionner le fichier… – modifie le fichier image de l’\u00e9l\u00e9ment d’image.<\/span><\/li>\n
- Editer le fichier image… – ouvre l’image avec l’application d’\u00e9dition d’images par d\u00e9faut. Si vous modifiez quoi que ce soit dans cette image et que vous l’enregistrez, les modifications s’appliqueront automatiquement \u00e0 l’image dans le prototype. <\/span><\/li>\n
- Ouvrir l’emplacement du fichier… – ouvre le dossier contenant le fichier image si l’image est li\u00e9e \u00e0 un fichier.<\/span><\/li>\n
- Outil de recadrage d’image – active l’outil de recadrage d’image. Permet de cr\u00e9er des masques sur les images. <\/span><\/li>\n
- Flip horizontal – inverser l’image sur l’axe X.<\/span><\/li>\n
- Flip vertical – inverser l’image sur l’axe Y.<\/span><\/li>\n
- R\u00e9gler la taille d’origine – restaure l’image \u00e0 sa taille d’origine.<\/span><\/li>\n
- Incorporer dans le prototype – incorpore l’image dans le prototype si l’image est li\u00e9e \u00e0 un fichier image.<\/span><\/li>\n
- Clear (Effacer) : supprime le fichier image affich\u00e9. L’espace r\u00e9serv\u00e9 \u00e0 l’image (qui appara\u00eet par d\u00e9faut apr\u00e8s avoir plac\u00e9 un widget Image sur le Canvas) remplacera le fichier image jusqu’\u00e0 ce que vous en s\u00e9lectionniez un autre. <\/span><\/li>\n
- Cr\u00e9ez une copie s\u00e9par\u00e9e – dupliquez l’image.<\/span><\/li>\n<\/ul>\n
Quelques points \u00e0 prendre en compte lorsque vous travaillez avec des images. Si vous avez une image li\u00e9e \u00e0 partir d’un lecteur r\u00e9seau ou d’un appareil externe, et que vous perdez la connexion, ou si vous supprimez le fichier image de votre syst\u00e8me de fichiers, Justinmind ne sera pas en mesure d’actualiser l’image, et l’image s’affichera comme \u00e9tant sa derni\u00e8re mise \u00e0 jour. Un symbole d’avertissement dans le coin sup\u00e9rieur gauche de l’image vous signalera un lien rompu. Une fois la connexion r\u00e9tablie ou l’image replac\u00e9e dans son dossier d’origine, l’ic\u00f4ne dispara\u00eetra et l’image sera actualis\u00e9e.Lorsqu’une image est ajout\u00e9e \u00e0 Justinmind, elle ne perdra pas en qualit\u00e9, m\u00eame si elle est redimensionn\u00e9e. Les images Retina conserveront la qualit\u00e9 Retina sur un \u00e9cran Retina. <\/span><\/li>\n
- Plus d’outils : <\/b><\/b>\n
- \n
- Bouton (B) : <\/b>Il fonctionne comme un \u00e9l\u00e9ment unique. L’ajout d’un \u00e9v\u00e9nement au bouton affecte l’ensemble du composant. Dans les calques comme dans les propri\u00e9t\u00e9s, il appara\u00eet avec la cat\u00e9gorie Bouton, ce qui le rend facilement identifiable par rapport aux autres composants. Les boutons peuvent inclure du texte et l’apparence de leur arri\u00e8re-plan et de leur bordure peut \u00eatre modifi\u00e9e. <\/span>.<\/b><\/li>\n
- Hotspot (H)<\/b>:<\/span> Apr\u00e8s avoir s\u00e9lectionn\u00e9 cet outil, cliquez et faites glisser dans le canevas pour cr\u00e9er une nouvelle zone sensible. Une zone sensible ressemble \u00e0 un rectangle transparent et permet d’ajouter des \u00e9v\u00e9nements \u00e0 des zones de l’image. <\/span><\/li>\n
- Table<\/b>: <\/span> L’\u00e9l\u00e9ment Table cr\u00e9e une grille ou un tableau qui peut contenir d’autres \u00e9l\u00e9ments tels que des zones de texte, des paragraphes et des images. Lorsqu’il est gliss\u00e9 sur le canevas, l’\u00e9l\u00e9ment Table poss\u00e8de par d\u00e9faut deux lignes et deux colonnes, mais celles-ci peuvent \u00eatre modifi\u00e9es dans la palette Propri\u00e9t\u00e9s. <\/span><\/li>\n
- Champs de saisie interactifs<\/b>:<\/span> Une collection d’outils pour cr\u00e9er diff\u00e9rents types de champs de saisie. Ces champs de saisie sont interactifs par eux-m\u00eames, sans qu’il soit n\u00e9cessaire d’ajouter des interactions. <\/span>Champ de texte de saisie (F)<\/b>:<\/span> zone de texte qui permet \u00e0 l’utilisateur d’entrer une valeur pendant la simulation. Les champs de texte d’entr\u00e9e peuvent \u00eatre de l’un des six types de texte suivants : Texte, Zone de texte, Mot de passe, Nombre, Email et URL. <\/span>S\u00e9lectionnez :<\/b> Vous pouvez modifier les valeurs de l’\u00e9l\u00e9ment Liste de s\u00e9lection dans la palette Propri\u00e9t\u00e9s, en cliquant sur l’option \u00ab\u00a0Modifier les valeurs\u00a0\u00bb. Pour d\u00e9finir l’une de ses valeurs par d\u00e9faut, double-cliquez sur la valeur souhait\u00e9e \u00e0 l’int\u00e9rieur de l’\u00e9l\u00e9ment sur le canevas. Pour s\u00e9lectionner l’une de ses valeurs pendant la simulation, il vous suffit de cliquer une fois sur l’\u00e9l\u00e9ment et de s\u00e9lectionner une valeur dans la liste d\u00e9roulante. <\/span>Date :<\/b> permet \u00e0 l’utilisateur de s\u00e9lectionner une date et\/ou une heure dans la simulation. <\/span>Liste : permet \u00e0 l’utilisateur de s\u00e9lectionner une date et\/ou une heure dans la simulation :<\/b> affiche une liste de valeurs. Vous pouvez modifier les valeurs de l’\u00e9l\u00e9ment Liste de s\u00e9lection dans la palette Propri\u00e9t\u00e9s, en cliquant sur l’option \u00ab\u00a0Modifier les valeurs\u00a0\u00bb. Pour d\u00e9finir la valeur s\u00e9lectionn\u00e9e par d\u00e9faut, double-cliquez sur la valeur souhait\u00e9e \u00e0 l’int\u00e9rieur de l’\u00e9l\u00e9ment sur le canevas. Pour s\u00e9lectionner une valeur dans le widget List Box pendant la simulation, cliquez sur la valeur souhait\u00e9e \u00e0 l’int\u00e9rieur de l’\u00e9l\u00e9ment. <\/span>Liste multi-s\u00e9lection :<\/b> affiche une liste de valeurs. Vous pouvez modifier les valeurs de cet \u00e9l\u00e9ment dans la palette Propri\u00e9t\u00e9s, en cliquant sur l’option \u00ab\u00a0Modifier les valeurs\u00a0\u00bb. Pour d\u00e9finir la ou les valeurs par d\u00e9faut, double-cliquez sur la ou les valeurs souhait\u00e9es \u00e0 l’int\u00e9rieur de l’\u00e9l\u00e9ment sur le canevas. Pour s\u00e9lectionner\/d\u00e9s\u00e9lectionner une valeur pendant la simulation, cliquez simplement sur la ou les valeurs. Rappelez-vous que vous pouvez s\u00e9lectionner autant de valeurs que vous le souhaitez. <\/span>T\u00e9l\u00e9chargement de fichiers :<\/b> permet \u00e0 l’utilisateur de s\u00e9lectionner un fichier sur son ordinateur. Il est affich\u00e9 dans un champ de texte avec un bouton Parcourir sur le c\u00f4t\u00e9 droit. Cette entr\u00e9e ne t\u00e9l\u00e9chargera pas le fichier r\u00e9el sur le serveur, elle affichera simplement le navigateur de fichiers et enregistrera le nom du fichier \u00e0 utiliser dans d’autres parties de la simulation. <\/span>Cochez : <\/b>Les cases \u00e0 cocher sont des boutons cliquables qui vous permettent de s\u00e9lectionner plusieurs options. <\/span>Radio : <\/b> Les boutons radio sont des boutons cliquables. Lorsque vous en s\u00e9lectionnez un, les autres sont d\u00e9s\u00e9lectionn\u00e9s. Pour qu’ils fonctionnent ensemble, ils doivent toujours faire partie d’un groupe. <\/span>Liste de contr\u00f4le :<\/b> similaire \u00e0 la liste radio, mais avec des cases \u00e0 cocher au lieu de boutons radio. <\/span>Liste radio :<\/b> un groupe de boutons radio. Une seule valeur peut \u00eatre s\u00e9lectionn\u00e9e \u00e0 la fois. <\/span><\/li>\n
- Lignes et formes :<\/b> Une collection d’outils de base pour dessiner des formes \u00e9l\u00e9mentaires. <\/span>Rectangle (R)<\/b>:<\/span> cliquez et faites glisser pour dessiner un rectangle dans le canevas. Maintenez la touche Majuscule enfonc\u00e9e pour dessiner un carr\u00e9. Un double clic sur le rectangle vous permettra d’ajouter du texte \u00e0 l’int\u00e9rieur de celui-ci. <\/span>Ellipse (E)<\/b>:<\/span> cliquez et faites glisser pour dessiner une ellipse dans le canevas. Maintenez la touche Majuscule enfonc\u00e9e pour dessiner un cercle. Un double clic sur le cercle vous permettra d’ajouter du texte \u00e0 l’int\u00e9rieur de celui-ci. <\/span>Ligne (L) :<\/b> cliquez sur le canevas pour d\u00e9finir le point de d\u00e9part de la ligne, puis une seconde fois pour d\u00e9finir l’extr\u00e9mit\u00e9 de la ligne. Vous pouvez modifier les points d’extr\u00e9mit\u00e9 en les s\u00e9lectionnant et en les faisant glisser dans le canevas. Vous pouvez \u00e9galement changer les points d’extr\u00e9mit\u00e9 dans la palette Propri\u00e9t\u00e9s en points de fl\u00e8che. <\/span>Triangle :<\/b> cliquez et faites glisser pour dessiner un triangle dans le canevas. Un double clic sur le cercle vous permettra d’ajouter du texte \u00e0 l’int\u00e9rieur de celui-ci. <\/span>Fl\u00e8che<\/b>:<\/span> cliquez sur le canevas pour d\u00e9finir le point de d\u00e9part de la fl\u00e8che, puis une seconde fois pour d\u00e9finir l’extr\u00e9mit\u00e9 de la fl\u00e8che. Vous pouvez modifier les points d’extr\u00e9mit\u00e9 en les s\u00e9lectionnant et en les faisant glisser dans le canevas. Vous pouvez \u00e9galement modifier les points d’extr\u00e9mit\u00e9 dans la palette Propri\u00e9t\u00e9s en points de fl\u00e8che. <\/span>Appel<\/b>: <\/span> cliquez et faites glisser pour dessiner un appel sur le canevas. Un double clic sur le cercle vous permettra d’ajouter du texte \u00e0 l’int\u00e9rieur de celui-ci. <\/span><\/li>\n<\/ul>\n
- \n
- Contenu dynamique :<\/b> Une collection d’outils pour diff\u00e9rents types d’\u00e9l\u00e9ments dynamiques tels que les panneaux dynamiques ou les grilles\/listes de donn\u00e9es. <\/span>Panneau dynamique (D)<\/b>:<\/span> Utilisez cet outil pour cr\u00e9er des panneaux dynamiques. Un panneau dynamique permet d’afficher diff\u00e9rents contenus dans la m\u00eame page \u00e0 l’aide d’\u00e9v\u00e9nements. <\/span>Liste de donn\u00e9es<\/b>:<\/span> utilisez cet outil pour cr\u00e9er des listes de donn\u00e9es. Les listes de donn\u00e9es sont un moyen de pr\u00e9senter des tableaux dont les lignes peuvent \u00eatre li\u00e9es \u00e0 la logique par le biais d’\u00e9v\u00e9nements. <\/span>Grille de donn\u00e9es :<\/b> utilisez cet outil pour cr\u00e9er des grilles de donn\u00e9es. Les listes de donn\u00e9es sont un moyen d’afficher des listes de cartes dans une grille o\u00f9 le contenu des cartes peut \u00eatre li\u00e9 \u00e0 la logique par le biais d’\u00e9v\u00e9nements. <\/span><\/li>\n
- Autres \u00e9l\u00e9ments<\/b>:<\/span> Une collection d’outils pour diff\u00e9rents types d’\u00e9l\u00e9ments tels que les tableaux et le HTML int\u00e9gr\u00e9. <\/span>Tableau de texte :<\/b> Apr\u00e8s avoir s\u00e9lectionn\u00e9 cet outil, cliquez sur le canevas et faites-le glisser pour cr\u00e9er un nouveau tableau de texte 3\u00d73. Quelques pr\u00e9cisions sur les \u00e9l\u00e9ments du tableau de texte. <\/span>iFrame :<\/b> il cr\u00e9e un espace r\u00e9serv\u00e9 pour le code HTML. Vous pouvez taper n’importe quel code HTML dans le panneau Propri\u00e9t\u00e9s et il sera rendu dans la zone d\u00e9finie par cet \u00e9l\u00e9ment. <\/span>Site web :<\/b> il cr\u00e9e un espace r\u00e9serv\u00e9 dans lequel un site web entier peut \u00eatre affich\u00e9. L’URL du site web \u00e0 afficher est d\u00e9finie dans la palette Propri\u00e9t\u00e9s. Certains sites web ont des propri\u00e9t\u00e9s de s\u00e9curit\u00e9 renforc\u00e9es qui les emp\u00eachent d’\u00eatre affich\u00e9s de cette mani\u00e8re. Document \/ Vid\u00e9o :<\/b> utilisez cet \u00e9l\u00e9ment pour afficher n’importe quel document dans une zone du canevas. Dossier HTML :<\/b> utilisez cet \u00e9l\u00e9ment pour int\u00e9grer un dossier HTML complet dans votre prototype. <\/span><\/li>\n<\/ul>\n<\/li>\n
- Options de zoom :<\/strong> une collection d’options suppl\u00e9mentaires li\u00e9es au zoom.<\/li>\n
- Outils d’alignement :<\/strong> une collection d’outils permettant d’aligner une s\u00e9lection de plusieurs \u00e9l\u00e9ments dans le canevas ou un seul \u00e9l\u00e9ment par rapport au canevas.<\/li>\n
- Voir sur l’appareil :<\/strong> cliquez sur cette option pour simuler l’\u00e9tat actuel du prototype sur un appareil mobile.<\/li>\n
- Simuler :<\/strong> cliquez sur cette option pour lancer la simulation du prototype actuel.<\/li>\n
- Partager :<\/strong> t\u00e9l\u00e9chargez l’\u00e9tat actuel du prototype sur votre compte en ligne afin de partager la simulation avec les \u00e9valuateurs et les d\u00e9veloppeurs.<\/li>\n
- Obtenir toutes les modifications :<\/strong> Mettez \u00e0 jour le projet avec toutes les modifications apport\u00e9es par le reste des membres de l’\u00e9quipe.<\/li>\n<\/ol>\n
<\/a>S\u00e9lecteur de modules<\/h2>\n
![\"passer](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/switch-between-modules-1.png\")
\nCe menu d\u00e9roulant permet de passer d’un module \u00e0 l’autre dans Justinmind : Interface utilisateur, Commentaires, Sc\u00e9narios et Exigences. Chaque module peut contenir des informations sur diff\u00e9rents aspects de l’application que vous \u00eates en train de concevoir. L’interface utilisateur est utilis\u00e9e pour concevoir les \u00e9crans et les interactions du prototype. Les commentaires stockent et g\u00e8rent toutes les conversations et tous les retours d’information que vous pouvez avoir avec vos parties prenantes. Sc\u00e9narios est un outil de diagramme g\u00e9n\u00e9raliste qui peut \u00eatre utilis\u00e9 pour concevoir des flux d’utilisateurs ou des plans de site. Enfin, Requirements est un outil complet de gestion des exigences et le point d’int\u00e9gration avec JIRA et Azure DevOps. <\/p>\n<\/a>L’espace de travail<\/h2>\n
Voici un aper\u00e7u de chaque palette du module Interface utilisateur :
![\"user-interface-palette-overview-1\"](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/user-interface-palette-overview-1.png\")
<\/p>\n- \n
- Palette d’\u00e9crans<\/strong> – la palette d’\u00e9crans r\u00e9pertorie tous les \u00e9crans du prototype.<\/li>\n
- Palette des mod\u00e8les<\/strong> – la palette des mod\u00e8les r\u00e9pertorie tous les mod\u00e8les inclus dans le prototype. En savoir plus sur le prototypage avec des mod\u00e8les.<\/a><\/li>\n
- Palette de biblioth\u00e8ques de widgets<\/strong> – la palette de widgets contient des widgets pr\u00e9construits pour cr\u00e9er le contenu d’un prototype. Il suffit de les faire glisser et de les d\u00e9poser sur le canevas, ou de cliquer sur un widget, puis de cliquer sur l’emplacement du canevas o\u00f9 vous souhaitez le placer. <\/li>\n
- Palette des Masters<\/strong> – la palette des Masters r\u00e9pertorie tous les Masters inclus dans le prototype. En savoir plus sur le prototypage avec les Masters.<\/a><\/li>\n
- \u00c9crans sur le canevas<\/strong> – vous trouverez des onglets pour chaque \u00e9cran du prototype en haut du canevas. Ces onglets sont utiles pour passer rapidement d’un \u00e9cran \u00e0 l’autre. L’onglet s\u00e9lectionn\u00e9 est actif sur le canevas. <\/li>\n
- Canvas<\/strong> – concevez les \u00e9crans, les mod\u00e8les et les masters du prototype en faisant glisser des widgets sur le Canvas. Il affiche l’\u00e9cran, le mod\u00e8le ou le master actif. <\/li>\n
- Palette des propri\u00e9t\u00e9s<\/strong> – modifiez les propri\u00e9t\u00e9s de l’\u00e9l\u00e9ment UI s\u00e9lectionn\u00e9 (par exemple, le nom, la couleur, la bordure, la police, la position) dans la palette des propri\u00e9t\u00e9s.<\/li>\n
- Palette d’\u00e9v\u00e9nements<\/strong> – ajoutez des fonctionnalit\u00e9s aux \u00e9l\u00e9ments et \u00e9crans de l’UI. En savoir plus sur la cr\u00e9ation d’\u00e9v\u00e9nements dans les prototypes Justinmind.<\/a><\/li>\n
- Palette<\/strong> CSS – copiez les styles des \u00e9l\u00e9ments de l’UI (styles par d\u00e9faut ou personnalis\u00e9s), y compris la largeur, la hauteur, la famille de polices, la taille, le poids et la couleur vers d’autres outils ou programmes de design dans la palette CSS. Vous ne pouvez pas modifier le contenu de la palette CSS. Pour modifier les propri\u00e9t\u00e9s, revenez \u00e0 la palette Propri\u00e9t\u00e9s (7). <\/li>\n
- Palette des calques<\/strong> – la palette des contours affiche tous les \u00e9l\u00e9ments de l’UI dans l’\u00e9cran s\u00e9lectionn\u00e9.<\/li>\n
- Palette des ma\u00eetres des donn\u00e9es<\/strong> – vous trouverez ici une liste des ma\u00eetres des donn\u00e9es d’un prototype. En savoir plus sur le travail avec les ma\u00eetres de donn\u00e9es et le prototypage guid\u00e9 par les donn\u00e9es.<\/a><\/li>\n
- Palette de variables<\/strong> – vous trouverez ici la liste des variables d’un prototype. En savoir plus sur l’utilisation des variables.<\/a><\/li>\n
- Palette des exigences<\/strong>: affichez et ajoutez des exigences dans un prototype. En savoir plus sur l’utilisation des exigences.<\/a><\/li>\n
- Palette des commentaires<\/strong> – affichez et ajoutez les commentaires dans un prototype. En savoir plus sur les commentaires dans Justinmind.<\/a><\/li>\n<\/ol>\n
<\/a>Personnaliser l’espace de travail<\/h2>\n
Vous pouvez personnaliser l’espace de travail en affichant, masquant, d\u00e9pla\u00e7ant et repositionnant les palettes. Vous pouvez r\u00e9organiser les palettes au sein d’un groupe de palettes, d\u00e9placer une palette vers un autre groupe ou simplement les faire flotter en les faisant glisser vers n’importe quel endroit de l’\u00e9cran o\u00f9 il n’y a pas de palettes. <\/p>\n
- Palette des mod\u00e8les<\/strong> – la palette des mod\u00e8les r\u00e9pertorie tous les mod\u00e8les inclus dans le prototype. En savoir plus sur le prototypage avec des mod\u00e8les.<\/a><\/li>\n
- Autres \u00e9l\u00e9ments<\/b>:<\/span> Une collection d’outils pour diff\u00e9rents types d’\u00e9l\u00e9ments tels que les tableaux et le HTML int\u00e9gr\u00e9. <\/span>Tableau de texte :<\/b> Apr\u00e8s avoir s\u00e9lectionn\u00e9 cet outil, cliquez sur le canevas et faites-le glisser pour cr\u00e9er un nouveau tableau de texte 3\u00d73. Quelques pr\u00e9cisions sur les \u00e9l\u00e9ments du tableau de texte. <\/span>iFrame :<\/b> il cr\u00e9e un espace r\u00e9serv\u00e9 pour le code HTML. Vous pouvez taper n’importe quel code HTML dans le panneau Propri\u00e9t\u00e9s et il sera rendu dans la zone d\u00e9finie par cet \u00e9l\u00e9ment. <\/span>Site web :<\/b> il cr\u00e9e un espace r\u00e9serv\u00e9 dans lequel un site web entier peut \u00eatre affich\u00e9. L’URL du site web \u00e0 afficher est d\u00e9finie dans la palette Propri\u00e9t\u00e9s. Certains sites web ont des propri\u00e9t\u00e9s de s\u00e9curit\u00e9 renforc\u00e9es qui les emp\u00eachent d’\u00eatre affich\u00e9s de cette mani\u00e8re. Document \/ Vid\u00e9o :<\/b> utilisez cet \u00e9l\u00e9ment pour afficher n’importe quel document dans une zone du canevas. Dossier HTML :<\/b> utilisez cet \u00e9l\u00e9ment pour int\u00e9grer un dossier HTML complet dans votre prototype. <\/span><\/li>\n<\/ul>\n<\/li>\n
- Hotspot (H)<\/b>:<\/span> Apr\u00e8s avoir s\u00e9lectionn\u00e9 cet outil, cliquez et faites glisser dans le canevas pour cr\u00e9er une nouvelle zone sensible. Une zone sensible ressemble \u00e0 un rectangle transparent et permet d’ajouter des \u00e9v\u00e9nements \u00e0 des zones de l’image. <\/span><\/li>\n
- Lien vers le fichier image – cette option cr\u00e9e un lien vers le fichier image que vous avez sur votre ordinateur. Si vous modifiez cette image avec un autre outil de design, les mises \u00e0 jour seront automatiquement appliqu\u00e9es au prototype. <\/span><\/li>\n
- S\u00e9lectionnez l’\u00e9l\u00e9ment Image, cliquez sur l’aper\u00e7u de l’image dans la palette Propri\u00e9t\u00e9s et s\u00e9lectionnez un fichier image.<\/span><\/li>\n
- Outil de s\u00e9lection directe :<\/strong> Outil de s\u00e9lection qui ignore les groupes et les conteneurs afin que vous puissiez s\u00e9lectionner des \u00e9l\u00e9ments directement.<\/li>\n
- Outils de s\u00e9lection :<\/strong>\n