Neumorfismus

Z Wikipedie, otevřené encyklopedie

Neumorfismus je styl designu uživatelského rozhraní, který začal získávat na popularitě koncem roku 2019[1]. Název neumorfismus (angl. neumorphism) vznikl spojením anglických slov „nový“ (new) a „skeumorfismus“ (skeuomorphism).

Tlačítko v designu neumorfismu ve světlém a tmavém provedení.

Design[editovat | editovat zdroj]

Neumorfismus je kombinací dvou předchozích designových směrů – jednoduchého plochého (flat) designu a již zastaralého skeumorfismu, pro který bylo charakteristické napodobování různých prvků, textur a stínů z reálného světa. Zachovává si čisté rozhraní z plochého designu, zároveň ale používá stíny a odlesky typické pro starý skeumorfismus, které tak vytváří plastický vzhled. Proto bývá také někdy označován jako „nový skeumorfismus“.

Tyto stíny definují dvě hlavní části neumorfismu – vyvýšený prvek a zapuštěný (například virtuální tlačítko v pozici zapnuto/vypnuto). Efektu je dosáhnuto pomocí světlého odlesku a tmavého stínu na vnější či vnitřní straně prvku (každé vždy na dvou libovolných sousedních stranách). Stín kromě přidání hloubky také v mnoha případech definuje samotný tvar prvku, protože ty jsou často zcela bez okrajů.

Nevýhody[editovat | editovat zdroj]

Mezi nevýhody neumorfismu patří nízký kontrast, což představuje problém zejména pro osoby s horším zrakem. Jednotlivé prvky mají stejnou barvu jako pozadí a odlišuje je tak jen jejich výška pomocí stínování. Uživatel tak snadno může přehlédnout nějaké tlačítko.

Další problém představuje omezená možnost použití barev. Neumorfismus je nejlépe viditelný na světlých ne příliš výrazných barvách.[2] Zároveň je vyloučeno použití bíle či černé barvy z důvodu zaniknutí efektu. Na bílém pozadí není vidět odlesk a na černém naopak stín.

Odkazy[editovat | editovat zdroj]

Reference[editovat | editovat zdroj]

  1. MALEWICZ, Michal. Neumorphism in user interfaces. Medium [online]. 2020-10-12 [cit. 2020-11-20]. Dostupné online. (anglicky) 
  2. ADAMGIEBL@GMAIL.COM, Adam Giebl. Neumorphism/Soft UI CSS shadow generator. neumorphism.io [online]. [cit. 2020-11-20]. Dostupné online. (anglicky) 

Externí odkazy[editovat | editovat zdroj]