گرافیک و برندینگ

Motion Graphics: اصول انیمیشن در طراحی

Motion Graphics؛ Timing، Easing و وضوح پیام؛ راهنمای عملی با مثال، منابع رسمی و محدودیت روش‌ها برای طراحی، هماهنگی تیم و خروجی قابل استفاده.

1404/11/12 1 دقیقه مطالعه 1,158 بازدید

Motion Graphics از حرکت برای توضیح، هدایت توجه یا روایت با عناصر گرافیکی استفاده می‌کند. زیاد بودن افکت یا نرم بودن حرکت به‌تنهایی کیفیت را نشان نمی‌دهد. باید بدانید مخاطب در هر لحظه چه چیزی را می‌بیند و چه اطلاعاتی می‌گیرد. اگر حرکت فقط برای پر کردن زمان اضافه شده، ممکن است پیام را کند یا مبهم کند. طراحی خوب از هدف، ترتیب محتوا و زمینه نمایش شروع می‌شود و سپس به ابزار و Keyframe می‌رسد.

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

پیام را پیش از حرکت بنویسید

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

Storyboard می‌تواند قاب‌های اصلی و رابطه آن‌ها را نشان دهد. لازم نیست از ابتدا تصویر نهایی باشد؛ ترتیب، متن و جهت توجه مهم‌ترند. بعد، Animatic ساده زمان تقریبی را روشن می‌کند. اگر در همین مرحله متن خوانده نمی‌شود، پیش از پرداخت جزئیات اصلاح کنید. طرح کم‌جزئیات برای تصمیم و ارتباط روشن از نظر جدا کردن پرسش و نتیجه مرتبط‌اند.

Timing و Spacing را جدا بفهمید

Timing درباره زمان وقوع و مدت حرکت است؛ Spacing درباره فاصله تغییر میان لحظه‌هاست. دو حرکت با مبدأ و مقصد یکسان می‌توانند احساس متفاوتی بدهند چون سرعت در طول مسیر فرق دارد. در مثال عنوان، ورود سریع و توقف آرام ممکن است توجه را هدایت کند، اما همان الگو برای هشدار یا داده علمی مناسب نباشد. انتخاب باید با معنا و نقش عنصر هماهنگ باشد، نه فقط حس خوشایند طراح.

مستندات Keyframe Interpolation در Adobe تفاوت روش‌های تغییر میان Keyframeها را توضیح می‌دهد. در ابزار، منحنی زمان و مسیر فضایی نقش متفاوت دارند. نرم کردن سرعت، مسیر حرکت را لزوماً اصلاح نمی‌کند. وقتی نتیجه عجیب است، ببینید مشکل از مقدار، زمان یا مسیر است. تغییر چند بخش هم‌زمان بدون شناخت آن‌ها، یادگیری و کنترل نتیجه را دشوار می‌کند.

Easing را با دلیل انتخاب کنید

Easing تغییر سرعت را در آغاز یا پایان کنترل می‌کند. استفاده از آن می‌تواند حرکت را قابل فهم‌تر کند، اما «همه Keyframeها Easy Ease» قانون کافی نیست. حرکت ثابت، توقف ناگهانی یا تغییر پله‌ای هم ممکن است برای پیام مشخص مناسب باشند. برای داده یا نمایش مرحله، اغراق بیش از حد می‌تواند برداشت را عوض کند. از سرعت و منحنی به‌عنوان بخشی از زبان حرکت استفاده کنید و اثر آن را در توالی کامل ببینید.

برای تمرین در After Effects، یک Composition کوتاه با اندازه متناسب نمایش بسازید و یک Shape ساده اضافه کنید. Position آغاز را در زمان صفر و مقصد را در یک ثانیه ثبت کنید. ابتدا نتیجه Linear را ببینید، سپس فقط نوع Interpolation را تغییر دهید و در Graph Editor سرعت را بررسی کنید. این تمرین به افزونه یا فایل بیرونی نیاز ندارد. هدف، مقایسه یک متغیر است و نه ساخت خروجی نهایی برای هر رسانه.

سلسله‌مراتب بصری را در زمان حفظ کنید

عنصر مهم باید فرصت دیده شدن داشته باشد. اگر پس‌زمینه، تصویر و عنوان با شدت مشابه حرکت کنند، کاربر نمی‌داند کجا نگاه کند. حرکت فرعی را محدود و با بخش اصلی هماهنگ کنید. در مثال سه مرحله، می‌توان عنوان را ثابت نگه داشت و فقط نشانه مرحله بعد را وارد کرد. لازم نیست همه عناصر زنده باشند. سکون نیز می‌تواند برای خواندن، انتظار و تأکید نقش داشته باشد.

