23Jul
Tužka je nástroj pro vytváření drátů, který můžeme použít k vykreslení modelu uživatelského rozhraní naší aplikace. Skvělá věc na tužce je, že je lehká, snadno použitelná a pevně integrovaná s aplikací Firefox. Navíc je to jeho bezplatná open source aplikace! Na konci článku vám poskytneme jednoduché ukázky, jak používat tužku, abyste vytvořili kostru typu Brizzly.
Proč vytváříme drátové rámy?
Drátěný rám je náčrtem nápadu rozložení stránky. Drátový rám se zaměřuje na informační návrh stránky, aby se zajistilo, že návrh vyhovuje potřebám uživatele. Drátěný rám se obvykle skládá z různých tvarů( jako jsou krabice, ovály a diamanty), které představují obsahové, funkční a navigační prvky. Tyto tvary zobrazují umístění na stránce.
Nejprve to může vypadat jako ztráta času vytváření drsných nákresů stránky. Drátěný rám je důležitý pro to, aby se uživatelé zaměřili na prvek důležitosti na vaší stránce. Vytváření hrubého náčrtu stránky bez fiktivních vizuálních prvků posunuje pozornost uživatele k důležitým prvkům, jako je velikost, rozložení a umístění součástí stránky. Začneme se lépe porozumět tomu, co klient opravdu chce a potřebuje ze softwaru, když se uživatel začne soustředit na důležité prvky stránky. Vytvoření drátěného rámečku vám umožní efektivně spolupracovat s Vašimi uživateli a předčasně identifikovat případný návrhový problém.
Začínáme s tužkou
Stáhněte tužku z doplňkové aplikace Pencil. Jakmile nainstalujete tužku, je přístupná z "Nástroje" & gt;"Skicování tužkou".
To vypadá Brizzly. Je to docela dobrá webová aplikace, která agreguje váš Facebook a Twitter na jedné stránce.
Toto je konec výsledku kabelového rámu. Hlavní tvary v tomto wireframe jsou, obdélníky, textové pole a karty. Další část článku vám poskytne jednoduchý příklad, jak vytvořit každý tvar.
Vytvoření obdélníku
Prvním krokem při vytváření tvaru drátěného rámu je tažení tvaru z nabídky "Shape Collections" na plátno.
Změňte velikost obdélníku na vhodnou šířku a výšku.
Můžeme přizpůsobit text, okraj a barvu pozadí libovolného tvaru v tužce. Klikněte pravým tlačítkem myši na obdélník a vyberte "Vlastnosti" pro otevření okna Vlastnosti. Toto je obrazovka vlastností pozadí.Nastavte barvu pozadí obdélníku na bílou( #FFFFFF).
Klepněte na kartu "Okraj" a upravte vlastnosti okraje. Nastavte barvu ohraničení na černou( # 000000) a změňte váhu okraje na 1.
Obrazovka vlastností textu umožňuje přizpůsobit typ písma, velikost, styl, hmotnost, barvu, jas a opacitu textu.
Vytváření záložek
Záložky domov, konceptů a obrázků jsou tři záložky, které jsou navzájem na sobě.Přetáhněte tři panely panelů do obdélníku. Změňte velikost každé záložky tak, aby se každá záložka zobrazovala vedle sebe.
Otevřete obrazovku vlastností textu a upravte barvu písma na kartě 'Obrázky' a 'Návrh'.Nastavte jej na šedé( # 989898).
Vytváření textu
Přetáhněte tvar textu na plátno a vytvořte jednotlivé nabídky. Vzhled textu upravíme tak, že přistupujeme k oknu vlastností textu.
Užitečné tipy pro změnu barvy
Barva je jednou z nejdůležitějších součástí dodávky příjemného drátěného rámu. Nejpřesnější způsob, jak změnit barvu tvaru, je zadání kódu HTML barvy. Zjistit kód HTML pro určitou barvu může být obtížné.Můžeme použít šifrovací list HTML z w3cschools.com pro vyhledání správného HTML kódu pro určitou barvu.
Rádi také používáme colorzilla k výběru barev z obrazovky a použití v Pencil. Klepnutím na ikonu oční kapky v levém dolním rohu prohlížeče Firefox vyberte barvu na obrazovce. Můžete také otevřít výběr barvy ColorZilla dvojitým kliknutím na ikonu oka. Stačí zkopírovat hexadecimální kód do barevného HTML kódu Pencil.
Závěr
Tužka je snadno použitelný nástroj pro frézování.Integrace tužky s aplikací Firefox nám umožňuje použít další doplněk Firefoxu, který vám pomůže vytvořit lepší drťový rám
Odkazy
Ke stažení Tužka
Stáhnout Colorzilla
W3C HTML Barva Cheat Sheet