Your browser does not support JavaScript!
طراحی وب انیمیشن
وب انیمیشن، گذشته، حال و آینده

وب انیمیشن در یکی دو سال اخیر پیشرفت چشمگیری کرده است. کتابخانه های انیمیشن سازی جاوا اسکریپت مانند GreenSock تبدیل به ابزار های قدرتمند توسعه دهندگان وب شده اند. گالری های طراحی وب مانند Awwwards و CSS Design  Awards نیز هنوز سایت های بسیاری که از دوران فلش به یادگار مانده اند را شامل می شوند. تقریبا تمام کنفرانس های طراحی وب شامل صحبت درباره ی وب انیمیشن می شوند. همه این ها نشان دهنده اهمیت و جایگاه وب انیمیشن در طراحی وب می باشند. لذا در این مقاله قصد دارم تا شما را با گذشته، حال و آینده وب انیمیشن، ابزار ها و کتابخانه های ان آشنا سازم.

افزایش پوشش API وب انیمیشن

API وب انیمیشن شامل ویژگی هایی است که برای متحد کردن انیمیشن ها و ترنزیشن های CSS و SMIL (انیمیشن SVG) تحت یک موتور انیمیشن به کار می رود. توسعه دهندگان جاوا اسکریپت می توانند از آنها برای ساختن انیمیشن ها و کتابخانه های کارآمد DOM استفاده کنند. مرورگر ها هم می توانند از این API ها برای ساخت ابزار های پیشرفته ی انیمیشن سازی استفاده کنند.

با حمایت تیم های FireFox ، Chrome، تیم Edge، API های وب انیمیشن از سطح " تحت بررسی" به سطح "اولویت متوسط" تغییر وضعیت پیدا کرده اند. در این میان بهتر است WebKit ها را هم فراموش نکنیم.

سقوط SMIL و پیدایش SVG

همزمان با حمایت Edge از API وب انیمیشن، کروم اعلام کرد قرار است SMIL کنار گذاشته شود. با این حال حتی بدون وجود  SMIL ها، SVG مترادف وب انیمیشن باقی می ماند. به علت اجرا های متفاوت SVG، اغلب انیمیشن سازی در مرورگر ها با کمک کتابخانه های ترد پارتی جاوا اسکریپت (third-party JavaScrpt) مانند SnapSVG یا GreenSock’s GSAP ساده تر می شوند.

خوشبختانه بسیاری از باگ هایی که در انیمیشن کردن اجزای SVG توسط CSS به وجود آمده بودند، شناسایی شدند؛ و ساخت انیمیشن های SVG منطبق بر کتابخانه ها بیش از پیش متداول شده اند. با این وجود انتظار می رود که رفتار فایل های SVG در مرورگر ها به تدریج طبیعی تر از قبل باشند. اما به خاطر رفتار غیر قابل اعتماد آن، توسعه دهندگان احتمالا هم زمان به استفاده از GSAP به کار خودشان ادامه خواهند داد. به همین جهت ممکن است هم زمان با توسعه ی SVG و پیشرفت قابلیت های محلی مرور گر ها برای پاسخگویی به نیاز های توسعه دهندگان، GSAP نسل بعدی jQuery باشد. پس GSAP به عنوان ابزار انتخاب برای پروژه های پیچیده و بزرگ و قابل بر گشت به عقب یکی از انتخاب های اصلی باقی خواهند ماند.

روش های تولید وب انیمیشن کوتاه می شوند

ابزار های مناسب برای انیمیشن سازی یکی از مهم ترین چالش های وب انیمیشن بوده است. انیمیشین سازی نیازمند سال ها دانش جاوا اسکریپت و CSS است. این به این معناست که یا توسعه دهندگان فرانت اند (front-end developers) تبدیل به انیمیشن ساز می شوند یا طراحان تبدیل به کد نویس می شوند. 

ابزار ها و بدنه های متفاوتی برای پاسخگویی به این نیاز پدید آمده اند. فریم ورکی مانند Framer وظیفه ی ساختن " کد یک بار مصرف" را دارد که آن را می توان با کاربران مختلف تست کرد. کار با این ابزار به دانش اساسی از توسعه ی وب نیاز دارد. بعضی از اپلیکیشن ها مثل Adobe After Effects ابزار های ضروری برای انیمیشن سازی را فراهم می کنند. اما فقط ویدئو هایی می سازد که انیمیشن سازی را سریع و تست کاربری را غیر ممکن می کنند. باقی ابزار ها، مثل InVision و Principle رابط های  گرافیکی فراهم می کنند که بدون تولید HTML پروتایپ هایی با قابلیت بر هم کنش می سازد.

