>> Électroniques Technologie >  >> Maison intelligente >> Vie intelligente

Comment créer une interface graphique dans Visio

Microsoft Visio 2010 est un outil de conception graphique qui peut être utilisé pour créer des diagrammes, des éléments d'interface, des menus de navigation et d'autres objets visuels. Il offre une large gamme d'outils pour créer la conception d'une interface utilisateur graphique (GUI). Le diagramme montrera comment l'application ou l'interface Web apparaîtra dans sa forme finale. Développer une interface graphique dans Visio n'est pas trop difficile et les conceptions peuvent être exportées sous forme de fichiers PDF. Suivez quelques instructions pour apprendre à créer une maquette filaire d'interface graphique de base pour un site Web.

Étape 1

Ouvrez Microsoft Visio. Créez un nouveau dessin en cliquant sur l'icône de dessin vide. Cliquez sur le bouton "Créer".

Étape 2

Cliquez sur la fenêtre Formes sur le côté gauche de l'écran. Sélectionnez "Plus de formes". Sélectionnez « Unités américaines de formes de base ». Cliquez sur "Formes rapides".

Étape 3

Créez une zone de titre en cliquant avec le bouton droit sur la forme de la zone rectangulaire et en faisant glisser la forme vers la zone de dessin. Redimensionnez la boîte pour couvrir environ 15 % de la zone supérieure du dessin.

Étape 4

Créez une boîte de menu de navigation en cliquant avec le bouton droit sur la forme de la boîte rectangulaire et en faisant glisser la forme sous la boîte d'en-tête. Redimensionnez la boîte pour avoir une hauteur d'environ un demi-pouce et la même largeur que la boîte d'en-tête.

Étape 5

Créez une grande boîte de corps principal en cliquant avec le bouton droit sur la forme de boîte rectangulaire et en la faisant glisser sous la boîte de menu de navigation. Redimensionnez la zone pour avoir la même largeur que les zones d'en-tête et de menu de navigation et pour couvrir le bas de la zone de dessin.

Étape 6

Créez deux boîtes rectangulaires en cliquant avec le bouton droit sur la forme de la boîte rectangulaire et en faisant glisser la forme deux fois vers la zone de dessin. Redimensionnez chaque boîte pour qu'elle corresponde à la moitié de la boîte du corps principal. Déplacez chaque boîte pour qu'elle soit adjacente l'une à l'autre à l'intérieur de la boîte du corps principal.

Étape 7

Créez des champs de texte représentant des liens de navigation en cliquant sur le bouton "Un texte" en haut de la barre de navigation. Sélectionnez une zone à l'intérieur de la boîte de navigation pour créer un petit champ de texte en cliquant sur le bouton gauche de la souris. Déplacez la souris pour redimensionner le champ à la longueur souhaitée. Tapez du texte pour dire "Accueil".

Étape 8

Créez quatre autres champs de texte en utilisant le bouton gauche de la souris. Tapez "Élément de menu" dans chaque case. Redimensionnez chaque case pour qu'elle corresponde à la taille de la case "Accueil".

Étape 9

Sélectionnez une zone à l'intérieur de la zone d'en-tête principale et créez un champ de texte avec la description "En-tête principal".

Étape 10

Créez une zone de texte à l'intérieur de chaque zone située à l'intérieur de la zone de contenu principale du dessin. Donnez à chaque zone de texte une description, telle que "Zone de contenu". Redimensionnez chaque zone de texte pour qu'elle ait la même taille. Sélectionnez le bouton "Pointeur" dans le menu de navigation supérieur.

Étape 11

Enregistrez le dessin en cliquant sur "Fichier" dans le menu de navigation supérieur et en sélectionnant "Enregistrer sous".

Astuce

Bien que Visio ne soit pas fourni avec des gabarits ou des objets prototypes d'interface graphique, des sociétés tierces proposent de tels outils à télécharger. Si vous avez l'intention d'utiliser Visio pour créer une conception collaborative, n'oubliez pas que le format de fichier de dessin Visio n'est pas compatible avec la plupart des progiciels de dessin.

Avertissement

Des dessins trop complexes peuvent ralentir Visio lors de l'actualisation d'un dessin après avoir apporté une modification.


Vie intelligente