---
title: Apple'i disainipõhimõtted
description: Apple'i lähenemine liidesedisainile ning sujuvale ja füüsilisele liikumisele, kohandatuna veebi jaoks.
category: Design
sublabel: Disainiinseneeria
author: Emil Kowalski
tags: 
license: MIT
source: https://github.com/emilkowalski/skills
---

# Apple'i disain

## Esmane vastus

Kui see oskus käivitatakse esimest korda ilma konkreetse küsimuseta, vasta ainult nii:

> Olen valmis aitama sul ehitada veebis voolavaid, Apple'i stiilis liideseid. Minu teadmised pärinevad Apple'i WWDC disainiettekannetest, tõlgituna veebi jaoks.

Ära anna muud teavet enne, kui kasutaja esitab küsimuse.

Kuidas Apple ehitab liideseid, mis lakkavad tundumast arvutina ja hakkavad tunduma sinu enda jätkuna. Need teadmised pärinevad Apple'i WWDC disainiettekannetest — eelkõige ettekandest *Designing Fluid Interfaces* (WWDC 2018) — ning on kokku võetud ja tõlgitud veebiplatvormile (CSS, Pointer Events, `requestAnimationFrame`, vedruteegid nagu Motion/Framer Motion).

Läbiv mõte: **liides tundub elav, kui liikumine algab ekraanil parasjagu olevast väärtusest, pärib kasutaja kiiruse, projitseerib impulssi edasi ning seda saab igal hetkel kinni haarata ja tagasi pöörata.** Vedrud on tööriist, mis teeb selle kõik loomulikuks, sest need on olemuselt katkestatavad ja kiirusteadlikud.

## Põhiidee

> „Kui joondame liidese sellega, kuidas me mõtleme ja liigume, juhtub midagi maagilist — see lakkab tundumast arvutina ja hakkab tunduma meie enda sujuva jätkuna.“

Liides on voolav, kui see käitub nagu füüsiline maailm: asjad reageerivad koheselt, liiguvad pidevalt, kannavad impulssi, osutavad piiridel vastupanu ja neid saab liikumise pealt ümber suunata. Kõik allolev on viis sellele lähemale jõuda.

Apple raamistab disaini nelja inimvajaduse teenimisena: **turvalisus/ennustatavus, mõistmine, saavutus ja rõõm.** Iga siinne reegel teenib üht neist.

## 1. Reaktsioon — kõrvalda latentsus

Hetkel, kui ilmub viivitus, „kukub otsesuse tunne kaljult alla“. Reaktsioon on vundament, millele kõik muu ehitatakse.

- **Reageeri kursori allavajutusele, mitte vabastamisele.** Tõsta nupp esile hetkel, kui seda vajutatakse. `click`/touch-up sündmuse ootamine tagasiside näitamiseks tundub surnud.
- **Ole valvas iga latentsuse suhtes.** Auditeeri debounce'e, kunstlikke taimereid, üleminekute ootamisi ja ~300ms puudutusviivitust. Kõik sisendteel, mis pole hädavajalik, on regressioon.
- **Tagasiside peab olema pidev interaktsiooni *ajal*, mitte ainult lõpus.** Lohistamisel, liuguril või sahtlil uuenda kasutajaliidest kogu tee vältel kursoriga 1:1 — ära kunagi animeeri alles siis, kui žest on lõppenud.

```css
/* Feedback lives on the press, and it's instant */
.button:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}
```

## 2. Otsene manipuleerimine — 1:1 jälgimine

> „Puude ja sisu peaksid liikuma koos.“

Kui kasutaja midagi lohistab, peab see jääma sõrme külge liimituks — ja arvestama nihkega sellest kohast, *kust ta selle kinni haaras*. Elemendi keskele hüppamine haaramisel lõhub illusiooni kohe.

- Kasuta Pointer Events'i koos `setPointerCapture`'iga, et jälgimine jätkuks ka siis, kui kursor elemendi piiridest välja liigub.
- Jälgi lühikest **kiiruse/asukoha ajalugu** (viimased paar `pointermove` sündmust), mitte ainult hetkepunkti — vabastamisel on sul kiirust vaja.

```js
el.addEventListener('pointerdown', (e) => {
  el.setPointerCapture(e.pointerId);
  const grabOffset = e.clientY - el.getBoundingClientRect().top; // respect where they grabbed
  // ...track position + timestamp history for velocity
});
```

