Microsoft Visio lze použít k vytvoření mnoha typů návrhů GUI.
Microsoft Visio 2010 je nástroj pro grafický návrh, který lze použít k vytváření diagramů, prvků rozhraní, navigačních nabídek a dalších vizuálních objektů. Nabízí širokou škálu nástrojů pro vytvoření návrhu grafického uživatelského rozhraní (GUI). Diagram ukáže, jak bude aplikace nebo webové rozhraní vypadat ve své konečné podobě. Vývoj grafického uživatelského rozhraní ve Visiu není příliš náročný a návrhy lze exportovat jako soubory PDF. Postupujte podle několika pokynů, abyste se naučili, jak vytvořit základní model drátového GUI pro web.
Krok 1
Otevřete Microsoft Visio. Vytvořte nový výkres kliknutím na ikonu prázdného výkresu. Klikněte na tlačítko "Vytvořit".
Video dne
Krok 2
Klikněte na okno Shapes na levé straně obrazovky. Vyberte „Další tvary“. Vyberte „Základní tvary jednotek USA“. Klikněte na „Rychlé tvary“.
Krok 3
Vytvořte pole záhlaví kliknutím pravým tlačítkem na tvar obdélníkového pole a přetažením tvaru do kreslicí oblasti. Změňte velikost rámečku tak, aby pokrýval asi 15 procent horní plochy výkresu.
Krok 4
Pole navigační nabídky vytvoříte kliknutím pravým tlačítkem na tvar obdélníkového pole a přetažením tvaru pod pole záhlaví. Změňte velikost rámečku tak, aby měl výšku asi půl palce a stejnou šířku jako pole záhlaví.
Krok 5
Vytvořte velký rámeček hlavního těla kliknutím pravým tlačítkem na tvar obdélníkového rámečku a přetažením pod rámeček navigační nabídky. Změňte velikost rámečku tak, aby měl stejnou šířku jako pole záhlaví a navigační nabídky a aby pokrýval spodní část kreslicí oblasti.
Krok 6
Vytvořte dva obdélníkové rámečky kliknutím pravým tlačítkem na tvar obdélníkového rámečku a přetažením tvaru dvakrát do kreslicí oblasti. Změňte velikost každé krabice tak, aby odpovídala jedné polovině hlavní krabice. Posuňte každou krabici tak, aby přilehla k sobě uvnitř krabice hlavního těla.
Krok 7
Vytvořte textová pole představující navigační odkazy kliknutím na tlačítko "A Text" v horní části navigační lišty. Vyberte oblast uvnitř navigačního pole pro vytvoření malého textového pole kliknutím levého tlačítka myši. Pohybem myši změňte velikost pole na požadovanou délku. Zadejte text a řekněte „Domů“.
Krok 8
Pomocí levého tlačítka myši vytvořte další čtyři textová pole. Do každého pole zadejte „Položka nabídky“. Změňte velikost každého pole tak, aby odpovídala velikosti pole „Domů“.
Krok 9
Vyberte oblast uvnitř pole hlavního záhlaví a vytvořte textové pole s popisem „Hlavní záhlaví“.
Krok 10
Vytvořte textové pole uvnitř každého pole umístěného uvnitř oblasti hlavního pole obsahu výkresu. Každému textovému poli uveďte popis, například „Obsahová oblast“. Změňte velikost každého textového pole na stejnou velikost. Vyberte tlačítko "Ukazatel" v horní navigační nabídce.
Krok 11
Uložte výkres kliknutím na "Soubor" v horní navigační nabídce a výběrem "Uložit jako."
Spropitné
Přestože Visio nepřichází se vzorníky prototypů GUI nebo objekty, společnosti třetích stran takové nástroje ke stažení nabízejí. Pokud máte v úmyslu použít Visio k vytvoření společného návrhu, mějte na paměti, že formát souboru výkresu aplikace Visio není kompatibilní s většinou balíčků softwaru pro kreslení.
Varování
Příliš složité výkresy mohou způsobit, že Visio po provedení změny zpomalí aktualizaci výkresu.
