{"id":4470,"date":"2020-02-26T18:17:53","date_gmt":"2020-02-26T17:17:53","guid":{"rendered":"http:\/\/blog.webshark.hu\/?p=4470"},"modified":"2022-05-19T12:29:50","modified_gmt":"2022-05-19T10:29:50","slug":"mi-az-a-neumorfizmus-es-lehet-e-hasznalni-a-weboldalakon","status":"publish","type":"post","link":"http:\/\/blog.webshark.hu\/2020\/02\/26\/mi-az-a-neumorfizmus-es-lehet-e-hasznalni-a-weboldalakon\/","title":{"rendered":"Mi az a neumorfizmus? \u00c9s lehet-e haszn\u00e1lni a weboldalakon? (Friss\u00edtve, 2021.11.02.)"},"content":{"rendered":"\n

Nemr\u00e9g felkapott\u00e1 v\u00e1lt egy \u00faj design-ir\u00e1nyzat: a neumorfizmus. Aki eml\u00e9kszik m\u00e9g a szkeuomorfizmusra, az nyilv\u00e1n sejti, hogy mir\u0151l lehet sz\u00f3 a flat \u00e9s material design \u00e9vei ut\u00e1n. <\/strong>(Friss\u00edt\u00e9s, 2021.11.02. – Hol haszn\u00e1lhatod a glassmorfizmust a weboldaladon?<\/a>)<\/em><\/p>\n\n\n\n\n\n\n\n

Kor\u00e1bban mi is megeml\u00e9kezt\u00fcnk a szkeuomorfizmus<\/a> dics\u0151 \u00e9veir\u0151l, amikor \u00e1tvette t\u0151le a hatalmat a flat design \u00e9s annak le\u00e1gaz\u00e1sai. Most azonban \u00fagy t\u0171nik, hogy a designerek egy r\u00e9sz\u00e9nek elege lett flatb\u0151l \u00e9s a materialb\u00f3l, mert m\u00e1r h\u00f3napok \u00f3ta hallani lehet az \u00faj ir\u00e1nyzatr\u00f3l a neumorfizmusr\u00f3l. <\/p>\n\n\n\n

Mi az a neumorfizmus?<\/h2>\n\n\n\n
Hab\u00e1r a material design k\u00f6sz\u00f6ni sz\u00e9pen, j\u00f3l van, egy designer, Alexander Plyuto<\/a> l\u00e9trehozott nem is olyan r\u00e9gen valamit, ami el\u00e9gg\u00e9 hasonl\u00edt a sok-sok \u00e9vvel kor\u00e1bban minden fel\u00fcletet elbor\u00edt\u00f3 szkeuomorfizmusra, de m\u00e9gis valahogy modernebb k\u00f6nt\u00f6sben jelent meg. Ez az \u00faj szkeuomorfizmus, mely meg is kapta a neuomorfizmus nevet, azt\u00e1n ebb\u0151l lett a neumorfizmus, egy kicsit leegyszer\u0171s\u00edtve.<\/p>\n\n\n\n
$\"\"$
Mi az a neumorfizmus?<\/figcaption><\/figure>\n\n\n\n
Hab\u00e1r a lavina csak 2019 november\u00e9ben indult el, m\u00e1ra m\u00e1r sz\u00e1mtalan alkot\u00e1s sz\u00fcletett ebben a st\u00edlusban. L\u00e1that\u00f3an nagyon felkapta a designerek egy r\u00e9sze. De mi\u00e9rt lett ennyire n\u00e9pszer\u0171? Alapvet\u0151en az\u00e9rt, mert v\u00e9gre valami \u00faj sz\u00fcletett, \u00e9s az emberek im\u00e1dj\u00e1k az \u00fajdons\u00e1gokat. A neumorfizmus szak\u00edtott a szab\u00e1lyos sz\u00edn\u00e1tmenetekkel, \u00e1rny\u00e9kokkal \u00e9s lebeg\u0151 elemekkel, melyekkel m\u00e1r mindenhol tal\u00e1lkozhattunk a weben is.
\u00c9s ami tal\u00e1n m\u00e9g hozz\u00e1j\u00e1rult a siker\u00e9hez, hogy valamik\u00e9ppen kapcsolatban \u00e1ll a val\u00f3 vil\u00e1ggal, amit\u0151l a flat el\u00e9gg\u00e9 elt\u00e1volodott. M\u00e1rpedig az emberek azt is szeretik, ha a digit\u00e1lis term\u00e9kek val\u00f3s\u00e1gosnak n\u00e9znek ki. <\/p>\n\n\n\n
$\"\"$
Neumorfizmus terveken<\/figcaption><\/figure>\n\n\n\n
Milyen el\u0151nyei \u00e9s h\u00e1tr\u00e1nyai vannak?<\/h2>\n\n\n\n
A k\u00e9rd\u00e9s most m\u00e1r csak az, hogy van-e tere, \u00e9s meghat\u00e1roz\u00f3 ir\u00e1nyzatt\u00e1 v\u00e1lik-e a webdesignban? Ehhez \u00e9rdemes sz\u00e1mba venni az el\u0151nyeit \u00e9s a h\u00e1tr\u00e1nyait. Az el\u0151ny\u00f6k k\u00f6z\u00e9 legink\u00e1bb az \u00fajdons\u00e1g ok\u00e1n k\u00fcl\u00f6nlegesnek, eredetinek t\u0171n\u0151 megjelen\u00e9se tartozik. Viszont m\u00e1st nem is igen tal\u00e1lunk.<\/p>\n\n\n\n
Van viszont k\u00e9t komoly h\u00e1tr\u00e1nya: mivel a st\u00edlus a f\u00e9ny-\u00e1rny\u00e9k j\u00e1t\u00e9k\u00e1n alapul, \u00edgy kifejezetten rossz kontrasztar\u00e1nyt produk\u00e1l. Ez eg\u00e9sz egyszer\u0171en azt jelenti, hogy a weboldal vagy alkalmaz\u00e1sok elemei rosszul l\u00e1that\u00f3k, ha a neumorfizmus alapjain \u00e1llnak.<\/p>\n\n\n\n
$\"\"$
Neumorfizmus egy elk\u00e9pzelt applik\u00e1ci\u00f3ban<\/figcaption><\/figure>\n\n\n\n
Gyakorlatilag az \u00e1rny\u00e9kok \u00e9s a f\u00e9ny megjelen\u00e9se hat\u00e1rozza meg a designst\u00edlust: egy vil\u00e1gos \u00e9s egy s\u00f6t\u00e9t r\u00e9sz utal egy elem jelenl\u00e9t\u00e9re. Kontrasztot persze lehet n\u00f6velni, ezzel viszont elveszik a st\u00edlus egyedis\u00e9g\u00e9nek l\u00e9nyege, hirtelen hars\u00e1nny\u00e1 \u00e9s furcs\u00e1v\u00e1 v\u00e1lik.<\/p>\n\n\n\n
$\"\"$
Vil\u00e1gos fel\u00fcleten<\/figcaption><\/figure>\n\n\n\n
A m\u00e1sik gondot a t\u00e9r jelenti, ugyanis, mivel \u00e1rny\u00e9kot haszn\u00e1l, \u00edgy \u00f6sszess\u00e9g\u00e9ben nagyobb teret foglal egy elem, mint ha material st\u00edlusban k\u00e9sz\u00fclt volna el. Mindez pedig meglehet\u0151sen neh\u00e9zz\u00e9 teszi a st\u00edlus alkalmaz\u00e1s\u00e1t akkor, amikor t\u00f6bb elemet is el kell rendezni a weboldalon vagy alkalmaz\u00e1sban. <\/p>\n\n\n\n
Teh\u00e1t a neumorfizmus nem igaz\u00e1n m\u0171k\u00f6dik a gyakorlatban, m\u00e9g ott sem, ahol a legizgalmasabb lenne: gombokn\u00e1l, kapcsol\u00f3kn\u00e1l, folyamatjelz\u0151kn\u00e9l. A kontraszt n\u00f6vel\u00e9se seg\u00edthet, de ahogy n\u0151 a kontraszt, \u00fagy veszik el a megold\u00e1s l\u00e9nyege, ami a sz\u00e9ps\u00e9g\u00e9t adja. <\/p>\n\n\n\n
$\"\"$
Neumorfizmus a gyakorlatban<\/figcaption><\/figure><\/div>\n\n\n\n
Hogyan haszn\u00e1lhat\u00f3 a gyakorlatban?<\/h2>\n\n\n\n
Mi lehet a megold\u00e1s? P\u00e9ld\u00e1ul az, hogy egy adott fel\u00fcleten nem minden elem k\u00e9sz\u00fcl neuformizmust haszn\u00e1lva, hanem csak egy-egy elemn\u00e9l jelenik meg a st\u00edlus. Felbukkanhat olyan elemekn\u00e9l is, melyek nem annyira fontosak, de a fel\u00fclet megjelen\u00e9s\u00e9t ez\u00e1ltal feldobja, eredetibb\u00e9 teszi. Illetve meg lehet kock\u00e1ztatni egy-egy olyan elemn\u00e9l egy adott fel\u00fcleten, melyre fel akarod h\u00edvni a figyelmet. Azt persze ki kell tapasztalni, le kell tesztelni, hogy b\u00e1rmelyik megold\u00e1s m\u0171k\u00f6dik-e, hat\u00e9kony-e.<\/p>\n\n\n\n
$\"\"$
N\u00e9h\u00e1ny elemn\u00e9l haszn\u00e1lhat\u00f3<\/figcaption><\/figure>\n\n\n\n
K\u00eds\u00e9rletezni viszont csak akkor \u00e9rdemes vele, ha egyr\u00e9szt van egy nagyon j\u00f3l struktur\u00e1lt fel\u00fcleted, m\u00e1sr\u00e9szt pedig rendk\u00edv\u00fcl vil\u00e1gos a hierarchi\u00e1ja. Ilyen esetekben a neumorfizmus alkalmaz\u00e1sa feldobhat egy designt, s\u0151t adott esetben ak\u00e1r ki is emelhet egy elemet, de az\u00e9rt alapvet\u0151en dekor\u00e1ci\u00f3s szerep jut neki.<\/p>\n\n\n\n
Ez azt jelenti, hogy a material \u00e9s a neumorfizmus egy fel\u00fcleten p\u00e1rhuzamosan \u00e9lhet, nem pedig azt, hogy a neumorfizmus \u00e1tveszi az uralkod\u00f3 trend szerep\u00e9t. Egyszer\u0171nek, k\u00f6nnyen tervezhet\u0151nek persze nem nevezhet\u0151 egy ilyen design, de lehets\u00e9ges haszn\u00e1lni a k\u00e9t st\u00edlust egy\u00fctt.<\/p>\n\n\n\n
Friss\u00edt\u00e9s, 2021.08.09.:<\/em><\/p>\n\n\n\n
Mi az a glassmorfizmus?<\/h2>\n\n\n\n
Ak\u00e1r a neumorfizmushoz is kapcsolhat\u00f3 2021 egy \u00faj vizu\u00e1lis design ir\u00e1nyzata, a glassmorfizmus vagy m\u00e1s n\u00e9ven a matt- vagy tej\u00fcveg-hat\u00e1s. Egyre gyakrabban t\u0171nik fel a felhaszn\u00e1l\u00f3i fel\u00fcleteken, an\u00e9lk\u00fcl, hogy az emberek egy\u00e1ltal\u00e1n tudat\u00e1ban lenn\u00e9nek annak, hogy egy valami m\u00e1st l\u00e1tnak, mint eddig. <\/p>\n\n\n\n
$\"\"$
Glassmorfizmus mobilon (Forr\u00e1s: Behance<\/a>)<\/figcaption><\/figure><\/div>\n\n\n\n
A glassmorfizmus az \u00e1tl\u00e1tsz\u00f3s\u00e1g \u00e9s az elmos\u00f3d\u00e1s kombin\u00e1ci\u00f3j\u00e1t haszn\u00e1lja, elhom\u00e1lyos\u00edt\u00e1st \u00e9s \u00fcveg-filtert tesz a h\u00e1tt\u00e9r \u00e9s a r\u00e1 helyezett elem k\u00f6z\u00e9. Ez\u00e1ltal egy puh\u00e1bb kontraszt j\u00f6n l\u00e9tre a vil\u00e1gosabb \u00e9s a s\u00f6t\u00e9tebb elemek k\u00f6z\u00f6tt. M\u00e1rpedig \u00e1ltal\u00e1ban arr\u00f3l van sz\u00f3, hogy a sz\u00ednes, de vil\u00e1gos h\u00e1tt\u00e9rre r\u00e1ker\u00fcl egy s\u00f6t\u00e9tebb elem. A megold\u00e1snak a felhaszn\u00e1l\u00f3k szempontj\u00e1b\u00f3l az az el\u0151nye, hogy az elmosott, \u00fcvegszer\u0171 h\u00e1tt\u00e9r miatt k\u00f6nnyebben befogadj\u00e1k a fel\u00fcletet, a rajta l\u00e9v\u0151 sz\u00f6vegeket b\u00e1rmilyen h\u00e1tt\u00e9r eset\u00e9n.<\/p>\n\n\n\n
Persze a glassmorfizmus az\u00e9rt egy kicsit bonyolultabb, mint hogy elmos\u00f3dott h\u00e1tteret haszn\u00e1lunk. Ink\u00e1bb \u00fagy n\u00e9z ki a fel\u00fclet, mintha matt- vagy tej\u00fcveg ker\u00fclne r\u00e1. L\u00e1tod a h\u00e1tt\u00e9r mint\u00e1j\u00e1t, sz\u00edn\u00e9t, \u00e1rny\u00e9kokat, minden elemet, de a form\u00e1k m\u00e1r nem rajzol\u00f3dnak ki hat\u00e1rozottan. Ennyi lenne a l\u00e9nyeg:<\/p>\n\n\n\n
$\"\"$
Glassmorfizmus weboldalon (Forr\u00e1s: Dribbble<\/a>)<\/figcaption><\/figure><\/div>\n\n\n\n
Friss\u00edt\u00e9s, 2021.11.02:<\/em><\/p>\n\n\n\n
Hol haszn\u00e1lhatod a glassmorfizmust a weboldaladon?<\/h3>\n\n\n\nR\u00e9tegek megjelen\u00edt\u00e9se<\/h4>\n\n\n\n
Az olyan effektek haszn\u00e1lata, mint az elhom\u00e1lyos\u00edt\u00e1s, az \u00e1rny\u00e9kok vagy az \u00e1tl\u00e1sz\u00f3s\u00e1g nagyon j\u00f3l alkalmazhat\u00f3, ha k\u00fcl\u00f6nb\u00f6z\u0151 r\u00e9tegeket akarsz megjelen\u00edteni. Lehet sz\u00f3 ak\u00e1r egyetlen elemr\u0151l vagy ak\u00e1r egym\u00e1sra helyezett elemekr\u0151l, egy finoman kifejezett m\u00e9lys\u00e9get tud adni neki a glassmorfizmus \u00fagy, hogy a h\u00e1tt\u00e9r elemei is felsejlenek. Az al\u00e1bbi p\u00e9ld\u00e1n l\u00e1thatod, mir\u0151l is van sz\u00f3:<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Ezen a weboldalon az \u00fcvegr\u00e9teg alatt l\u00e1thatod a h\u00e1tt\u00e9r s\u00f6t\u00e9t is vil\u00e1gos r\u00e9sz\u00e9t is. \u00c9rdemes m\u00e9g megfigyelni a finom \u00e1rny\u00e9kot a feh\u00e9r perem k\u00f6r\u00fcl, mely m\u00e9g hat\u00e1rozottabb\u00e1 teszi az elv\u00e1laszt\u00e1st a h\u00e1tt\u00e9rt\u0151l. R\u00e1ad\u00e1sul itt az \u00fcveghat\u00e1s megjelenik a ragad\u00f3s navig\u00e1ci\u00f3s s\u00e1vn\u00e1l is.<\/p>\n\n\n\n
Ikonok<\/h4>\n\n\n\n
A glassmorfizmus az ikonok designj\u00e1n\u00e1l is megjelent m\u00e1r, ugyanakkor a haszn\u00e1lata nem egyszer\u0171. Ennek oka, hogy az ikonok kicsik, a tej\u00fcveg-hat\u00e1s pedig vizu\u00e1lisan bonyolultabb\u00e1 teszi. Legink\u00e1bb teh\u00e1t olyan ikonokn\u00e1l haszn\u00e1lhat\u00f3, melyek nagyobbak az \u00e1tlagn\u00e1l. Egy tov\u00e1bbi lehet\u0151s\u00e9g, ha nem haszn\u00e1lsz t\u00fal sok ikont, mik\u00f6zben minden forma \u00e9s funkci\u00f3 k\u00f6nnyen \u00e9rthet\u0151.<\/p>\n\n\n\n
$\"\"$ <\/a><\/figure><\/div>\n\n\n\n
Sz\u00ednes h\u00e1tterek<\/h4>\n\n\n\n
A matt\u00fcveg-hat\u00e1s azonban a weboldalak h\u00e1tter\u00e9nek alapj\u00e1t is jelentheti. A l\u00e9nyeg itt az, hogy elhom\u00e1lyos\u00edtod a h\u00e1tt\u00e9rk\u00e9pet vagy h\u00e1tt\u00e9rsz\u00edneket eg\u00e9szen addig, am\u00edg a l\u00e1togat\u00f3 m\u00e1r nem pr\u00f3b\u00e1lja meg kital\u00e1lni, hogy mi lehet a h\u00e1tt\u00e9rben. <\/p>\n\n\n\n
Ezen a weboldalon t\u00f6bb r\u00e9tegben is megjelenik az \u00fcveg-hat\u00e1s: egyr\u00e9szt a h\u00e1tt\u00e9rn\u00e9l, majd egy r\u00e1helyezett k\u00f6z\u00e9ps\u0151 r\u00e9tegn\u00e9l, amire m\u00e9g a norm\u00e1l elemek r\u00e1ker\u00fclnek. <\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Az elmos\u00f3dott h\u00e1tteret l\u00e1tjuk ezen a weboldalon is, kicsit kevesebb sz\u00ednnel, melyek az el\u0151tte l\u00e1that\u00f3 sz\u00f6vegre h\u00edvj\u00e1k fel a figyelmet. Ez tal\u00e1n a legegyszer\u0171bb alkalmaz\u00e1sa a glassmorfizmusnak egy weboldalon, mivel csak a h\u00e1tt\u00e9rre van r\u00e1helyezve egy r\u00e9teg, tov\u00e1bbi r\u00e9tegek nem bonyol\u00edtj\u00e1k. <\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Ugyanakkor nem biztos, hogy \u00e9rdemes a teljes h\u00e1tt\u00e9rn\u00e9l matt\u00fcveg-hat\u00e1st alkalmazni, mivel ilyenkor lehet, hogy nem l\u00e1tszik t\u00f6bbnek egy gradiensn\u00e9l.<\/p>\n\n\n\n
K\u00e1rty\u00e1kn\u00e1l<\/h4>\n\n\n\n
A matt\u00fcveg-hat\u00e1s nagyon j\u00f3l haszn\u00e1lhat\u00f3 k\u00e1rty\u00e1kn\u00e1l, mivel elv\u00e1laszt\u00e1st hoz l\u00e9tre az elemek k\u00f6z\u00f6tt. A k\u00e1rty\u00e1ra ker\u00fclhet ak\u00e1r egy blogbejegyz\u00e9s is vagy ak\u00e1r csak egy gomb, a lehet\u0151s\u00e9gek k\u00f6re meglehet\u0151sen sz\u00e9les. <\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Forma vagy gomb kiemel\u00e9se<\/h4>\n\n\n\n
A glassmorfizmus akkor is j\u00f3l haszn\u00e1lhat\u00f3, ha csak egyes elemekn\u00e9l alkalmazzuk a weboldalon. Az al\u00e1bbi p\u00e9ld\u00e1n az \u0171rlapra, illetve a CTA-ra h\u00edvja fel a figyelmet.<\/p>\n\n\n\n
$\"\"$ <\/a><\/figure><\/div>\n\n\n\n
A vil\u00e1gosabb, \u00fcveg-szer\u0171en megjelen\u0151 beviteli mez\u0151 a s\u00f6t\u00e9t h\u00e1tt\u00e9ren odavonzza a tekintetet, sokkal ink\u00e1bb, mint csak egy keret lenne a mez\u0151 k\u00f6r\u00fcl.<\/p>\n\r\n