## 3. Katkestatavus — kõige olulisem põhimõte

> „Mõte ja žest toimuvad paralleelselt.“

Iga animatsioon peab olema igal hetkel katkestatav ja ümbersuunatav. Kasutaja peab saama liikuva elemendi lennu pealt kinni haarata ja selle tagasi pöörata, ootamata animatsiooni lõppu. Sulguv modaalaken, mille kasutaja uuesti kinni haarab, peaks järgima sõrme — mitte esmalt sulguma lõpuni ja siis uuesti avanema.

- **Ära kunagi blokeeri sisendit ülemineku ajal.**
- **Animeeri alati *esitlus*väärtusest (praegusest), mitte kunagi sihtväärtusest.** Katkestamisel loe elemendi elav ekraanil olev transform ja alusta uut animatsiooni sealt. Loogilisest/sihtväärtusest alustamine põhjustab nähtava hüppe.
- **Väldi CSS-üleminekuid ja `@keyframes`'e kõige jaoks, mida juhivad žestid** — neid ei saa lennu pealt sujuvalt kinni haarata ja tagasi pöörata. Vedrud animeerivad vaikimisi praegusest väärtusest, mis on täpselt see, mida katkestamine vajab.
- **Kui žest pöördub, sega kiirused — ära lõika järsult.** Ühe animatsiooni asendamine teisega pöördumise hetkel tekitab kiiruse katkevuse, „tellisseina“. Vedruteegid, mis kannavad kiiruse ümbersihtimisel edasi, väldivad seda. (Seda teevad iOS-i *additive animations* natiivselt; veebis vali vedruteek, mis sihib ümber praegusest kiirusest.)
- **Jaga 2D-liikumine sõltumatuteks X- ja Y-vedrudeks.** Üks vedru 2D-kaugusel läheb sünkroonist välja, kui X-l ja Y-l on erinevad kiirused.

## 4. Käitumine animatsiooni asemel — kasuta vedrusid

> „Mõtle animatsioonist kui vestlusest sinu ja objekti vahel, mitte millestki, mille liides ette kirjutab.“

Eelnevalt skriptitud, fikseeritud kestusega animatsioon ei suuda uuele sisendile reageerida. Vedru suudab — uus sisend lihtsalt muudab sihti ja liikumine jääb pidevaks. Kasuta vedrusid kõige jaoks, mida kasutaja saab puudutada.

Apple asendas teadlikult füüsikalise kolmiku (mass/jäikus/sumbuvus) kahe disaineresõbraliku parameetriga. Mõtle nendes:

- **Sumbuvustegur (damping ratio)** — juhib üle sihi minekut. `1.0` = kriitiliselt sumbuv, põrketa, sujuv paikaloksumine. `< 1.0` = läheb üle sihi ja võngub. Madalam = põrkavam.
- **Reaktsioon (response)** — kui kiiresti väärtus sihini jõuab, sekundites. Madalam = näpsakam. **See ei ole „kestus“** — vedrul pole fikseeritud kestust; selle paikaloksumise aeg tuleneb parameetritest.

**Vaikeväärtused:**
- Alusta enamikku kasutajaliidesest **sumbuvusega `1.0`** (kriitiliselt sumbuv) — elegantne ja tähelepanu mitte hajutav.
- Lisa põrget (**sumbuvus ~`0.8`**) **ainult siis, kui žest ise kandis impulssi** (nips, vise, lohistuse vabastamine). Üle sihi minek menüül, mis lihtsalt sisse hajus, tundub vale; üle sihi minek kaardil, mida sa nipsasid, tundub õige.

**Konkreetsed väärtused, mida Apple kasutab:**

| Interaktsioon | Sumbuvus | Reaktsioon |
| --- | --- | --- |
| Liigutamine / ümberpaigutamine (nt PiP) | `1.0` | `0.4` |
| Pööramine | `0.8` | `0.4` |
| Sahtel / leht | `0.8` | `0.3` |

**Veebivaste (Motion / Framer Motion):** vedru-API `bounce` + `duration` vastab üsna täpselt Apple'i sumbuvusele + reaktsioonile. Turvaline majastiil on kasutada vaikimisi kõikjal `damping: 1.0` vedrusid; jäta põrge impulsist juhitud, füüsikaliste interaktsioonide jaoks.

