انیمیشن در مقابل تصویر متحرک
Motion Graphics یک حرفه کمی است. بسیاری از اجزا هستند که گرافیک متحرک را تشکیل می دهند و به همین دلیل در بسیاری از مواقع جنبه واقعی «طراحی» از بین می رود. بیایید کمی وقت بگذاریم تا به حرکت تفکر و نحوه ایجاد ارزش عاطفی برای کاربران از طریق سیستم های طراحی شده با استفاده از انیمیشن بپردازیم. به همان روش هایی که به دنبال تایپوگرافی ، رنگ ، بافت و سایر ابزارهای اطلاع رسانی یا برانگیختن واکنش احساسی هستیم ، باید از انیمیشن نیز استفاده کنیم.
راه های زیادی برای کشف این ابزار وجود دارد ، هم در UX / UI و هم در مارک تجاری. حرکت می تواند جو ایجاد کند و می تواند طرح ها یا مدل های تعامل شما را شکل دهد.
انیمیشن
بیایید با ارائه این مطلب شروع کنیم که کلمه “انیمیشن” توسط دامنه طراحی دیجیتال تا حد زیادی اشتباه گرفته شده است. انیمیشن مطالعه حرکت با استفاده از توالی تصاویری است که در تغییرات کوچک به یکدیگر اشاره می کنند. وقتی انیمیشن را برای یک پروژه در نظر می گیرید ، این سؤال ایجاد می شود که “چه نوع انیمیشن؟”
تکنیک های مختلف انیمیشن عبارتند از:
سنتی ،تمام قاب ، محدود ، روتوسکوپ .
حرکت متوقف ، خشت ، عروسک ، مدل ، شی ، پیکسل (با استفاده از فیلم های اکشن زنده)
رایانه 2 بعدی ( افترافکت ، فلش ) ، سه بعدی ( عکس واقع گرایانه ، سلول سایه دار ، ضبط حرکت )
آزمایش ، هیدروتکنیک ، طراحی روی فیلم ، پاک کردن ، تلنگر ، شن و ماسه و غیره
روش های مختلفی برای اعمال انیمیشن وجود دارد. هر تکنیک زیبایی شناسی دارد که می تواند حسی خاص را به همراه داشته باشد. به عنوان مثال ، حرکت را در مقابل واقع گرایی سه بعدی متوقف کنید. آنها صدای متفاوتی دارند و دانستن این امر به شما امکان می دهد قوانین را متناسب با نیازهای خود تنظیم کنید یا حتی با تصورات از پیش تعیین شده بیننده بازی کنید. بدیهی است که سبک در اینجا نیز نقش دارد اما این روش اغلب می تواند سبک را دیکته کند یا آن را آگاهی دهنده کند.
ادراک مهم است زیرا وقتی ما در حال طراحی یک محصول یا مارک هستیم ، باید اطمینان حاصل کنیم که به صدای ثابت پایبند هستیم یا صدایی ایجاد می کنیم که برای مخاطبانمان منطقی باشد. ما باید نیازهای آنها را درک کنیم و با انگیزه تصمیم بگیریم. اجرای واقع گرایانه و سه بعدی میکی موس به طریقی متفاوت از این قابل درک است که اگر بصورت سنتی در مقابل انقباض کاغذهای ثابت متحرک باشد. مانند همه رسانه های تصویری ، رویکرد شما تأثیر ذاتی بر ادراک خواهد داشت. قبل از تصمیم گیری در مورد روش حرکت ، باید لحن انتخابی را درک کنید.
وقتی از حرکت تصویر صحبت می کنیم ، باید به همان روشی که قبل از افزودن CTA به انگیزه های تصمیمات خود فکر می کنیم ، فکر کنیم. دقیقاً مانند هر چیزی در طراحی ، رویکرد با متن تغییر خواهد کرد ، اما انگیزه بخشی جدایی ناپذیر از تصمیم است.
Motion Graphics
Motion Graphics اوج مطالعه حرکت (انیمیشن) و تمرین طراحی زیبایی شناختی و تفکر سیستمی است. این شامل حل مسائلی است که با محتوا ، زمینه ، ادراک و بسیاری از متغیرهای دیگر درگیر می شوند.
آرت بابیت Goofy را به گونه ای طراحی كرد كه به ویژگی خاصی در مورد او متوسل شود. حرکات فلاپی و چرخه راه رفتن به عقب همه بیانگر نحوه رفتار او بود و او را به عنوان یک شخصیت منحصر به فرد و دمدمی مزاج می کرد. این شخصیتی است که برای برانگیختن یک احساس خاص طراحی شده است. انگیزه هنر در ایجاد چرخه پیاده روی جدید بود.
طراحی حرکت با تجربه
قابل درک است که فکر کردن در مورد شخصیت ها هنگام برخورد با مدل ها و سایر اشیاء به ظاهر بی جان دشوار است.UI یک شخصیت نیست و نباید با آن یکسان رفتار کرد.
اما شاید … فقط شاید… اگر به عناصر UI به عنوان شخصیت فکر کنید ، چه می کنید؟ شما ممکن است شروع به پیدا کردن برخی شباهت ها در روند خود برای رابط ها کنید.
اهداف اولیه ، ثانویه ، ثالث شما چیست؟ آیا می توانیم این اهداف را به عناصر UI یا مدل های تعامل اختصاص دهیم؟ بیایید اینها را شخصیت های خود بنامیم!
همه اهداف اصلی ما قهرمانان ما خواهند بود. آنها پیشرفته ترین و جالبترین تعاملات رابط کاربر یا تجربه کاربری ما هستند ، مانند مدلهای ناوبری یا تعامل. در حالی که عنصر دیگر می تواند یک شخصیت ثابت (بیشتر متن ، فلش ، ضربدرها و غیره) یا شخصیت پویا (جدول زمانی ، عکس یا محتوای ویدئو) باشد. عملکرد این شخصیت ها در چارچوب تجربه چگونه است؟ ما می توانیم از این مدل برای ایجاد یک سلسله مراتب حرکتی استفاده کنیم که کاربر را پشتیبانی کند و او را آگاه کند که چگونه می تواند ادامه دهد؟
وقتی انیماتورها یک فیلم را کنار هم می گذارند ، در حال طراحی شخصیت ها ، زمینه ها ، دیالوگ ها و روحیه هستند. آنها به این فکر می کنند که این طرح ها چگونه روی یکدیگر تأثیر می گذارند و اینکه مخاطب چگونه همه چیز را در لایه هایی با پیچیدگی داستان درک می کند. با تفکر در ساخت یک داستان ، با پیچیدگی و شخصیت ها ، همه چیز را به گونه ای قاب می کند که به شما کمک می کند هنگام افزودن انیمیشن تصمیم بهتری بگیرید. به یاد داشته باشید ، انیمیشن به سادگی مطالعه حرکت است ، اما این حرکت می تواند تأثیرات جدی بر روی محصول شما داشته باشد و هرگز نباید بدون تأمل باشد.
تغییر فرم برای مشاهده یک رابط از نظر روایت یک داستان نه تنها به من کمک کرده است تا تصمیمات حرکتی را به مشتری انتقال دهم ، بلکه آن را به گونه ای قاب بندی می کند که همه ما با آن آشنا هستیم.
با ادامه ساخت یک زبان دیجیتال برای انیمیشن ، ما به کشف زمینه های جدید ادامه خواهیم داد. همانطور که قبلاً اشاره کردم ، بوم دیجیتال ما دو روش عمده برای استفاده از انیمیشن را ارائه می دهد. در رابط کاربری و در تجربه نام تجاری .
رابط کاربر
12 اصل انیمیشن به مطالعه حرکت (انیمیشن) اشاره دارد ، که از کتاب The Illusion Of Life نوشته فرانک توماس و اولی جانستون مشهور است. اگر در انیمیشن به هر شکل یا روشی کار می کنید ، این اصول اعمال می شوند. بسته به زمینه برنامه انیمیشن ها ، باید آنها را برای درک بهتر سودمندی آنها دوباره قالب بندی کنید.
اصول اساسی و روند تفکر تایپوگرافی همچنان در بوم دیجیتال اعمال می شود. هدایت ، هسته ، اندازه گیری ، وزن ، مجاورت و غیره. در حالی که ما روش های جدیدی را برای به کارگیری برخی از این اصول در نظر گرفته ایم ، به منظور استفاده از یک رسانه دیجیتال انعطاف پذیر ، بسیاری از اصول هنوز هم اعمال می شوند. هنگامی که می خواهید از نوع طراحی استفاده کنید ، به مطالعه تایپوگرافی مراجعه می کنید.
پیشینه من در انیمیشن سنتی است ، بنابراین توصیه من این است که 12 اصل و نحوه استفاده از آنها را در انیمیشن درک کنید. پس از درک کامل ، می توانید آنها را برای استفاده در رابط کاربری و یا برنامه مارک مجدداً تنظیم کنید. اگر می خواهید آنها را به همان روشی که برای شخصیتی مانند Goofy اعمال می کنید به سختی اجرا کنید، اگر آنها را دوباره فریم بندی کنید تا به نوعی در نظر گرفته شود که برای شما مفید باشد ، مسیر واضح تر می شود.
در مقاله ای که توسط Bay-Wei Chang و David Ungar در سال 1993 انجام شد ، آنها با استفاده از 12 اصل انیمیشن به تعریف سه شاخصه حرکت در رابط کاربری پرداختند. این دسته بندی های گسترده ای است و به همین دلیل من آنها را دوست دارم و بیشتر در مورد آنها کار می کنم. گستردگی این دسته ها انعطاف پذیری را برای تصمیم گیری خلاقانه تر به شما می دهد.
این سه شاخصه استحکام ، اغراق و تقویت هستند . این سه دسته ، نقطه شروع بسیار خوبی را برای استفاده از انیمیشن در UI و همچنین روش دیگری برای برقراری ارتباط آن به روشی ملموس به مشتری ، ارائه داده اند.
استحکام ، اغراق و تقویت
◼ استحکام به شما اطمینان می دهد که عناصر دیجیتالی شما جامد ، ملموس و تعاملی هستند. مواردی مانند کندی ورود و خروج ، پیگیری و کمان ها. استفاده از تاری یا لکه حرکت ، به منظور نشان دادن رابطه فضایی اشیا در حال حرکت از یک مکان به مکان دیگر است.اطمینان حاصل کنید که تعامل پذیری یک شی دارای وزنی و حضوری است که احساس واقع گرایانه می کند. هدف ایجاد احساس تعاملی است که (تا حدی) زندگی را تقلید می کند. شما می خواهید کاربران طوری برخورد کنند که گویی انگار دارند یک صفحه کلید را لمس می کنند یا قلم را می گیرند. آن را به عنوان یک شی دیجیتال تصور کنید که دارای قوانینی استوار در فیزیک است و آگاهی فضایی است که عملکرد آن را حکم می کند.
◼ اغراق از طریق استفاده از پیش بینی ، فرصت تعامل خوبی را برای عناصر موجود در رابط ایجاد می کند. بهترین قسمت در مورد اغراق این است که به خودتان این آزادی را بدهید که فراتر از واقعیت گسترش یابد تا یک ایده یا احساس را تقویت کند. فرصتی برای ایجاد سلسله مراتب برای عناصر UI یا نکات و نشانه هایی برای ادامه کار برای کاربران وجود دارد.
رابط کاربری باید هم پایه هایی برای کاربر فراهم کند که بتوان از آن ماهیت اشیا و وضعیت موجود در دنیای رابط کاربر را بهتر تفسیر کرد و همچنین مشخصات برجسته ای را ایجاد کرد که در غیر این صورت ممکن است توسط کاربر نادیده گرفته شود. اغراق در رفتار اشیا رابط کاربر باعث می شود که این رفتار قابل درک تر و واقع بینانه تر باشد و در نتیجه رابط کاربری جذاب تر شود. “بی وی چانگ”
متحرک سازی نشان روی صفحه توجه شما را به خود جلب کرده و حس سلسله مراتب را در برابر سایر عناصر قابل مشاهده ایجاد می کند.
◼ برای تقویت این ایده در نظر گرفته می شود که رابط یک ساختار فیزیکی است ، دقیقاً مانند استحکام، که با آن تعامل دارید. تقویت حرکت کاربران از طریق تجربه ، آنها را به گونه ای هدایت می کند که حرکت را قابل فهم تر کند. این امر به اطمینان از آگاهی فضایی برای کاربران کمک می کند و توهم تعامل بدنی را که برای ما راحت است حفظ می کند. این شامل استفاده از قوس ، پیگیری و اطمینان از توزیع وزن مناسب برای اشیا با استفاده از کندی ورود و خروج مناسب است. تعاملات باید احساس کنند که در هر گوشه ای به شما واکنش نشان می دهند.
فکر در پشت این سه حرکت گسترده در نظر گرفتن عملکرد و طراحی آن چیزی است که در ارتباط با محتوا و زمینه آن حرکت می کند. انیمیشن کمک می کند تا درک متقابل دیجیتال را از بین ببریم و آن را تبدیل به چیزی دوستانه تر و فیزیکی کنیم. با در نظر گرفتن این سه راهنما می تواند بار شناختی را کاهش دهد و اجرا شود. با اجتناب از قوانین و محدودیت های کاملاً محدود و تفکر در حرکات گسترده ای از اغراق ، استحکام و تقویت ، می توانید تصمیمات حرکتی خود را به روشی کاربردی تنظیم کنید در حالی که به خود آزادی می دهید تا خلاقانه تر حرکت کنید.
نام تجاری
روش مهم دیگر که motion graphics می تواند تجارب دیجیتالی را ارتقا دهد ، نام تجاری است. باید یک اصل اساسی وجود داشته باشد که نحوه متحرک سازی شما را آگاه سازد. روشی که شما برای متحرک سازی ایجاد می کنید یک تجربه منحصر به فرد ایجاد می کند که نمی تواند از طریق طراحی ثابت تحقق یابد و ایجاد برخی از راهنماهای حرکت مارک سودمند است. با این کار شما یک زبان حرکتی برای نام تجاری ایجاد می کنید که می تواند پیشنهادات دیجیتال شما را به طور منسجم رد و بدل کند ، در حالی که یک لحن سازگار است.
به عنوان مثال ، Google یک زبان دیجیتالی خارق العاده برای حرکت در سیستم Material Design خود ایجاد کرده است. Material in Motion آنها راهنمای چگونگی اعمال حرکت به روش Google است ، هم با لحن و هم به روش عملکردی. اگر از راهنماهای آنها پیروی کنید ، یک برنامه یا تجربه وب خواهید داشت که با جو Google احساس و عملکرد خوبی دارد.
بهترین نمونه های تصویر متحرک از توالی های عنوان آمده است. شما می توانید قدرت لحن طراحی شده را به فراوانی در سکانس های عنوان مشاهده کنید. آنها راهی عالی برای گرفتن ذاتی دارند که می تواند چندین فصل ، نمایش ، فیلم را در بر بگیرد. می توانید رویکرد و سبک را براساس محتوا و یا متن تغییر دهید ، اما زبان و لحن در طراحی حرکت ثابت است.
روشی که گوگل در حرکت با نام تجاری به آن نزدیک شده کاربردی است و مناسب آنها است. با این حال ، انیمیشن انعطاف پذیری بسیار بیشتری ارائه می دهد و من نمی توانم صبر کنم تا ببینم که ما می توانیم طراحی حرکتی را روی این بوم دیجیتال خود ادامه دهیم.
نتیجه
انیمیشن مطالعه حرکت است امروزه یک زمان هیجان انگیز برای انیماتورها خواهد بود زیرا با افزایش روزافزون واقعیت مجازی و واقعیت افزوده در زندگی روزمره ، نیاز به “احساس” خاصی از تعامل بدنی وجود خواهد داشت.
