Sobes.tech
Middle

Porozprávaj mi o štandardoch UI súvisiacich s Material Design.

sobes.tech AI

Odpoveď od AI

Material Design je systém vizuálneho návrhu vyvinutý spoločnosťou Google. Zahŕňa štandardy pre typografiu, mriežku, farbu, interaktívne prvky, využívanie priestoru a pohyb.

Hlavné princípy:

  • Materiál — metafora. Používa skutočné fyzikálne vlastnosti na napodobenie správania objektov (zdvíhanie, tieň).
  • Odvážne, grafické, zámerné — dôraz na typografiu, farebnú paletu a obrázky na vytvorenie hierarchie a významu.
  • Pohyb — zmysluplný. Prechody a animácie pomáhajú používateľovi sa orientovať a pochopiť, čo sa stalo.

Kľúčové komponenty a pravidlá:

  • Farba: Použitie hlavnej palety (primárne, sekundárne farby) a pomocných (povrch, pozadie, chyba, stavový pruh). Konzistencia farebného schémy.
  • Typografia: Definované fonty (napríklad Roboto, Open Sans), veľkosti a štýly (nadpis, titul, telo, popis) pre rôzne úrovne hierarchie textu.
  • Ikony: Jednotný štýl, veľkosť, tvar a hrúbka čiar. Vektorové obrázky.
  • Štruktúra a navigácia: Použitie štandardných prvkov: lišta aplikácie, navigačná zásuvka, spodná navigačná lišta.
  • Priestor: Dodržiavanie štandardných hodnôt pre okraje, výplne a veľkosti prvkov (napríklad kroky v 4dp alebo 8dp).
  • Tieň a výška: Použitie tieňov na vytvorenie hĺbky a zvýraznenie interaktívnych prvkov (napríklad tlačidiel). Vyššia výška = silnejší tieň.
  • Tvary: Použitie zaoblených rohov, tvarov pre tlačidlá, karty a ďalšie prvky.
  • Stavy: Jasná vizuálna reprezentácia stavov prvkov (povolené, zakázané, zamerané, stlačené).
  • Vstup dát: Štandardizované vstupné polia (textové polia) s nápovedami a indikátormi chýb.
  • Dialógy a správy: Použitie štandardných dialógových okien a Snackbarov na oznámenia.

Štandardy UI v Material Design sú zamerané na vytváranie intuitívneho, konzistentného a príjemného používateľského zážitku na rôznych zariadeniach a platformách.