طراحی موشن گرافیک، شاخه ای از طراحی گرافیک است که در مورد نحوه ی ایجاد انیمیشن و جلوه های بصری بر روی صفحه نمایش دیجیتال مطرح می شود. آموزش موشن گرافیک امروزه یک عنصر ضروری برای رسانه های دیجیتال به حساب می آید. همه چیز از ارتباطات دیجیتال گرفته تا تبلیغات، تحت تأثیر موشن گرافیک قرار می گیرد و هر روزه، تغییراتی چشمگیر را در نحوه ی طراحی آن ها شاهد هستیم. اما بدون شک، بزرگترین بخشی که تحت تاثیر طراحی موشن گرافیک قرار می گیرد، تجربه ی کاربر یا در اصطلاح، UX / مخفف user experience است. نحوه ی ساختن یک رابط کاربری و فکر کردن در مورد تجربه ی کاربر در یک برنامه یا یک وب سایت از زمان ظهورِ آن، به طور کامل تغییر کرده است.
ریشه ی تجربه ی کاربر
طراحی در جهان رایانه، در مراحل اولیه ی توسعه رابط نرم افزاری، عمدتا تحت تأثیر طراحی چاپی قرار گرفت. اما این ایده به طور مداوم توسط بسیاری از طراحان در تلاش برای طراحی موشن گرافیک در رابط برنامه های کاربردی، به چالش کشیده شد. ابتدایی ترین شیوه های این رابط کاربری این بود که چراغ های قرمز و سبز در رابط ها چشمک زن می شدند تا مواردی مانند متصل شدن رایانه به اینترنت و یا ورود کاربر به سیستم و یا چنین حالت هایی از برنامه را نشان دهند.
آموزش پیشنهادی برای شما : آموزش جامع موشن گرافیک در افترافکت
حتی مشاهده ی چنین مواردی در رابط های اولیه لذت بخش بود، گرچه آن ها به سختی به عنوان طراحی موشن گرافیک واجد شرایط هستند. اما ایجاد این اتفاقات سخت بود و تنها با مشارکت یک برنامه نویس انجام می شد. بنابراین بیشترِ رابط ها، دارای گرافیک استاتیک بودند.
یکی از بزرگترین تغییرات در طراحی رابط کاربر، هنگامی پدیدار شد که WWDC مشخصات HTML 5 و CSS 3 (دو تکنولوژی مهم برای ساختن وب جهان گستر / www) را در سال ۲۰۱۴ منتشر کرد. دنیای طراحی چاپی به عنوان رابط کاربری دیجیتال، به وضوح پایان یافت و جای خود را به دنیای دیجیتال خالص داد که در آن، حرکت تبدیل به بخشی جدایی ناپذیر از چارچوب / framework بود.
چرا موشن گرافیک به عنوان یک رابط کاربری مفید است؟
بخش بزرگی از طراحی تجربه ی کاربر / user experience مربوط به ساده سازیِ درکِ چگونگی استفاده از رابط برای کاربران، برای رسیدن به اهداف آن ها است. طراحی موشن گرافیک یک ابزار مهم در جعبه ابزار ما برای دستیابی به این هدف اولیه است.
برای مثال، تا همین اواخر، اگر می خواستیم توجه کاربر را به یک دکمه ی خاص بر روی صفحه نمایش جلب کنیم، می توانستیم آن را به روش های محدودی انجام دهیم: با بزرگنمایی یا پر رنگ کردن آن و یا قرار دادن آن در بالای صفحه. اما با طراحی موشن گرافیک، ما می توانیم دکمه را کوچک نگه داریم، اما آن را بر روی همه عناصر دیگر در صفحه پدیدار کنیم، بنابراین اولین عنصری خواهد بود که توجه کاربر را به خود جلب می کند.
علاوه بر این، حرکت ها می توانند در ارائه ی راهنمایی نیز مفید باشند. فلش هایی در اطراف یک صفحه نمایش، به عناصر مختلف در صفحه نمایش اشاره می کنند، و طراحی موشن گرافیک متفاوت می تواند کاربر را به یک برنامه هدایت کند. اگر کاربر یک لیست را پیمایش کند و به پایین برسد، یک پرش کوچک به کاربر اطمینان می دهد که این پایین لیست است و شما نمی توانید بیشتر از این به سمت پایین حرکت کنید و یا اگر یک باکس درخواست رمز عبور، به صورت افقی تکان بخورد، به کاربر نشان می دهد که رمز عبور وارد شده نادرست است. این حرکت ها خیلی بهتر از ارسال یک پیام هستند، مثلا: “رمز عبوری که وارد کرده اید نادرست است”.
قبلا برنامه ها می توانستند از طراحی موشن گرافیک استفاده کنند تا سریع تر از آن چه که در واقع هستند ظاهر شوند. درست مانند آسانسور ها که وجود یک آینه کاربر را منحرف کند و متوجه نمی شود که آسانسور با چه سرعتی حرکت می کند. و یا هنگام برقراری ارتباط با یک سرور در اینترنت،یک چرخ یا توپ با چرخش سریع روی صفحه، این توهم را برای کاربر به وجود می آورد که برنامه واقعا سریع کار می کند. بسیاری از گوشی های اندروید شروع به حذف انیمیشن های طولانی در سیستم عامل های تلفن های موبایل کرده اند، تا به نظر برسد که سریع تر از موبایل های مشابه هستند.
ابزار مورد استفاده در طراحی موشن گرافیک
پس از آن که ابزار های توسعه، شروع به ارائه ی روش هایی برای ادغام طراحی موشن گرافیک در برنامه های کاربردی وب کردند، رابط های کاربری در دستگاه های تلفن همراه و دسکتاپ نیز به سرعت شروع به ارائه ی گزینه هایی برای طراحی موشن گرافیک در داخل پلتفرم های توسعه خود کردند.
ابزارهایی مانند افتر افکت / Adobe After Effects برای کمک به ایجاد موشن گرافیک استفاده می شوند، در حالی که افراد Framer برای ایجاد انیمیشن های داخل صفحه و همچنین انتقال صفحات از آن استفاده می کنند. اما همچنان ابزارهای جدید هر روز منتشر می شود و تلاش می کنند تا کار ایجاد طرح موشن گرافیک را ساده تر کنند.
این اصل، یک جایگزین پر استفاده برای Framer است که کد را در پشت انیمیشن ایجاد نمی کند، اما برای ایجاد انیمیشن و انتقال ساده تر است و برای طراحان مفید است تا بتوانند ایده های خود را برای توسعه دهندگان بفرستند و بتوانند در هنگام ساخت، آن ها را در اپلیکیشن ها برنامه ریزی کنند.
آموزش پیشنهادی برای شما : موشن گرافیک به سبک استاپ موشن در افترافکت
باید ها و نباید ها
هنگامی که از طراحی موشن گرافیک در داخل رابط برنامه های خود استفاده می کنید، بسیار وسوسه انگیز است که از آن در همه جا استفاده کنید. با این حال، طراحی موشن گرافیک فقط باید در نقش حمایت کننده مورد استفاده قرار گیرد. و اگر بیش از حد استفاده شود، ممکن است کل برنامه را غیر قابل استفاده کند.
علاوه بر این، در صورتی که گرافیک بر روی صفحه نمایش، بیش از حد چشمک بزند، ممکن است آزار دهنده باشد. بنابراین باید در هنگام ادغام موشن گرافیک در برنامه ها به این مورد توجه داشته باشید.
ترند ها در طراحی موشن گرافیک
ترند های طراحی موشن گرافیک به طور دقیق توسط کسانی که در کار طراحی گرافیک هستند، دنبال می شوند، و دارای موارد منحصر به فردی نیز هستند. در زیر برخی از ترند های اخیر آورده شده است:
Faux 3D
Isometric Views
Seamless Transitions
Big Type
طراحی موشن گرافیک امروزه برای طراحی برنامه ها ضروری است. با استفاده از تجربه ی کاربر، طراحی ها بیشتر و بیشتر در جهان نرم افزار ها گسترده و اساسی شده اند. طراحی موشن گرافیک یکی از مهارت هایی است که با گذر زمان، رفته رفته بسیار مهم تر می شود!
