Drop-varjot ja kaltevuudet ovat kaksi yleisimpiä verkkoelementtejä.

Löydät ne monien eri tyylien mukana. Ne ovat käteviä vaikutuksia web-suunnittelijoille, koska ne ovat houkuttelevia, hyödyllisiä ja helppoja luoda minkä tahansa graafisen ohjelman avulla. Mutta heillä on pimeä puoli: heitä käytetään usein väärin .

Käyttämällä amatöörimäisiä pudotusvarjoja tai kaltevuuksia on melkein yhtä huono kuin kirjekuoren kiinnittäminen paitaasi antamaan maailman tietää, että olet aloittelija tai hakkeri. Jopa hienovaraiset, tuskin havaittavissa olevat virheet voivat aiheuttaa jännitteitä, jotka heikentävät muutoin kauniita ja tehokkaita malleja.

Tässä artikkelissa tarkastelemme, mitä pudota-varjot ja kaltevuudet tekevät , puhumme siitä, miten niitä käytetään tehokkaasti, ja tarkastelemme joitakin virheitä ja niiden korjaamista.

Mitä Drop-Shadows ja Gradients Do?

Web-suunnittelijan tehtävänä on luoda värimalleja hehkuvaan kaksiulotteiseen näyttöön . (Tässä on muutamia poikkeuksia: verkkosivustoja voidaan tarkastella esimerkiksi Kindle-näytöllä, joka ei heijastu ja sivustot voidaan tulostaa paperille.) Nämä näytöt eivät vastaa todellisuutta; he eivät ole edes aivan reaalimaailmassa. Tästä syystä emme ole todellisia välttämättömiä tehdä verkkosivustomme kuvioihin mitään suhteita esineisiin kolmiulotteisessa maailmassa, johon elämme.

Käyttöjärjestelmillä, kuten Unixilla ja DOSilla, on käyttöliittymä, joka ei ole vain värillinen teksti ruudulla. Muut, kuten Windows ja Mac OS X, ovat täynnä todellisia objekteja. Esimerkiksi OS X: ssä on telakka, joka näyttää pöydältä, jolla on kiiltävä pinta, joka etenee etäisyydeltä, valikkorivin, jonka viistetyt reunat tekevät siitä näyttävän, että se kohoaa hieman, ja vieritä ruutuja, joilla on läpikuultavia pastillit.

Kaikki nämä vaikutukset ovat metaforia. He käsittelevät tiettyjä elementtejä, joiden kanssa voimme olla vuorovaikutuksessa ruudulla, ikään kuin ne olisivat kolmiulotteisia esineitä, jotka vuorovaikutavat valonlähteiden kanssa siinä tavassa kuin esineet muussa kuin digitaalisessa maailmassa tekevät. Se on hauska asia tehdä tavallaan: kaikki nämä valonlähteet ja reunat ja muodot ovat puhdasta fantasiaa. Koska näytöllä olevat esineet ovat kuvitteellisia, miksi meidän pitäisi liittää ne reaalimaailman kohteisiin?

Ilmiö avaruus yhdistää imaginaarin maailmaan, johon olemme mukavasti eläneet.

Tärkein syy siihen, miksi kuvitteellisia esineitä liitetään todellisiin maailmoihin on, että olemme asiantuntijoita vuorovaikutuksessa kolmiulotteisen maailman kohteiden kanssa. Meillä on kokemusta kolmiulotteisten esineiden käsittelemisestä, ja meillä on kertynyt visuaalisen koodin tuntemusta, joka kertoo esineiden suhteesta toisiinsa avaruudessa.

Se on osittain siksi, että tulkkausvalojen tekeminen on niin merkittävää, että otamme tällaisen ilon illuusion tai luomalla esineiden ulkonäön . Olemme usein kiinnostuneempia dramaattisesti elämää muistuttavista tavoista, kuten tavaroista ja omenoista, kuin esineemme itse. Me ihmiset olemme luoneet tuhansia vuosia koskevia piirustuksia, joiden tarkoituksena on esitellä esineiden ajatuksia . Illusory-pastit ja pöydät näytöllä ovat vain viimeisimmän tämän pitkän perinteen ilmentymä.

