Používáte-li barvy v drátěných rámcích ... je to „ne ne“?
Nedávno byla zahájena interní debata o používání barev v drátových modelech. Junior designér dokončil pěkný soubor drátových modelů a na konci bylo řečeno, aby vše proměnilo v odstíny šedé! Bylo jim řečeno, že barva by neměla být v drátěných rámech.
Vidím několik důvodů, proč může navrhování v odstínech šedé pomoci:
- pro usnadnění přístupu (takže nemusíte spoléhat na barvy pro rozlišení)
- nemýlit sdělování vizuálního designu v drátových modelech (někdy mohou klienti přiřadit volbu barvy k rozhodnutí o vizuálním designu na rozdíl od způsobu komunikace vizuálního rozdílu)
Vlastně používám paletu barevných ikon a používám barvy, abych pomohl sdělit vizuální rozdíl. Někdy je toho tolik, co můžete udělat s použitím různých odstínů šedé nebo pomocí vzorů.
Jaká je tam běžná praxe? Viděl jsem drátové snímky s barvou i bez ní.
Zní to, jako by se vaši kolegové trochu ztratili v domněnkách, aniž by přemýšleli o tom, jaký je účel drátového modelu. Začněme volná definice poskytovaná Wikipedií :
Drátový model webové stránky (také „rámeček webového drátu“, „webový drátový model“, „webový drátový model“) je základní vizuální průvodce používaný při návrhu rozhraní k navrhování struktury webových stránek a vztahů mezi jejími stránkami. Drátový model webové stránky je podobným znázorněním rozložení základních prvků v rozhraní. Drátové snímky jsou obvykle dokončeny před vývojem jakéhokoli uměleckého díla.
Stejně jako u každého slova nebo termínu je důležité zvážit, co to ve skutečnosti znamená. wire-frame model je termín používaný v 3D modelování, když mluvíme o reprezentaci fyzické struktury polygonálního modelu, který je vykreslen zobrazením spojovacích bodů mezi vrcholy. Jaký je smysl modelu drátu? Je to ukázat „odvahu“ struktury tak, aby lépe porozuměla jejímu složení.
Při převodu na webovou stránku wireframing, jak o tom diskutuje Wikipedia, bychom měli zvážit, jak tento význam platí, a definice Wikipedie to přibíjí: „základní vizuální průvodce používaný k navrhování struktury webové stránky a vztahů mezi jejími stránkami“.
Jak můžete říci, není zde zmínka o barvě ani o tom, jak by měl tento vizuální průvodce vypadat. Vše, na čem záleží, je to, že navrhuje, jak struktura webu funguje. Pokud to dosáhne, je to efektivní drátový model. Jedná se například o "platné" drátové snímky:
- skici na ubrousek
- náčrtky v 37signals 'Draft nebo nějaké jiné aplikaci na iPad
- útržkovitě vypadající drátové modely vytvořené pomocí nástroje jako Balsamiq Mockups
- pevněji vypadající drátové modely vyrobené pomocí něco jako Axure nebo Illustrator
- lehké návrhy webu vytvořené ve Photoshopu, kde je zřejmá struktura stránky, přičemž v případě potřeby obsahuje prvky designu
- Exportovatelné návrhy HTML v aplikaci Fireworks, které vám umožní zjistit, z jakých prvků se stránka skládá
- plně interaktivní drátové rámce HTML/CSS
Je to jen věrnost a detail. Možná byste si měli ujasnit, jaký druh věrnosti se očekává v dodávce, a vést své designéry touto cestou. Ale nejde o to, „pokud by barva měla být použita v drátovém modelu“ - pokud barva pomáhá komunikovat strukturu webu, pak by měla být absolutně použita barva v drátovém modelu!
Souhlasím.
Barva obvykle přináší emocionální/kulturní podtext k diskusi, která „má“ být o základní struktuře, rozvržení a IA (informační architektuře). I když o tom lze diskutovat, můžeme souhlasit s tím, že použití barvy přinese přinejmenším další informace vykreslení.
Celým bodem drátového modelu je komunikovat POUZE to, co je nezbytné a nic jiného.
Podle mých zkušeností v praxi lidé používají termín „drátový model“, aby znamenali každý z artefaktů, které Rahul uvádí.
Z mé zkušenosti je to hlavně druhý důvod, který jste uvedli:
- Někdy se dokonce interní zúčastněné strany pletou z drátových modelů, které vypadají příliš „skutečně“. Makety My Axure jsou mnohem vyšší věrnost než jiné makety aplikace PowerPoint používané v mé organizaci, takže někdy dostávám komentáře, které mají co do činění s grafickým designem, jako jsou tlačítka vypadající jinak nebo panely neupravující jejich výšku podle obsahu atd.
- Můj přítel vytvořil takový hi-fi drátový model, který si zákazník vlastně tak oblíbil, že jej ihned implementoval :)
Šel jsem z šedé stupnice na plnou barvu a zase zpět. Považuji plnobarevné tendence za skutečné rozptýlení diskusí, ke kterým musí dojít.
Pokud jde o vedlejší poznámku, právě jsem se stal projektem, ve kterém mezi mnou a vývojáři neexistuje grafický designér, a proto „realistické“ nebo „opravdu hezké“ drátěné rámečky riskují, že budou implementovány tak, jak jsou. To do značné míry zaručuje katastrofu, protože nejsem žádný grafik ...
Jednou nevýhodou barev na drátovém modelu je to, že - spolu s (tím, co je vnímáno) vyšší věrohodností ovládacích prvků a podobně - dříve nebo později jeden z vašich vývojářů bude předpokládat, že musí udělat GUI vzhled stejně jako drátový model.
Vím. Vím. To ukazuje na hlavní mylnou představu o účelu drátového modelu.
Ale opravdu se to stane.
Mám tendenci vyhradit použití barev pro anotování komponent. Zajistím, aby kousky textu, které se mají chovat jako hypertextové odkazy, byly například modré a podtržené, přestože by konečný vzhled webu mohl mít úplně jiný barevný příběh. Kousky textu, které nejsou statické a liší se podle vstupu uživatele, získají jinou barvu. Pokud existují různé krabice a čáry, které jsou na pochybách, nebo vím, že potřebují více leštění, nastavím je na červené čáry. Bloky textu, které jsou anotacemi upuštěnými přímo na drátěný model, získají bledě žluté pozadí.
Je to velmi děsivé dívat se na to, vizuálně, ale slouží ke komunikaci. Nezastupovat.
Osobně si myslím, že je v pořádku používat barvu, pokud poskytuje nějakou funkci.
Mám tendenci používat barvu na interaktivních prvcích mých drátových modelů, jako jsou odkazy a tlačítka modrá. To pomáhá jasně zvýraznit interaktivní prvky při prezentaci klientovi.
Také jsem použil zelenou, oranžovou a červenou k označení různých varovných stavů v seznamu položek. Zjistil jsem, že to pomohlo rychleji komunikovat funkčnost s klientem, což bylo méně patrné v dřívějších čistě šedých verzích.
Nepoužil bych však barvu jako dekorativní prvek, alespoň ne v dřívějších drátěných modelech nebo maketách. Jak někteří reagovali, klienti se někdy mohou dohnat, jak něco „vypadá“, a jak to funguje. To může proces trochu zpomalit.