رنگ، اندازه و حرکت با هم توجه می‌سازند. اگر هر سه برای چند عنصر هم‌زمان به حداکثر برسند، اولویت گم می‌شود. ترکیب‌بندی بصری و فضای خالی برای این تصمیم مرتبط‌اند. ترکیب باید در قاب‌های میانی هم قابل فهم باشد، نه فقط در تصویر آغاز و پایان. مخاطب توالی را می‌بیند و ممکن است در هر لحظه بخشی از پیام را دریافت کند.

متن به زمان خواندن نیاز دارد

مدت نمایش را با طول، زبان و مخاطب هماهنگ کنید. عدد ثابت برای همه عنوان‌ها کافی نیست. متن فارسی با ترکیب واژه انگلیسی یا عدد ممکن است نیاز به بررسی بیشتری داشته باشد. حرکت دادن پیوسته متن می‌تواند خواندن را دشوار کند؛ گاهی ورود کوتاه و توقف روشن مناسب‌تر است. قبل از خروج، فرصت فهم بدهید و اطلاعات ضروری را فقط در یک لحظه گذرا نمایش ندهید.

تایپوگرافی فارسی و راهنمای هویت به انتخاب فونت و نقش متن مرتبط‌اند. فونت و دارایی باید مجوز مناسب داشته باشند. تبدیل متن به تصویر یا Shape ممکن است بخشی از مسیر تولید باشد، اما به معنای حذف نیاز نسخه قابل ویرایش نیست. برای اصلاح آینده، ساختار و منبع متن را نگه دارید و نسخه نهایی را با پروژه قابل ویرایش اشتباه نگیرید.

تداوم و انتقال باید رابطه بسازند

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

صدای هماهنگ می‌تواند تأکید ایجاد کند، اما پیام نباید فقط با صدا قابل فهم باشد. زیرنویس و نسخه قابل استفاده در حالت بی‌صدا را در نظر بگیرید. اگر حرکت برای وب تعاملی است، رفتار توقف و ترجیح کاهش حرکت را نیز طراحی کنید. توضیح W3C درباره حرکت ناشی از تعامل امکان غیرفعال کردن حرکت غیرضروری را در چارچوب مربوط بیان می‌کند. این نیاز با ویدئوی عادی یکسان نیست و باید متناسب اجرا شود.

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

برای بررسی، از مخاطب بخواهید پیام و ترتیب را توضیح دهد. اگر مرحله‌ای را جا انداخته، ببینید متن، زمان یا انتقال مشکل داشته است. نظر کلی «حرکت جذاب است» پاسخ کامل درباره فهم نیست. بازخورد را با زمان یا شماره صحنه ثبت کنید تا اصلاح قابل انجام باشد. در تیم، مسئول تأیید محتوا و مسئول تأیید حرکت را مشخص کنید؛ تغییر متن پس از پایان انیمیشن ممکن است زمان‌بندی چند بخش را عوض کند و باید در برنامه دیده شود.

خروجی به رسانه وابسته است

ابعاد، Frame Rate، فرمت و فشرده‌سازی را با مقصد هماهنگ کنید. کیفیت بالا به معنای انتخاب بیشترین مقدار در همه تنظیمات نیست. فایل بسیار سنگین شاید انتشار یا پخش را دشوار کند. اگر خروجی برای صفحه وب است، ظرفیت دستگاه و روش پخش مهم‌اند؛ اگر برای ویدئوی شبکه اجتماعی است، حاشیه رابط و برش را بررسی کنید. طراحی پست و استوری به این محدودیت‌ها مرتبط است.

نسخه نهایی را در اندازه و سرعت واقعی ببینید و متن، برش، صدا و پایان را بررسی کنید. برای حرکت خودکار کنار محتوای دیگر، معیار Pause, Stop, Hide در W3C شرایط مشخصی دارد؛ آن را به گزاره ساده «همه حرکت‌ها ممنوع‌اند» تبدیل نکنید. هدف، دسترسی و کنترل مناسب است. Motion Graphics باید پیام و رابطه را روشن کند؛ تعداد افکت یا پیچیدگی پروژه معیار کافی کیفیت نیست.

واکنش به این مقاله

اشتراک‌گذاری این مقاله:
دیدگاه‌ها 0
۰ / ۲۰۰۰

هنوز دیدگاهی ثبت نشده

اولین نفری باشید که نظر می‌دهد!