Fyrir áratug síðan notaði notendaviðmót sem notuðu hreyfimyndir, sem oftast tengdust sprettiglugga og blikkandi auglýsingar, en þetta hefur breyst. Í dag upplýsingar um samskipti hönnun og fjör gerir grundvallar munur á nútíma vefsíður og í nútíma apps. Þessi breyting á hugarfari er skýrt fram í yfirlýsingu Zurb:

Við erum ekki lengur bara að hanna truflanir skjár. Við erum að hanna fyrir hvernig notandinn fær frá þessum skjám til að skoða efni í raun.

Ef við erum að hanna betri stafrænar vörur þá þurfum við að faðma gagnvirka eðli appsins og vefsíðurnar frá upphafi.

Hvers vegna fjör virkar

Hreyfing, af eðli sínu, hefur hæsta stig áberandi í notendaviðmóti. Hvorki textaritgerð né truflanir myndir geta keppt við hreyfingu. Augun okkar eru hardwired til að fylgjast með hreyfanlegum hlutum-það er næstum viðbragð. Við getum notfært þetta með þessari hagnýtu fjör.

Hvað er virkt fjör?

Hagnýtur fjör er lúmskur fjörur embed in the UI sem hluti af virkni þessarar hönnun. Það hefur mjög skýr og rökrétt tilgang:

  • Minnka vitsmunalegan álag
  • Koma í veg fyrir breytingar á blindu
  • Búðu til betri muna í staðbundnum samböndum

Í mannauðsstýrðu hönnunaraðferð, þar sem notandinn er aðaláherslan, þarf notendaviðmót að vera innsæi, móttækilegt og mannlegt. Hagnýtur fjör hjálpar þér að ná þessum markmiðum.

Hvernig Functional Animation Bætir UX

Reynsla okkar og sýn á forriti eða vefsvæðinu eru í lagi með blöndu af þáttum, þar sem samskipti gegna lykilhlutverki. Að bæta hreyfingu við hönnun okkar getur verið þýðingarmikill og hagnýtur þegar við finnum réttar aðstæður. Vel hugsað og prófuð hagnýtur fjör hefur tilhneigingu til að uppfylla margar aðgerðir þ.mt:

1. Visual Feedback

Góð samskipti hönnun veitir endurgjöf. Tilkynning viðurkennir að kerfið hafi fengið aðgerð notandans og sýnt fram á að samspilin hafi verið árangursrík eða ekki. Hreyfimyndir í þessum hópi þurfa að vera mjög lúmskur og ætti að vera hannað með skilvirkum hætti.

Button Feedback

Í raunveruleikanum bregst hnappar við samskipti okkar og það er hvernig við gerum ráð fyrir að hlutirnir virki. Til að vera fyrirsjáanleg fyrir notandann ætti stafræna tengið að virka á sama hátt.

ios-toggle_gif

Heimild: Jaron Powder

Sýndu niðurstöður aðgerða

Með því að fylgja meginreglunni , ekki segja , þú getur notað hreyfimyndir til að benda á að eitthvað fór úrskeiðis. Til dæmis, sjónskjálfta hreyfimynd um rangan aðgangskóða. Það er eins og að hrista höfuðið eins og að segja "nei, reyndu aftur". Notandinn tekur eftir hreyfimyndinni og skilur strax núverandi stöðu.

2

Þú getur einnig styrkt aðgerðirnar sem notendur standa frammi fyrir. Í dæminu hér að neðan, þegar notandinn smellir á "Senda" birtist spinner stuttlega áður en forritið sýnir árangursríkið. Eftirlitsmyndin gerir notandanum kleift að líða eins og ferlið sé lokið.

submit_button

Image kredit: Colin Garven

2. Mýkja ástandsbreytingar

Aðrar góðar staðir til að bæta við fjör í hönnun eru á stundum breytinga. Ríkisbreytingar á notendaviðmótinu, sérstaklega á vefnum, fela oft í sér erfiða niðurskurði sem geta gert þeim erfitt að fylgja. Ekkert líður meira óeðlilegt en skyndilega breyting. Skyndilegar breytingar á tengi eru erfitt fyrir notendur að vinna úr. Þessar stundir af breytingum ættu að vera mjúkari með því að bæta við nokkrum hreyfimyndum við HÍ.

Að koma á tengingum

