UX / Návrh rozloženia obrazovky

Používateľské rozhrania a používateľský zážitok

Návrh rozloženia obrazovky

Michaela Bačíková, Sergej Chodarev

Layout

Čo rieši layout?

Layout určuje:

Obsah pred rozložením

Pred kreslením obrazovky určite:

Dobré rozloženie vyjadruje štruktúru obsahu.

Vizuálna hierarchia

Vizuálna hierarchia

Vizuálna hierarchia určuje, čo si používateľ všimne ako prvé a čo nasleduje.

Vytvárame ju pomocou:

Poradie pozornosti

Každá obrazovka potrebuje jasnú odpoveď na otázky:

  1. Kde sa nachádzam?
  2. Čo je tu najdôležitejšie?
  3. Čo môžem urobiť?
  4. Čo sa stane potom?

Ak všetko vyzerá rovnako dôležito, používateľ musí hierarchiu hľadať sám.

Veľkosť a kontrast

Veľkosť signalizuje význam. Kontrast usmerňuje pozornosť.

Poloha a priestor

Prázdne miesto nie je nevyužitá plocha. Pomáha vysvetliť štruktúru.

Kotvové objekty

Zoskupovanie prvkov

Gestalt princípy

Používatelia nevnímajú každý prvok samostatne. Hľadajú celky a vzťahy.

Gestalt principles and some other aspects of visual perception

Blízkosť

Vzdialenosť medzi prvkami vyjadruje ich vzťah.

Používateľ má skupiny rozpoznať aj bez rámikov.

Pravidlo vnútorného a vonkajšieho priestoru

Vnútorný priestor ≤ vonkajší priestor

The rule of the inner and the outer

Zarovnanie

Každý prvok má mať dôvod, prečo začína práve na danom mieste.

Rešpektujme prirodzené poradie skenovania

Mriežka a rytmus

Modulárnosť

Rozhranie skladáme z opakovateľných častí:

Modulárnosť podporuje konzistentnosť a uľahčuje zmenu rozloženia.

Rozdelenie plochy

Anatomické časti mriežky

Grid system

Josef Müller-Brockmann: Grid systems in graphic design

Mriežka ako pomôcka

Príliš rigidná mriežka môže vytvoriť monotónne rozloženie. Obsah má prednosť pred pravidelnosťou.

CSS layout

Normálny tok dokumentu

Prvky sa bez ďalších pravidiel ukladajú v poradí HTML:

Normálny tok je základ responzívneho rozloženia.

Box model

Každý prvok tvorí obdĺžnik:

  1. obsah,
  2. vnútorný okraj padding,
  3. rám border,
  4. vonkajší okraj margin.
* {
  box-sizing: border-box;
}

Priestor medzi prvkami

Používajte predvídateľnú stupnicu, napríklad:

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
}

Flexbox

Flexbox

Flexbox usporadúva prvky primárne v jednom rozmere.

Vizuálny sprievodca

Kedy použiť Flexbox

Flexbox rieši vzťah položiek v jednom smere.

CSS Grid

CSS Grid

Grid usporadúva prvky v riadkoch aj stĺpcoch.

Vizuálny sprievodca

Stĺpce, riadky a medzery

.layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2rem;
}

Responzívna mriežka kariet

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.5rem;
}

Počet stĺpcov sa prispôsobí dostupnej šírke bez pevne určených breakpointov.

Pomenované oblasti

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "aside  main"
    "footer footer";
  grid-template-columns: 16rem 1fr;
}

header { grid-area: header; }
aside  { grid-area: aside; }
main   { grid-area: main; }
footer { grid-area: footer; }

Subgrid

Vnorený grid môže prevziať stĺpce alebo riadky rodičovskej mriežky.

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

Subgrid pomáha zarovnať obsah opakovaných komponentov.

Subgrid

Flexbox alebo Grid?

Potreba Vhodnejší nástroj
Riadok alebo stĺpec prvkov Flexbox
Súčasné riadky a stĺpce Grid
Rozmery určuje najmä obsah Flexbox
Rozmery určuje spoločná mriežka Grid
Zarovnanie komponentov v sekcii Grid
Zarovnanie obsahu komponentu Flexbox

V jednom rozhraní sa bežne kombinujú.

Responzívne rozloženie

Responzívnosť podľa obsahu

Breakpoint vyplýva z obsahu, nie z názvu zariadenia.

Plynulé rozmery

.page {
  width: min(100% - 2rem, 75rem);
  margin-inline: auto;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

min(), max() a clamp() obmedzujú rozmery bez množstva breakpointov.

Media queries

.layout {
  display: grid;
  gap: 1.5rem;
}

@media (width >= 50rem) {
  .layout {
    grid-template-columns: 16rem 1fr;
  }
}

Media query reaguje na vlastnosti viewportu alebo zariadenia.

Container queries

Komponent reaguje na priestor vo svojom kontajneri.

.card-list {
  container-type: inline-size;
}

@container (width >= 32rem) {
  .card {
    grid-template-columns: 10rem 1fr;
  }
}

CSS container queries

Ďalšie spôsoby rozloženia

Ďalšie nástroje CSS

Každý mechanizmus má konkrétny účel. Jeden layout nemusí používať iba jednu techniku.

Absolútne pozicionovanie

position: absolute vyberie prvok z normálneho toku.

Vhodné na:

Nevhodné na základné rozloženie stránky alebo na obsah s nepredvídateľnou dĺžkou.

Prístupnosť

Vizuálne a logické poradie

Vizuálna hierarchia nesmie odporovať logickej hierarchii.

Odolnosť rozloženia

Testujte:

Kontrola návrhu

  1. Je najdôležitejší obsah viditeľný ako prvý?
  2. Súvisiace prvky tvoria rozpoznateľné skupiny?
  3. Používa rozhranie konzistentné zarovnanie a medzery?
  4. Zostáva poradie obsahu zmysluplné bez CSS?
  5. Prispôsobí sa layout obsahu a dostupnému priestoru?
  6. Funguje pri klávesnici a zväčšenom texte?

Zhrnutie