همه ی این روش ها خوبی ها و بدی هایی دارند. ممکن است انیمیشن درست عمل کند در حالی که کار توسعه ی وب نادرست باشد ( و یا برعکس). این تنها آغاز یک راه است. توسعه دهندگان انیمیشن احتمالا در این عرصه ی شلوغ مارکت برنده خواهند بود. البته در حال حاضر هیچ کس را نمیتوان برنده حساب کرد، چون هنوز راه زیادی برای وب انیمیشن باقی مانده است. 

فریم ورک Famo.us یک بار موتور انیمیشن سه بعدی و با کیفیت خود را برای سازندگان نمونه های اولیه و طراحان تبلیغات، تبلیغ کرد. در سال 2015 بسیاری از طراحی های وب انیمیشن حول این فریم ورک انجام گرفت. به طور مشابه، شرکت ادوبی نرم افزار فلش خود را بازنشسته کرد و به جای آن Edge Animate و Animate CC روی کار آمدند. فلش همچنان به تولید  WebGL و SVG ادامه می دهد و پیام شرکت ادوبی در این مورد واضح به نظر می رسد: آینده ی فلش بیشتر ایستا و بی حرکت  به نظر می آید تا موثر.

ابزار سازی مرورگر ها پیشرفت می کند 

در دسامبر 2014، مت دسلوریس نوشت: من تصور می کنم آینده ی این ابزار ها در document.body یا برنامه های بومی جای ندارد؛ بلکه در محلی بین این دو به عنوان ابزار توسعه دهنده ی مرورگر واقع خواهد شد.

افزایش اختیارات API وب انیمیشن به Chrome Canary و FireFox این اجازه را داد که ابزار های انیمیشن سازی خود را در سال 2015 تولید و روانه ی بازار کنند. در آینده می توانیم این امید را داشته باشیم که این ابزار ها پیشرفت کنند و با پردازش های وب انیمیشن ساز ها منطبق تر شوند. احتمالا همزمان با بیشتر شناخته شدن API وب انیمیشن، گزینه های ترد پارتی ابزار سازی برای CSS و SVG این انیمیشن ها بیشتر اصلاح شوند و کارایی بهتری از خود نشان دهند.

استفاده از راهنمای حرکت

به دنبال پیشگامی سیستم ابزار طراحی گوگل، IBM و Salesforce به کمک motion guidline ها سیستم های طراحی خود را منتشر کردند. شرکت های بزرگ که می توانند زمان بیشتری صرف بهینه سازی سیستم های طراحی خود بکنند، روی کد گذاری انیمیشن های رابط کاربری (UI) در کنار راهنمای تعاملات کوچک سرمایه گذاری کرده اند. چگونگی کار کرد این اسناد حد زیادی به مخاطب بستگی دارد. 

تجربه ی کاربری (UX) و قابلیت دسترسی

تنها انیمیشن هایی که به صورت پیش فرض برای همه قابل دسترسی هستند، opacity-based می باشند. برای کسانی که نمی خواهند انیمیشن را رها کنند یا به یک رابط کاربری fade-based تغییر دهند، چالشی موجود این است که به کاربران برای تجربه ی (UX) سایت گزینه دهیم. در بسیاری از سایت ها شاهد افزایش استفاده از " متوقف کردن انیمیشن / یا کوتاه کردن حرکات" در تجربه ی کاربری هستیم. 

تجربه کاربری چیست

از زمانی که انیمیشن به توسعه ی وب و جعبه ابزار طراحی وارد شده، ما از آن برای بیان داستان ها و سرگرمی استفاده کرده ایم. تا با این کار سرعت فعل و انفعالات افزایش یابد، تا محصولات و برند خود را بیشتر بشناسانیم، تا تجربه ی کاربری را بهبود ببخشیم. ویژگی های جدید مانند scroll snap و motion paths بر پایه وب انیمیشن ها ساخته شدند. هر روز ابزار ها و کتابخانه های جدیدی برای کمک در ساختن وبسایت تولید می شوند.

همزمان با اینکه وب انیمیشن توسعه می یابد و پیشرفت می کند، از آن سو استفاده می شود. با افزایش تمایلات نامعمول و جدید، مشتری ها و مدیران مایل هستند که تاثیر آن ها را در سایت خود مشاهده کنند. خوشبختانه ما درس مفیدی در زمانی که Flash هنوز وجود نداشت گرفته ایم؛ طراحی خوب فقط به این معنا نیست که به سلیقه ی تمامی بازدید کنندگان پاسخ دهیم؛ در حقیقت گوش دادن به تمامی تمایلات کاربران همزمان با جلو بردن سایت، به یک تجربه ی کاربری ناخوشایند منجر می شود.

برای اطلاعات بیشتر به مقاله‌های زیر مراجعه کنید: