Ako vytvoriť GUI v programe Visio

...

Microsoft Visio je možné použiť na vytváranie mnohých typov návrhov GUI.

Microsoft Visio 2010 je nástroj pre grafický dizajn, ktorý možno použiť na vytváranie diagramov, prvkov rozhrania, navigačných ponúk a iných vizuálnych objektov. Ponúka širokú škálu nástrojov na vytvorenie návrhu grafického používateľského rozhrania (GUI). Diagram ukáže, ako bude aplikácia alebo webové rozhranie vyzerať vo svojej konečnej podobe. Vývoj grafického rozhrania v programe Visio nie je príliš náročný a návrhy možno exportovať ako súbory PDF. Postupujte podľa niekoľkých pokynov, aby ste sa naučili, ako vytvoriť základnú maketu drôtového grafického používateľského rozhrania pre webovú stránku.

Krok 1

Otvorte Microsoft Visio. Vytvorte nový výkres kliknutím na ikonu prázdneho výkresu. Kliknite na tlačidlo "Vytvoriť".

Video dňa

Krok 2

Kliknite na okno Tvary na ľavej strane obrazovky. Vyberte možnosť „Ďalšie tvary“. Vyberte „Základné tvary jednotiek USA“. Kliknite na „Rýchle tvary“.

Krok 3

Vytvorte pole nadpisu kliknutím pravým tlačidlom myši na tvar obdĺžnika a potiahnutím tvaru do oblasti kreslenia. Zmeňte veľkosť rámčeka tak, aby pokrýval asi 15 percent hornej plochy výkresu.

Krok 4

Vytvorte pole navigačnej ponuky kliknutím pravým tlačidlom myši na tvar obdĺžnika a potiahnutím tvaru pod pole hlavičky. Zmeňte veľkosť poľa tak, aby malo výšku približne pol palca a rovnakú šírku ako pole hlavičky.

Krok 5

Vytvorte veľkú schránku hlavného tela kliknutím pravým tlačidlom myši na tvar obdĺžnika a potiahnutím pod pole navigačnej ponuky. Zmeňte veľkosť poľa tak, aby malo rovnakú šírku ako pole hlavičky a navigačnej ponuky a aby pokrývalo spodnú časť oblasti kreslenia.

Krok 6

Vytvorte dva obdĺžnikové rámčeky kliknutím pravým tlačidlom myši na tvar obdĺžnikového poľa a dvojitým pretiahnutím tvaru do oblasti kreslenia. Zmeňte veľkosť každej krabice tak, aby sa zmestila na polovicu hlavnej krabice. Presuňte každú krabicu tak, aby priliehala k sebe vo vnútri hlavnej krabice.

Krok 7

Vytvorte textové polia predstavujúce navigačné odkazy kliknutím na tlačidlo „A Text“ v hornej časti navigačnej lišty. Kliknutím na ľavé tlačidlo myši vyberte oblasť vo vnútri navigačného poľa a vytvorte malé textové pole. Pohybom myši zmeníte veľkosť poľa na požadovanú dĺžku. Ak chcete povedať „Domov“, zadajte text.

Krok 8

Pomocou ľavého tlačidla myši vytvorte ďalšie štyri textové polia. Do každého poľa zadajte „Položka ponuky“. Zmeňte veľkosť každého poľa tak, aby zodpovedala veľkosti poľa „Domov“.

Krok 9

Vyberte oblasť v poli hlavnej hlavičky a vytvorte textové pole s popisom „Hlavná hlavička“.

Krok 10

Vytvorte textové pole vo vnútri každého poľa umiestneného v oblasti hlavného poľa obsahu výkresu. Každému textovému poli uveďte popis, napríklad „Oblasť obsahu“. Zmeňte veľkosť každého textového poľa na rovnakú veľkosť. Vyberte tlačidlo "Ukazovateľ" v hornej navigačnej ponuke.

Krok 11

Uložte kresbu kliknutím na "Súbor" z horného navigačného menu a výberom "Uložiť ako".

Tip

Hoci Visio neprichádza s prototypovými šablónami alebo objektmi GUI, spoločnosti tretích strán takéto nástroje ponúkajú na stiahnutie. Ak máte v úmysle použiť Visio na vytvorenie spoločného návrhu, nezabudnite, že formát súboru výkresu Visio nie je kompatibilný s väčšinou balíkov softvéru na kreslenie.

Pozor

Príliš zložité kresby môžu spôsobiť, že Visio po vykonaní zmeny spomalí obnovovanie kresby.