Modern vefhönnun felur í sér mikið af hreyfanlegum hlutum eins og innihaldshönnun, táknvinnu og UX hönnun aðferðir . Ein nýrri stefna er notkunin af örverum á vef- og farsímaverkefnum.

Þetta lítur vel út í lokaverkefninu en er ekki svo auðvelt að gera með kyrrstöðu mockup. Svo hönnuðir hafa verið að taka upp fjör forrit eins og After Effects að búa til hreyfingu byggir mockups.

Ef þú ert að reyna að læra þennan færni mæli ég mjög með þessum ókeypis vídeóum á YouTube. Þeir munu ekki kenna þér allt en þeir ná yfir grunnatriði og gefa þér traustan grundvöll til að kynna þér færni þína.

1. Hnappur Hreyfimyndir Hreyfimyndir

Þetta mjög stutt UI fjör kennsla er fullkomin fyrir byrjendur með lítið til neinnar AE reynslu. Það krefst smá þolinmæði til að vinna í gegnum viðmótið en leiðbeiningarnar eru skýrar.

Þú munt læra að búa til lítinn hnappinn fjör áhrif sem getur virkað vel fyrir vefsíður eða farsímaforrit.

Þetta er ekki nokkuð stórkostlegt en í lokin muntu hafa miklu meiri hugsun á þessu hugtaki.

01-eftir-áhrif-hnappur-fjör

2. Frumgerð hreyfing

Annar einföld fjör sem þú getur gert er rennibekkur eins og í þessu myndskeiði . Það kennir þér hvernig á að laga valmynd í After Effects og hvernig á að vinna með einstökum lögum í hugbúnaði.

Það er frekar langur kennsla með yfir 40 mínútum af stígvélum. En það er vel þess virði að þú sért það til enda.

02-valmynd-fjör-eftir-áhrif

3. AE Icon Animation

Lítil táknmynd hreyfimyndir bætast ekki beint við viðmótið, en þau geta aukið notendavandann. Þessar táknmyndarstefnur tengjast þeim litlum örverum sem nefnd eru fyrr.

Og þetta táknmynd hreyfimyndir talar um örverur með auðvelt að fylgja leiðbeiningum. Þú getur jafnvel hlaðið niður ókeypis tákn í PSD / AI sniði og nota þá til fjörunnar.

En þetta er líka gott fyrir táknhönnuðir sem búa til eigin tákn frá grunni og vilja búa til þau til framleiðslu.

03-eftir-áhrif-líflegur-táknið

4. Hreyfimyndir UI / UX Bendill

Margir hönnuðir búa til UX hreyfimyndir til að sýna hvernig tengi ætti að virka. Þetta myndi náttúrulega innihalda músaklúbbur / swipes vegna þess að þú vilt sjá hvernig efni flytur yfir síðuna.

Ef þú vilt bætist við bendilinn til að mockups þín þá er þetta einkatími fyrir þig. Það er frekar stutt leiðarvísir, aðeins 15 mínútur að lengd, en upplýsingarnar eru frábærar verðmætar og viðeigandi fyrir bæði farsíma og vefhönnuðir.

04-eftir-áhrif-tímalína-táknið

5. iPhone App UI

Annað gott dæmi um notanda-áherslu fjör er þessi Eftir dæmigerð iPhone app inntak. Þú ert að búa til slóð notanda í gegnum iPhone app fylla út einstaka eyðublöð.

Í sjálfu sér virðist þetta ekki eins mikið þar sem fólk veit hvað þetta ferli lítur út.

En ef þú ert að hanna vefsíðu eða forrit sem hefur einstaka flæði þá hjálpar það að sýna alla notendahópinn frá því að slá inn upplýsingar til að skrá þig inn og kannski meira.

05-eftir-áhrif-læra-tenging-skjár

6. App Page Swipes

Hönnuðir farsímaforrita geta nýtt sér síðu swipes fyrir multi-paged tengi. Þetta virkar vel fyrir gallerí og fyrir paginated áhrif.

Í þetta stutta einkatími þú munt læra hvernig á að búa til hreyfimyndir á síðu með After Effects með nokkrum núverandi mockups. Þetta myndband kemur ókeypis frá UX í hreyfingu þar sem þeir eru með tonn af svipuðum námskeiðum og einka verkstæði.

Efnið á UX hreyfingu er ekki fjallað mikið á vefnum, en þessir krakkar eru einn af fáum góða sem grípa í raun í smáatriði. Skoðaðu alla YouTube rásina sína ef þú vilt læra meira.

06-app-swipes-síður

7. Jelly UI Teiknimyndir

