Sobes.tech
Middle

Pověz mi o standardech UI souvisejících s Material Design.

sobes.tech AI

Odpověď od AI

Material Design je systém vizuálního návrhu vyvinutý společností Google. Zahrnuje standardy pro typografii, mřížku, barvu, interaktivní prvky, využití prostoru a pohyb.

Hlavní principy:

  • Materiál — metafora. Používá skutečné fyzikální vlastnosti k napodobení chování objektů (zvedání, stín).
  • Odvážný, grafický, záměrný — důraz na typografii, barevnou paletu a obrázky pro vytváření hierarchie a smyslu.
  • Pohyb — smysluplný. Přechody a animace pomáhají uživateli se orientovat a pochopit, co se stalo.

Klíčové komponenty a pravidla:

  • Barva: Použití hlavní palety (primární, sekundární barvy) a pomocných (povrch, pozadí, chyba, stavový řádek). Konzistence barevného schématu.
  • Typografie: Definované fonty (například Roboto, Open Sans), velikosti a styly (nadpis, titulek, tělo, popisek) pro různé úrovně hierarchie textu.
  • Ikony: Jednotný styl, velikost, tvar a tloušťka čar. Vektorové obrázky.
  • Struktura a navigace: Použití standardních prvků: lišta aplikace, navigační zásuvka, spodní navigační lišta.
  • Prostor: Dodržování standardních hodnot okrajů, výplní a velikostí prvků (například kroky v 4dp nebo 8dp).
  • Stín a výška: Použití stínů k vytvoření hloubky a zvýraznění interaktivních prvků (například tlačítek). Vyšší výška = silnější stín.
  • Tvary: Použití zaoblených rohů, tvarů pro tlačítka, karty a další prvky.
  • Stavy: Jasné vizuální zobrazení stavů prvků (povoleno, zakázáno, zaměřeno, stisknuto).
  • Vstup dat: Standardizovaná vstupní pole (textová pole) s nápovědami a indikátory chyb.
  • Dialogy a zprávy: Použití standardních dialogových oken a Snackbarů pro oznámení.

Standardy UI v Material Designu jsou zaměřeny na vytvoření intuitivního, konzistentního a příjemného uživatelského zážitku na různých zařízeních a platformách.