Drop-Shadows och Gradients: Var konsekvent i dina visuella metaforer
Drop-skuggor och gradienter är två av de vanligaste designelementen på webben.
Du hittar dem som åtföljer många olika stilar. De är praktiska effekter för webbdesigners eftersom de är attraktiva, användbara och enkla att skapa med något grafikprogram. Men de har en mörk sida: de missbrukas ofta .
Att använda amatöriska drop-skuggor eller gradienter är nästan lika illa som att fästa en skarlet brev till din tröja för att låta världen veta att du är en nybörjare eller ett hack. Även subtila, knappt märkbara misstag kan skapa spänningar som undergräver annars vackra och effektiva mönster.
I den här artikeln ska vi titta på vilka drop-skuggor och gradienter som gör , vi talar om hur man använder dem effektivt och vi ska titta på några exempel på misstag och hur man åtgärdar dem.
Vad gör Drop-Shadows och Gradients?
Arbetet med en webbdesigner är att skapa färgmönster för glödande tvådimensionella skärmar . (Det finns några få undantag för detta: webbplatser kan ses på, t ex en Kindle-skärm, som inte lyser, och webbplatser kan skrivas ut på papper.) Dessa skärmar speglar inte den verkliga världen; de är inte ens lika mycket som den verkliga världen. Av denna anledning har vi ingen verklig nödvändighet för att göra mönstren på våra webbplatser bära några förhållanden till föremål i den tredimensionella världen vi bor i.
Operativsystem som Unix och DOS har ett gränssnitt som bara är en färgad text på en skärm. Andra, som Windows och Mac OS X, är fyllda med illusioner av verkliga objekt. OS X har till exempel en docka som ser ut som ett bord med en glänsande yta som avtar på avstånd, en menyrade vars avfasade kanter ser ut som om den blåser ut något och rullar som verkar ha genomskinliga pastiller.
Alla dessa effekter är metaforer. De behandlar vissa element som vi kan interagera med på skärmen som om de var tredimensionella föremål som interagerar med ljuskällor på det sätt som objekt i den icke-digitala världen gör. Det är en rolig sak att göra på ett sätt: alla dessa ljuskällor och kanter och former är ren fantasi. Eftersom objekten på skärmen är imaginära, varför ska vi relatera dem till föremålen i den verkliga världen?
Illusionen av rymden förbinder det imaginära med en värld vi är bekväma att leva i.
Den viktigaste anledningen till att vi relaterar imaginära föremål till den verkliga världen är att vi är experter på att interagera med objekt i vår tredimensionella värld. Vi har erfarenhet av att hantera tredimensionella föremål, och vi har ackumulerat kunskap om den visuella koden som berättar om relationerna mellan objekt till varandra i rymden.
Det beror delvis på att det är så anmärkningsvärt att tolka ljuset så att vi tar ett sådant nöje i illusion eller att skapa objektets utseende . Vi är ofta mer engagerade av dramatiskt livsliknande målningar av vanliga föremål som hus och äpplen än vi är av föremålen själva. Vi människor har skapat ritningar i tusentals år som är avsedda att presentera objektens idéer . Illusoriska pastiller och bord på skärmen är ingenting annat än den senaste manifestationen av denna långa tradition.
Det finns dock mer än nöje. Form och position ger oss information om hur objekt relaterar till varandra. Den långa vertikala glidformen på rullningsfältet i Safari-fönstret skapar exempelvis illusionen att den sitter "högre" eller närmare, än de element som omger den. Detta ger det större betydelse i konstruktionen, vilket är lämpligt eftersom rullningsfältet är ett viktigt gränssnittselement för att navigera på sidan.
Visuella metaforer skapar uppfattad förmån.
Genom att visas som ett objekt skapar rullningsfältet "uppfattas affordance . "Det innebär att det länkar till sig själv genom metafor till egenskaperna hos reella föremål som låter sig använda särskilda användningsområden. En avfasad knapp på en webbsida kommunicerar till exempel att den ger tryckning . Vi kan göra något på en sida som kan klickas, men att associera ett klickbart element med bilden av någonting pressbar föreslår sin funktion på ett tydligt, uppenbart och till och med tilltalande sätt.
Drop-skuggor och gradienter är grundläggande verktyg för att skapa en illusion av rymden.
Drop-skuggor och gradienter är två verktyg som hjälper till att skapa illusionen av tredimensionell och föreslå de rumsliga relationerna mellan objekt på sidan. När det är klart gör denna tredimensionella information en design vackrare och mer förståelig.
I den verkliga världen skapas droppskuggor när ett objekt blockerar en ljuskälla från att träffa en yta som ligger bakom den. Detta är en av anledningarna till att folk säger att droppskuggor gör tvådimensionella mönster "pop": eftersom de gör att föremål verkar sticka ut från eller flyta över andra element.
Gradienter uppträder när en del av ett objekt ligger närmare en ljuskälla än en annan del. Som ett resultat verkar den närmare delen ljusare, och den längre delen visas mörkare. (Gradienter blir mer komplexa, naturligtvis, när flera ljuskällor interagerar eller när ljuskällor har olika färger.)
Så, genom att imitera effekterna av ljus i den verkliga världen, kommunicerar droppskuggor och gradienter information om metaforiska föremål, imaginära ljuskällor och deras relationer.
Hur man använder Drop-Shadows och Gradients effektivt
Här är en möjlighet: Använd inte drop-skuggor eller gradienter alls.
Jag menar det här, seriöst. Detta är det säkraste sättet att undvika skugg- och gradientfel, och alternativet bör alltid övervägas.
Eftersom det är så enkelt att kasta droppskuggor på slumpmässiga objekt kan de vara en ursäkt för att undvika enklare, bättre lösningar på problem. För bitar av text som behöver vara mer framträdande, t ex kommer designare ofta att försumma färg, storlek, vikt av typen och många andra element till förmån för en droppskugga.
På samma sätt använder designers ofta gradienter för att få ett färgfält att verka mindre tråkigt, utan att räkna ut varför den totala kompositionen inte är dynamisk.
Om du jobbar på en kompis för en webbplats, spara tredimensionella detaljer som drop-skuggor och gradienter för slutet , om möjligt. Använd avstånd, placering och färg för att göra konstruktionen effektiv innan du lägger till det sista lagret av polska. Om du fokuserar på att göra dina mönster fungerar utan dessa knep kan du upptäcka att du inte behöver dem så ofta och att de är mer effektiva när du använder dem.
Innan du plopar i en drop-skugga eller en gradient, fråga dig själv: " Är en tredimensionell metafor nödvändig för denna design?" Använd jag den för att lägga till användbar information om hur objekten är relaterade eller som en effektiv komponent i ett ljud estetiskt tillvägagångssätt, eller använder jag det som en ursäkt? "
Ju lägre, desto bättre
För drop-skuggor använder du nästan aldrig Photoshops standardinställningar. Photoshops standard droppskugga är väldigt mörkt och gjutes till det nedre högra hörnet av ett objekt (standard globala ljuskällan är 120 °, längst upp till vänster).
Skuggor berättar om ljuset i din miljö. Antag att du befinner dig i ett mörkt rum utan fönster och du slår på en ficklampa. Alla föremål som du lyser på den kommer att kasta en skugga som är nästan svart. Det beror på att objektet blockerar ljus från den enda ljuskällan, vilket innebär att inget annat ljus kommer ifrån någon annanstans för att lysa upp det området.
Nu kommer skuggan inte att vara helt svart på grund av det reflekterade ljuset. Några av ljuset från din ficklampa kommer att studsa av väggarna och slå det skuggade området från en riktning som inte blockeras av objektet. Och om du slår på en lampa i ett annat hörn av rummet, kommer skuggan att lysa betydligt. Föremålet kommer att kasta en andra skugga: den nya skuggan kommer att uppstå där lampans ljus är blockerat men kommer att fyllas med ljuset från ficklampan, medan området för den första skuggan fortfarande kommer att blockeras av lampan från ficklampan men kommer att fyllas med lampans ljus.
När vi lägger till drop-skuggor i våra mönster, föreslår vi en imaginär miljö för vår webbsida. Mörka, svängbara skuggor föreslår ett mörkt rum med en enda ljuskälla. Lätta, mjuka skuggor föreslår ett rum som är rika med diffust ljus.
Ett väl upplyst rum är den bekvämaste miljön för användarna, eftersom det liknar den typ av miljö där vi använder våra datorer: ett kontor eller en studie. Om vi inte vill avsiktligt undvika den komfortzonen borde vi lägga ner dropshadow-inställningarna i Photoshop helt från standardinställningarna. Ta opaciteten ner till 30 eller 40%, eller till och med lägre.
Också, håll det enkelt så att människor förstår metaforen utan att tänka på det. En ljuskälla vid 120 ° ger ingen mening. Mac OS X sätter exempelvis sin ljuskälla vid 90 °, eller rakt ovanför, vilket verkar mer logiskt. Jag gillar att göra det ännu enklare och sätta ljuskällan direkt vinkelrätt mot skärmen. För att göra detta, bara ta avståndsinställningen på din drop-shadow till noll (detta representerar avståndet från objektet som kastar drop-skuggan till objektet under det). Vid den här tiden spelar globalt ljus ingen roll: det är helt enkelt som om en stor diffus ljuskälla kommer bakom användaren för att belysa designen.
Denna effekt är mycket vanligt i "trompe-l'œil" -design, den vanligaste av vilken har bakgrundsbild eller ram på en skrivbords yta, som om man tittar på den från rakt ovanför. Filmregissörer som Alfred Hitchcock, Martin Scorcese och Wes Anderson använda samma effekt för deras underskrift av Guds öga. Sådana webbdesigner har en form av otrolig förståelse, och upprätthållande av konsistens över en design blir lättare för konstruktören.
Om du har tagit avståndsinställningen till 0 och opaciteten ner till cirka 30%, har du en bra utgångspunkt för en drop-skugga. Spela runt med storleken för att ändra hur långt objektets yta verkar vara från bakgrunden där den sitter. Inställning av storleken till 1 pixel, till exempel, ger dig en vacker effekt som är nästan osynlig men ganska tilltalande. Designer Dan Cederholm har gjort små, enkla effekter som detta en integrerad del av hans stil (som demonstreras i sin seminal A List Apart artikel om " Mountaintop Corners ”).
Du kan säkert ta upp opaciteten om effekten är osynlig, men börjar subtil och då ringer den upp är mycket bättre än motsatt. Effekten ska inte vara den minsta biten mer öppen än vad den behöver vara.
För gradienter har Photoshop många fina standardinställningar. Dessa kan ha några bra användningsområden, men de har säkert obegränsad dålig användning, så det är vanligtvis klokt att hantera dem.
Istället väljer du den standard svartvita gradienten. Välj sedan både svart och vitt och gör dem till både grundfärgen på ditt element. Nu när du har en bas, välj antingen den mörka sidan eller ljussidan och justera den för att vara bara lite mörkare eller ljusare. Återigen, ju subtilare desto bättre . (Några av de bästa gradienterna jag har stött på måste jag verifiera med eyedropper-verktyget i Photoshop för att se till att de var där alls!)
Ju större kontrasten mellan ljuset och mörkret är, desto mer runda blir ytan. För vissa saker, som navigeringsmenyer och knappar, är en viss rundhet lämplig. Men för föremål som ska verka platta, håll kontrasten låg.
Och kom ihåg att den ljusare sidan ska vända mot din ljuskälla.
Denna typ av lutning är underbar eftersom den efterliknar gradienterna vi ser runt omkring oss hela tiden. Ingenting i den verkliga världen är verkligen ett enda färgfält, eftersom det alltid har någon form av relation till en ljuskälla. Titta noggrant på sidorna i en bok eller i taket runt ditt strålkastare: du hittar övertoningar överallt.
Exempel på misstag och hur man fixar dem
Nätet har många uppenbarligen fula gradienter, men det görs vanligtvis inte av professionella designers. Snarare än att visa egentliga misstag, illustrerar jag några sätt på vilka subtila fel kan skapa spänningar i annars utmärkta mönster.
Enhetliga skuggor för överlappande föremål
Överlappande föremål innebär en skillnad i deras avstånd från dig (bestämd delvis av deras tjocklek). Designers använder emellertid ofta identiska drop-skuggor för överlappande objekt. Således strider informationen som dras av skuggorna med informationen som förmedlas av överlappningen, vilket undergräver illusionen av dimensioner.
Att se konflikter som dessa gör mig orolig, och ju mer jag fokuserar på dem, desto mer gör mitt huvud ont. Användare bör njuta av din design, inte känna smärta!
Du kan läsa mer om problemet i " Bygg en bättre drop-shadow , "En guide av Jacci Howard Bear på About.com.
Abrupta kanter
Hjulen av riktiga drop-skuggor skulle inte ha hårda kanter om de inte hade absolut reflekterat ljus - vilket skulle vara en mycket ovanlig situation. I stället avrundas deras hörn vanligen av ljusstrålarna som kryper runt dem.
Här är en drop-skugga med en orealistisk hård kant:
Denna annars underbara design har nästan ingen dimensionell illusion någonstans men har en drop-skugga längs den högra sidofältet. Designern ville kanske sänka sidofältets hierarki på sidan, en effekt som dess blå bakgrund hjälper till att uppnå. Det är inte bara det som är onödigt mörkt, men den otroligt hårda kanten stirrar besökaren i ansiktet.
I botten av sidofältet kan du se en rundad övergång där designern har skapat en mer trolig effekt. Men du kan se varför han inte upprepade det på toppen, eftersom det skulle burka med den rena horisontella linjen som ställdes av de välinriktade toppelementen. Snarare än att kräva realismen för denna rundade övergång, låt oss fixa den genom att toning ner dropshadowen så mycket som möjligt.
Här har jag gjort dropskuggan så lätt att det gör lite mer än att det sitter längre bakåt. Eftersom den är så lätt är den rena övergångsbanan inte ful eller störande.
Vad händer på bakom objektet?
Ibland är en droppskugga nötter utan uppenbar anledning, som med den blå rutan som omger W3C-logotypen nedan.
Varför är droppskuggan hittills tillbaka från objektet och så rundad? Ju mer jag försöker förstå berättelsen som berättas av denna drop-skugga, desto mer förvirrad får jag. Min gissning är att designern ville ge mer prominens och vikt till logotypen, som drop-skuggan hjälper till att uppnå, men det stryker sidans harmoni så mycket att det inte är värt det.
Låt inte dina gradienter föreslå olika ljuskällor.
I den här annars utmärkta designen för WolframAlpha har föremål på sidan olika grader från vit till ljusorange. Problemet är att gradienten i toppregionen har vit överst, vilket indikerar ljus ovanifrån, medan sidelementen sänker ner har vit i botten, vilket indikerar ljus underifrån.
Du kan argumentera för att jag tänker på det här, att gradienter inte behöver matcha ljuskällor. Det är möjligt, men subtila gradienter som dessa har ett inneboende metaforiskt förhållande till gradienterna vi ser i den verkliga världen. Låt oss byta längdriktningens riktning nedåt på sidan så att de innebär en ljuskälla ovanifrån:
Och vi får ljuskälla harmoni.
I slutändan är du fri att göra som du vill.
Eftersom objekten på en webbsida endast hänför sig till verkliga objekt med metafor, är deras effektivitet väsentligen subjektiv. Anslutningen mellan en bild av en knapp och en faktisk knapp har ingen verklighet utöver användarens sinne.
Vi designers är inte skyldiga att göra våra metaforer förenliga med verkligheten, men att vara omtänksam och försiktig med de många nivåerna av kommunikation i en design hjälper oss att göra våra webbplatser mer harmoniska.
Och vår omsorg och konsistens hjälper till att göra användarens upplevelse av webbplatsen bekväm och till och med härlig.
Skriven uteslutande för WDD av Nate Eagle . Han studerade filosofi på college, en utbildning som förberedde honom perfekt för att designa och utveckla webbsidor för PBS KIDS. Du kan läsa mer från honom och hans PBS-medarbetare på Design.PBS .
Tror du att denna detaljnivå är viktig när du utformar drop-skuggor och gradienter? Har du ditt eget husdjur om hur droppskuggor och gradienter används?