Ikonmozgás · 1. kör / 6 · stílus: 3 · Isotype (az ajánlott irány)

Mozgás

Minden ikon a saját jelentését játssza el, a megrajzolt részeiből, és pontosan a megrajzolt ikonon áll meg. Egy rendszer, három görbe, négy időtartam. Ebben a körben: a mozgásrendszer, a nézőpontok, a skálák és a rétegek.

Kattints egy ikonra vagy a Lejátszás gombra; asztali gépen rámutatásra is lejátszik. A kártyára kattintva kiválasztod, és úgy mozog, ahogy a kapuképernyőn fog.

Mesterek

forrásonként egy elv, és hogy hol használjuk

SF Symbols animációs hatásairárajzolás, pattanás, csere, színsöprés, rezzenés, lélegzésA hatás a szimbólum saját rétegeiből épül, rétegenként, rögzített sorrendben.Minden ikon megnevezett részekből mozog, 60–90 ms-os eltolással; az egész ikont soha nem nagyítjuk.

Apple Időjárásanimált időjárás-ikonokA mozgás maga az információ: az eső azért esik, mert esik.A Gyakoriság háromszor üt, a Biztosság buborékja középre áll, a G gyökere lefelé nő.

Jonas Naimarkanimált Material-ikonokAz átmenet az ikon saját formáiból készül; semmi nem jelenik meg, ami nincs a rajzban.Nincs mozgásvonal, csillogás vagy segédforma; minden mozgás a megrajzolt végállapotban ér véget.

Issara Willenskomer · UX in Motiona mozgás mint használhatóságAz eltolás és a késleltetés viszonyt mutat: ami előbb mozdul, az okoz.Előbb a cselekvő, aztán a hatás: K-nál lépés, majd nyíl; V-nél vezető, ív, végül a munkatárs.

Val HeadDesigning Interface AnimationCélja legyen, ne díszítsen; rövid, egységes időtartamok, a szereppel egyező görbe.Négy időtartam és három görbe az egész készletre. Semmi sem tart tovább a szükségesnél.

Disney 12 alapelve, mikroméretbenelőkészítés, súly, túllendülés, megállásEgy-három pixelnyi fizika: a súlyos dolog gyorsulva esik, és kicsit belenyomódik.A Fontosság nagy köre zuhan és belenyomódik; a buborék túllendül, aztán megáll.

WCAG 2.2 · mozgás2.3.1 villogás · 2.3.3 interakciós animáció · 2.2.2 megállításNincs villogás, a mozgás kikapcsolható, és soha nem ez az egyetlen jelentéshordozó.Csökkentett mozgásnál 150 ms-os áttűnéssel a végállapot jön; a felirat mindig ott van.

Amit nem veszünk átFolyamatos lélegzés és pörgés díszként, rugalmas pattogás mindenhol, egész ikonos zoom, csillogó fény.

Mozgásrendszer

előbb a szabály, aztán minden ikon ennek engedelmeskedik

Időtartamok · eltolás 60–90 ms

Három görbe · kattints a kártyára, és a pont végigfut rajta

{{ c.name }}{{ c.code }}

Hatásszótár · melyik ikonfajta melyik hatást használja

Bemutatásfogalmak: nézőpontok, skálák, rétegek, hibacsoportokrajzolás · lépés · gyülekezés · leülepedés · növekedés · telítődés · számlálásSzabály: a mozgás a fogalmat játssza el, és csak az ikon saját részei mozognak.

Haladás1. rész, 2. rész, k küszöb, Gyűjtésszínsöprés · telítődésSzabály: balról jobbra vagy alulról felfelé telik, és az aktuális állapotnál áll meg.

MegerősítésMentve, Beküldés, Köszönjükrárajzolás · egy megerősítő rugóSzabály: csak befejezett műveletnél, és műveletenként egyetlen pattanás.

ÁllapotváltásZárolva, Csak olvasható, KözzétévecsereSzabály: a régi állapot formája alakul át az újjá, nem tűnik el és jön elő.

Figyelemcsak a kék „!”egy rövid rezzenésSzabály: egyszer, legfeljebb 3°, soha nem villog, és mindig szöveg kíséri.

KiváltókMegjelenéskor egyszer · kiválasztáskor, koppintáskor visszajelzésként · állapotváltáskor · rámutatáskor asztali gépen. Egy képernyőn a megjelenések 120–140 ms-onként követik egymást, sosem egyszerre.

Környezet szerinti időHős (köztes képernyők, üdvözlés, köszönet): 700–900 ms, a teljes változat. Kártya: 400–600 ms. Beágyazott (állapotsor, gomb): 200–300 ms, a legegyszerűbb. Minden rész szintet kap (H · K · B); a rövidebb változat elhagyja a mellékszálakat, a maradékot arányosan tömöríti.

Hurok · egyetlen kivételCsak futó folyamat (Mentés…, Gyűjtés, küldés) ismétlődhet, és csak amíg fut: a befejezéskor a körét befejezi és megáll. Csökkentett mozgásnál helyette álló szöveg.

MindigCsökkentett mozgásnál a végállapot, 150 ms áttűnéssel. Nyugalmi állapotban éles, a rajzzal azonos. Nincs villogás; forgás legfeljebb 8°, nagyítás legfeljebb 1,2×. A felirat mindig ott van.

TechnikaSVG, megnevezett részek (data-p), Web Animations API. Csak transform, opacity, stroke-dashoffset, clip-path és path. Nincs szűrő, elmosás, Lottie.

Keret ikononkéntLegfeljebb 6 mozgó rész, egy hatáscsalád, egy fő mozdulat. Zuhanásnál gyorsuló eleje van (gravitáció), a megállás az alap görbével jön.

Mit mutat meg a mozgás?

Mozgásleírás · hős változat

RészMozgásIdőGörbeHol

Kiváltó: {{ it.trig }}

!{{ it.note }}

Kártya · 44 px · {{ it.cardMs }}

Beágyazott · 24 px · {{ it.inlMs }}

Hős: {{ it.heroMs }}