Tapasse Shadow in Design

Dit ûntwerpartikel sil in oersjoch jaan fan de tapassing en terminology fan skaden yn ûntwerp.

Wat is in Skaad?

In skaad is in tsjuster gebiet dêr't ljocht útstjit fanút in ljochtboarne wurdt blokkearre troch in ûntrochsichtich foarwerp. Skaden wurde foarme om't ljocht net troch it opake foarwerp kin trochgean. It foarwerp blokkearret it ljocht en twingt it om foarby it blokkearjende objekt en op it folgjende oerflak te bewegen. It ûntstiene skaad is in twadiminsjonale foarm of in omkearde projeksje fan it objekt dat it ljocht blokkearret.

De grutte fan in skaad hinget ôf fan de ôfstân tusken de ljochtboarne en it objekt dat it blokkearret. Hoe tichter it item by de ljochtboarne is, hoe mear it it ljocht hinderet, wat resulteart yn in grutter, sêfter skaad. As it foarwerp fierder is, wurdt it skaad skerper en lytser.

Dûnkere, hurde-rânne drop-shadows suggerearje in tsjustere keamer mei ien ljochtboarne. Ljochte, sêfte rânen drop-shadows suggerearje in keamer ryk mei diffús ljocht.

Se wurde makke troch sinneljocht. De hoeke fan it sinneskyn oanbod bepaalt de lingte fan it skaad. Kunstmjittige skaden:

Dit omfettet alle skaden dy't makke binne troch keunstmjittich ljocht.

De skaadapplikaasje yn ûntwerp

De pleatsing en gedrach fan skaden binne essensjele oerwagings yn ûntwerp. Gradients, highlights en drop skaad meitsje diminsje yn jo ûntwerp eleminten en rjochtsje deoandacht fan de sjogger. It brûken fan skaden kin de algemiene estetyk en funksjonaliteit fan jo ûntwerp dramatysk ferbetterje en nivo's fan djipte en realisme taheakje.

Yn 't algemien moatte skaden yn ûntwerp it natuerlike gedrach fan ljocht en skaad-casting simulearje (kaai en ambient) ljocht) en mingje effektyf yn it ûntwerp.

Om skaden effektyf te brûken yn jo ûntwerpproses, moatte jo earst de fûnemintele wetten fan skaadcasting en har wichtige eleminten begripe.

The Light Boarne

De ljochtboarne definiearret de rjochting en posysje fan 'e ynkommende strielen fan' e ljochtboarne. Natuerlik ljocht hat de sinneposysje as ienige ljochtboarne; keunstmjittich ljocht lit meardere ljochtboarnen ta.

De hichtepunt

Definearre as it hichtepunt is it gebiet dat it helderst op in objekt skynt; it is it punt dat nei de ljochtboarne leit en it tichtst dêrby.

De Skaad/Core Shadow

It skaad/kearnskaad betsjut it tsjusterste diel fan it objekt dat it fierste fan it ljocht ôf is boarne. It tsjuster fan skaden kin ferskille yn skaad. It tsjusterste gebiet fan it skaad wurdt it kearnskaad neamd.

De Cast Shadow

It skaad sels is op it objekt, mar it objekt sels makket it cast skaad. It getten skaad wurdt projekteare op it oerflak dat it objekt rêstet. It getten skaad wiist altyd yn deselde rjochting as de ynkommende strielen mar altyd nei de tsjinoerstelde kant fan deobjekt.

In post dield troch inspirationsl0g0 (@inspirationsl0g0)

De tapassing fan skaad yn ûntwerp

De ferantwurdlikens fan in webûntwerper is it meitsjen fan kleur patroanen foar ljocht-emitting twadiminsjonale skermen. It brûken fan skaden skept djipte en de yllúzje fan romte yn 2D-ûntwerp. It skaad is in essinsjeel ûnderdiel fan grafysk ûntwerp. Der binne ûntelbere manieren om it op te nimmen yn it proses fan byldûntwerp.

Drop-shadows en gradiënten binne twa fan 'e meast brûkte ûntwerpeleminten. Oare relevante eleminten binne de skaaddekking, de skaadhoeke, de skaadoffset, de skaadradius en de skaadsêftens (faak neamd blur).

De drop-shadows en gradient skaad-eleminten binne tige maklik te meitsjen mei elk grafysk programma, mar it neidiel is dat dizze twa skaad-effekten faak te folle wurde brûkt.

Shadows in Skeuomorphic Design

