Erinevus lehekülje "UI:Animatsioonid" redaktsioonide vahel
Mine navigeerimisribale
Mine otsikasti
(→Viited) |
|||
| (ei näidata sama kasutaja üht vahepealset redaktsiooni) | |||
| 4. rida: | 4. rida: | ||
== Ülesanne == | == Ülesanne == | ||
Kasutades wow.js , animate.js , CSS3 transition või teisi animeerimise hõlbustamise vahendeid valmistage lehekülg, mis demonstreerib järgmist: | Kasutades wow.js , animate.js , CSS3 transition või teisi animeerimise hõlbustamise vahendeid valmistage lehekülg, mis demonstreerib järgmist: | ||
| − | * | + | * Vähemalt kahe elemendi üheaegne ilmumine - ''See animatsioon mõelda nii, et väärtustaks liidest ja kasutajapoolset kogemust'' |
| + | * Vähemalt kahe elemendi üheaegne kadumine | ||
* Kasutaja pilgu juhtimine - ''See animatsioon disainige nii, et haarate mingi liikuva elemendi/serva/objektiga kasutaja tähelepanu ja viite selle sinna, kuhu ta järgmisel hetkel tahaks vaadata'' | * Kasutaja pilgu juhtimine - ''See animatsioon disainige nii, et haarate mingi liikuva elemendi/serva/objektiga kasutaja tähelepanu ja viite selle sinna, kuhu ta järgmisel hetkel tahaks vaadata'' | ||
* Elemendile tähelepanu juhtimine - ''See animatsioon disainige nii, et segate kasutaja tähelepanu animatsiooniga ja tõmbate pilgu enda juurde.'' | * Elemendile tähelepanu juhtimine - ''See animatsioon disainige nii, et segate kasutaja tähelepanu animatsiooniga ja tõmbate pilgu enda juurde.'' | ||
Animatsioonid võiks olla käivitatavad lingil või nupul klõpsides. Töö võib teha kahekesi. | Animatsioonid võiks olla käivitatavad lingil või nupul klõpsides. Töö võib teha kahekesi. | ||
| + | |||
| + | === Selgitusi === | ||
| + | * Ilmumine ja kadumine: Seda tüüpi animatsiooni võiks paigutada liidese kahe "oleku" vahele. Teisisõnu kas kasutaja liigub vaadete vahel ja üleminek on kuidagi sujuv või kasutaja tunneb huvi mõne objekti või elemendi kohta ning lisainfo või objekt ise tekib kuidagi toredasti. Kahe elemendi nõue võimaldab teil ajastustega teha huvitavamaid asju kui pelgalt ühe elemendi puhul saaksite. | ||
| + | * Kasutaja pilgu juhtimisel mõelge nii, et kasutaja klõpsib kuskil: tõenäoliselt on ta pilk seal -- kuidas toimetada kasutaja pilk sinna kuhu ilmuvad andmed või kus kajastub tegevuse tulemus? Mõte on selles, et võtate pilgu ja "jalutate" sellega õigesse kohta. | ||
| + | * Elemendile tähelepanu juhtimise puhul on tegemist ootamatusega, kus soovite justkui "lehvitades" kasutaja pilku mõnele elemendile. Siin arvestage perifeerse nägemise liikumistundlikkusega. | ||
| + | |||
| + | Ilmumine ja kadumine võiks olla üsna kiired, et nad pideval esinemisel ei tüütaks. Pilgu juhtimise ja elemendile tähelepanu kogumise puhul tehke animatsioonid nii pikad kui arvate et võiks olla tarvis. | ||
== Viited == | == Viited == | ||
| 14. rida: | 22. rida: | ||
* [http://mynameismatthieu.com/WOW/ WOW.js] | * [http://mynameismatthieu.com/WOW/ WOW.js] | ||
* [https://daneden.github.io/animate.css/ animate.css] | * [https://daneden.github.io/animate.css/ animate.css] | ||
| + | * [https://material.io/guidelines/motion/ Material Design (motion)] | ||
== Esitamine == | == Esitamine == | ||
Viimane redaktsioon: 28. märts 2018, kell 06:17
Ülesanne on rikastada kasutajakogemust läbi animeeritud elementide
Ülesanne
Kasutades wow.js , animate.js , CSS3 transition või teisi animeerimise hõlbustamise vahendeid valmistage lehekülg, mis demonstreerib järgmist:
- Vähemalt kahe elemendi üheaegne ilmumine - See animatsioon mõelda nii, et väärtustaks liidest ja kasutajapoolset kogemust
- Vähemalt kahe elemendi üheaegne kadumine
- Kasutaja pilgu juhtimine - See animatsioon disainige nii, et haarate mingi liikuva elemendi/serva/objektiga kasutaja tähelepanu ja viite selle sinna, kuhu ta järgmisel hetkel tahaks vaadata
- Elemendile tähelepanu juhtimine - See animatsioon disainige nii, et segate kasutaja tähelepanu animatsiooniga ja tõmbate pilgu enda juurde.
Animatsioonid võiks olla käivitatavad lingil või nupul klõpsides. Töö võib teha kahekesi.
Selgitusi
- Ilmumine ja kadumine: Seda tüüpi animatsiooni võiks paigutada liidese kahe "oleku" vahele. Teisisõnu kas kasutaja liigub vaadete vahel ja üleminek on kuidagi sujuv või kasutaja tunneb huvi mõne objekti või elemendi kohta ning lisainfo või objekt ise tekib kuidagi toredasti. Kahe elemendi nõue võimaldab teil ajastustega teha huvitavamaid asju kui pelgalt ühe elemendi puhul saaksite.
- Kasutaja pilgu juhtimisel mõelge nii, et kasutaja klõpsib kuskil: tõenäoliselt on ta pilk seal -- kuidas toimetada kasutaja pilk sinna kuhu ilmuvad andmed või kus kajastub tegevuse tulemus? Mõte on selles, et võtate pilgu ja "jalutate" sellega õigesse kohta.
- Elemendile tähelepanu juhtimise puhul on tegemist ootamatusega, kus soovite justkui "lehvitades" kasutaja pilku mõnele elemendile. Siin arvestage perifeerse nägemise liikumistundlikkusega.
Ilmumine ja kadumine võiks olla üsna kiired, et nad pideval esinemisel ei tüütaks. Pilgu juhtimise ja elemendile tähelepanu kogumise puhul tehke animatsioonid nii pikad kui arvate et võiks olla tarvis.
Viited
Esitamine
- Laadige töö dijkstrasse kataloogi "public_html/ui/praks7"
- kirjutage kiri, kus on töö klõpsitav aadress ja töö tegiate nimed ja täispikad tudengikoodid.
- saatke kiri oma praktikumi õppejõule erik.soekov@ttu.ee või mariliis.haalme@ttu.ee