```js
import { animate } from 'motion';

// Critically damped default (no overshoot)
animate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 });

// Momentum interaction — a little bounce, only because a flick preceded it
animate(el, { y: target }, { type: 'spring', bounce: 0.2, duration: 0.4 });
```

## 5. Kiiruse üleandmine — õmblus lohistamise ja animatsiooni vahel

Kui žest lõpeb, peab animatsioon **jätkama täpselt sõrme kiirusega**, et lohistamise ja animeerimise vahel poleks nähtavat õmblust. See on detail, mis eristab kõige enam „voolavat“ „lihtsalt korralikust“.

Anna kursori vabastamiskiirus vedrule algkiiruseks. Mõned vedru-API-d tahavad **suhtelist** kiirust — normaliseeri see sihini jäänud kaugusega:

```
relativeVelocity = gestureVelocity / (targetValue − currentValue)
```

Näide: element asukohas `y=50`, siht `y=150` (minna 100px), sõrm liigub 50px/s → vedru algkiirus = `50 / 100 = 0.5`. Framer Motion / Motion võtavad absoluutse kiiruse px/s otse vastu (`velocity` valik), nii et tavaliselt annad neile toorväärtuse.

## 6. Impulsi projitseerimine — animeeri sinna, kuhu žest *liigub*

> „Võta väike sisend ja tee sellest suur väljund.“

Ära hüppa lähima piirini *vabastamispunktist*. Kasuta kiirust, et **projitseerida puhkeasend** — täpselt nagu kerimise aeglustumine — ja hüppa siis projitseeritud punktile lähima sihini. Just see paneb nipsu tunduma, nagu viskaks see elemendi minema.

Apple'i täpne projektsioonifunktsioon (*Designing Fluid Interfaces* näidiskoodist):

```js
// decelerationRate ≈ 0.998 for normal scroll feel; 0.99 for snappier
function project(initialVelocity /* px/s */, decelerationRate = 0.998) {
  return (initialVelocity / 1000) * decelerationRate / (1 - decelerationRate);
}

const projectedEndpoint = currentPosition + project(releaseVelocity);
const target = nearestSnapPoint(projectedEndpoint);   // choose target from the projection
animateSpringTo(target, { velocity: releaseVelocity }); // then hand off velocity (§5)
```

Märkus: füüsikaõpiku valem `v²/(2·decel)` *ei ole* see, mida Apple kasutab — kasuta ülaltoodud eksponentsiaalse kahanemise kuju. See on hea alumise lehe (bottom sheet) ja karusselli standardkäitumine (Vaul, Embla).

## 7. Ruumiline järjepidevus — sümmeetrilised teekonnad, ankurdatud lähtepunktid

> „Kui miski kaob ühte pidi, ootame, et see ilmuks sealt, kust see tuli.“

- **Sisene ja välju mööda sama teekonda.** Paneel, mis libiseb sisse paremalt, peab sulguma paremale. Sisse paremalt / välja alla tundub lahutatud ja segadusttekitav.
- **Ankurda interaktsioonid nende allikale.** Menüü, hüpikaken või leht peaks lähtuma elemendist, mis selle käivitas — sea `transform-origin` käivitajale, et nupu ja sisu ruumiline seos oleks ilmne. (See on sama lähtepunktiteadlikkuse põhimõte nagu hüpikakende skaleerimine nende käivitajast, mitte keskpunktist.)
- **Peegelda pööratavate üleminekute easing'ut**, et väljuv teekond vastaks tagasiteele (kasuta kahe suuna jaoks pöördvõrdelisi cubic-bézier' kontrollpunkte).

## 8. Vihja žesti suunas

Inimesed ennustavad lõppseisundit trajektoori põhjal. Vahepealne liikumine peaks reetma, kuhu asjad liiguvad — Control Centeri moodulid „kasvavad üles ja välja sinu sõrme poole“. Pane vahekaadrid osutama tulemusele, mitte lihtsalt pimesi selleni interpoleerima.

## 9. Kummipaela efekt — pehmed piirid

