Siirrot ovat tehokas tapa ilmoittaa muutos käyttöliittymässä. Niitä voidaan käyttää sovelluksissa, joiden avulla voidaan purkaa paljon kognitiivista työtä visuaaliseen aivokuoriin: ne auttavat kuljettajia navigointiyhteyksien välillä, selittävät elementtien järjestelyn muutoksia näytöllä ja vahvistavat alkuhierarkiaa. Siksi ne ovat olennainen osa vuorovaikutussuunnittelua.

Onnistunut animoidulla siirtymällä on seuraavat viisi ominaisuutta:

1. Hyvä UI-animaatio on luonnollista

UI: n muutokset valtionhallinnossa aiheuttavat usein oletusleikkauksia, jotka vaikeuttavat niiden noudattamista. Todellisessa maailmassa useimmat asiat eivät vain ilmesty tai katoavat heti. Kun jollakin on kaksi tai useampia tiloja, silloin valtioiden väliset muutokset ovat paljon helpommin ymmärrettävissä, jos siirtymät animoituvat sen sijaan, että ne olisivat hetkellisiä. Katsotaan esimerkkiä alla, jossa käyttäjä valitsee luettelossa olevan kohteen zoomaamaan sen yksityiskohtaiseen näkymään. Laajennuksen aikana pieni kortti liikkuu kaaren suuntaan, kun se laajenee suuremmaksi kortiksi. Tämä liike on innoittamana todellisia maailman voimia.

7

2. Tehokas UI-animaatio on järjestetty

Hyvin järjestetty animoitu siirtymä ohjaa käyttäjän huomion ja selventää tilojen muutosta. Tämä ominaisuus liittyy suoraan käyttäjän fokukseen ja jatkuvuuteen. Hyvä siirtyminen auttaa suoran käyttäjän keskittymään oikeaan kohtaan oikeaan aikaan, ja se korostaa oikeita elementtejä sen mukaan, mikä on tavoite. Alla olevassa esimerkissä kelluva toimintopainike (FAB) muuttuu otsakkeen navigointielementeiksi, jotka koostuvat kolmesta painikkeesta. Ensimmäinen käyttäjä ei todellakaan voi ennakoida vuorovaikutusta, joka on tulossa, mutta oikea animoitu siirtyminen auttaa käyttäjää pysymään suunnattuna eikä tunne, että sisältö on yhtäkkiä muuttunut. Tämä siirtyminen auttaa ohjaamaan käyttäjää vuorovaikutuksen seuraavaan vaiheeseen.

2

3. Parhaat UI-animaatiot ovat assosiatiivisia

Siirtymien pitäisi kuvata, miten elementit ovat yhteydessä toisiinsa. Hyvät siirtymät yhdistävät äskettäin luotuja pintoja elementtiin tai toimintaan, joka luo ne. Yhteyksien takana oleva logiikka on auttaa käyttäjää ymmärtämään muutosta, joka juuri on tapahtunut näkymän ulkoasussa ja mikä on aiheuttanut muutoksen.

Alla näet kaksi esimerkkiä kerrossiirrosta. Ensimmäisessä esimerkissä uusi kerros näyttää kaukana kosketuspisteestä, joka laukaisi sen, mikä katkaisee sen suhde syöttötapaan.

3

Toisessa esimerkissä uusi kerros näkyy suoraan kosketuspisteestä. Näin sitomaan elementin kosketuskohtaan.

4

Toinen esimerkki löytyy Mac OS: sta, joka käyttää animoitua siirtymää ikkunan minimoimisen yhteydessä. Tämä animaatio yhdistää ensimmäisen tilan toiseen tilaan.

5

4. Suosittu UI-animaatio on nopea

Jos on olemassa vain yksi animaation periaate, sinun on ehdottomasti ajoitettava. Ajoitus on luultavasti yksi tärkeimmistä seikoista siirtymien suunnittelussa. Animaation pitäisi olla nopea ja tarkka, sillä käyttäjän aloituksen ja animaation alun välillä on vain vähän tai ei lainkaan viiveaikaa. Käyttäjän ei myöskään tarvitse odottaa animaation päättymistä. Alla olevassa esimerkissä hidas animaatio luo tarpeetonta viivettä ja pidentää kestoa.

6
1

Kun elementit liikkuvat tilojen välillä, liikkeen pitäisi olla riittävän nopea, ettei se aiheuta odotuksia, mutta riittävän hidas, että siirtyminen voidaan ymmärtää. Jotta animaatio tehokkaasti välittää syy-vaikutus -suhteen UI-elementtien välillä, vaikutus on aloitettava 0,1 sekunnin sisällä alkuperäisestä käyttäjätoiminnosta, jotta vältettäisiin suoraa manipulaatiota. Yritä pitää animaation kesto vähintään 300 ms: ssa, sillä nopeat siirtymät vähentävät käyttäjää vähemmän aikaa. Testaa sen käyttäjien kanssa nähdäksesi, mikä on siedettävää.

5. Paras käyttöliittymä on puhdas

On yleinen virhe ladata käyttöliittymiä animaatioilla tai luoda liian monimutkaisia ​​vuorovaikutuksia. Liian suuri muutos käyttöliittymässä voi jättää käyttäjän häiriöttömän ja kestää aikaa toipua. Muista, että jokainen näytön liike herättää huomiota, joten liikaa animaatiota aiheuttaa samanaikaisesti kaaoksen.

Siirtymien tulisi välttää liian paljon kerralla, koska ne saattavat saada sekaannusta, kun useat kohteet tarvitsevat liikkua eri suuntiin. Muista, että vähemmän on enemmän erityisesti animaation ja siirtymien osalta. Kaikki, mikäli poistettaisiin puhtaamman käyttöliittymän avulla, on lähes varmasti hyvä idea. Kun pinnan muoto ja koko muuttuvat, sinun on säilytettävä selkeä polku seuraavaan näkymään. Monimutkaisten siirtymien tulisi pitää yksi elementti näkyvissä. Tämä auttaa pitämään käyttäjän suuntautuneena.

Siirtymät ja esteettömyys

Koska siirtymät koskevat visuaalista viestintää, niitä ei ole oletuksena saatavissa näkövammaisten käyttäjiltä. Sinun pitäisi tarjota vaihtoehtoista sisältöä tälle käyttäjäryhmälle. webacessibility.com Parhaita käytäntöjä animaatioon tarjoaa ehdotuksia siitä, milloin vaihtoehtoisen sisällön tarjoaminen avustavaa teknologiaa varten.

johtopäätös

Kun suunnittelet siirtymiä, keskity vain käytännön asioihin, joita he tekevät käyttäjälle. Olipa sovelluksesi tai sivustosi hauska ja leikkisä tai vakava ja yksinkertainen, hyödyntämällä merkityksellisiä siirtymiä voi auttaa sinua antamaan selkeä ja nopea yhteenkuuluva kokemus.