Vytváření drátových modelů webů v aplikaci Adobe Muse

Hledat

Naposledy aktualizováno

Naučte se vytvářet prototypy nebo drátové modely webů v aplikaci Adobe Muse.

Poznámka:

Do aplikace Adobe Muse již nejsou přidávány žádné další funkce a 26. března 2020 bude její podpora ukončena. Podrobnější informace a možnosti asistence naleznete na stránce častých dorazů k ukončení životnosti aplikace Adobe Muse.

Aplikace Adobe Muse je velice intuitivní a pomáhá vám rychle vytvářet prototypy webových projektů, které si lze zobrazit online. Funkce vytváření zkušebních webů vám umožňuje sdílet odkazy s potenciálními klienty, kteří si mohou prohlížet online prototypy pomocí stejných prohlížečů, ve kterých se bude zobrazovat konečná verze webu. Klienti si tak uvědomí, jak bude jejich konečný web vypadat.

fig01 — Drátové modely obsahují zástupce nacházející se v místech prvků stránky.

V dalších částech se dozvíte, jak můžete navrhovat drátové modely, vytvářet zobrazení strukturovaného plánu a vytvářet zástupné prvky pro svůj web. Po dokončení obsahu můžete zástupné prvky nahradit skutečnými prvky stránky.

Práce s drátovými modely

Drátové modely zobrazují rozvržení stránek webu a umožňují klikat na odkazy a procházet tak webem. Prohlédněte si drátové modely a poté si zobrazte konečný živý web a porovnejte tyto dvě verze. Všimněte si, že zástupné prvky v drátových modelech byly v konečné verzi webu nahrazeny grafikou.

Pokud se chcete podívat, jak byly drátové modely vytvořeny, stáhněte si soubory s ukázkami (ZIP, 4,5 MB). Rozbalte soubor ZIP, otevřete složku a vyhledejte soubor KevinsKoffeeKartWire.muse. Dvojitým kliknutím otevřete drátové modely v aplikaci Adobe Muse. V zobrazení Plán se podívejte, jak jsou stránky zorganizovány do jednotlivých úrovní vytvářejících mapu webu. Dvojitým kliknutím si otevřete jednotlivé stránky v zobrazení Návrh a podívejte se, jak jsou navrženy.

Aplikace Adobe Muse nabízí řadu funkcí pro vytváření drátových modelů:

Zobrazení Návrh obsahuje volitelnou sloupcovou mřížku, pomocí které můžete zarovnat prvky rozvržení.
Flexibilní nástroje pro kreslení usnadňují vytváření tvarů zástupců grafiky.
Panel Datové zdroje obsahuje funkce, pomocí kterých můžete aktualizovat zástupné obrazy.
Při publikaci nebo exportu webu aplikace Adobe Muse všechny soubory obrazů optimalizuje, rozdělí a exportuje.
Záhlaví textů a styly odstavců pomáhají vytvářet strukturované stránky a jednoduše měnit formátování textu.
Příkaz Umístit umožňuje uložit logo klienta přímo z prohlížeče a poté jej umístit do souboru Adobe Muse.

fig02 — Pomocí příkazu Soubor > Umístit můžete rychle přidávat do rámových modelů firemní značky.

Vytváření drátových modelů pro schválení klientem

Po první schůzce s klientem můžete vytvořit drátový model webu, který bude znázorňovat umístění a funkce prvků stránek, ale nebude obsahovat grafiku a formátování textu konečného webu. Drátový model je určen k tomu, aby představoval kostru každé stránky a vytvořil simulaci webové prezentace bez barev a vizuálního obsahu. K označení umístění obrazů slouží obdélníky a k zobrazení oblastí stránky, které budou obsahovat text, se používá ručně psaný text nebo obecné písmo.

Drátové modely mají následující přednosti:

Umožňují klientovi zaměřit se na strukturu webu a uvědomit si rozvržení stránek.
Nabízejí interaktivní živé chování, pomocí kterého mohou klienti weby kontrolovat a schvalovat.
Slouží jako komunikační nástroj pro vyjasnění návrhu a funkcí webu.