Serval osuta järk-järgult vastupanu, selle asemel et järsult peatuda. Järsk peatus mõjub kui „hangunud“; pidev vastupanu mõjub kui „reageerib, aga siin pole rohkem midagi“. Rakenda sumbuvust, mis suureneb seda enam, mida kaugemale üle piiri kasutaja lohistab.

```js
// The further past the bound, the less the element follows — real things slow before they stop
function rubberband(overshoot, dimension, constant = 0.55) {
  return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
}
```

## 10. Žestide disaini detailid („tunde“ kontroll-loend)

- **Puudutus:** tõsta esile touch-*down* hetkel (koheselt), kinnita touch-*up* hetkel. Lisa sihtmärgi ümber ~10px hüstereesi/tabamusala polsterdust ning luba tühistamist eemale lohistamise ja tagasi tulemisega.
- **Lohistamine/pühkimine:** nõua väikest liikumislävendit (hüsterees, ~10px), enne kui suunale pühendud, seejärel jälgi 1:1.
- **Tuvasta kõik usutavad žestid paralleelselt alates esimesest liigutusest**, seejärel tühista kaotajad enesekindlalt, kui kavatsus on selge. Väldi tuvastajaid, mis teatavad ainult *lõpp*seisundist (`swipeleft`-tüüpi sündmused) — need viskavad minema pideva jälgimise, mida tagasiside jaoks vajad.
- **Minimeeri ühemõtestamise viivitusi.** Topeltpuudutuse tuvastamine viivitab paratamatult üksikpuudutusi; maksa seda hinda ainult seal, kus topeltpuudutus päriselt olemas on.

## 11. Kaadritasandi sujuvus

Sujuvus on seotud sellega, *mis kaadrites on*, mitte ainult kaadrisagedusega.

