Moderni web-suunnittelu sisältää paljon liikkuvia osia, kuten sisällön suunnittelua, kuvaketta ja UX-suunnittelustrategiat . Yksi uudempi suuntaus on käyttö mikrointeraktioita verkko- ja mobiilihankkeissa.

Nämä näyttävät hienolta loppuraportilta, mutta eivät ole niin helppoa tehdä staattisella mockupilla. Joten suunnittelijat ovat ottaneet käyttöön animaatioohjelmia, kuten After Effectsin, luodakseen motion-pohjaisia ​​mallioita.

Jos yrität oppia tätä skillset, suosittelen näitä ilmaisia ​​videoita YouTubessa. He eivät opeta sinulle kaikkea, vaan ne kattavat perusasiat ja antavat sinulle vankan perustan edetäksesi taitojasi.

1. Button UI animoitu

Tämä hyvin lyhyt käyttöliittymä animaatio tutorial on täydellinen aloittelijoille, joilla on vähän kokemusta AE-kokemuksesta. Se vaatii jonkin verran kärsivällisyyttä työskennellä käyttöliittymän kautta, mutta ohjeet ovat kristallinkirkkaita.

Opit luomaan pienen painikkeen animaation vaikutuksen, joka voi toimia hyvin verkkosivustoille tai mobiilisovelluksille.

Tämä ei ole mikään mahtava, mutta lopulta sinulla on paljon vahvempi käsitys tästä käsitteestä.

01-jälkivaikutuksia-painike-animaatio

2. Prototyypin liike

Toinen yksinkertainen animaatio, jonka voit tehdä, on liukuva valikko tässä videossa . Se opettaa, miten voit animoitua valikkoa After Effects -ohjelmasta ja miten työstää yksittäisiä kerroksia ohjelmistossa.

Se on melko pitkä opetusohjelma, jossa on yli 40 minuuttia vaiheittaista ohjausta. Mutta se kannattaa, jos näet sen loppuun asti.

02-valikko-animaatio-jälkivaikutuksia

3. AE-kuvakehitys

Pieniä kuvakkeita animaatioita ei lisätä suoraan käyttöliittymään, mutta ne voivat parantaa käyttökokemusta. Nämä kuvakehdotukset liittyvät niihin pieniin mikrointeraktioihin, jotka mainittiin aikaisemmin.

Ja tämä kuvake animaatio tut puhuu mikrointeraktioista, joilla on helppo seurata ohjeita. Voit jopa ladata ilmaisia ​​kuvakkeita PSD / AI-muodossa ja käytä niitä animaatioon.

Mutta tämä on myös kätevä ikoni suunnittelijoille, jotka luovat omat kuvakkeensa tyhjästä ja haluavat animoida niitä tuotantoon.

03-jälkivaikutuksia animoitu-kuvaketta

4. Animoitu UI / UX-kohdistin

Monet suunnittelijat luovat UX-animaatioita esittelemään käyttöliittymän toimivuutta. Tämä luonnollisesti sisältää hiiren napsautuksia / pyyhkäisyjä, koska haluat nähdä, miten sisältö siirtyy sivulle.

Jos haluat lisää kohdistinliikkeitä teidän mockups sitten tämä opetusohjelma on sinulle. Se on melko lyhyt opas, vain 15 minuuttia pitkä, mutta tiedot ovat erittäin arvokkaita ja merkityksellisiä sekä mobiili- että web-suunnittelijoille.

04-jälkivaikutuksia-aikajana-kuvaketta

5. iPhone App UI

Toinen hyvä esimerkki käyttäjäkeskeisestä animaatiosta on Tämä tyypillisen iPhone-sovelluksen syötteen jälkeen. Luo käyttäjän polku iPhonen kautta täyttämällä yksittäisiä lomakekenttiä.

Itse itse tämä ei ehkä näytä paljon, koska ihmiset tietävät, mikä tämä prosessi näyttää.

Mutta jos suunnittelet verkkosivua tai sovellusta, jolla on ainutlaatuinen virtaus, se auttaa näyttämään koko käyttäjän käyttäytymisen syöttämästä tietoja sisäänkirjautumiseen ja ehkä enemmän.

05-jälkivaikutuksia opittava-login-näyttö

6. Sovelluksen sivupyörät

Mobiilisovelluksen suunnittelijat voivat hyödyntää sivujen pyyhkäisyä monisivuisille rajapinnoille. Nämä toimivat hyvin gallerioissa ja sivutöidyillä vaikutuksilla.

Sisään tämä lyhyt opetusohjelma opit sivun pyyhkäisyanimaatioiden luomiseen After Effectsin avulla muutamia olemassa olevia mallioita. Tämä video on vapaa UX in Motion jossa heillä on paljon samanlaisia ​​tutoriaaleja ja yksityisiä työpajoja.