Aplikace Adobe Muse není jen nástroj pro webový design, výborně se také hodí k vytváření prototypů projektů. Můžete okamžitě vytvořit živou zkušební adresu URL a poslat ji klientovi e-mailem, čímž zjednodušíte proces schvalování. Ale to není jediná přednost vytváření drátových modelů pomocí aplikace Adobe Muse.

Práce s drátovými modely v aplikaci Adobe Muse je o krok před ostatními návrhářskými nástroji, protože její funkce pro úpravy obrazů a stylů odstavců umožňují návrhářům webů snadno a rychle aktualizovat soubor .muse a převést schválené drátové modely na konečnou živou verzi. Místo procesu, při kterém jste získali souhlas klienta s projektem, vyhodili jste drátové modely a začali vytvářet projekt zcela od začátku, můžete nyní okamžitě začít aktualizovat schválené drátové modely přidáváním skutečného webového obsahu a vytvářet tak konečnou verzi. V průběhu práce můžete publikovat libovolný počet zkušebních webů dokumentujících postupné provádění změn a sdílet tyto odkazy se svými klienty.

Weby s drátovými modely se vytvářejí pomocí následujícího pracovního postupu:

Vytvoříte drátové modely a publikujete bezplatný zkušební web.
Klient si prohlédne živý web klikáním na různé stránky.
Klient si vyžádá provedení změn nebo požádá o vyjasnění návrhu.
Po provedení potřebných úprav klient schválí vzhled drátových modelů.
Aktualizujete web s drátovými modely přidáním grafických prvků a barev.
Aktualizováním stylů odstavců naformátujete stávající textový obsah.
Klient si prohlédne aktualizovanou verzi webu a vyžádá si provedení dalších změn.
Provedete požadované změny.
Klient schválí dokončenou verzi.
Provedete upgrade webu, nastavíte doménu a zveřejníte konečný web.

Prozkoumání struktury webu v zobrazení Plán aplikace Adobe Muse

Chcete-li si prohlédnout hierarchii rozmístění stránek definující horní a nižší úrovně navigačních odkazů, otevřete si soubor .muse s drátovými modely v aplikaci Adobe Muse a prohlédněte si jej. Po otevření projektu uvidíte Plán zobrazující všechny stránky webu.

fig03 — Stránky drátových modelů se zobrazí v zobrazení Plán.

Všimněte si dvou úrovní, horní úrovně a nižší úrovně, které představují hierarchii mapy webu. Kdykoli v průběhu vytváření nebo údržby webu můžete tyto stránky přetáhnout a změnit tak jejich umístění v rámci struktury webu.

Vytvoření nových stránek:

Klikněte na znak plus (+) vpravo nebo pod stávajícími stránkami a poté klikněte do pole pro název stránky a zadejte její název.

Název stránky by měl být co nejvíce popisný.
Klikněte pravým tlačítkem na miniaturu stránky a pomocí příkazů místní nabídky můžete stránku zdvojit, odstranit nebo přejmenovat.

Nebo nad stránkou podržte ukazatel myši a stránku odstraňte kliknutím na ikonu X, která se zobrazí v pravém horním rohu.
Pokud jste postupovali podle výše uvedených kroků, můžete si vyzkoušet přidávání, přemísťování a odstraňování stránek za účelem úpravy mapy webu. Chcete-li drátový model webu vrátit do původního stavu, zvolte možnost Úpravy > Zpět.

Rozhraní zobrazení Plán je intuitivní a aplikace Adobe Muse sleduje všechny názvy stránek a udržuje odkazy zobrazované ve widgetech nabídek. Všechny prováděné změny se automaticky aktualizují, aby nedošlo k přerušení odkazů.

Používání grafických stylů k vytváření zástupných prvků sdílejících atributy