Siitä on kuitenkin enemmän kuin iloa. Muoto ja sijainti antavat meille tietoja siitä, miten esineet liittyvät toisiinsa. Esimerkiksi Safarin ikkunassa oleva vierityspalkin pitkä vertikaalinen imukuppi luo illuusion, että se istuu "korkeammaksi" tai lähempänä minulle kuin ympäröivät elementit. Tämä antaa sen suunnittelulle entistä tärkeämpää, mikä on sopivaa, koska vierityspalkki on keskeinen käyttöliittymäelementti sivun navigointiin.

Visuaaliset metaforat luovat mielikuvan.

Kun esiin tulee esine, vierityspalkki luo "havaitut" affordance . "Se tarkoittaa, että se liittää itsensä metaforilla sellaisten todellisten esineiden omiin ominaisuuksiin, jotka sopivat tiettyihin käyttötarkoituksiin. Esimerkiksi verkkosivulla oleva viistottu painike ilmoittaa, että se antaa painamisen . Voimme tehdä mitä tahansa sivulle napsautettavia, mutta napsautettavan elementin liittäminen siihen, mitä jotain painetaan, viittaa siihen, että se toimii selkeällä, ilmeisellä ja miellyttävällä tavalla.

Pudotusvarjot ja kaltevuudet ovat perusvälineitä tilan harhaamisen luomiseksi.

Pudotusvarjot ja kaltevuudet ovat kaksi työkalua, jotka auttavat luomaan kolmiulotteisuuden harhaa ja ehdottaa sivujen objektien välisiä suhteita. Kun tämä tehdään hyvin, tämä kolmiulotteinen tieto tekee suunnittelusta kauniimpaa ja ymmärrettävää.

Todellisessa maailmassa pudotusvarjoja luodaan, kun kohde estää valonlähteen sulkemasta sen takana olevan pinnan. Tämä on yksi syy siihen, miksi ihmiset sanovat, että pudotusvarjot tekevät kaksiulotteisia malleja "pop": koska ne näyttävät siltä, ​​että esineet ulkonevat tai ylittävät muita elementtejä.

Gradientit tulevat näkyviin, kun kohteen osa on lähempänä valolähdettä kuin toinen osa. Tämän seurauksena lähempänä oleva osa näkyy kevyempänä ja kauemmas osa näyttää tummemmalta. (Vyöhykkeet ovat monimutkaisempia, tietenkin, kun useat valonlähteet toimivat vuorovaikutuksessa tai kun valonlähteet ovat eri värejä.)

Joten, jäljittelemällä valon vaikutuksia todelliseen maailmaan, pudotusvarjot ja kaltevuudet välittävät tietoa metaforisista kohteista, kuvitteellisista valonlähteistä ja niiden suhteista.


Kuinka käyttää Drop-Shadows ja Gradients tehokkaasti

Tässä on yksi mahdollisuus: älä käytä pudotusvarjoja tai kaltevuuksia lainkaan.

Tarkoitan tätä vakavasti. Tämä on varmin tapa välttää pudotusvarjon ja kaltevuusvirheet, ja vaihtoehtoa on aina harkittava.

Koska satunnaisten esineiden pudotus varjot ovat niin helppoja, ne voivat olla tekosyy välttää yksinkertaisemmat ja paremmat ongelmanratkaisut. Esimerkiksi tekstiä, jotka täytyy olla näkyvämpiä, suunnittelijat usein jättävät huomiotta värin, koon, painon tyypin ja monet muut elementit pudotusvalon hyväksi.

Samoin suunnittelijat käyttävät usein kaltevuuksia, jotta värialue näyttäisi vähemmän tylsältä, ilman selvittää miksi koko koostumus ei ole dynaaminen.

Jos työskentelet verkkosivustoa varten, tallenna kolmiulotteiset kosketukset, kuten pudotusvarjot ja kaltevuudet loppuun , jos mahdollista. Käytä välilyöntiä, sijoittelua ja väriä, jotta malli on tehokas ennen kuin lisätään viimeinen viimeistelykerros. Jos keskitymme tekemään malleja toimimatta ilman näitä temppuja, saatat huomata, että niitä ei tarvita niin usein ja että ne ovat tehokkaampia, kun käytät niitä.