UX-liikkeeseen liittyvää aihetta ei ole paljastettu paljon verkossa, mutta nämä kaverit ovat yksi niistä harvoista hyvistä, jotka todella käsittelevät yksityiskohtia. Tutustu koko YouTube-kanavaan, jos haluat lisätietoja.

06-app-pyyhkäisee-sivut

7. Jelly UI-animaatiot

Olette varmasti nähneet outoja neste-hyytelihyömää Android-sovelluksissa tai jopa koko verkossa. Nämä eivät ole yleisiä, koska niitä on vaikea luoda uudelleen koodissa, mutta niiden kanssa tämä Jelly UI opetusohjelma voit ainakin rakentaa animaatiot tyhjästä.

Se on toinen freebie alkaen UX in Motion ja se on vain noin 5 minuuttia.

Mutta opit paljon After Effectsista ja yleisestä UX-animaatioprosessista. Erityisesti kuinka tuoda vektorit ja työskennellä näiden tiedostojen kanssa aikajanalla - varsinkin käyttöliittymän animaatiotyön perusasiat.

07-tahmea-valikko-hyytelö-opetusohjelma-ae

8. Animaation purkaminen

Vaikka en voi sanoa, että tämä animaatio vaikuttaa suoraan käyttöliittymään, se on jotain hienoa, jonka voit lisätä verkkosivustosi logoon. Animaatioiden purkaminen käytetään useimmiten video introissa luomaan näkyvä visuaalinen muoto.

Mutta verkkosivustoilla voi olla samanlaisia ​​avautuvia animaatioita käyttämällä SVG-grafiikka ja perus-JS-animaatioita.

Vaikka et halua luoda logoanimaatioita, tämä opetusohjelma voi silti ohjata sinut yksinkertaisen AE-käyttöliittymän työnkulun kautta. Täydellinen oppimaan köydet ilman paljon stressiä.

08-kehittymässä-logo-animaatio

9. Basic UI Prototype animaatiot

Mobiilisovellusvalikoissa on monia eri tyyliä, joissa on erilaisia ​​animaatiotekniikoita. Tämä UI-opetusohjelma opettaa, miten animoitua flyout-kupla -kuvakuvaketta.

Tämä tunnistettiin ensin Path-sovellukselle, mutta siitä on tullut yleinen suuntaus Android- ja iOS-laitteille.

Tämän 20 minuutin videon aikana voit noutaa ideoita kuvakkeiden animaatiota ja valikkosuunnittelua varten. On melko helppo työskennellä ja voit käyttää ennalta suunniteltuja kuvakkeita työnkulkuun säästää aikaa.

09-pyörivä-kuvake-painiketta

10. 3D-kerros jakautuu

Esitys animaatiot ovat arvokkaita asiakastyöhön tai ajatusten jakamiseen tiimin eteen. Siinä missä tämä 3D-kerroksen animaatio opetusohjelma voi auttaa.

Se opettaa, miten hajotat eri kerroselementit ja erotat ne koko käyttöliittymästä. Voit jopa esitellä eri sivuelementtejä näyttämään, miten sovellus / verkkosivusto toimisi.

En voi kuvitella, että tämä olisi arvokas henkilökohtaiseen työhön, mutta on hienoa oppia erityisesti kaupallisissa keikoissa.

10-irtautuneen-app-animaatio

11. iOS 8 -kytkimet

Animoidut päälle / poiskytkimet ilmestyivät ensimmäisenä iOS-version alussa ja ovat sittemmin levinneet Androidille ja yleisille verkkosivustoille.

Paras UI-kytkimillä on omat animaatiot ja voit rakentaa omia seuraamalla tämä 25 minuutin opetusohjelma . Oletetaan, että sinulla on jo kytkentägrafiikka, mutta voit myös ladata sen ilmainen PSD ja käytä sitä sen sijaan.

Lisäksi voit muokata tätä animaatiota mille tahansa tulevaisuudessa suunnitellulle kytkimelle. Suuri tutoriaali jollekin vain After Effects for UI / UX: lle.

11-IOS-liukusäädintä-jälkivaikutuksia

12. Sileä kuvake-animaatio

Viimeinen listaani on tämä yksityiskohtainen kuvake motion tut käyttäen muutamaa eri vektorimuotoa. Se on melko yksityiskohtainen opas yhteensä yli 30 minuuttia ja kattaa muutamia erilaisia ​​tekniikoita.

Kun tunnet itsesi After Effectsin, voit käyttää näitä ideoita muihin kuvakkeisiin. Siksi tämä opetusohjelma on niin hyvä aloittelijoille; se opettaa sinulle, miten työskennellä AE-rajapinnassa erityisillä tekniikoilla UI / UX-suunnittelijoille.

Mutta näistä opetusohjelmista parannat UX-animaatiotaitoja, joten muista merkitä kaikki, jotka saavat silmäsi.

12-animoitu-ikoni-suunnittelu-jälkivaikutuksia