Glassmorphism vs Neomorphism

Minkä ongelman molemmat ratkaisevat?

Sen jälkeen kun litteä design poisti kaikki syvyysvihjeet (2013–2019), sekä Glassmorphism että Neomorphism ehdottivat: entä jos toisimme syvyyden takaisin — mutta hienovaraisesti?

Molemmat hylkäävät kovat pudotusvarjot (Material Design) ja molemmat hylkäävät puhtaan litteyden. Mutta niiden ratkaisut ovat vastakohtia toteutukseltaan.

Miten ne luovat syvyyden eri tavoin?

Glassmorphism: syvyyttä läpinäkyvyyden kautta. Pinta on läpikuultava — näet sumennettua sisältöä takana. Syvyys todistetaan koska yksi kerros istuu visuaalisesti toisen edessä.

Neomorphism: syvyyttä pursotuksen kautta. Pinta on samanvärinen kuin taustansa — kohotettuna tai painettuna vastakkaisin varjoin. Syvyys tunnetaan valon kautta, ei kerrostuksen.

Glassmorphism on lasia lasilla. Neomorphism on savea painettuna savesta.

Miten niiden paletit eroavat?

Glassmorphism: tumma tausta (#1a1a2e) läpikuultavin pinnoin (rgba-valkoinen 8 %:ssa). Pimeys on olennaista — läpinäkyvyys tarvitsee kontrastia ollakseen näkyvä.

Neomorphism: yhtenäinen vaalea tausta (#e0e5ec) kaikelle. Tausta ja pinta ovat samaa väriä. Vain varjo luo erottelun.

Glassmorphism on luonnostaan dark-mode. Neomorphism on luonnostaan light-mode. Kummankin vaihtaminen rikkoo illuusion.

Miten ne käsittelevät reunoja?

Glassmorphism: hienovaraiset vaaleat reunat (rgba-valkoinen 15 %:ssa) simuloivat valoa nappaavan lasin reunaa. Reuna on heijastus, ei rakenne.

Neomorphism: ei reunoja lainkaan (border-width: 0px). Reuna rikkoisi 'yhden materiaalin' illuusion. Erottelu tulee vain varjosta.

Tämä on selkein tunnistin: jos siinä on läpikuultavia reunoja → Glassmorphism. Jos siinä ei ole reunoja → Neomorphism.

Kumpi on saavutettavampi?

Glassmorphism (huolellisesti): teksti tummilla läpikuultavilla pinnoilla voi olla luettavaa jos taustan peittävyys on riittävä ja sumennus vahva. Toteutuksemme käyttää 65 %:n peittävyyttä + 16px sumennusta.

Neomorphism (ongelmallinen): samanväriset pinnat joissa vain varjo erottaa luovat luontaisesti matalan kontrastin. Tekstin/taustan suhde on 5.9:1 — juuri ja juuri WCAG AA -minimin yläpuolella.

Glassmorphism on helpompi tehdä saavutettavaksi. Neomorphismin perusoletus (sama väri kaikkialla) taistelee kontrastivaatimuksia vastaan.

Kumman pitäisi valita?

Valitse Glassmorphism kun: sinulla on kerroksellista sisältöä (kortteja karttojen yllä, paneeleja kojelaudoilla), käyttöliittymä hyötyy kontekstin näkymisestä läpi, ja voit taata tumman tai värikkään taustan.

Valitse Neomorphism kun: käyttöliittymä on yksinkertainen (vähän elementtejä, vähän tekstiä), tuntuvalla laadulla on väliä (fyysiset säätimet, musiikkisoittimet, laskimet), ja voit hyväksyä saavutettavuuskompromissit.

Kumpikaan ei ole hyvä oletus tekstipainotteiselle sisällölle. Molemmat toimivat parhaiten interaktiivisille komponenteille eikä lukukokemuksille.