Ennen kuin pudotat varjoon tai kaltevuuteen, kysy itseltäsi: " Onko tämä kolmiulotteinen metafora tarpeellinen tähän suunnitteluun?" Käytän sitä hyödyntämällä hyödyllistä tietoa tavasta, jolla esineet liittyvät toisiinsa tai tehokkaana äänen komponenttina esteettinen lähestymistapa tai käytän sitä tekosyynä? "

Subtler, parempi

Pudotusvarjoja käytettäessä käytä Photoshopin oletusasetuksia. Photoshopin oletushäiriö on hyvin tumma ja se on valettu objektin oikeaan alakulmaan (oletusvalon maailmanlaajuinen valolähde on 120 °, vasemmassa yläkulmassa).

Varjot kertovat ympäristöstäsi valosta. Oletetaan, että olet pimeässä huoneessa ilman ikkunoita, ja kytket taskulampun päälle. Kaikki esineet, jotka loistavat sen, heittävät varjon, joka on melkein musta. Tämä johtuu siitä, että kohde estää valoa ainoasta valonlähteestä, mikä tarkoittaa, että mikään muu valo ei tule muualta kirkastamaan sitä aluetta.

Nyt varjo ei ole täysin mustana heijastuneen valon takia. Osa taskulamppusi valoista katoaa seinistä ja osuu varjostettuun alueeseen suunnasta, jota objekti ei estä. Ja jos kytket valaisimen toiseen huoneen nurkkaan, varjo kirkastuu huomattavasti. Kohde heittää toisen varjon: uusi varjo ilmestyy, missä valo lamppu on tukossa, mutta on täynnä valoa taskulamppu, kun taas ensimmäisen varjon alueen edelleen estää valo taskulamppu, mutta täytetään lampun valolla.

Kun lisäämme pudotusvarjoja malleihimme, suosittelemme kuvitellun ympäristön Web-sivullemme. Tummat, karkeat pudotusvarjot viittaavat pimeään huoneeseen, jossa on yksi valolähde. Kevyet, pehmeät reunat pudotusvarjot viittaavat huoneeseen, jossa on runsaasti diffuusi valoa.

Hyvin valaistu huone on käyttäjille mukavin ympäristö, koska se on samanlainen kuin sellainen ympäristö, jossa käytämme tietokonetta: toimisto tai opiskelu. Ellei tarkoituksellisesti haluamme välttää tätä mukavuusaluetta, meidän pitäisi tuoda dropshadow-asetukset Photoshopiin alas niiden oletusasetuksista. Tuo peittävyys alaspäin 30 tai 40 prosenttiin tai jopa pienemmäksi.

Pidä myös asiat yksinkertaisina, jotta ihmiset ymmärtäisivät metaforaa ajattelematta sitä. Valolähde 120 °: ssa ei ole paljon järkeä. Esimerkiksi Mac OS X: ssä valonlähde on 90 ° tai suoraan edellä, mikä näyttää loogisemmalta. Haluan tehdä siitä vieläkin yksinkertaisemman ja asettaa valolähteen suoraan kohtisuoraan ruudulle. Tee tämä vain nostaaksesi pudotusvalon etäisyysasetuksen nollaan (tämä tarkoittaa etäisyyttä kohteesta, joka ajaa pudotusvarjon alle sen alle olevaan kohteeseen). Tässä vaiheessa globaalilla valolla ei ole merkitystä: se on yksinkertaisesti kuin jos suuri diffuusinen valonlähde tulee käyttäjän takaa valaisemaan mallia.

Tämä vaikutus on hyvin yleinen "trompe-l'œil" -malleissa , joista yleisimpiä on pöydän pinnan taustakuva tai runko, ikään kuin katsottaisiin sitä suoraan edellä. Elokuvaohjaajat, kuten Alfred Hitchcock, Martin Scorcese ja Wes Anderson käyttävät samaa vaikutusta niiden allekirjoittamien Jumalan silmälaseja varten. Tällaisilla web-malleilla on eräänlainen vaivaton ymmärrettävyys, ja muotoilun johdonmukaisuuden säilyttäminen on helpompaa suunnittelijan kannalta.

