2020–nykyhetki

Neomorphism

Pehmeitä koneita. Käyttöliittymiä joita haluat koskettaa.

Principles

Pursotettu, ei litteä

Jokainen elementti on työnnetty ulos taustasta tai painettu sisään siihen. Ei ole litteää pintaa — vain kohotettuja painikkeita ja upotettuja syöttökenttiä. Käyttöliittymällä on fyysinen syvyys.

Tämä saavutetaan kokonaan varjolla: vaalea varjo toisella puolella, tumma varjo toisella. Taustaväri on sama kaikkialla — vain valo paljastaa muodon.

Monokromaattinen pinta

Tausta ja etuala jakavat saman värin. Ei ole 'korttia' eri taustalla — vain sama pinta, valon ja varjon veistämänä eri korkeuksiksi.

Tämä rajoite on radikaali: väri ei voi luoda hierarkiaa. Vain varjo voi.

Tuntuva vuorovaikutus

Painikkeet näyttävät painettavilta. Klikattaessa niiden tulisi näyttää vajoavan pintaan. Kohotettu tila muuttuu painetuksi tilaksi — varjot kääntyvät.

Tämä luo fyysisen metaforan vahvemman kuin mikään muu digitaalinen tyyli: et klikkaa pikseleitä, vaan painat pehmeää materiaalia.

Minimaalinen väri

Väriä käytetään vain aksenttiin — yksi sävy joka merkitsee interaktiiviset tai tärkeät elementit. Kaikki muu on harmaata, valon veistämää.

Why This Style Exists

Neomorphism (yhdyssana sanoista 'new' ja 'skeuomorphism') nousi vuoden 2019 lopulla kun suunnittelija Alexander Plyuto julkaisi konseptin Dribbblessä joka levisi viraalisti. Se ehdotti keskitietä litteän designin ja skeuomorfismin välillä.

Tyyli kysyy: entä jos säilyttäisimme litteän designin yksinkertaisuuden mutta toisimme takaisin fyysisen syvyyden? Ei realistisin tekstuurein (vanha skeuomorfismi) vaan puhtaalla valolla ja varjolla.

Where it appeared

  • Dribbble-konseptit (2019–2020) — tyyli räjähti suunnitteluharjoituksena
  • Älykodin käyttöliittymät — fyysiset säätimet renderöitynä pehmeinä, painettavina pintoina
  • Kojelauta-UI:t — datavisualisointi tuntuvin, kohotetuin kortein

Legacy

Neomorphism osoittautui kiistanalaiseksi — kaunis mockupeissa, ongelmallinen tuotannossa (saavutettavuusongelmat matalakontrastisten reunojen kanssa). Mutta se laajensi digitaalisen syvyyden sanastoa.

Sen vaikutus elää hienovaraisin tavoin: pehmeät varjot, monokromaattiset pinnat ja ajatus että käyttöliittymät voivat tuntua tuntuvilta olematta skeuomorfisia.

Typografia

Neomorphism-typografia on puhdasta ja geometrista. Fontin ei tule kilpailla varjoefektien kanssa — sen tulisi tuntua upotetulta pintaan, osaksi samaa materiaalia.

  • Geometrinen groteski — puhdas, moderni, huomaamaton.
  • Medium-lihavuudet — ei liian lihava (tuntuisi raskaalta), ei liian ohut (tuntuisi irralliselta tuntuvasta pinnasta).
  • Hienovarainen väriero — teksti on tummempaa kuin pinta muttei mustaa. Se tuntuu painetulta materiaaliin.

Värit

Neomorphism-väri on lähes ei väriä. Koko käyttöliittymä on yksi sävy eri varjotasoilla. Aksenttiväri on ainoa poikkeus — ja sitä on käytettävä säästeliäästi.

  • Yksi taustasävy — kaikki on samaa väriä. Syvyys tulee varjosta, ei värierosta.
  • Vaaleat ja tummat varjot — valkoinen varjo toisella puolella, tumma varjo toisella. Tämä luo 3D-illuusion.
  • Yksi aksentti — yksi kylläinen väri interaktiivisille elementeille.

Muodot

Neomorphism-muodot määritellään kokonaan varjolla, ei reunalla. Ei ole näkyviä reunoja — vain valon ja tumman varjon vuorovaikutus joka saa elementit näyttämään kohotetuilta tai upotetuilta.

Reunan pyöristys on antelias (vastaten pehmeää varjoestetiikkaa) ja johdonmukainen kaikissa elementeissä.

  • Ei reunoja — reunat korvataan varjopareilla. Reuna on vihjattu, ei piirretty.
  • Johdonmukainen pyöristys — 12px–20px kaikkialla. Yhdenmukaisuus vahvistaa 'yhden materiaalin' illuusion.
  • Kaksoisvarjot — jokaisella kohotetulla elementillä on vaalea varjo (ylävasen) ja tumma varjo (alaoikea).
  • Upotus painetuille tiloille — interaktiiviset elementit käyttävät upotettuja varjoja aktiivisina.

Kontrasti

Neomorphism-kontrasti on varjopohjaista. Ei värikontrastia (kuten Memphis), ei arvokontrastia (kuten Dark Luxury). Tässä ainoa kontrasti on kohotetun ja upotetun välillä — vaalean varjon ja tumman varjon välillä.

Vaalea varjo ja tumma varjo

Perustavanlaatuinen pari. Valkoinen varjo toisella puolella, tumma varjo toisella. Yhdessä ne luovat illuusion pinnasta joka on työnnetty ulos (tai painettu sisään) taustasta. Tämä on ainoa kontrastimekanismi.

Kohotettu ja painettu

