Веб болон мобайл аппд анимейшн ашиглах нь

Веб болон Мобайл аппд сайн анимейшнийг зөв үед нь ашиглаж чадвал аппын ерөнхий дизайн болон ашиглах байдлыг сайжруулж, хэрэглэгчид эерэг сэтгэгдэл төрүүлдэг. Гэхдээ хэтэрхий нүсэр бөгөөд удаан анимейшн эсрэгээрээ хэрэглэгчийг залхаах, аппын ажиллагааг удаашруулах сөрөг талуудтай байдаг. Тиймээс ui/ux мэргэжилтнүүд анимейшний хугацааг 200ms — 900ms байхыг зөвлөдөг байна. Мөн тухайн дэлгэц болон хийж байгаа үйлдэлтэйгээ зохицсон зөв анимейшнийг харуулах хэрэгтэй.

Анимейшн харуулахад тохиромжтой хэсгүүд

1. Танилцуулга дэлгэц (onboard screen)

Ихэнх аппд шинэ хэрэглэгчид харуулдаг танилцуулга дэлгэц байдаг. Энэ дэлгэц нь ерөнхийдөө аппликэйшний юу хийдэг, ямар боломжууд байдаг талаар хэрэглэгчид ерөнхий мэдээлэл өгөх зорилготой. Энэ хэсэгт анимейшн ашигласнаар хэрэглэгчидэд апп маань юу хийдэг болон ямар үнэ цэнийг хэрэглэгчид авчрах вэ гэдгийг илүү ойлгомжтой байдлаар тайлбарлах боломжтой.

Жишээ нь эхний дэлгэц болон сүүлийн дэлгэц

2. Хүлээлтийн үед (Loading Screen)

Апп сервер лүү хүсэлт явуулаад хариу хүлээж байх хооронд хэрэглэгчид loader animation харуулдаг. Энэхүү анимейшн нь нэгэн хэвийн биш гоё хөгжилтэй байж чадвал тодорхой хугацаанд хэрэглэгчийг сатааруулж, удаж байгаа мэдрэмж төрүүлдэггүй гэнэ.

Хөөрхөн байгааз

3. Анхааруулах үед

Хэрэглэгч ямар нэгэн устгах эсвэл идэвхигүй болгох үед хийх гэж байгаа үйлдлийг нь анхааруулж лавлаж асууж байж хийдэг. Ихэнх тохиолдолд энэ үед жижигхэн popup эсвэл modal харуулаад тийм үгүй гэж асуудаг. Энэ үед ноцтой үйлдэл хийх гэж байгааг нь анимейшн ашиглаж анхааруулвал гоё болдог.

4. Visual Feedback

Хэрэглэгчийн хийсэн үйлдэл нь амжилттай болсон уу эсвэл алдаа гарсан уу гэдгийг зураг эсвэл animation байдлаар харуулвал ойлгомжтой байдаг. Жишээ нь амжилттай болвол зөв тэмдэгний амжилтгүй болвол улаан өнгө X тэмдэгний зураг/animation харуулах.

Амжилттай болсон үед

Алдаа гарсан үед

Сервер уначих үед хэхэ

5. Системийн статус

Систем түр хугацаанд ажиллах боломжгүй болсон засвар хийж байгаа үед анимейшн харуулж болно.

За тэгвэл анимейшнаа хаанаас олох вэ?

Lottie

Lottie нь AirBnB компаниас хөгжүүлж гаргасан, Adobe Affer Effect дээр хийсэн анимейшнийг json файл руу хөрвүүлж web, mobile, desktop гээд хүссэн платформ дээр ашиглах боломжийг олгодог хэрэгсэл юм. Дээр дурьдсан жишээ байдлаар оруулсан анимейшнууд нь бүгд Lottie animation юм. Өөрийн веб болон аппдаа зохицсон анимейшнуудыг эндээс lottiefiles.com-с үнэгүй эсвэл мөнгөө төлөөд татаж авах боломжтой. Мөн Adobe After Affect дээр аппликэйшндаа зориулсан анимейшн хийлгүүлсэн бол lottiefiles.com ашиглаад анимейшнаа json болгоод авж болно.

Энгийн gif animation-тай харьцуулахад lottie анимейшн дараах давуу талуудтай.

1. Файлын хэмжээ

Lottie-н анимейшн нь vector graphic зурагдсан байдаг учир энгийн png gif-тэй харьцуулахад хэмжээ маш бага, хурдан хугацаанд ачааллах боломжтой байдаг.

Файлын хэмжээг нь gif болон png тэй харьцуулвал

2. Хэмжээ багасгах болон ихэсгэх

Мэдээж vector зураг учир хүссэн хэмжээгээрээ томруулж жижигрүүлж болно.

3. Customize хийх боломж

Lottie animation-г ашиглахдаа тухайн platform(web, mobile, desktop) зориулсан lottie player санг суулгаж ашигладаг. Энэ сангийн тусламжтайгаар анимейшний хугацаа болон өнгийг тохируулж хүссэн үедээ тоглуулах, зогсоох боломжтой.

4. User interaction

Lottie-interactivity гэдэг санг ашиглан хэрэглэгч дарах , scroll-дох, hover зэрэг олон үйлдлүүд дээр animation-аа ажлуулах боломжтой.

Веб болон мобайл аппдаа хэрхэн ашиглах вэ?

Ерөнхийдөө lottiefiles.com-с анимейшнээ json-р файлаар татаж аваад lottie player санг суулгаад json file-нхаа uri-г заагаад өгчихөд л болно. Жишээ болгон react-native дээр хэрхэн ашиглахыг харуулая.

1. lottie-react-native санг суулгана.

npm i --save lottie-react-native
npm i --save lottie-ios@3.1.8
cd ios && pod install

2. LottieView component оруулж ирээд json file-аа зааж өгнө.

web, android, ios -д мөн ижил зарчимаар ашиглана. доорх сангуудыг суулгаад зааврынх нь дагуу хийхэд болно.

Web — lottie-web

Android — lottie-android

iOS — lottie-ios