Drop-Shadows a přechody: Buďte konzistentní ve svých vizuálních metaforách
Stropní stíny a přechody jsou dva z nejběžnějších návrhových prvků na webu.
Najdete je doprovázet mnoho různých stylů. Jsou to užitečné efekty pro webové designéry, protože jsou atraktivní, užitečné a snadno se vytvářejí s libovolným grafickým programem. Ale mají temnou stránku: jsou často zneužívány .
Použití amatérských stínů nebo sklonů je téměř tak špatné, jako připevnění šarlatového dopisu na tričko, aby svět věděl, že jste začátečník nebo hák. Dokonce i jemné, sotva znatelné chyby mohou vytvořit napětí, které podkopávají jinak krásné a efektivní návrhy.
V tomto článku se podíváme na to, co dělají stíny a stoupání , budeme hovořit o tom, jak je účinně používat, a podíváme se na některé příklady chyb a jejich opravy.
Co dělají stíny a přechody?
Úkolem webdesignera je vytvářet vzory barev pro zářící dvourozměrné obrazovky . (Existuje několik výjimek z toho: webové stránky mohou být zobrazeny například na obrazovce Kindle, která není zářená a webové stránky mohou být vytištěny na papíře.) Tyto obrazovky neodrážejí skutečný svět; nejsou dokonce ani jako skutečný svět. Z tohoto důvodu nemáme žádný skutečný imperativ, aby vzory na našich webových stránkách nesou jakýkoliv vztah k objektům v trojrozměrném světě, ve kterém žijeme.
Operační systémy jako Unix a DOS mají rozhraní, které není na obrazovce nic jiného než barevný text. Jiné, jako Windows a Mac OS X, jsou plné iluzí skutečných objektů. Například OS X má dokovací stanici, která vypadá jako stůl s lesklým povrchem, který se v dálce ustupuje, lištu nabídek, jejíž zkosené hrany vypadají tak, že se mírně vyčnívají, a posuvníky, které mají průsvitné pastilky.
Všechny tyto účinky jsou metaforami. Oni zacházejí s určitými prvky, s nimiž můžeme na obrazovce reagovat, jako by to byly trojrozměrné objekty, které interagují se zdroji světla tak, jak to dělají objekty v nedigitálním světě. Je to legrační věc, jakým způsobem: všechny tyto světelné zdroje a hrany a tvary jsou čisté fantazie. Protože objekty na obrazovce jsou imaginární, proč bychom je měli propojit s objekty v reálném světě?
Iluze prostoru spojuje imaginární s světem, v němž žijeme pohodlně.
Nejdůležitějším důvodem, proč spojíme imaginární objekty s reálnými, je to, že jsme odborníci na interakce s objekty v našem trojrozměrném světě. Máme zkušenosti s řešením trojrozměrných objektů a shromáždili jsme znalosti o vizuálním kódu, který nám říká vzájemné vztahy objektů k vesmíru.
Je to částečně proto, že výkonnost tlumočení světla je tak pozoruhodná, že přijímáme takové potěšení z iluze nebo vytváření vzhledu objektů. Často se zabýváme dramatickými životními malbami ze společných objektů, jako jsou domy a jablka, než my samotné objekty. My lidé jsme vytvořili kresby po tisíce let, které mají představovat myšlenky předmětů. Ilustrovské pastilky a stoly na obrazovce nejsou ničím jiným než posledním projevem této dlouhé tradice.
Je to víc než potěšení. Tvar a pozice nám poskytují informace o vzájemném vztahu objektů. Dlouhý svislý pastelový tvar posuvníku v okně Safari například vytváří iluzi, že sedí "nahoře" nebo blíž ke mně než k okolním prvkům. To dává větší pozornost návrhu, což je vhodné, protože posuvník je nezbytným prvkem rozhraní pro navigaci na stránce.
Vizuální metafory vytvářejí vnímaný výnos.
Když se objeví jako objekt, posuvník vytvoří "vnímán výnos . "To znamená, že se propojuje metaforou s vlastnostmi reálných objektů, které se hodí k určitému použití. Šikmé tlačítko na webové stránce například oznamuje, že umožňuje stisknutí tlačítka . Na stránce, na kterou lze kliknout, můžeme dělat cokoli, ale přidružení prvku, na který lze kliknout, s obrazem něčeho stlačitelného naznačuje jeho funkci jasným, zřejmým a dokonce příjemným způsobem.
Stropní stíny a přechody jsou základními nástroji pro vytvoření iluze prostoru.
Drop-stíny a přechody jsou dva nástroje, které pomáhají vytvořit iluzi trojrozměrnosti a navrhují prostorové vztahy objektů na stránce. Když je to dobře provedeno, tato trojrozměrná informace činí design krásnějším a srozumitelnějším.
V reálném světě jsou stíny stínů vytvořeny, když objekt blokuje zdroj světla z úderu na povrch, který je za ním. To je jeden z důvodů, proč lidé říkají, že drop-stíny dělají dvojrozměrné vzory "pop": protože vytvářejí objekty, které vypadají, že se vynořují z jiných elementů nebo se vznášejí nad nimi.
Přechody se objevují, když je jedna část objektu bližší světelnému zdroji než jiný díl. Výsledkem je, že bližší část se objeví na světlejší a delší část se objeví tmavší. (Přechody jsou složitější, samozřejmě, když se vzájemně snáší více světelných zdrojů nebo když zdroje světla mají odlišné barvy.)
Takže napodobováním účinků světla v reálném světě sdělují informace o metaforických objektech, imaginárních světelných zdrojích a jejich vztazích.
Jak efektivně používat stíny a přechody
Zde je jedna možnost: nepoužívejte vůbec žádné stíny nebo přechody.
To myslím vážně. Jedná se o nejjistější způsob, jak se vyhnout chybě stínu a přechodu, a možnost by měla být vždy brána v úvahu.
Vzhledem k tomu, že házení stínů na náhodných objektech je tak snadné, mohou být výmluvou, aby se zamezilo jednodušším a lépe řešitelným problémům. Pro bity textu, které potřebují být více prominentní, například návrháři často zanedbávají barvu, velikost, váhu typu a mnoho dalších prvků ve prospěch stínu.
Podobně návrháři často používají gradienty, aby se zbarvení zdálo být méně nudné, aniž by bylo zjištěno, proč celková kompozice není dynamická.
Pokud pracujete na kompozici pro webové stránky, uložíte- li to v každém případě trojrozměrné dotyky, jako jsou stíny a přechody . Použijte rozteč, umístění a barvu, abyste provedli design před přidáním konečné vrstvy lesku. Pokud se soustředíte na to, aby vaše návrhy fungovaly bez těchto triků, možná byste zjistili, že je nepotřebujete tak často, a že jsou efektivnější, když je používáte.
Předtím, než se zaplníte ve stínu nebo ve stoupání, zeptejte se sami sebe: " Je pro tuto konstrukci nezbytná trojrozměrná metafora?" Používám ji k přidávání užitečných informací o tom, jak jsou objekty související nebo zda jsou efektivní součástí zvuku estetický přístup, nebo jej používám jako výmluvu? "
The Subtler, tím lepší
Pro stíny , téměř nikdy nepoužívejte výchozí nastavení aplikace Photoshop. Výchozí odstín Photoshopu je velmi tmavý a je umístěn do pravého dolního rohu objektu (výchozí globální zdroj světla je 120 ° v levém horním rohu).
Stíny vám řeknou o světle ve vašem prostředí. Předpokládejme, že jste v temné místnosti bez oken a zapnete baterku. Jakýkoli objekt, na němž budete svítit, vrhne stín, který je téměř černý. To proto, že objekt blokuje světlo z jediného zdroje světla, což znamená, že nikde jinde nenastane žádné světlo, které by zesvětlilo tuto oblast.
Nyní nebude stín úplně černý z důvodu odraženého světla. Některé světlo z baterky se odrazí od stěn a zasáhne stínovanou oblast ze směru, který není předmětem zablokován. A pokud zapnete lampu v jiném rohu místnosti, stín se značně rozjasní. Objekt vrhá druhý stín: objeví se nový stín, kde je světlo z lampy zablokováno, ale bude naplněno světlem z baterky, zatímco oblast prvního stínu bude stále blokována světlem z baterky, ale bude naplněn světlem ze žárovky.
Když do našich návrhů přidáme stíny, navrhujeme imaginární prostředí pro naši webovou stránku. Tmavé, tvrdé ostré stíny naznačují tmavý pokoj s jediným světelným zdrojem. Lehké, měkké okraje stínu znamenají místnost bohatou difuzním světlem.
Dobře osvětlená místnost je pro uživatele nejpohodlnější, protože je podobná prostředí, ve kterém používáme naše počítače: kancelář nebo studium. Pokud se záměrně nechceme vyhnout této komfortní zóně, měli bychom přinést nastavení Photoshopu na pozadí stínu. Přizpůsobte opacitu až na 30 nebo 40% nebo dokonce nižší.
Udržujte věci tak jednoduché, aby lidé pochopili metaforu, aniž by o tom přemýšleli. Zdroj světla ve 120 ° nemá velký smysl. Mac OS X, například, umisťuje světelný zdroj na 90 °, nebo přímo nad, což se zdá logičtější. Líbí se mi to ještě jednodušší a světelný zdroj umístěte přímo na obrazovku. Chcete-li to provést, stačí nastavit vzdálenost na stínování na nulu (to představuje vzdálenost od objektu, který odklání stín na objekt pod ním). V tomto bodě globální světlo nezáleží na tom, že je to prostě, jako kdyby zesměroval velký zdroj difuzního světla za účelem osvětlení konstrukce.
Tento efekt je velmi běžný v provedeních "trompe-l'œil" , z nichž nejběžnější je obraz na pozadí nebo rámeček stolního povrchu, jako kdyby se na něj dívaly přímo zhora. Filmové režiséři jako Alfred Hitchcock, Martin Scorcese a Wes Anderson využívají stejný účinek pro své podpisy s výhledem na Boží zrak. Takové návrhy webů mají určitou snadnou srozumitelnost a zachování konzistence v návrhu je pro konstruktéra snazší.
Pokud jste nastavili vzdálenost až na 0 a neprůhlednost až na 30%, jste v dobrém výchozím bodě pro stín. Zahrajte si s velikostí, abyste změnili, jak daleko vypadá povrch objektu z pozadí, na kterém sedí. Nastavení velikosti na 1 pixel, například, vám dává krásný efekt, který je téměř neviditelný, ale docela příjemný. Návrhář Dan Cederholm dělal malé, jednoduché efekty, jako je tato, nedílnou součástí jeho stylu (jak to dokazuje jeho klíčový A List Apart článek o " Mountaintop Corners ").
Můžete určitě přinést neprůhlednost, pokud je efekt neviditelný, ale začíná být jemný a pak vytočení je mnohem lepší než naopak. Efekt by neměl být ani nejmenší, než by měl být.
Pro gradienty, Photoshop má mnoho fantazie výchozí. Ty mohou mít některé dobré využití, ale určitě mají neomezené špatné využití, takže je jasné, že je z nich obvykle moudré.
Místo toho vyberte výchozí přechod černobílého na bílý. Pak vyberte černou a bílou barvu a vytvořte obě základní barvu prvku. Nyní, když máte základnu, vyberte buď tmavou nebo světelnou stranu a upravte ji tak, aby byla jen trochu tmavší nebo lehčí. Opět, jemnější, tím lépe . (Některé z nejlepších přechodů, které jsem narazil, musel jsem ověřit pomocí nástroje pro kapátko ve Photoshopu, aby se ujistil, že tam vůbec existují!)
Čím větší je kontrast mezi světlem a tmou, objeví se to na povrchu. U některých věcí, jako jsou navigační nabídky a tlačítka, je vhodná určitá kulatost. Ale u objektů, které by se měly zdát ploché, udržujte kontrast nízký.
A pamatujte, že světlejší strana by měla čelit směru světelného zdroje.
Tento druh přechodu je úžasný, protože napodobuje přechody, které vidíme kolem nás po celou dobu. Nic v reálném světě není opravdu jediné barevné pole, protože má vždy nějaký vztah ke světelnému zdroji. Podívejte se pozorně na stránky knihy nebo na strop kolem světla: všude najdete gradienty.
Příklady chyb a jejich řešení
Web má mnoho zjevně ošklivých přechodů, ale většinou to nejsou profesionální designéři. Spíše než poukazovat na nevyléčitelné chyby, ukážu několik způsobů, kterými mohou jemné chyby vytvářet napětí v jinak výjimečném provedení.
Jednotné stíny pro překrývající se objekty
Překrývající se objekty znamenají rozdíl v jejich vzdálenosti od vás (určená částečně podle jejich tloušťky). Návrháři však často používají shodné stíny pro překrývající se objekty. Takže informace přenášené stínovými stíny jsou v rozporu s informacemi přenášenými překrýváním, což podkopává iluzi dimenzionality.
Vidět konflikty, jako jsou tyhle, mě znepokojuje a čím více se na ně soustředím, tím víc bolesti hlavy. Uživatelé by měli užívat váš design, ne cítit bolest!
Další informace o tomto problému naleznete v části " Vytvořte lepší stín , "Průvodce podle Jacci Howarda Bear na About.com.
Náhlé hrany
Koutky skutečných stínů by neměly tvrdé hrany, pokud by neměly absolutně žádné odražené světlo - což by byla velmi neobvyklá situace. Spíše jsou jejich rohy obvykle zaoblené paprsky světla, které se kolem nich plouží.
Zde je stín s nepravidelnou tvrdostí:
Tento jinak krásný design má téměř žádnou rozměrovou iluzi nikde, ale má pravý boční pruh stínu. Návrhář možná chtěl snížit postranní pruh hierarchie na stránce, efekt, který jeho modré pozadí pomáhá dosáhnout. Nejenže je to zbytečně tmavé, ale nepravděpodobně tvrdá hrana zírá návštěvníka do obličeje.
Ve spodní části postranního panelu můžete vidět zakulacený přechod, kdy návrhář vytvořil více věrohodný efekt. Ale uvidíte, proč to neopakoval na vrcholu, protože by to bylo s čistou horizontální čárou nastavenou dobře zarovnanými horními prvky. Spíše než požadovat realismus tohoto zaokrouhleného přechodu, pojďme to opravit tím, že tonizujeme co nejvíce stín.
Zde jsem udělal ten stín tak lehký, že dělá něco víc, než naznačuje, že sedí dál. Protože je to tak lehké, čistá linie přechodu není ošklivá nebo rušivá.
Co se za tím objektem děje?
Někdy se kvůli zřejmému důvodu, jako v případě modré krabice, která obklopuje logo W3C, objevuje tmavý stín.
Proč je stín, který je tak daleko od objektu, a tak zaoblený? Čím víc se snažím porozumět příběhu, o němž říká tento stínový stín, tím více se mýlí. Můj odhad je, že návrhář chtěl věnovat více významu a váhu logu, kterou pomáhá dosažení stínu, ale narušuje harmonii stránky tak, že to nestojí za to.
Nenechte své přechody navrhnout různé zdroje světla.
V této jinak vynikající konstrukci pro WolframAlpha objekty na stránce mají přechody od bílé až bledě oranžové. Problém spočívá v tom, že gradient v oblasti hlavičky má v horní části bílou barvu, což znamená světlo shora, zatímco prvky dolní části stránky mají nahoře bílou barvu, což znamená světlo zespodu.
Mohli byste tvrdit, že jsem nad tím přemýšlel, že přechody nemusí odpovídat světelným zdrojům. To je možné, ale jemné přechody jako tyto mají inherentní metaforický vztah ke sklonům, které vidíme v reálném světě. Přepínejme směr sklonů dolů na stránku tak, aby naznačovali zdroj světla zhora:
A získáváme harmonii světelného zdroje.
Nakonec můžete dělat, jak chcete.
Protože objekty na webové stránce se týkají skutečných objektů pouze metaforou, jejich účinnost je v podstatě subjektivní. Spojení mezi obrazem tlačítka a aktuálním tlačítkem nemá žádnou realitu mimo mysl uživatele.
My od návrhářů se nevyžaduje, aby naše metafory odpovídaly skutečnosti, ale přemýšlení a opatrnost ohledně mnoha úrovní komunikace v designu nám pomáhá učinit naše webové stránky více harmonickými.
A naše péče a konzistence napomáhá učinit uživatelům zkušenosti z webových stránek pohodlné a dokonce i nádherné.
Napsáno výhradně pro WDD Nate Eagle . Studoval filozofii na vysoké škole, vzdělání, které mu dokonale připravilo návrh a vývoj webových stránek pro PBS KIDS. Více informací o něm a jeho spolupracovnících na PBS si můžete přečíst Design.PBS .
Myslíte si, že tato úroveň detailů je důležitá při navrhování stínů a sklonů? Máte své vlastní mazlíčky o tom, jak se používají stíny a stoupání?