- Hoia asukohamuutus kaadri kohta alla tajulävendi, et vältida stroboskoopefekti.
- Väga kiire liikumise puhul kodeerib peen **liikumishägu / venitus** kiirust ja mõjub paremini kui terav kõva triip.
- `requestAnimationFrame` on veebi ekraaniga sünkroonitud kell (Apple kasutab `CADisplayLink`'i). Animeeri ainult kompositorisõbralikke omadusi — `transform` ja `opacity` — ning anna vihje `will-change`'iga seal, kus liikumine on kohe tulemas.

## 12. Materjalid ja sügavus — poolläbipaistvus annab edasi hierarhiat

Apple kasutab poolläbipaistvaid materjale hõljuva funktsionaalse kihina, mis toob struktuuri ilma fookust varastamata. Veebis lähenda seda `backdrop-filter`'iga.

- **Ehita navigatsioon/tööriistaribad/lehed poolläbipaistvate kihtidena** (`backdrop-filter: blur()` + poolläbipaistev taust), mille all sisu kerib — mitte läbipaistmatute ribadena, mis võtavad enda alla fikseeritud riba.
- **Materjali raskus kodeerib hierarhiat:** tumedamad/raskemad materjalid eraldavad struktuurseid piirkondi (külgribad); heledamad materjalid juhivad tähelepanu interaktiivsetele elementidele (nupud). **Ära kunagi laota üht heledat poolläbipaistvat pinda teise peale** — loetavus kukub kokku.
- **Suuremad pinnad peaksid mõjuma paksematena:** tugevam hägu + sügavam vari kui väikestel kiipidel. Kaalu kontekstiteadlikku varju — raskem kirju/tekstisisu kohal eraldamiseks, kergem lihtsa tausta kohal.
- **Tumenda fookuseks, eralda voo hoidmiseks.** Modaalne ülesanne seob pinna tumendava katteloori (scrim) ja lükkab tausta tagasi/alla. Paralleelne, mitteblokeeriv paneel kasutab poolläbipaistvust ja nihet *ilma* katteloorita, et voog ei katkeks. Virnastatud lehtede puhul tumenda ja lükka iga vanemkihti järk-järgult tahapoole.
- **Vibrancy hoiab teksti muutuvate taustade kohal loetavana.** Hägustatud/poolläbipaistvate pindade kohal ära kasuta lamedat halli teksti — kasuta suuremat kontrasti, veidi raskemat kirjalõike paksust ja väikest tähevahe suurendust. Pane värv tahkele kihile, mitte poolläbipaistvale esiplaanile.
- **Kerimisserva efektid, mitte kõvad eraldajad.** 1px äärise asemel kleepuva päise all hajuta väike hägu-/gradientmask sinna, kus sisu kohtub hõljuva raamistikuga — ainult seal, kus hõljuv kasutajaliides päriselt sisu katab.
- **Materialiseeri, ära ainult hajuta.** Klaas-/hägupindade puhul animeeri sisenemisel/väljumisel hägu raadiust ja skaalat koos, et pind mõjuks saabuva päris materjalina, mitte lihtsa läbipaistvuse hajumisena.

```css
.toolbar {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.4); /* bright top edge = light catching the material */
}
```

## 13. Multimodaalne tagasiside — liikumine + heli + haptika

Kolm reeglit meelte kombineerimiseks (ettekandest *Designing Audio-Haptic Experiences*):

1. **Põhjuslikkus** — peab olema ilmne, mis tagasiside põhjustas. Käivita see tegeliku põhjusliku sündmuse peale (lüliti ümberlülitumine, element paika loksumas) ja sobita selle iseloom toimingu füüsilisusega.
2. **Harmoonia** — visuaal, heli ja haptika peavad käivituma **samas kaadris**. Latentsus nende vahel hävitab illusiooni. Ära lase CSS-üleminekul heli/haptikast (Vibration API) maha jääda.
3. **Kasulikkus** — lisa tagasisidet ainult seal, kus see oma koha välja teenib. Jäta haptika/heli tähenduslike hetkede jaoks (edu, viga, kinnitamine, paika loksumine). Liigne tagasiside õpetab kasutajaid seda kõike ignoreerima.

## 14. Vähendatud liikumine ja ligipääsetavus

Vähendatud liikumine ei tähenda *mitte mingit* tagasisidet — see tähendab leebemat, tasakaaluelundit mitte koormavat vastet. Reageeri kolmele sõltumatule signaalile ja ehita need oma komponentidesse sisse:

- **`prefers-reduced-motion: reduce`** — asenda libistused/vedrud/parallaks lühikeste läbipaistvuse **ristsulandumiste või staatiliste üleminekutega**. Loobu elastsusest/üle sihi minekust. Säilita läbipaistvuse/värvi muutused, mis aitavad mõistmisele kaasa.
- **`prefers-reduced-transparency: reduce`** — muuda poolläbipaistvad pinnad mattimaks/tahkeks: tõsta tausta läbipaistmatust, loobu hägust.
- **`prefers-contrast: more`** — peaaegu tahked taustad selge, kontrastse äärisega.

Lisaks: väldi kogu vaateala hõlmavaid liikuvaid taustu, aeglaseid korduvaid võnkumisi (ligikaudu 0.2 Hz / üks tsükkel 5 s jooksul) ja järske heledushüppeid (sujuvusta tume↔hele teema vahetusi). Muuda suured liikuvad objektid liikumise ajaks poolläbipaistvaks ning hajuta suuri pindu suure ümberpaigutuse ajal välja ja paikaloksumisel tagasi sisse.

```css
@media (prefers-reduced-motion: reduce) {
  .sheet { transition: opacity 200ms ease; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .toolbar { background: white; backdrop-filter: none; }
}
```

## 15. Tüpograafia — optiline suurus, tähevahe, reavahe

Apple disainib kirja nii, et see muudab suurusega kuju; sama distsipliin kehtib veebis. (Ettekandest *The Details of UI Typography*, WWDC 2020.)

- **Tähevahe (letter-spacing) sõltub suurusest — mitte kunagi üks väärtus kõigile suurustele.** Suur pealkirjatekst vajab *negatiivset* tähevahet (tähed mõjuvad kasvades liiga hõredalt); väike tekst vajab loetavuse huvides veidi *positiivset* tähevahet. Fikseeritud `letter-spacing` on kuskil vale. Tihenda pealkirju, jäta põhitekst `0` lähedale.
- **Reavahe (line-height) muutub suurusega pöördvõrdeliselt.** Kitsas suurtel pealkirjadel, hõredam põhitekstil. Suurenda seda kõrgete üla- ja alapikendustega kirjasüsteemide puhul; tihenda seda tiheda, teaberohke kasutajaliidese puhul.
- **Ehita hierarhia paksusest + suurusest + reavahest kui komplektist,** mitte ainult suurusest. Rõhuta paksusega — see lisab kohalolu, võtmata rohkem ruumi.
- **Austa kasutaja teksti suuruse seadet** (Dynamic Type). Skaleeri paigutust *koos* tekstiga — vahed `rem`/`em` ühikutes, mitte fikseeritud px — et suurem font paigutust ei lõhuks.
- **Kasuta vaikimisi platvormi süsteemifonti** enne kohandatud kirjatüüpi; sellel on juba olemas optiline suurus, tähevahetabelid ja loetavuse häälestus. Kirjuta üle ainult põhjusega.

```css
:root { font: 100%/1.5 system-ui, sans-serif; } /* body: system font, comfortable leading */

.display {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;        /* tight leading for large text */
  letter-spacing: -0.02em;  /* negative tracking as it grows */
  font-optical-sizing: auto;
}
```

## 16. Disaini alused — kaheksa põhimõtet

Ülaltoodud liikumine ja meisterlikkus teenivad Apple'i kaheksat disainipõhimõtet (*Principles of Great Design*, WWDC 2026). Kasuta neid nimetusi, millega arutled:

1. **Eesmärk.** Loo kavatsusega; otsusta, mida *mitte* ehitada. Iga funktsioon küsib kasutaja aega, tähelepanu ja usaldust — kuluta seda eelarvet ainult seal, kus see end ära tasub.
2. **Toimijus.** Hoia inimesed kontrolli all: paku valikuid, ära suru peale ainsat teed. Toeta seda andestavusega — lihtne tagasivõtmine eksimuste korral, kinnitusdialoog ainult tõeliselt hävitavate, pöördumatute toimingute puhul (kasuta säästlikult; liigkasutus õpetab inimesi lihtsalt edasi klõpsama).
3. **Vastutus.** Tegutse kasutaja huvides. Privaatsus: küsi õigel hetkel, ainult seda, mida vaja, läbipaistvalt. Ohutus: näe ette väärkasutust ja kahju — eriti tehisaruga (allergiateadlik retseptirakendus ei tohi soovitada kahjulikku koostisosa). Lisa eelvaateid, kinnitusi, lahtiütlusi; loobu funktsioonist, mille risk kaalub üles selle väärtuse.
4. **Tuttavlikkus.** Ehita sellele, mida inimesed juba teavad. Kasuta metafoore, mis pole liiga sõnasõnalised ega liiga abstraktsed (prügikast tähendab kustutamist), ja austa nende füüsikat. Ole järjepidev: asjad, mis näevad välja ühesugused, peavad käituma ühtmoodi ja asuma samas kohas (sulgemine on macOS-is alati üleval vasakul), et inimesed saaksid ennustada, mis järgmiseks juhtub. Murra tuttavat mustrit ainult siis, kui suudad tõestada, et see on parem — ja siis testi seda, ära eelda.
5. **Paindlikkus.** Disaini erinevate kontekstide, seadmete ja kogu võimete spektri jaoks. Kohandu platvormiga (iPhone = kiire puudutus; lauaarvuti = sügavad töövood täpse kursorijuhtimisega) ja olukorraga. Disaini kaasavalt (vanus, keel, asjatundlikkus, ligipääsetavus). Kui ükski paigutus ei sobi kõigile, lase inimestel isikupärastada — juhtelemente ümber paigutada, peita seda, mida nad ei kasuta.
6. **Lihtsus — mitte minimalism.** Eemalda ebavajalik, et põhieesmärk säraks; kõige ühte kohta matmine näeb välja minimalistlik, kuid pole lihtne. Ole lühike (lihtne keel, ilma žargoonita, vähem samme) ja selge (kasuta hierarhiat — järjekorda, vahesid, kontrasti — et kõige olulisem oleks kõige ilmsem). Iga element teenib oma koha välja; mõnikord konteksti *lisamine* lihtsustab (videokerija, mis näitab järelejäänud aega). Näita esmalt levinud teed, täpsemad valikud üks tase sügavamal.
7. **Meisterlikkus.** Kompromissitu tähelepanu detailidele loob usaldust. Kaunis tüpograafia, heleda/tumeda režiimiga kohanduvad värvid, selged ikoonid ja reageerivad animatsioonid, mis annavad kohest, loomulikku tagasisidet. Miski pole juhuslik — iga vahe, ajastuse ja joonduse väärtus on teadlik valik, mida suudad kaitsta. Värisev kerimine, joondamata ikoonid ja paigutused, mis pööramisel lagunevad, mõjuvad hoolimatusena. Meisterlikkus vajab iteratsiooni ja pikaealisust — arenda disaini edasi, kui funktsioonid ja riistvara muutuvad.
8. **Rõõm.** Teise seitsme õigesti tegemise tulemus, mitte peale kleebitud konfetti. Otsusta, millist emotsiooni tahad, et inimesed tunneksid (rahu, enesekindlus, elevus), ja tugevda seda igas otsuses.

Taktikalised reeglid, mis neid teenivad:

- **Tagasisidet on nelja liiki:** olek, lõpetamine, hoiatus, viga. Kinnita tähenduslikke toiminguid, näita käimasolevat olekut, hoiata enne probleeme, valideeri jooksvalt (mitte esitamisel).
- **Teekonna leidmine.** Iga ekraan peaks vastama: Kus ma olen? Kuhu ma saan minna? Mis seal on? Kuidas ma välja saan? Ära kunagi jäta kasutajat lõksu.
- **Rühmitamine ja vastendamine.** Lähedus viitab seosele; paiguta juhtelement selle lähedale, mida see mõjutab, ja korralda juhtelemendid peegeldama seda, mida need muudavad. Kui vajad juhtelemendi selgitamiseks silti, on vastendus nõrk.
- **Otsesed, konkreetsed sildid on paremad kui turvalised üldised.** Nimeta navigatsiooni elemendid nende sisu järgi („Progress“, „Library“), mitte ebamääraste katusnimedega („Home“). Konkreetsus loob ennustatavust.

## 17. Protsess

- **Prototüübi interaktiivselt — interaktiivne demo on väärt „miljonit staatilist disaini“.** Sa avastad liidese seda ehitades ja sellega mängides; töötav prototüüp seab ka konkreetse lati, mis hoiab ära keskpärase lõpliku teostuse.
- **Disaini interaktsioon ja visuaal koos.** „Sa ei tohiks suuta öelda, kus üks lõpeb ja teine algab.“ Liikumine ei ole kiht, mis lisatakse pärast piksleid.
- **Testi päris inimestega päris kontekstis** ja vaata liikumist üle värske pilguga — mängi seda aegluubis / kaader-kaadrilt, et tabada seda, mis täiskiirusel nähtamatu on.

## Kiirviide

| Vajadus | Tehnika | Konkreetne väärtus |
| --- | --- | --- |
| Vaikimisi kasutajaliidese vedru | Kriitiliselt sumbuv, üle sihi minekuta | `damping 1.0`, `response 0.3–0.4` |
| Impulsi / nipsu vedru | Alasumbuv, kerge põrge | `damping ~0.8`, `response 0.3–0.4` |
| Žest → vedru kiirus | Anna üle vabastamiskiirus | `gestureVelocity / (target − current)`, kui normaliseeritud |
| Nipsu maandumispunkt | Projitseeri impulss | `current + (v/1000)·d/(1−d)`, `d ≈ 0.998` |
| Puhas katkestamine | Alusta esitlus- (elavast) väärtusest | loe ekraanil olev transform |
| Väldi pöördumise „tellisseina“ | Kanna kiirus ümbersihtimisel edasi | vedru, mis segab kiirusi |
| Pööratav üleminek | Peegelda easing-kõverat | pöördvõrdeline cubic-bézier |
| Otsusta tagasipööramise vs. kinnitamise vahel | Kasuta kiiruse **märki**, mitte asukohta | vabastamisel |
| 1:1 lohistamine | Pointer Events + capture | arvesta haaramisnihkega |
| Tagasiside | Kursori allavajutusel, pidev | mitte kunagi ainult lõpus |
| Piir | Kummipael, mitte järsk peatus | järkjärguline vastupanu |
| Poolläbipaistev raamistik | `backdrop-filter` kiht | sisu kerib all |
| Tähevahe | Suurusest sõltuv, mitte kunagi fikseeritud | tihenda suurt teksti (`-0.02em`), põhitekst `0` lähedal |
| Vähendatud liikumine | Ristsulandumine, mitte libistus/vedru | `@media (prefers-reduced-motion)` |