Podobně jako aplikace Adobe Illustrator nebo Adobe Photoshop, i aplikace Adobe Muse vám pomáhá vytvářet grafické styly sloužící k vytvoření konzistentního vzhledu a funkčnosti. Tato vlastnost je užitečná při vytváření drátových modelů (ale také při navrhování stránek), protože můžete rychle změnit stávající grafický styl a aktualizovat tak všechny prvky stránek, které tento styl používají. Stávající styly můžete také kopírovat a vytvářet tak různé jejich verze.

Chcete-li použít grafické styly k aplikování atributů na tvary a vytvořit zástupce pro soubory obrazů ve webu s drátovým modelem, postupujte následovně:

V zobrazení Návrh nakreslete pomocí nástroje Obdélník tři obdélníky.
Vyberte jeden obdélník a nastavte jeho barvu tahu, barvu výplně a krytí a přidejte grafické efekty, například vržené stíny.
Dokud je obdélník vybraný, klikněte na tlačítko Vytvořit nový grafický styl nacházející se ve spodní části panelu Grafické styly. Styl bude založen na formátování vybraného obdélníku. Dvojitě klikněte na nový grafický styl a označte jej popisným názvem.
Vyberte jeden ze zbývajících dvou obdélníků a kliknutím na název stylu na něj tento styl aplikujte. Zopakováním výše uvedeného kroku aplikujte tento styl i na třetí obdélník, takže všechny tři obdélníky budou používat stejný styl.
Vyberte jeden obdélník a lehce změňte jeho styl. Všimněte si, že na panelu Grafické styly se vedle názvu upraveného stylu zobrazí znak (+).
Na panelu Grafické styly klikněte pravým tlačítkem na název stylu a vyberte možnost Předefinovat styl. Zbývající dva obdélníky se aktualizují tak, aby jejich vzhled odpovídal novému stylu a znaménko plus (+) zmizí.
Grafické styly můžete používat k rychlému formátování tvarů, k vytváření konzistentních drátových modelů a k rychlému aktualizování více datových zdrojů webu, když si klient vyžádá provedení změn.

Vytváření strukturovaných webových stránek a formátování textu pomocí stylů odstavců

Při vytváření webu s drátovým modelem můžete pomocí textového nástroje vytvářet textové rámečky a umisťovat zástupný text (nebo lorem ipsum), který později nahradíte jiným textem. Nebo pokud klient již má nějaký web, můžete zkopírovat text přímo z prohlížeče a vložit jej do textových rámečků. Po vytvoření textových prvků můžete text naformátovat pomocí panelu Text.

Pomocí stylů odstavců můžete definovat text záhlaví a značky odstavců a strukturovat tak textový obsah stránky:

V zobrazení Návrh přetáhněte na stránku pomocí textového nástroje textový rámeček. Do textového rámečku napište nebo zkopírujte text.
Pomocí panelu Text nebo pomocí voleb na ovládacím panelu v horní části pracovní plochy v zobrazení Návrh nastavte volby formátování, například písmo, velikost písma, barvu písma a další vlastnosti.
Kliknutím na možnost Vytvořit nový styl odstavce, nacházející se ve spodní části panelu Styly odstavců, vytvořte nový styl odstavce. Klikněte dvakrát na název nového stylu a zadejte popisný název.
Klikněte na styl pravým tlačítkem a vyberte možnost Volby stylu. Pomocí nabídky Značka HTML nastavte styl odstavce tak, aby odpovídal specifické značce HTML, například P, H1, H2 nebo H3.

Na panelu Styly odstavců klikněte pravým tlačítkem na název stylu a poté v dialogu Volby stylu definujte styl pro určité záhlaví nebo značku odstavce.
Vytvořte několik dalších textových rámečků s textem. Všimněte si, že když kliknete na název stylu odstavce a je vybraný nějaký textový rámeček, použije se na vybraný textový rámeček formátování daného stylu odstavce. Když později vyberete jeden z textových rámečků s použitým stylem odstavce a změníte jej, zobrazí se na panelu Styly odstavců vedle názvu tohoto stylu znak plus (+). Znamená to, že došlo ke změně tohoto stylu – toto chování je stejné jako u grafických stylů.
Chcete-li automaticky aktualizovat všechny textové rámečky pomocí stejného stylu, klikněte na panelu Styly odstavců pravým tlačítkem na název stylu a vyberte možnost Předefinovat styl.

