Rozvržení při rychlosti světla S drátovým sadou nástrojů pro Keynote
Wireframe Toolkit for Keynote umožňuje téměř každému, kdo má základní přehled o tom, jak používat prezentační software k rychlému vytváření maket uživatelského rozhraní pro iOS a web. Pokud nemáte Keynote, nebojte se, je zde také verze Powerpoint!
Dnes vám ukážeme, jak rychle sestavit, jak pomocí Wireframe Toolkit for Keynote vytvořit základní rozložení webové aplikace. Pokud můžete kopírovat a vkládat, můžete to udělat!
Co dostaneš
Stažení souboru Wireframe Toolkit vám poskytne rozsáhlý seznam šablon Keynote a Powerpoint. Jak je vidět na obrázku níže, dostanete čtyři různé verze šablon: Keynote '08, Keynote '09, Keynote pro iPad a Powerpoint.
Každá složka obsahuje několik různých nástrojů, jejichž cílem je poskytnout vám prvky rozhraní, které potřebujete pro navrhování pro iPhone, iPad a samozřejmě obyčejný starý web. Existuje také několik hotových příkladů, které můžete otevřít, abyste získali dojem, jak to funguje.
Snímky vs. Master Snímky
Chcete-li začít, najděte sadu nástrojů, se kterou chcete pracovat, a duplikujte ji ve Finderu. Práce s duplikátem vám umožní vše vážně zkazit, aniž by to ovlivnilo váš originál.
Otevřu „webovou“ šablonu pro náš projekt. Pokud nejste obeznámeni s tím, jak Keynote funguje, je to velmi podobné Powerpoint, pouze je to obvykle ještě intuitivnější. Okamžitě byste si měli všimnout pruhu diapozitivů na levé straně obrazovky. Tento proužek je rozdělen do dvou oblastí: Snímky (spodní) a Hlavní snímky (horní).
Master Slides v sadě nástrojů obsahují všechny předem vytvořené prvky, což znamená, že v podstatě platí za to, co platíte. Každá ze zahrnutých hlavních snímků má specifickou kategorii, která popisuje prvky uživatelského rozhraní uvnitř: formuláře, navigace, data, textové styly atd.
Většinou necháte Master Slides samy a přímo je nezměníte. Místo toho zkopírujete a vložíte prvky z hlavních snímků do normálních snímků. Vaše původní prvky šablony tak zůstanou nezměněny, takže je můžete znovu a znovu použít.
Pokud samozřejmě chcete provést globální změnu, která ovlivní vše, upravte existující hlavní snímek nebo dokonce vytvořte nový. Pokud tedy chcete například opakovaně použitelnou modrou verzi tlačítka, můžete duplikovat stávající tlačítko v hlavním snímku a změnit jeho barvu na modrou.
Vytvoření nového snímku
Chcete-li začít, klikněte na aktuální instruktážní pomoc v části „Snímky“ a poté stisknutím klávesy Command + Shift + N vytvořte nový snímek. Dále použijeme jeden ze zahrnutých stylů průvodce 960.gs, abychom získali obecnou šířku pro náš obsah. Chcete-li to provést, přetáhněte hlavní snímek 960 na normální snímek, který použije hlavní snímek jako pozadí.
Přidejte navigaci
Začneme s něčím, co téměř každý web potřebuje: navigace. Pokud se podíváte na hlavní snímek navigace, najdete několik možností. Najděte ten, který se vám líbí, a jednoduše jej zkopírujte / vložte do snímku. Bam, teď máme navigaci! Vidíš, jak snadné to bylo?
Jak vidíte, šířka navigace je již nastavena tak, aby odpovídala šířce vodítek, které jsme vybrali. Nyní, když máte prvek na snímku, můžete jej upravit, jak chcete, pomocí bohaté sady nástrojů Keynote. Zaměňte barvy, změňte text, je to všechno na vás!
K přidání kontejneru použijte nástroje Keynote Tools
Nyní si uvědomte, že nejste omezeni pouze na prvky obsažené v sadě nástrojů. Keynote i Powerpoint mají základní kreslicí nástroje, které vám mohou pomoci s vaší obecnou strukturou. Jako příklad jsem trochu vylepšil svou stránku přidáním výplně na pozadí a nakreslením jednoduchého pole pod navigací jako kontejner pro zbytek obsahu.
Změna velikosti objektů
Jednou z věcí, které na této sadě nástrojů opravdu oceňuji, je, jak dobře jsou objekty vytvořeny pro přizpůsobení. Řekněme například, že jsem do makety chtěl přidat několik widgetů, takže hodím do kalendáře a nabídky akordeonů. Problém je v tom, že nejsou stejné šířky, a kvůli vizuální konzistenci bych byl rád.
Při pohledu na akordeonové menu můžete vidět, že se jedná o složitý objekt, a instinktivně si myslet, že protažení vodorovně bude bolest. Určitě to zkomplikuje všechny ty vnořené prvky, že? Špatně! Jediné, co musíte udělat, je natáhnout ji tak, jak chcete, a vše zůstává přiměřené a krásné.
Dokončení makety
Nyní byste měli mít základní proces dolů. Odtud stačí pouze zkopírovat a vložit prvky ze sady nástrojů. V žádném okamžiku nemáme skvěle vypadající maketu, kterou lze snadno použít pro vývoj CMS nebo blogovací platformy.
Upřímně řečeno, poprvé, kdy jsem kdy otevřel sadu nástrojů, jsem dokázal přijít na proces a vytvořit rozvržení výše přibližně za deset minut! Nyní, když vím, co dělám, bych mohl udělat něco podobného asi za tři minuty. A já nejsem moc uživatel Keynote.
To je opravdu skvělý nástroj pro vytváření rychlých drátových modelů a maket. Určitě bych mohl udělat obrázek nahoře ve Photoshopu, ale určitě by mi trvalo mnohem déle, než jsem postavil tyto prvky od nuly!
Další příklady
Ukázka výše stěží škrábe povrch nejen toho, co s touto sadou nástrojů můžete udělat, ale i toho, co je v ceně. Podívejte se na tyto makety aplikací pro iPad a iPhone vytvořené výhradně pomocí nástroje Wireframe Toolkit pro Keynote.
Jedna věc, kterou si všimněte, je, že tlačítka v těchto verzích byla přeměněna na odkazy na další snímky. To znamená, že můžete skutečně projít hrubým pracovním prototypem navigace prohlížením prezentace a kliknutím na tlačítka! Jak je to v pohodě?
Pro koho je určen?
Wireframe Toolkit for Keynote je užitečný pro každého, kdo se zabývá vývojem webu nebo aplikací na jakékoli úrovni. Pokud nejste návrhář, je to skvělý způsob, jak ukázat návrháři obecnou představu o tom, co hledáte, aniž byste byli nuceni uchýlit se ke svým dovednostem MS Paint.
Pokud jste designér, je to úžasný a neuvěřitelně rychlý způsob, jak vymyslet mechaniku rozvržení. Možná si pomyslíte, že vás sada nástrojů omezí, ale ve skutečnosti je docela snadné osvobodit drátový model tak rychle, než se vydáte do Photoshopu nebo CSS a sestavíte prvky se specifickým stylem, který hledáte. Ve skutečnosti, pokud se vám nelíbí styl některého z prvků, jak jsme řekli výše, je snadné je změnit!
Skvělé, kde to mohu získat?
Sada drátových nástrojů pro Keynote je k dispozici kdykoli na Keynotekungfu.com za 12 USD. Věř mi, je to opravdu levné pro množství hodnoty, kterou z toho dostaneš.
Web také obsahuje spoustu dalších informací o tom, co je zahrnuto a jak je používat. Existuje dokonce několik opravdu skvělých instruktážních videí obsahujících užitečné tipy, jak co nejlépe využít Keynote pro wireframing.
