Drop-Shadows og Gradients: Vær konsistent i dine visuelle metaforer
Drop-skygger og gradienter er to af de mest almindelige designelementer på nettet.
Du finder dem ledsaget af mange forskellige stilarter. De er praktiske effekter for webdesignere, fordi de er attraktive, nyttige og nemme at skabe med ethvert grafikprogram. Men de har en mørk side: de bliver ofte misbrugt .
Brug af amatørlige drop-shadows eller gradienter er næsten lige så dårlig som at anbringe et skarlet brev til din skjorte for at lade verden vide, at du er en nybegynder eller et hack. Selv subtile, næppe mærkbare fejl kan skabe spændinger, der undergraver ellers smukke og effektive designs.
I denne artikel ser vi på, hvilke drop-shadows og gradienter der gør , vi snakker om, hvordan man bruger dem effektivt, og vi vil se på nogle eksempler på fejl og hvordan de skal rettes.
Hvad gør Drop-Shadows og Gradients?
Arbejdet hos en webdesigner er at skabe mønstre for farve til glødende todimensionale skærme . (Der er nogle få undtagelser fra dette: Websteder kan ses på f.eks. En Kindle-skærm, som ikke lyser, og hjemmesider kan udskrives på papir.) Disse skærmbilleder afspejler ikke den virkelige verden; de er ikke engang meget ligesom den virkelige verden. Af denne grund har vi ingen reel nødvendighed for at få mønstre på vores hjemmesider at bære noget forhold til objekter i den tredimensionale verden, vi lever i.
Operativsystemer som Unix og DOS har en grænseflade, der kun er farvet tekst på en skærm. Andre, som Windows og Mac OS X, er fyldt med illusioner af rigtige objekter. OS X har f.eks. En docke, der ligner et bord med en skinnende overflade, der vender tilbage i afstanden, en menulinje, hvis afskårne kanter gør det til at se ud som det bøjer ud lidt, og rullebjælker, der ser ud til at have gennemskinnelige pastiller.
Alle disse effekter er metaforer. De behandler visse elementer, som vi kan interagere med på skærmen, som om de var tredimensionale genstande, der interagerer med lyskilder på den måde, som objekter i den ikke-digitale verden gør. Det er en sjov ting at gøre på en måde: Alle disse lyskilder og kanter og former er ren fantasi. Fordi objekterne på skærmen er imaginære, hvorfor skal vi forholde dem til objekter i den virkelige verden?
Illusionen af rummet forbinder det imaginære med en verden, vi er komfortable i.
Den vigtigste grund til, at vi relaterer imaginære objekter til virkelige verdener er, at vi er eksperter i at interagere med objekter i vores tredimensionale verden. Vi har erfaring med at håndtere tredimensionelle genstande, og vi har samlet viden om den visuelle kode, der fortæller os om forholdet mellem objekter til hinanden i rummet.
Det er delvist fordi fortolkningen af lys er så bemærkelsesværdigt, at vi tager glæden i illusion eller skaber udseendet af genstande. Vi er ofte mere engageret af dramatisk livlignende malerier af almindelige genstande som huse og æbler, end vi selv gør ved genstandene. Vi mennesker har skabt tegninger i tusinder af år, der er beregnet til at præsentere ideer om objekter. Illusoriske pastiller og borde på skærmen er intet andet end den seneste manifestation af denne lange tradition.
Der er dog mere end fornøjelse. Form og position giver os information om, hvordan objekter relaterer til hinanden. Den lange lodrette form af rullebjælken i Safari-vinduet skaber f.eks. Illusionen, at den sidder "højere" eller tættere på mig end de elementer, der omgiver den. Dette giver det større betydning i designet, hvilket er hensigtsmæssigt, fordi rullefeltet er et vigtigt grænsefladeelement til navigation af siden.
Visuelle metaforer skaber opfattet overvejelse.
Ved at vises som et objekt, skaber rullefeltet "opfattet" affordance . "Det vil sige, det forbinder sig selv ved metafor til egenskaberne af ægte genstande, der egner sig til bestemte anvendelser. En skråknap på en webside kommunikerer for eksempel, at den giver presser . Vi kan gøre noget på en side, der kan klikkes, men at tilknytte et klikbart element med billedet af noget, der kan trykkes, tyder på dets funktion på en klar, indlysende og endog behagelig måde.
Drop-skygger og gradienter er grundlæggende værktøjer til at skabe illusionen af rummet.
Drop-skygger og gradienter er to værktøjer, der hjælper med at skabe illusionen af tredimensionalitet og foreslå de rumlige forhold mellem objekter på siden. Når det gøres godt, gør denne tredimensionelle information et design smukkere og mere forståeligt.
I den virkelige verden skabes drop-skygger, når et objekt blokerer en lyskilde fra at ramme en overflade, der ligger bag den. Dette er en af grundene til, at folk siger, at drop-skygger gør todimensionale designs "pop": fordi de gør objekter tilsyneladende at stikke ud fra eller flyde over andre elementer.
Gradienter vises, når en del af en genstand er tættere på en lyskilde end en anden del. Som følge heraf vises den tættere del lysere, og den længere del vises mørkere. (Gradienter bliver mere komplekse, selvfølgelig, når flere lyskilder interagerer eller når lyskilder har forskellige farver.)
Ved at efterligne lysets virkninger i den virkelige verden kommunikerer drop-shadows og gradienter information om metaforiske objekter, imaginære lyskilder og deres relationer.
Sådan bruger du drop-shadows og gradienter effektivt
Her er en mulighed: Brug ikke faldskygger eller gradienter overhovedet.
Det mener jeg seriøst. Dette er den sikreste måde at undgå drop-shadow og gradient fejl, og muligheden bør altid overvejes.
Fordi kaste drop-shadows på tilfældige objekter er så let, kan de være en undskyldning for at undgå enklere, bedre løsninger på problemer. For tekststykker, der skal være mere fremtrædende, for eksempel vil designere ofte forsømme farve, størrelse, vægt af typen og mange andre elementer til fordel for en drop-skygge.
På samme måde bruger designere ofte gradienter for at få et farvefelt til at virke mindre kedeligt uden at finde ud af, hvorfor den samlede sammensætning ikke er dynamisk.
Hvis du arbejder på en kompilation for et websted, skal du gemme tredimensionale detaljer, f.eks. Drop-skygger og gradienter til slutningen , hvis det overhovedet er muligt. Brug mellemrum, placering og farve for at gøre designet effektivt, før du tilføjer det sidste lag af polsk. Hvis du fokuserer på at få dine designs til at fungere uden disse tricks, kan du opleve, at du ikke har brug for dem så ofte, og at de er mere effektive, når du bruger dem.
Før du plop i en drop-skygge eller en gradient, spørg dig selv: " Er en tredimensionel metafor nødvendig for dette design?" Bruger jeg det for at tilføje nyttige oplysninger om måden objekter er relateret til eller som en effektiv komponent i en lyd æstetisk tilgang, eller bruger jeg det som en undskyldning? "
Den subtilere, jo bedre
Til drop-skygger bruger du næsten aldrig Photoshops standardindstillinger. Photoshops standard dropshadow er meget mørk og er kastet til nederste højre hjørne af et objekt (den globale globale lyskilde er 120 °, øverst til venstre).
Skygger fortæller om lyset i dit miljø. Antag at du er i et mørkt rum uden vinduer, og du tænder for en lommelygte. Ethvert objekt, som du skinner det på, vil kaste en skygge, der næsten er sort. Det skyldes, at objektet blokerer lys fra den eneste lyskilde, hvilket betyder, at intet andet lys kommer fra andre steder for at lyse det område.
Nu vil skyggen ikke være helt sort på grund af det reflekterede lys. Nogle af lyset fra din lommelygte vil hoppe ud af væggene og ramme det skyggede område fra en retning, der ikke er blokeret af objektet. Og hvis du tænder en lampe i et andet hjørne af rummet, vil skyggen lyse betydeligt. Objektet kaster en anden skygge: Den nye skygge vises, hvor lyset fra lampen er blokeret, men bliver fyldt med lyset fra lommelygten, mens området af den første skygge stadig vil blive blokeret af lyset fra lommelygten, men vil blive fyldt med lyset fra lampen.
Når vi tilføjer drop-shadows til vores designs, foreslår vi et imaginært miljø for vores webside. Mørke, hårdskårne drop-skygger tyder på et mørkt rum med en enkelt lyskilde. Lette, bløde kantskygger tyder på et rum, der er rigeligt med diffust lys.
Et godt oplyst rum er det mest behagelige miljø for brugere, fordi det ligner det slags miljø, hvor vi bruger vores computere: et kontor eller en studie. Medmindre vi bevidst vil undgå denne komfortzone, bør vi bringe dropshadow-indstillingerne i Photoshop helt ned fra deres standardindstillinger. Tag opaciteten ned til 30 eller 40% eller endog lavere.
Hold også tingene simple, så folk forstår metaforen uden at tænke på det. En lyskilde ved 120 ° giver ikke stor mening. Mac OS X lægger for eksempel sin lyskilde på 90 ° eller lige over, hvilket synes mere logisk. Jeg kan godt lide at gøre det endnu enklere og sætte lyskilden direkte vinkelret på skærmen. For at gøre dette skal du bare indstille afstandsindstillingen på din dropshadow til nul (dette repræsenterer afstanden fra objektet, der kaster dropshadowen til objektet under det). På dette tidspunkt betyder det ikke noget globalt lys: det er simpelthen som om en stor diffus lyskilde kommer bag brugeren til at belyse designet.
Denne effekt er meget almindelig i "trompe-l'œil" -design, hvoraf den mest almindelige indeholder baggrundsbilledet eller rammen på en skrivebordsoverflade, som om man ser på den lige ovenfra. Film direktører som Alfred Hitchcock, Martin Scorcese og Wes Anderson anvende den samme virkning for deres underskrift af Guds øjne. Sådanne webdesign har en slags ubesværet forståelighed, og vedligeholdelse af konsistens på tværs af et design bliver lettere for designeren.
Hvis du har bragt afstandsindstillingen ned til 0 og opacitet ned til ca. 30%, er du et godt udgangspunkt for en drop-skygge. Spil rundt med størrelsen for at ændre, hvor langt objektets overflade ser ud til at være fra baggrunden, som den sidder på. Indstilling af størrelsen til 1 pixel giver for eksempel en smuk effekt, der næsten er usynlig, men ganske behagelig. Designer Dan Cederholm har lavet små, enkle effekter som dette en integreret del af hans stil (som det fremgår af hans seminal A List Apart-artikel om " Mountaintop Corners ”).
Du kan helt sikkert bringe opacitet op, hvis effekten er usynlig, men at starte subtile og derefter ringe op er meget bedre end det modsatte. Effekten bør ikke være den mindste smule mere åbenlys end den skal være.
For gradienter har Photoshop mange flotte standardindstillinger. Disse kan have nogle gode anvendelser, men de har helt sikkert ubegrænset dårlige anvendelser, så det er normalt klogt at styre dem klart.
I stedet skal du vælge den standard sort-hvide gradient. Vælg derefter både den sorte og den hvide og gøre dem til både grundfarven på dit element. Nu hvor du har en base, skal du vælge enten den mørke side eller lyssiden og justere den for at være bare lidt mørkere eller lettere. Igen, jo subtilere jo bedre . (Nogle af de bedste gradienter jeg har stødt på var jeg nødt til at verificere med eyedropper værktøjet i Photoshop for at sikre, at de var der overhovedet!)
Jo større kontrast mellem lys og mørke, rounder overfladen vises. For nogle ting, som f.eks. Navigationsmenuer og knapper, er nogle runder passende. Men for objekter, der skal vises fladt, hold kontrasten lav.
Og husk, at den lysere side skal vende mod retningen af din lyskilde.
Denne form for gradient er vidunderlig, fordi den efterligner gradienterne vi ser rundt om os hele tiden. Intet i den virkelige verden er virkelig et enkelt farvefelt, fordi det altid har en slags forhold til en lyskilde. Se omhyggeligt på siderne i en bog eller i loftet omkring dit overlys: Du finder overgraderinger overalt.
Eksempler på fejl og hvordan man løser dem
Internettet har mange tydeligvis grimme gradienter, men det gøres normalt ikke af professionelle designere. I stedet for at vise egregente fejl, vil jeg illustrere nogle måder, hvor subtile fejl kan skabe spændinger i ellers fremragende design.
Ensartede skygger til overlappende objekter
Overlappende genstande indebærer en forskel i deres afstand fra dig (bestemt dels ved deres tykkelse). Designere bruger dog ofte identiske drop-shadows til overlappende objekter. Således er informationerne fra drop-skyggerne i modstrid med de informationer, der overføres af overlapningen, og underminerer illusionen om dimensionalitet.
At se konflikter som disse gør mig urolig, og jo mere jeg fokuserer på dem, jo mere har mit hoved ondt. Brugere skal have glæde i dit design, ikke føler smerte!
Du kan læse mere om dette problem i " Byg en bedre drop-shadow , "En vejledning af Jacci Howard Bear på About.com.
Abrupte kanter
Hjørnerne af ægte drop-skygger ville ikke have hårde kanter, medmindre de havde absolut ingen reflekteret lys - hvilket ville være en meget usædvanlig situation. Snarere afrundes deres hjørner normalt af lysets stråler, der kryber rundt om dem.
Her er en drop-skygge med en urealistisk hård kant:
Dette ellers dejlige design har næsten ingen dimensional illusion overalt, men har en drop-skygge langs højre sidebjælke. Designeren ønskede måske at sænke sidebarens hierarki på siden, en effekt som den blå baggrund hjælper med at opnå. Ikke alene er det dog unødigt mørkt, men den ufatteligt hårde kant stirrer den besøgende i ansigtet.
Nederst i sidebjælken kan du se en afrundet overgang, hvor designeren har skabt en mere plausibel effekt. Men du kan se, hvorfor han ikke gentagte det øverst, fordi det ville krukke med den rene vandrette linje indstillet af de godt justerede topelementer. I stedet for at kræve realiteten af denne afrundede overgang, lad os rette den ved at toning ned dråbeskyggen så meget som muligt.
Her har jeg lavet drop-skyggen så lys, at den gør lidt mere end at foreslå, at den sidder længere tilbage. Fordi det er så let, er den rene overgangslinje ikke grim eller distraherende.
Hvad er det der foregår bag denne genstand?
Nogle gange går en dråbe-skygge ikke uden åbenbar grund, som med den blå boks, der omgiver W3C-logoet nedenfor.
Hvorfor er dropskyggen hidtil tilbage fra objektet, og så afrundet? Jo mere jeg forsøger at forstå historien, der bliver fortalt af denne dropshadow, jo mere forvirret får jeg. Mit gæt er, at designeren ønskede at give mere prominens og vægt på logoet, som dropshadow hjælper med at opnå, men det forstyrrer sidens harmoni så meget, at det ikke er det værd.
Lad ikke dine gradienter foreslå forskellige lyskilder.
I dette ellers fremragende design til WolframAlpha har objekter på siden gradienter fra hvide til lys orange. Problemet er, at gradienten i overskriftsområdet har hvidt øverst, hvilket betyder lys ovenfra, mens sideelementerne ligger nedad, har hvidt nederst, hvilket betyder lys nedenunder.
Du kan argumentere for, at jeg overvejer dette, at gradienter ikke behøver at svare til lyskilder. Det er muligt, men subtile gradienter som disse har et iboende metaforisk forhold til de gradienter vi ser i den virkelige verden. Lad os skifte retningen af gradienterne nedad ned på siden, så de indebærer en lyskilde ovenfra:
Og vi får lyskilde harmoni.
I sidste ende er du fri til at gøre som du vil.
Fordi objekterne på en webside kun vedrører reelle objekter med metafor, er deres effektivitet i det væsentlige subjektiv. Forbindelsen mellem et billede af en knap og en faktisk knap har ingen virkelighed ud over brugerens sind.
Vi designere er ikke forpligtet til at gøre vores metaforer i overensstemmelse med virkeligheden, men at være omtanke og omhyggelig med de mange niveauer af kommunikation i et design hjælper os med at gøre vores hjemmesider mere harmoniske.
Og vores omhu og konsistens hjælper med at gøre brugerens oplevelse af hjemmesiden behagelig og endda dejlig.
Skrevet udelukkende til WDD af Nate Eagle . Han studerede filosofi på college, en uddannelse, der forberedte ham perfekt til at designe og udvikle websider til PBS KIDS. Du kan læse mere fra ham og hans PBS medarbejdere på Design.PBS .
Tror du, at dette detaljeringsniveau er vigtigt, når du designer dropshadows og gradienter? Har du dit eget kæledyr, om hvordan drop-shadows og gradienter bruges?