Drop-Shadows og stigamörk: Vertu samkvæmur í sjónrænu myndunum þínum
Drop-skuggi og stigamörk eru tveir af algengustu hönnunarþættirnir á vefnum.
Þú munt finna þá sem fylgir mörgum mismunandi stílum. Þau eru hagnýt áhrif fyrir vefhönnuðir vegna þess að þau eru aðlaðandi, gagnlegt og auðvelt að búa til með hvaða grafík forrit. En þeir hafa dökkan hlið: þau eru oft misnotuð .
Að nota áhugamikil dropaskuggi eða stigamörk er næstum eins slæmt og að festa skarlatbréf í skyrtu þína til að láta heiminn vita að þú ert byrjandi eða hakk. Jafnvel lúmskur, varla merkjanleg mistök geta skapað spennu sem dregur úr öðrum fallegum og árangursríka hönnun.
Í þessari grein munum við líta á hvaða dropar og skyggnir gera , við munum tala um hvernig á að nota þau á áhrifaríkan hátt og við munum líta á dæmi um mistök og hvernig við gætum lagað þau.
Hvað gerðu Drop-Shadows og stigamörk?
Starf vefhönnuður er að búa til litamynstur fyrir glóandi tvívíðu skjái . (Það eru nokkrar undantekningar á þessu: vefsíður geta verið áhorfandi, td Kveikja skjá, sem ekki glóa, og vefsíður geta verið prentaðar út á pappír.) Þessir skjáir endurspegla ekki raunverulega heiminn; Þeir eru ekki einu sinni mjög eins og hið raunverulega heimi. Af þessum sökum höfum við enga alvöru mikilvægt að gera mynstur á vefsíðum okkar bera samband við hluti í þrívíðu heiminum sem við búum í.
Stýrikerfi eins og Unix og DOS hafa tengi sem er ekkert annað en lituð texti á skjá. Aðrir, eins og Windows og Mac OS X, eru fyllt af illusions raunverulegra hluta. OS X, til dæmis, hefur bryggju sem lítur út eins og borð með glansandi yfirborði sem dregur sig niður í fjarlægð, valmyndarsvæði með skurðum brúnum sem lítur út eins og það bullar út örlítið og skrúfur sem virðast hafa hálfgagnsærar töflur.
Öll þessi áhrif eru metafor. Þeir meðhöndla ákveðna þætti sem við getum haft samskipti við á skjánum eins og þau væru þrívíðu hlutir sem hafa áhrif á ljósgjafa eins og hlutirnir í heimi sem ekki eru í stafrænu heiminum. Það er skemmtilegt að gera, á þann hátt: allar þessar ljósgjafar og brúnir og formir eru hreinn ímyndunarafl. Vegna þess að hlutirnir á skjánum eru ímyndaða, af hverju ættum við að tengjast þeim í hlutum í hinum raunverulega heimi?
Ímyndin um pláss tengir ímyndaða heiminn sem við erum ánægð með að lifa í.
Mikilvægasta ástæðan fyrir því að við tengjum ímyndaða hluti við raunveruleg veröld sjálfur er að við erum sérfræðingar í samskiptum við hluti í þrívíðu heiminum okkar. Við höfum reynslu af að takast á við þrívíddar hluti, og við höfum safnað þekkingu á sjónmáli sem segir okkur frá sambandi hlutanna við hvert annað í geimnum.
Það er að hluta til vegna þess að feat að túlka ljós er svo merkilegt að við tökum slíka ánægju í blekkingum eða í því að skapa útlit hlutanna. Við erum oft þátt í dramatískum lífsgæðum málverkum af sameiginlegum hlutum eins og hús og eplum en við erum með hlutina sjálfir. Við menn hafa búið til teikningar fyrir þúsundir ára sem ætlað er að kynna hugmyndir hlutanna. Illusory súlfat og töflur á skjánum eru ekkert nema nýjasta birtingarmynd þessa langa hefðar.
Það er meira að segja en ánægja, þó. Móta og staða gefa okkur upplýsingar um hvernig hlutir tengjast hver öðrum. Löng lóðrétt formi rennibrautar í ræsistikunni, til dæmis, skapar þá hugmynd að það sé "hærra" eða nærri mér en þættirnir sem umhverfis hana. Þetta gefur það meiri áherslu á hönnunina, sem er viðeigandi vegna þess að skruntanga er nauðsynlegur tengiþáttur til að fletta að síðunni.
Sjónvarpsgreinar skapa skynsamlega affordance.
Með því að birtast sem hlut, skapar skruntikan "skynja affordance . "Það tengist því sjálfum sér með myndlíkingu við eiginleika raunverulegra hluta sem lána sér til sérstakra nota. Skrúfaður hnappur á vefsíðu, til dæmis, miðlar því að það veitir þrýstingi . Við getum gert allt á síðu smella, en tengja smellanlegur þáttur með mynd af eitthvað sem er stutt getur benda til þess að hún sé virk, augljós og jafnvel ánægjuleg.
Dropshuggar og stigamörk eru grundvallarverkfæri til að búa til tálsýn um pláss.
Dropshuggar og stigamörk eru tveir verkfæri sem hjálpa til við að búa til tálsýn um þrívídd og benda til staðbundinna samskipta hlutanna á síðunni. Þegar þetta er gert vel, gerir þetta þrívítt upplýsingar hönnun fallegri og skiljanlegri.
Í hinum raunverulega heimi eru dropaskuggar búnar til þegar mótmæla hindrar ljósgjafa frá sláandi yfirborði sem er á bak við það. Þetta er ein af ástæðunum fyrir því að fólk segi að droparskyggðir gera tvívíð hönnun "popp": vegna þess að þeir gera hlutina virðast standa út úr eða fljóta ofan af öðrum þáttum.
Stigsetningar birtast þegar einn hluti hlutar er nær ljósgjafa en annar hluti. Þess vegna virðist næringin léttari og lengra hluti virðist dekkri. (Breytingar verða flóknara, auðvitað, þegar margar ljósgjafar hafa áhrif á samskipti eða þegar ljósgjafar eru með mismunandi lit.)
Þannig að með því að líkja eftir áhrifum ljóssins í hinum raunverulega heimi, miðla dropar og skyggnir upplýsingar um myndgreiningar, ímyndaða ljósgjafa og sambönd þeirra.
Hvernig á að nota Drop-Shadows og stigamörk áhrifaríkan hátt
Hér er ein möguleiki: Ekki nota dropaskuggi eða hallastig yfirleitt.
Ég meina þetta alvarlega. Þetta er öruggasta leiðin til að koma í veg fyrir dropaskugga og hallastig, og valið ætti alltaf að vera í huga.
Vegna þess að henda dropaskuggum á handahófi hluti er svo auðvelt, geta þau verið afsökun til að koma í veg fyrir einfaldari, betri lausnir á vandamálum. Fyrir bita af texta sem þarf að vera meira áberandi, til dæmis, hönnuðir munu oft vanrækja lit, stærð, þyngd af gerðinni og mörgum öðrum þáttum í þágu dropaskugga.
Á sama hátt eru hönnuðir notaðir með stigalengdir til að gera litasvið virðast minna leiðinlegt án þess að reikna út af hverju heildarsamsetningin er ekki breytileg.
Ef þú ert að vinna í sambandi fyrir vefsíðu skaltu vista þrívítt snertir eins og dropaskuggi og stigamörk fyrir lokin , ef það er mögulegt. Notaðu bil, staðsetningu og lit til að gera hönnunin skilvirk áður en endanleg lag af pólsku er bætt við. Ef þú leggur áherslu á að gera hönnunin þín vinna án þessara bragðarefur, getur þú fundið að þú þarft ekki þá eins oft og að þau séu skilvirkari þegar þú notar þau.
Áður en þú smellir í dropaskugga eða halli skaltu spyrja sjálfan þig: Er þrívítt myndlíking nauðsynleg fyrir þessa hönnun? Er ég að nota það til að bæta við gagnlegum upplýsingum um hvernig hlutir eru tengdar eða sem árangursríkur hluti hljóðs fagurfræðileg nálgun, eða nota ég það sem afsökun? "
The Subtler, the Better
Fyrir dropaskuggi , notaðu næstum aldrei sjálfgefnar stillingar Photoshop. Default dropshadow skyndimyndar Photoshop er mjög dökk og er kastað í neðra hægra horninu á hlut (sjálfgefið ljósgjafi er 120 °, í efra vinstra megin).
Skuggarnir segja þér frá ljósi í umhverfi þínu. Segjum að þú sért í dimmu herbergi án glugga og þú kveikir á vasaljós. Sérhver hlutur sem þú skín á því muni skila skugga sem er næstum svartur. Það er vegna þess að mótmæla er að loka ljósi frá einum ljósgjafa, sem þýðir að ekkert annað ljós kemur frá einhvers staðar til að lýsa því svæði.
Nú mun skugginn ekki vera alveg svartur vegna endurspeglast ljóssins. Sumir af ljósi úr vasaljósinu þínu munu hoppa af veggjum og slá á skyggða svæðið frá stefnu sem er ekki læst af hlutnum. Og ef þú kveikir á lampa í öðru horni herbergisins mun skugginn björt verulega. Hluturinn muni skila öðrum skugga: Ný skugginn birtist þar sem ljósið frá lampanum er lokað en fyllist með ljósi úr vasaljósinu, en svæðið í fyrsta skugga verður enn læst af ljósi frá vasaljósinu en verður fyllt með ljósi frá lampanum.
Þegar við bætum við droparskuggum við hönnun okkar mælum við með ímyndaða umhverfi fyrir vefsíðu okkar. Myrkur, hörðu dropar-skuggi benda til dökkra herbergi með einum ljósgjafa. Léttir, mjúklega beinir droparskyggðir benda til þess að herbergi séu ríkur með dreifðu ljósi.
Vel upplýst herbergi er þægilegasta umhverfið fyrir notendur, því það er svipað og umhverfi þar sem við notum tölvur okkar: skrifstofu eða nám. Nema við viljum vísvitandi koma í veg fyrir þetta huggarsvæði ættum við að koma skyndihjálpunum í Photoshop niður niður við vanskil. Haltu ógagnsæi niður í 30 eða 40% eða jafnvel lægra.
Einnig skaltu halda hlutum einfalt þannig að fólk skilji myndlíkingu án þess að hugsa um það. Ljósgjafi við 120 ° skilur ekki mikið. Mac OS X, til dæmis, setur ljósgjafa sína í 90 °, eða beint ofan, sem virðist vera meira rökrétt. Mér finnst gaman að gera það enn einfaldara og setja ljósgjafann beint hornrétt á skjáinn. Til að gera þetta, taktu bara fjarlægðina á dropaskugga þínum í núll (þetta táknar fjarlægðina frá hlutnum sem kastar dropaskugganum við hlutinn undir honum). Á þessum tímapunkti skiptir alþjóðlegt ljós ekki máli: það er einfaldlega eins og stór stór ljósgjafi kemur frá bak við notandann til að lýsa hönnuninni.
Þessi áhrif eru mjög algeng í "trompe-l'œil" hönnun, algengustu sem innihalda bakgrunnsmynd eða ramma skrifborðsyfirborðs, eins og einn væri að horfa á hana beint frá. Kvikmyndastjórar eins og Alfred Hitchcock, Martin Scorcese og Wes Anderson hafa sömu áhrif á undirskrift Guðs þeirra í augum. Slík vefhönnun hefur eins konar áreynslulaust skilning og viðhalda samræmi í hönnun verður auðveldara fyrir hönnuðinn.
Ef þú hefur fært fjarlægðina niður í 0 og ógagnsæi niður í um það bil 30%, þá ertu á góðan upphafspunkt fyrir dropaskugga. Leika með stærðina til að breyta því hversu langt yfirborð hlutarins virðist vera úr bakgrunni sem hún setur. Ef þú stillir stærðina á 1 pixla, gefur þú til dæmis falleg áhrif sem er næstum ósýnilegur en alveg ánægjulegt. Hönnuður Dan Cederholm hefur gert smá, einföld áhrif eins og þetta er óaðskiljanlegur hluti af stíl sinni (eins og sýnt er fram á hans seminal A List Apart grein um " Mountaintop Corners ").
Þú getur örugglega komið í veg fyrir ógagnsæi ef áhrifin eru ósýnileg, en byrjun lúmskur og þá hringir það upp er miklu betra en hið gagnstæða. Áhrifin ætti ekki að vera hirða hluti meira augljós en það þarf að vera.
Fyrir stigamörk, Photoshop hefur mikið af fallegum vanskilum. Þetta kann að hafa einhverja góða notkun, en þeir hafa vissulega ótakmarkaða lélega notkun, þannig að stýrisbúnaður sem er tær af þeim er yfirleitt vitur.
Í staðinn skaltu velja sjálfgefið svart-hvítt hallamerki. Veldu þá bæði svarta og hvíta og láttu þá bæði grunn lit frumefnisins. Nú þegar þú ert með grunn skaltu velja annað hvort dökkhliðina eða ljóshliðina og stilla það til að vera aðeins dökkari eða léttari. Aftur, lúmskur, því betra . (Sumir af bestu stigunum sem ég hef rekist á þurfti ég að staðfesta með eyedropper tólinu í Photoshop til að tryggja að þeir væru þarna alls!)
Því meiri sem andstæða ljóssins og myrkursins mun rounder yfirborðið birtast. Fyrir suma hluti, svo sem flakkar og flýtivísar, er sumum kringumstæðum viðeigandi. En fyrir hluti sem ættu að virðast flattar, hafðu andstæðurnar lágt.
Og mundu að léttari hliðin ætti að snúa við áttina frá ljósgjafanum þínum.
Þessi tegund af halli er dásamlegur vegna þess að það líkir eftir stigum sem við sjáum í kringum okkur allan tímann. Ekkert í hinum raunverulega heimi er sannarlega eitt litasvæði, því það hefur alltaf einhvers konar samband við ljósgjafa. Horfðu vandlega á síðurnar í bók eða í loftinu um loftljósið þitt: þú finnur afbrigði alls staðar.
Dæmi um mistök og hvernig á að laga þau
Vefurinn hefur marga augljóslega ljóta stig, en þetta er venjulega ekki gert af faglegum hönnuðum. Frekar en að sýna stórkostlegar mistök, mun ég sýna nokkrar leiðir þar sem lúmskur villur geta skapað spennu í öðru framúrskarandi hönnun.
Uniform skuggi fyrir skarast hlutum
Skarast hlutir sýna mismun á fjarlægð frá þér (ákveðin að hluta til með þykkt þeirra). Hönnuðir nota þó oft sömu dropaskuggi fyrir skarast hluti. Þannig stangast upplýsingarnar sem falla af skugga-skuggunum í bága við upplýsingarnar sem skarast af skarðinum, sem dregur úr tálsýninni um vídd.
Að sjá átök eins og þetta gerir mig órólegur og því meira sem ég legg áherslu á þá, því meiri sem höfuðið meiðir. Notendur ættu að njóta ánægju í hönnun þinni, ekki finna fyrir sársauka!
Þú getur lesið meira um þetta mál í " Byggja upp betri dropaskugga , "Leiðarvísir af Jacci Howard Bear á About.com.
Skyndilegar brúnir
Hornin af alvöru dropaskuggum myndu ekki hafa harða brúnir nema þeir höfðu algerlega ekkert endurspeglast ljós - sem væri mjög óvenjulegt. Hins vegar eru horn þeirra venjulega ávalar af geislum ljóssins sem skríða í kringum þá.
Hér er dropaskuggi með óraunhæft harða brún:
Þessi annar yndislega hönnun hefur nánast engin víddar blekking hvar sem er en hefur dropaskugga meðfram hægri hliðarstikunni. Hönnuður vildi kannski lækka stigveldi hliðarhersins á síðunni, áhrif þess að bláa bakgrunnur hennar hjálpar til við að ná. Ekki aðeins er það óþarflega dökkt, þó, en ótrúlegur harður brún starfar gesturinn í andlitinu.
Neðst á skenkanum geturðu séð umvalið umskipti þar sem hönnuður hefur skapað meira líklegt. En þú getur séð af hverju hann endurtók það ekki efst, vegna þess að það myndi krukku með hreinu lárétta línunni sem sett var af veljaðri efri þætti. Frekar en að krefjast þess að raunsæi þessarar riðnuðu umskipunar sé kominn, við skulum laga það með því að hreinsa niður dropaskugga eins mikið og mögulegt er.
Hér hefur ég gert dropaskuggann svo létt að það gerir lítið meira en að stinga upp á að sitja lengra aftur. Vegna þess að það er svo létt er hreinn lína umskipti ekki ljót eða truflandi.
Hvað heck er að fara á bak við þessi mótmæla?
Stundum er dropaskuggi hnetur án augljósrar ástæðu, eins og með bláa kassann í kringum W3C merkið hér að neðan.
Afhverju er dropaskugginn svo langt aftur frá hlutnum, og svo ávalið? Því meira sem ég reyni að skilja söguna sem sagt er af þessum dropaskugga, því meira rugla ég fæ. Mín giska er að hönnuður vildi gefa meira áberandi og þyngd á lógóið, sem dropaskugginn hjálpar að ná, en það truflar sáttina á síðunni svo mikið að það sé ekki þess virði.
Ekki láta skurðpunktana benda til mismunandi ljósgjafa.
Í þessari annarri framúrskarandi hönnun fyrir WolframAlpha hafa hlutir á síðunni hliðar frá hvítum til föl appelsínugult. Vandamálið er að hallinn í hausnum er hvítur efst, sem gefur til kynna ljós frá ofan, en hliðarþáttur lækkar niður hefur hvítt neðst, sem gefur til kynna ljós frá neðan.
Þú gætir haldið því fram að ég er að hugsa um þetta, að stigamörk þarf ekki að passa við ljósgjafa. Það er mögulegt, en lúmskur stigagjöf eins og þessir hafa innbyggð myndræn tengsl við stigin sem við sjáum í hinum raunverulega heimi. Við skulum snúa stefnu stiganna niður á síðu þannig að þau lýsi ljósgjafa ofan:
Og við fáum ljósgjafa sátt.
Að lokum ertu frjálst að gera eins og þú vilt.
Vegna þess að hlutirnir á vefsíðu tengjast eingöngu raunverulegum hlutum með myndlíkingu, er skilvirkni þeirra í raun huglæg. Tengingin milli mynd af hnappi og raunverulegur hnappur hefur enga veruleika utan hugar notandans.
Við hönnuðir þurfa ekki að gera metaphors okkar í samræmi við raunveruleikann, en að vera hugsi og gæta um margvísleg samskipti í hönnun hjálpar okkur að gera vefsíður okkar jafnari.
Og umönnun okkar og samkvæmni hjálpar til við að gera reynslu notandans á vefsvæðinu þægileg og jafnvel yndisleg.
Skrifað eingöngu fyrir WDD eftir Nate Eagle . Hann lærði heimspeki í háskóla, menntun sem undirbýr hann fullkomlega til að hanna og þróa vefsíður fyrir PBS KIDS. Þú getur lesið meira frá honum og PBS samstarfsmönnum hans á Design.PBS .
Telur þú að þetta smáatriði sé mikilvægt þegar þú útskýrir dropaskuggi og stigamörk? Ertu með þitt eigið gæludýr peeves um hvernig dropar og skuggi eru notuð?