Liikesuunnittelu näyttää kovalta, mutta sen ei tarvitse olla

[ad_1]

Motion auttaa tekemään käyttöliittymistä ilmaisevia ja helppokäyttöisiä. Huolimatta niin paljon potentiaalia, liike on ehkä vähiten ymmärretty kaikista suunnittelualoista. Tämä voi johtua siitä, että se on yksi UI-suunnitteluryhmän uusimmista jäsenistä.

Visuaalinen ja vuorovaikutteinen muotoilu on peräisin varhaisista graafisista käyttöliittymistä, mutta liike joutui odottamaan modernin laitteiston animaation sujuvuutta. UI-liikkeen ja perinteisen animaation päällekkäisyys myös pilaa vesiä.

Eliniän voi viettää Disneyn hallintaan 12 perusperiaatetta, onko tämä UI-liike yhtä monimutkainen? Ihmiset kertovat usein, että liikkeen suunnittelu on monimutkaista tai että oikean arvon valitseminen on epäselvä. Väitän, että UI: n kannalta tärkeimmillä alueilla liikesuunnittelu voi olla ja sen pitäisi olla yksinkertaista.

Mistä aloittaa

Motionin ensisijainen tehtävä on auttaa käyttäjiä navigoimaan sovelluksessa havainnollistamalla UI-elementtien välistä suhdetta. Motionilla on myös mahdollisuus lisätä merkkiä sovellukseen animoitujen kuvakkeiden, logojen ja kuvien avulla; käytettävyyden vahvistamisen tulisi kuitenkin olla etusijalla ilmaisun lisäämiseen.

Ennen kuin ryhdytte hahmo-animaatiokykysi, aloitamme vahvan liikkeen perustan keskittymällä navigointisiirtymiin.

Siirtymämalli

Nav-siirtymää suunniteltaessa yksinkertaisuus ja johdonmukaisuus ovat avainasemassa. Tämän saavuttamiseksi me valitsemme kahdenlaisia ​​liikemalleja:

  1. Säiliöön perustuvat siirtymät
  2. Siirtymät ilman säiliötä

Säiliöön perustuvat siirtymät

Jos koostumuksessa on esimerkiksi painike, kortti tai lista, niin siirtymäsuunnitelma perustuu säiliön animointiin. Säiliöt ovat yleensä helposti havaittavissa niiden näkyvien reunojen perusteella, mutta muista, että ne voivat olla näkymättömiä, kunnes siirtyminen alkaa, kuten listaosio, jossa ei ole jakajia. Tämä kuvio hajoaa kolmeen vaiheeseen:

1. Animoi säiliö käyttämällä Materiaalin vakio helpottaa (tarkoittaa, että se nopeutuu nopeasti ja hidastuu varovasti lepoon). Tässä esimerkissä säiliön mitat ja kulman säteet animoivat pyöreästä napista suorakulmioon, joka täyttää näytön.

2. Astian leveyselementit leveyden mukaan. Elementit on kiinnitetty yläreunaan ja peitetty säiliön sisällä. Tämä luo selkeän yhteyden säiliön ja sisäpuolisten elementtien välille.

3. Elementit, jotka poistuvat siirtymän aikana, häviävät, kun säiliö kiihtyy. Elementit, jotka tulevat häipymään astian hidastuessa. Saumaton kädenvaikutus saavutetaan häipymällä elementtejä, kun ne liikkuvat nopeasti.

Tämän mallin soveltaminen kaikkiin säiliön siirtymiin luo yhtenäisen tyylin. Se tekee myös alku- ja loppukokoonpanon välisen suhteen selväksi, koska ne on yhdistetty animoituun säiliöön. Tämän mallin joustavuuden osoittamiseksi sitä sovelletaan viiteen eri kokoonpanoon:

Jotkut säiliöt liukuvat vain ulos näytöstä käyttämällä Materialan tavallista helpottamista. Se suunta, josta se liukuu, ilmoitetaan sen komponentin sijaintiin, johon se liittyy. Esimerkiksi napauttamalla nav-laatikon kuvaketta vasemmassa yläkulmassa siirretään säiliö vasemmalta.

Jos säiliö siirtyy näytön rajojen ulkopuolelle, se katoaa ja skaalautuu. Sen sijaan, että animoisit 0%: n mittakaavasta, se alkaa 95%: sta, jotta vältetään liiallisen huomion kiinnittäminen siirtymiseen.

Mittakaavan animaatio käyttää Materiaalin hidastuminen helpottuu, eli se alkaa huippunopeudella ja hidastuu varovasti lepoon. Poistuaksesi säiliö haalistuu vain ilman skaalausta. Poistu animaatiot on suunniteltu entistä hienommiksi kuin sisäänkäynnit, jotta huomion kiinnittäminen uuteen sisältöön voidaan keskittyä.