Benammen yn 'e Skeuomorphic Design -perioade dy't har gebrûk fan 'e iere oant midden fan' e 2000's in hichtepunt berikte, hawwe ûntwerpers de laachstilen fan Photoshop en ferlykbere softwareprogramma's útput oant har maksimale kapasiteit, meitsjen foaral skermen fan lytsere maten fiele hiel rommelich en drok. De ikoanen waarden makke mei refleksjes, skaden en korrekte ôfstimmingslinen, wêrtroch in 3D-gefoel ûntstie.

Ek al kinne fisuele eleminten ferskille, kinne brûkers dizze twa altyd meitsjeoannames:

• Eleminten dy't opheven lykje kinne wurde yndrukt (bygelyks knoppen)
• Eleminten dy't fersunken lykje kinne wurde ynfolle (bygelyks ynfierfjilden)

Ofbylding links: Windows 95 Setup skerm, ôfbylding boarne: extremetech. Ofbylding rjochts: Apple skeuomorphic Homescreen, ôfbyldingsboarne: materialdesignblog

Shadows in Material Design

Yn 'e midden fan' e 2010's swaaide de kreative slinger werom nei in mear minimalistyske oanpak mei de Flat Design -trend en de ûntwikkeling fan de Material UI-ûntwerptaal .

Fergeliking fan platte ûntwerp en materiaalûntwerp. Ofbyldingboarne: Medium

It ûntwerp en skaadgedrach wiene net oer it sa sekuer mooglik ôfbyldzjen fan objekten út 'e echte wrâld. It gie allegear om dúdlikens, oarder, kontinuïteit en ienfâld. De Flatûntwerp -oanpak wegere de z-as foar de ultime ienfâld. It ûntbrekken fan z-as makke it opnimmen fan skaden yn 'e UI-eleminten oerstallich.

De Material Design-taal , yn earste ynstânsje ûntwikkele troch Google, ferwurke de z-as yn har skjinne en simplistyske oanpak, rjochte op strange regels foar syn kontinuïteit en featured faak animearre transysjes. Minimalistyske skaden waarden brûkt om de yllúzje fan djipte te meitsjen. De nije ûntwerpbenadering joech nije mooglikheden om kleur en romte te brûken.

Shadows in Neumorphic Design

Afterhast in desennium fan in mear simplistyske oanpak fan 2D-ûntwerp, ûntstie in nije ûntwerptaal: Neumorfisme is prominint te sjen yn macOS Big Sur. De ikoanen en UI-eleminten binne ûntworpen mei skaad en hichtepunten fan in ljochtboarne fan 12 oere. It slút opnij oan by de fysike, haptyske oanpak fan it skeuomorphic -ûntwerp, mar sûnder oermjittige laachstylskaadjes.

It gedrach en projeksje fan skaad binne folslein oars yn it materiaal en neumorphic ûntwerpstyl.

Fergeliking Skeuomorphism, Flat Design, and Neumorphism. Ofbyldingboarne: justinmind

Materiaalûntwerp -kaarten lykje as se driuwe mei in ûnbepaalde skaad.

Neumorfysk Ontwerp kaarten lykje as binne se út 'e eftergrûn ekstrudearre. De skaadprojeksje en har ynteraksje mei ljocht binne folslein oars.

Fergeliking Neumorfyske kaart en Materiaalkaart. Ofbylding boarne: uxdesign

Fergeliking Neumorfyske kaart en Materiaalkaart. Ofbyldingboarne: uxdesign

Wêrom jo skaden yn jo ûntwerp moatte opnimme

It doel fan skaden yn 2D/UI-ûntwerp is net primêr om 3D-objekten sa realistysk mooglik te simulearjen foar de brûker, mar om de navigaasje fan 'e ynterface subtyl te rjochtsjen en makliker te meitsjen.

It yntegrearjen fan skaden mei in subtile, soarchfâldich berekkene projeksje is in ideale manier om it ûntwerp tagonkliker te meitsjen foar harbrûkers.

As jo ​​der foar kieze om skaden yn jo ûntwerp op te nimmen, tink derom dat d'r in protte manieren binne om se út te fieren. Spielje om en test de ferskate parameters dy't wy yn ús artikel neamden. Sjoch hoe't dizze ynstellings ynfloed hawwe op it uterlik en tagonklikens fan jo ûntwerp.

It feroarjen fan de dekking, hoeke of kleur fan jo skaad kin in wrâld fan ferskil meitsje yn hoe't jo ûntwerp de sjogger oansprekt. Jo kinne jo ûntwerp transformearje fan saaklike styl nei boartlik en leuk troch gewoan de skaadkleurattributen te feroarjen, bgl.

It oanpassen fan de wazige of offset-attributen fan jo skaden kin de oandacht fan de brûker omliede nei earder oersjoen ûntwerpeleminten.

Onthâld de basisrjochtlinen dy't wy jo joegen, en hawwe wille om te spyljen mei de skaadattributen!