Hreyfimyndir verða að vera milliliðir milli mismunandi ríkja notendaviðmótsins og hjálpa notendum að skilja hvað er að gerast þegar skjámyndin breytist. Notandinn fylgir einfaldlega hreyfingu og skilur hvernig tengslanotkunin er tengd.

music_player_transition

Image einingar: Anish Chandran

Það virkar líka vel til að tengja smámyndir og smáatriði:

6

Kortið fjörir frá upprunalegu stöðu sinni í stöðu í líkaninu, sem gerir það ljóst að það er sama hluturinn, bara með smáatriðum.

Image einingar: Charles Patterson

Hringdu í gaum að breytingum

Hreyfimyndir geta hjálpað auga að sjá hvar ný hlutur kemur frá þegar hann birtist eða hvar falinn hlutur fer og má finna aftur. Við getum notað það til að vekja athygli á breytingum sem fela í sér eða afhjúpa upplýsingar, svo sem að opna hliðarskúffu efni. Í dæminu hér að neðan rennur aðalleiðsögnin af leiðinni þegar þú smellir á hamborgara táknið. Þessi hreyfing gerir þér kleift að vita að aðalvalmyndin hafi ekki horfið.

solveburger-kojo

Image einingar: Tamas Kojo

3. Sýnileiki kerfisstöðu

Sem eitt af upprunalegu Jakob Nielsens 10 heuristics fyrir nothæfi, er sýnileika kerfisstaða enn meðal mikilvægustu meginreglurnar í hönnun notendaviðmóts. Fyrir notendur er mjög mikilvægt að þekkja og skilja núverandi samhengi í kerfinu á hverjum tíma.

Framfarir

Gagnaflutningur og niðurhal ferla eru frábær tækifæri fyrir hagnýtur fjör. Hreyfimyndir hleðslu bars settu væntingar fyrir hversu hratt aðgerðin verður meðhöndluð. Hreyfimyndir geta verið gagnlegar ef um er að ræða bilanir. Jafnvel ekki skemmtileg tilkynning, svo sem niðurfelling gagna, ber að afhenda á góðu leið.

download2

Image einingar: xjw

Dragðu til að uppfæra

Biðtími notandans hefst þegar þeir hefja aðgerð og versta er þegar þeir eru ekki með vísbendingar um að kerfið hafi fengið það. The draga til að hressa aðgerð ætti að hafa strax viðbrögð . Það er nauðsynlegt að gefa nokkrar sjónrænar athugasemdir strax eftir að hafa fengið beiðni frá notandanum til að gefa til kynna að ferlið hefjist. Fjör mun hjálpa þér með það.

refreshdribbble3

Image einingar: Tony Babel

4. Skýringarmynd

Stundum þurfa notendur smá auka hjálp til að skilja notendaflæði eða hvernig á að hafa samskipti við ákveðin tengiþætti. Þetta á sérstaklega við um notendaviðmót sem innihalda nýja eða óþekkta eiginleika eða samskipti fyrir notandann.

Um borð

Notandi um borð krefst gallalaus UX og hreyfimyndir í flæði um borð hafa gríðarleg áhrif á hvernig notendur í fyrsta skipti munu taka þátt í forriti. Hreyfimyndir gefa þér óendanlegt frelsi til að flytja eitthvað, sama hversu flókið eða hvernig þorna efniið, á skemmtilegan hátt.

Viðskiptavinir

Image einingar: Anastasiia Andriichuk

Sjónarmið

Hreyfimyndir geta boðið upp á nokkrar gagnlegar vísbendingar. Skýringarmynd er oftast séð þegar síða er opnuð í fyrsta sinn og fjörin sýnir hvernig tiltekin atriði á síðunni eiga að vera notuð. Þessi tegund af hreyfimyndum er að finna í leikjum sem oft takast mjög vel með framsækin birtingu, sem lýsir leikjafræði eins og þú færir þig frekar inn í leik. Slíkar vísbendingar eru aðeins gerðar þegar notandinn nær viðeigandi atriði í reynslu sinni.

Niðurstaða

Hreyfimynd er öflugt tæki þegar það er notað á háþróaðan hátt.

Við verðum að faðma hreyfingu frá upphafi og hugsa um það sem náttúrulega hluti af hönnuninni okkar, því hönnun er meira en bara um sjónræna kynningu. Eins og Steve Jobs sagði um hönnun: Það er ekki bara það sem það lítur út fyrir og líður eins og. Hönnun er hvernig það virkar.