Painike oletustilassaan on kohotettu (ulospäin suuntautuvat varjot). Klikattaessa siitä tulee painettu (sisäänpäin suuntautuvat varjot). Kontrasti näiden kahden tilan välillä on koko vuorovaikutuskieli.

Pinta ja aksentti

Monokromaattinen pinta yhtä kylläistä aksenttiväriä vasten. Aksentti on ainoa 'oikea' väri — kaikki muu on valon veistämää harmaata. Tämä tekee aksentista poikkeuksellisen voimakkaan.

Rytmi

Neomorphism-rytmi on yhdenmukaista ja rauhallista. Jokaisella elementillä on sama varjokäsittely. Jokaisella kortilla on sama pyöristys. Rytmi tulee identtisten muotojen toistosta — kuin laatat seinällä.

Laattagrid

Elementit toistuvat säännöllisin välein identtisin mittasuhtein. Rytmi on arkkitehtoninen — kuin tiilet, kuin laatat, kuin reliefiveistos. Jokainen elementti on sama muoto, sama koko, sama varjo.

Varjon johdonmukaisuus

Jokaisella kohotetulla elementillä on sama varjon siirto, sama sumennus, samat värit. Tämä absoluuttinen johdonmukaisuus luo 'yhden materiaalin' illuusion. Yksi epäjohdonmukainen varjo rikkoo kaiken.

Anteliaat aukot

Elementit tarvitsevat tilaa väliinsä — ei hengitykseen (kuten Nordic) vaan varjotilaan. Varjot tarvitsevat tilaa renderöityäkseen. Tiukka välistys aiheuttaa varjotörmäyksiä jotka tuhoavat 3D-illuusion.

Hierarkia

Neomorphism-hierarkia on rajatuin tällä sivustolla. Ilman värivaihtelua ja ilman reunavaihtelua hierarkian on tultava pelkästään varjon syvyydestä ja koosta.

Varjon syvyys

Suuremmat varjot = kohotetumpi = tärkeämpi. Kortti 8px varjon siirrolla on 'korkeammalla' kuin 4px:n kortti. Hierarkia on kirjaimellisesti fyysinen — lähempänä katsojaa tarkoittaa tärkeämpää.

Koko

Suuremmat elementit ovat tärkeämpiä. Tämä on yksinkertaisin mahdollinen hierarkia — ja neomorfismissa yksinkertaisuus on pakollista. Tyyli ei voi tukea monimutkaisia hierarkkisia järjestelmiä.

Aksenttiväri

Yksittäinen aksenttiväri merkitsee tärkeimmän interaktiivisen elementin. Koska se on ainoa väri, se kantaa valtavaa painoa. Käytä sitä kerran per näkymä — älä koskaan kahdesti.

Tunnusomaiset piirteet

Neomorphism tunnistetaan sen materiaali-illuusiosta — tunteesta että käyttöliittymä on veistetty yhdestä pehmeän materiaalin palasta.

Kaksoisvarjo

Vaalea varjo (ylävasen) + tumma varjo (alaoikea). Tämä pari on koko visuaalinen järjestelmä. Ilman sitä neomorfismia ei ole. Sen kanssa litteistä suorakulmioista tulee kolmiulotteisia objekteja.

Monokromaattinen pinta

Tausta ja etuala ovat samaa väriä. Tämä on radikaali rajoite. Millään kortilla ei ole eri taustaa. Mikään paneeli ei ole vaaleampi tai tummempi. Syvyys tulee vain varjosta, ei koskaan väristä.

Yksi valonlähde

Kaikki varjot osoittavat samaan suuntaan — vihjaten yhtä valonlähdettä (tyypillisesti ylävasen). Muuta suuntaa yhdessä elementissä ja fyysinen metafora romahtaa. Johdonmukaisuus ei ole neuvoteltavissa.

Saavutettavuusongelma

Neomorfismin suurin heikkous on myös sen tunnusomainen piirre: matala kontrasti. Samanväriset pinnat joissa vain varjo erottaa voivat olla vaikeasti havaittavia näkövammaisille käyttäjille. Tämä ei ole vika jota piilottaa — se on rajoite jota tunnustaa. Tyyli on kaunis muttei universaalisti saavutettava.

Tila

Tilan neomorfismissa on oltava antelias — varjot tarvitsevat tilaa hengittää. Liian lähellä toisiaan olevat elementit luovat varjotörmäyksiä jotka rikkovat 3D-illuusion. Jokainen kohotettu elementti tarvitsee selvää ilmaa ympärilleen.

Valo

Valo neomorfismissa tulee johdonmukaisesta suunnasta — tyypillisesti ylävasemmalta. Tämä yksittäinen valonlähde luo varjoparit jotka määrittävät jokaisen elementin. Muuta valon suuntaa ja koko käyttöliittymän on muututtava sen mukana.

Miten tämä tyyli rikkoutuu

Neomorphism on hauraimpia tyylejä tässä kokoelmassa. Pienet virheet tuhoavat illuusion täysin.

Eri taustavärit korteille

Sillä hetkellä kun kortilla on eri tausta kuin sen säiliöllä, 'yhden materiaalin' illuusio rikkoutuu. Kaiken on oltava samaa väriä — vain varjo luo erottelun.

Näkyvät reunat

Reuna sanoo 'tämä on erillinen elementti'. Neomorphism sanoo 'tämä on sama pinta, kohotettuna'. Nämä ovat ristiriitaisia viestejä.

Epäjohdonmukainen valon suunta

Jos yhdellä elementillä on valo ylävasemmalta ja toisella alaoikealta, fyysinen metafora romahtaa. Yksi valonlähde, aina.

Matalakontrastinen teksti

Suurin saavutettavuusongelma. Teksti samanvärisellä taustalla jossa vain varjo erottaa voi olla vaikealukuista. Varmista riittävät kontrastisuhteet.