Jos olet tuonut etäisyyden asetukseksi 0 ja peittävyyden alaspäin noin 30 prosenttiin, olet hyvä aloituspiste pudotusvalolle. Muokkaa kokoa sen mukaan, kuinka paljon objektin pinta näyttää olevan taustalta, johon se istuu. Esimerkiksi koon määrittäminen 1 pikseliksi antaa sinulle kauniin vaikutelman, joka on melkein näkymätön mutta melko miellyttävä. Suunnittelija Dan Cederholm on tehnyt pieniä, yksinkertaisia ​​vaikutuksia, kuten tämä, olennainen osa hänen tyylinsä (kuten hänen A-listan artikkelissaan " Mountaintop Corners ”).

Voit varmasti tuoda läpinäkymättömyyden ylös, jos vaikutus on näkymättömiä, mutta aloittaen hienovaraisesta ja sen valinnasta on paljon parempi kuin vastakohta. Vaikutuksen ei pitäisi olla pienintäkään enemmän avointa kuin sen täytyy olla.

Kaltevuuksille Photoshopilla on paljon hienoja oletuksia. Näillä voi olla hyviä käyttötapoja, mutta niillä on varmasti rajattomat huono käyttötarkoitus, joten ohjaus heistä on yleensä viisasta.

Sen sijaan valitse oletusväri-musta-gradientti. Valitse sitten sekä musta että valkoinen ja tee ne sekä elementtisi perusväri. Nyt kun sinulla on pohja, valitse joko pimeä puoli tai valopuoli ja säädä se vain hieman tummemmaksi tai kevyemmäksi. Jälleen, hienompaa, sitä paremmin . (Jotkut parhaista kaltevuuksista, joita olen törmännyt, piti tarkistaa Photoshopin pipetointityökalulla varmistaakseen, että ne olivat siellä!)

Mitä suurempi kontrasti valon ja tummuuden välillä, pyöreämpi pinta näkyy. Joissakin asioissa, kuten navigointivalikoissa ja -painikkeissa, on sopivaa pyöristys. Mutta esineille, jotka pitäisi näyttää tasaisilta, pitää kontrasti alhaisena.

Ja muistakaa, että kevyemmän puolen pitäisi kohdata valonlähteen suunta.

Tällainen kaltevuus on ihanaa, koska se jäljittelee kaltevuuksia, joita näemme ympärillämme koko ajan. Mikään todellisessa maailmassa ei todellakaan ole yksittäinen värikenttä, koska sillä on aina jonkinlainen suhde valolähteeseen. Tarkastele varovasti kirjan sivuilla tai yläpuolella olevaa kattoa ympäröivällä katolla: löydät kaltevuudet kaikkialla.

Esimerkkejä virheistä ja niiden korjaamisesta

Verkossa on monia ilmeisesti rumaisia ​​kaltevuuksia, mutta niitä ei yleensä tehdä ammattimaisilla suunnittelijoilla. Sen sijaan, että näyttäisitte vakavia virheitä, esitän muutamia tapoja, joilla hienovaraiset virheet voivat aiheuttaa jännitteitä muutoin erinomaisissa malleissa.

Yhtenäiset varjot päällekkäisiä esineitä varten

Päällekkäiset esineet merkitsevät eroa etäisyydestään sinusta (määritetään osittain niiden paksuus). Suunnittelijat käyttävät kuitenkin usein samanlaisia ​​pudotusvarjoja päällekkäisiä esineitä varten. Joten, pudotusvarjojen välittämät tiedot ovat ristiriidassa päällekkäisyyksien välittämien tietojen kanssa, mikä heikentää kolmiulotteisuuden ilmiötä.

Näiden ristiriitojen näkeminen tekee minut epämukavaksi, ja mitä enemmän keskitytään niihin, sitä enemmän pääni sattuu. Käyttäjien pitäisi olla iloisia suunnittelustasi, ei tunne kipua!

Voit lukea lisää tästä aiheesta " Rakenna parempi Drop-Shadow , "Opas Jacci Howard Bear osoitteessa About.com.


Abrupt Edges

Todellisten pudotusvarsien kulmilla ei olisi kovia reunoja, ellei heillä olisi ollut mitään heijastettua valoa - mikä olisi hyvin epätavallinen tilanne. Sen sijaan niiden kulmat ovat yleensä pyöristetyt valon säteet, jotka ympäröivät niitä.

Tässä on pudotusvarjo, jolla on epärealistisesti kova reuna:

Tämä muuten ihastuttava muotoilu ei ole miltei missään mittasuhteessa missään, mutta siinä on pudotusvalo oikeassa sivupalkissa. Suunnittelija halusi alentaa sivupalkin hierarkiaa sivulta, jonka vaikutus sinisen pohjansa saavuttaisi. Ei ole vain tarpeetonta pimeää, mutta epäluotettavasti kova reuna tuijottaa kävijää kasvoihin.

Sivupalkin alaosassa näet pyöristetyn siirtymän, jossa suunnittelija on luonut uskottavamman vaikutuksen. Mutta näet, miksi hän ei toistanut sitä ylhäältä, koska se jarisi puhtaalla vaakasuoralla linjalla, joka oli asetettu hyvin kohdistettuihin yläelementteihin. Sen sijaan, että vaadittaisiin tämän pyöreän siirtymän realismia, korjataan sen korjaamalla pudotusvarjon mahdollisimman paljon.

Täällä olen tehnyt pudotusvalon niin kevyt, että se on vain vähän enemmän kuin ehdottaa, että se istuu kauemmas takaisin. Koska se on niin kevyttä, puhtaan siirtymän linja ei ole ruma eikä häiritsevää.


Mitä hittoa tapahtuu tämän objektin takana?

Joskus pudotus varjostaa pähkinöitä ilman selvää syytä, kuten alla olevan W3C-logoa ympäröivän sininen laatikko.

Miksi pudotusvarjon on niin kaukana esineestä ja niin pyöristetty? Mitä enemmän yritän ymmärtää tämän pudotuksen varjolla kerrottavaa tarinaa, sitä sekavammat saan. Arvaani on, että suunnittelija halusi antaa enemmän huomiota ja painoa logolle, jota pudotusvalo auttaa saavuttamaan, mutta se häiritsee sivun harmoniaa niin paljon, että se ei ole sen arvoista.


Älä anna kaltevesi ehdottaa erilaisia ​​valonlähteitä.

Tässä muussa erinomaisessa WolframAlphan suunnittelussa sivun esineillä on kaltevuudet valkoisesta vaalean oranssiin. Ongelmana on, että otsan alueella oleva kaltevuus on yläosassa valkoista, mikä merkitsee valoa yläpuolelta, kun taas sivun alareunat alhaalla ovat valkoisia, mikä merkitsee valoa alhaalta.

Voisit väittää, että olen liian ajattelematta tätä, että kaltevuudet eivät tarvitse olla sopusoinnussa valonlähteiden kanssa. Tämä on mahdollista, mutta näillä hienovaraisilla kaltevuuksilla on luontainen metaforinen suhde reaalimaailman kaltevuuteen. Vaihdetaan sivun alapuolella olevien kaltevuuksien suunta, niin että ne tarkoittavat valonlähdettä ylhäältä:

Ja me saamme valolähteen harmoniaa.

Lopulta voit vapaasti tehdä niin kuin haluat.

Koska web-sivun kohteet liittyvät vain todellisiin kohteisiin metafora, niiden tehokkuus on lähinnä subjektiivinen. Yhden painikkeen kuvan ja todellisen painikkeen välinen yhteys ei ole todellisuutta kuin käyttäjän mielessä.

Meidän suunnittelijoiden ei tarvitse tehdä metaforiamme sopusoinnussa todellisuuden kanssa, mutta harkitseva ja varovainen monilla viestintätasoilla suunnittelussa auttaa meitä tekemään verkkosivustojemme harmonisemmaksi.

Ja hoidon ja johdonmukaisuuden ansiosta käyttäjän kokemus verkkosivustosta on mukava ja jopa ilahduttava.


Kirjoitettu yksinomaan WDD: lle Nate Eagle . Hän opiskeli filosofiaa yliopistossa, koulutusta, joka loi hänet täydellisesti PBS KIDSin verkkosivujen suunnitteluun ja kehittämiseen. Voit lukea lisää häneltä ja hänen PBS-työtovereiltaan osoitteessa Design.PBS .

Luuletko tämän yksityiskohtaisuuden olevan tärkeä suunniteltaessa pudotusvarjoja ja kaltevuuksia? Onko sinulla oma lemmikkisi peevesi siitä, miten pudotusvarjoja ja kaltevuuksia käytetään?