Jak vidíte na této stručné ukázce, můžete vytvářet různé textové kontejnery, nastavovat pro ně specifické styly a následně je používat k vytváření konzistentního návrhu. Když budete později aktualizovat drátové modely a vytvářet konečnou verzi webu, bude velice snadné aktualizovat styly podle požadavků klienta. Vytváření strukturovaných webových stránek s textovými kontejnery je velice vhodný postup, protože pomáhá zlepšovat postavení při optimalizaci vyhledávačů.

Poznámka:

Pokud navrhujete stránky s plnými barvami pozadí, nastavte stejné barvy výplně pozadí textových rámečků. Publikování textového obsahu v aplikaci Adobe Muse bude efektivnější. Pokud není známá výplň pozadí, bude vyhlazení publikovaného textu vypadat méně hladké, protože aplikace Adobe Muse nastaví barvu pozadí textového rámečku na průhlednou. Pokud ale pozadí stránky obsahuje přechody nebo obrazy, ponechejte barvu výplně textových rámečků nastavenou na hodnotu Žádná.

Aktualizace zástupných obrazů pomocí konečné grafiky webu

Jakmile klient schválí drátové modely, můžete web rychle aktualizovat tak, aby používal soubory skutečných obrazů.

Na stránce vyberte zástupce obrazu.
Otevřete panel Datové zdroje a vyhledejte vybraný prvek stránky.
Klikněte na prvek pravým tlačítkem. V zobrazené místní nabídce vidíte dvě volby, které vám pomohou aktualizovat soubor obrazu –·záleží na způsobu, jakým jste vytvořili web s drátovým modelem.

Pokud jste soubor vytvořili v aplikaci Adobe Photoshop nebo Adobe Fireworks a umístili jste jej na stránku, můžete pomocí příkazu Upravit originál upravit originální soubor v aplikaci, kterou jste použili k jeho vytvoření. Po uložení hlavního souboru a návratu do aplikace Adobe Muse se umístěné instance souboru automaticky aktualizují v celém webu.

Pokud jste ale vytvořili zástupce souborů obrazů v aplikaci Adobe Muse pomocí nástroje Obdélník, použijte příkaz Změnit odkazy všech instancí, přejděte na soubor existující ve vašem počítači a zaměňte soubor zástupce za konečný grafický obraz.

Klikněte pravým tlačítkem na název datového zdroje a pomocí příkazu Upravit originál otevřete vzor zástupného souboru v programu pro úpravu obrazů, ve kterém jste jej vytvořili.
Opakováním těchto kroků nahraďte všechny zástupné obrazy na stránce za skutečné soubory obrazů.

Poznámka:

Když na panelu Datové zdroje kliknete pravým tlačítkem na název datového zdroje, můžete také zvolit příkaz Přejít na datový zdroj. Tento příkaz otevře v Adobe Muse stránku obsahující vybraný datový zdroj, a vy jej můžete rychle aktualizovat.

Přístup k optimalizovaným souborům vytvořeným aplikací Adobe Muse

Kromě publikování vytvořených webů aplikace Adobe Muse do hostitelského serveru můžete celý web exportovat, a získat tak složku s rozdělenými a exportovanými soubory obrazů:

Zvolte příkaz Soubor > Exportovat jako HTML.

Zobrazí se dialog Exportovat do HTML.
Vyberte umístění ve svém počítači, do kterého chcete exportovat soubory webu a klikněte na tlačítko OK.

Po dokončení této operace provede aplikace Adobe Muse export souborů a uloží je do zadané lokální složky. Otevřete složku se soubory a zobrazí se optimalizované soubory obrazů. Tyto soubory obrazů můžete využít k vytváření bulletinů, mobilních aplikací, stránek pro práci se sociálními sítěmi a v dalších podobných projektech.

Přihlaste se ke svému účtu.