Þú hefur sennilega séð skrýtin fljótandi hlauparvalmyndir í Android forritum eða jafnvel á vefnum. Þetta eru ekki mjög algeng vegna þess að þeir eru erfitt að endurskapa í kóða, en með þetta Jelly UI kennsla þú getur að minnsta kosti byggt upp hreyfimyndirnar frá grunni.

Það er annað ókeypis frá UX in Motion og það samanstendur aðeins um 5 mínútur.

En þú munt læra mikið um eftiráhrif og heildar UX fjörvinnsluferlið. Sérstaklega hvernig á að flytja inn vektorar og vinna með þær skrár yfir tímalínu - í raun bara grunnatriði hreyfimynda tengi.

07-gooey-matseðill-hlaup-kennsla-ae

8. Folding Hreyfimynd

Þó að ég geti ekki sagt þetta hreyfimynd hefur bein áhrif á viðmótið, þá er það eitthvað flott sem þú getur bætt við í merkinu á vefsíðunni þinni. Folding hreyfimyndir eru að mestu notaðar í vídeóauglýsingum til að búa til merkjanlegt sjón.

En vefsíður geta einnig haft svipaðar þróunarfjölda með því að nota SVG grafík og undirstöðu JS hreyfimyndir.

Jafnvel ef þú vilt ekki búa til lógó hreyfimyndir, getur þessi einkatími ennþá leiðbeint þér með einfaldri AE tengi vinnuflæði. Perfect fyrir að læra reipið án mikillar streitu.

08-unfolding-logo-fjör

9. Grunnur UI frumgerð Teiknimyndir

Valmyndir símans koma í mörgum mismunandi stílum með mismunandi hreyfimyndum. Þetta UI námskeið kennir þér hvernig á að laga flugmerkjatáknmyndina.

Þetta var fyrst borið á Path app en hefur síðan vaxið í sameiginlega stefnu fyrir Android og IOS tæki.

Á þessu 20 mínútna myndbandi tekurðu upp hugmyndir fyrir táknmynd og valmyndarhönnun. Það er frekar einfalt að vinna með og þú getur notað fyrirfram hönnuð tákn fyrir vinnuflæði til að spara tíma.

09-snúningur-táknmynd-hnappur

10. 3D Layer Splits

Kynningarfimyndir eru verðmætar fyrir vinnu við viðskiptavini eða til að deila hugmyndum þínum fyrir framan hóp. Það er þarna þetta 3D lag fjör kennsla getur hjálpað.

Það kennir þér hvernig á að brjóta upp mismunandi lagþætti og aðgreina þær frá fullum tengi. Þú getur jafnvel sýnt mismunandi síðuþætti til að sýna hvernig forritið / vefsvæðið ætti að virka.

Ég get ekki ímyndað mér að þetta væri mikilvægt fyrir persónulegt starf, en það er flott áhrif til að læra sérstaklega fyrir atvinnuskyni.

10-breakaway-app-fjör

11. IOS 8 rofar

Hreyfimyndir á / frá rofi birtust fyrst í fyrstu útgáfum af IOS og hafa síðan breiðst út á Android og almennar vefsíður.

Besta UI rofi hafa sérsniðnar hreyfimyndir og þú getur byggt þitt eigið með því að fylgja þetta 25 mínútna námskeið . Það er gert ráð fyrir að þú hafir þegar skipt grafíkina en þú gætir líka sótt það frjálsan PSD og notaðu það í staðinn.

Auk þess er hægt að endurbyggja þessa hreyfimynd fyrir hvers konar skipta sem þú hanna í framtíðinni. A mikill einkatími fyrir einhvern bara að komast inn í After Effects fyrir UI / UX.

11-ios-renna-eftir-áhrif

12. Smooth Icon Teiknimyndir

Síðasta á listanum mínum er þetta nákvæma táknmynd hreyfing tut með nokkrum mismunandi vektorformum. Það er frekar nákvæmar leiðbeiningar sem eru samtals rúmlega 30 mínútur og ná yfir nokkrar mismunandi aðferðir.

Þegar þú þekkir leið þína eftir After Effects geturðu beitt þessum hugmyndum að öðrum stíll stíll. Þess vegna er þetta einkatími mjög gott fyrir byrjendur; það kennir þér hvernig á að vinna í AE tengi með sérstökum aðferðum fyrir UI / UX hönnuðir.

En eitthvað af þessum námskeiðum mun bæta þér UX fjör hæfileika svo vertu viss um að bókamerki einhver sem ná auga.

12-líflegur-táknið-hönnun-eftir-áhrif