با Easing در Figma و After Effects انتقال های صاف انجام دهید

انتقال صاف در برنامه ها و وب سایت ها جایی است که طراحی حرکتی واقعاً می تواند بدرخشد. آنها ارتباطات را بهبود می بخشند در حالی که سطح لذت را برای تجربه کاربر به ارمغان می آورند.

در یک گردش کار طراحی UX معمولی، همانطور که به مرحله تحویل‌پذیری نزدیک می‌شویم، آماده می‌شویم تا فایل‌ها را به توسعه‌دهندگان تحویل دهیم، حرکت را در کارمان اصلاح و کامل می‌کنیم. Figma بسیاری از این کارها را برای ما انجام خواهد داد، و ما می‌توانیم برچسب‌ها و کامنت‌هایی را اضافه کنیم تا اهداف خود را بیان کنیم. اما برای ایجاد انتقال‌های واقعاً صاف و نمونه‌های اولیه با وفاداری بالا، می‌توانیم فایل‌های Figma خود را برداریم و همه چیز را به After Effects منتقل کنیم.

مثال انتقال رابط

ویدیوی بالا تا حد زیادی بهترین نمایش طراحی حرکتی را در این آموزش نشان می دهد، اما در اینجا یک توضیح متنی سریع نیز وجود دارد.

برای نشان دادن نتیجه نهایی بهبود یافته ای که Figma و After Effects می توانند به شما ارائه دهند، از این مدل رابط کاربری ساده استفاده می کنیم. این یک برنامه مالی است که موجودی کاربر را نشان می‌دهد، فعالیت ماهانه را نشان می‌دهد و برای یافتن گزینه‌های بیشتر، ناوبری خارج از بوم دارد.

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

نمونه اولیه در Figma

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

سپس روی Prototype در منوی نوار کناری سمت راست Figma کلیک می کنیم و شروع به کشیدن فلش ها برای پیوند دادن هر صفحه به بالا می کنیم. برای اولین پیوندی که خواهید دید، من انتخاب کردم که پس از تاخیر 800 میلی‌ثانیه فعال شود. این یک انتقال فوری است، بنابراین برای شروع نیازی به تعامل کاربر نیست.

پیوند ناوبری را تنظیم کنید

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

با این حال، بلوک ناوبری با کلیک روی دکمه “همبرگر” به صفحه منتقل می شود. بنابراین ما انتخاب می کنیم روی کلیک و انتخاب کنید روکش را باز کنید.

سپس یک را راه اندازی کردیم همپوشانی را ببندید عمل روی دکمه بستن

افزودن انیمیشن هوشمند به مراحل انتقال ما

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

با بازگشت به فلش های خود در طراح نمونه اولیه Figma، می توانیم آنها را تغییر دهیم فوری، به متحرک هوشمند.

با اضافه شدن این حرکت هوشمند، اکنون مشخص شده است که هر عنصر از کجا آمده است.

متحرک هوشمند برای اصالت حرکت، آسان‌سازی را برای حرکت اعمال کرده است.

با مشخص کردن Easing به ادامه مطلب بروید

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

این سه نمودار به صورت گرافیکی انواع اصلی آسان‌سازی را که می‌خواهید در طراحی UI استفاده کنید، نشان می‌دهند.

Enter easing چیزی است که معمولاً هنگام آوردن چیزی روی صفحه استفاده می کنید. آسان کردن خروج برعکس است، برای برداشتن اشیا از صفحه نمایش. آسان‌سازی استاندارد چیزی است که احتمالاً برای عنصری استفاده می‌کنید که روی صفحه می‌ماند، اما به هر دلیلی حرکت می‌کند.

در حالی که انیمیشن هوشمند Figma از پیش‌فرض سهولت استفاده می‌کند (که برای نیازهای ما خوب است)، من ترجیح می‌دهم حرکت خود را با جزئیات بیشتر طراحی کنم. با یک سفارش منحنی bezier ما می‌توانیم دقیقاً تعیین کنیم که سرعت حرکت ما چقدر سریع می‌شود و چقدر سریع به پایان می‌رسد.

به طور کلی، این به عناصر موجود در نمونه اولیه ما انتقال بسیار معتبرتری داده است.

حتی انتقال بهتر در Adobe After Effects

Figma کار خارق‌العاده‌ای را برای ساختن یک نمونه اولیه تعاملی، با حرکتی معتبر انجام داده است، اما ما می‌توانیم با استفاده از After Effects موارد را حتی بیشتر اصلاح کنیم.

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

صادرات طراحی از Figma به After Effects

در حالی که ما آن سطح از کنترل را در Figma نداریم، آن را در After Effects داریم. بنابراین یک گردش کار طراحی UI/UX معمولی، با نزدیک شدن به اتمام طراحی، انتقال این نوع چیزها به AE است.

برای جابجایی کار خود می توانیم از افزونه Figma به نام استفاده کنیم AEUX، که می توانید آن را از وب سایت توسعه دهنده دانلود کرده و سپس از طریق آن به Figma وارد کنید افزونه ها > مدیریت افزونه ها.. منو. هنوز از طریق انجمن Figma در دسترس نیست، بنابراین پس از نصب آن را در زیر پیدا خواهید کرد پلاگین ها > توسعه.

با چند کلیک می‌توانید فایل Figma خود را مستقیماً به After Effects ببرید، و در حالی که ممکن است متوجه شوید برخی چیزها کمی نابجا هستند (شما می‌توانید با تغییر مکان عناصر گناهکار این مشکل را برطرف کنید) همه چیز به‌خوبی مرتب می‌شود. در لایه های امتداد خط زمانی

انیمیشن در افتر افکت

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

• لایه ها/عناصری را که می خواهید متحرک کنید انتخاب کنید.
• اصابت پ برای Position و سپس روی کوچک کلیک کنید کرونومتر نمادها برای قرار دادن یک فریم کلیدی در هر جایی که هد پخش در خط زمانی قرار دارد.
• من یک فریم کلیدی را در ابتدای جدول زمانی و چند ثانیه بعد اضافه می کنم.

• با تنظیم 2 فریم کلیدی برای هر بلوک، هد پخش را به اولین فریم های کلیدی برگردانید و عناصر را به خارج از صفحه منتقل کنید.
• ما اکنون کمی انیمیشن داریم!

با این حال، متوجه خواهید شد که حرکت ما کمی عجیب است. به طور پیش فرض AE تسهیل خطی را اضافه کرده است که همانطور که قبلاً ذکر کردیم بسیار غیر طبیعی به نظر می رسد.

Easy Ease Keyframes

برای رفع این مشکل، هر دو فریم کلیدی را از شی اول انتخاب کنید، سپس F9 را بزنید تا آنها را به فریم های کلیدی “Easy Ease” تبدیل کنید.

این به عنصر ما یک حرکت آسان در خارج می دهد، اما ما می توانیم آن را بهبود بخشیم.

ابعاد مجزا

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

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

نکته: پلاگین جریان برای افترافکت

برای کمک بیشتر به موارد، توصیه می کنم این را بررسی کنید پلاگین جریان برای افتر افکت (30 دلار). از وب سایت توسعه دهنده:

«Flow یک رابط کاربری آسان برای After Effects برای سفارشی کردن منحنی‌های انیمیشن، بدون نیاز به وارد شدن به ویرایشگر نمودار قدیمی و گیج‌کننده به ارمغان می‌آورد. دوران عبارات آهسته و سنگین، یا مبارزه با سرعت و تأثیر (اینها اصلاً به چه معنا هستند؟) گذشته است – فقط یک منحنی ایجاد کنید، به APPLY ضربه بزنید تا طلایی شوید!»

با ابزارهای اضافی که Flow به ارمغان می آورد، می توانید منحنی های خود را بسیار بهتر کنترل کنید، منحنی های حرکتی مورد علاقه خود را ذخیره کرده و آنها را در چندین عنصر اعمال کنید.

نتیجه

امیدوارم این به شما کمک کرده باشد که با شروع کار خود در Figma و سپس اجازه دادن به After Effects همه چیز را به سطح بعدی ارتقاء دهد. افتر افکت به ما کمک می کند تا جزئیات و دقت بیشتری در کار UX خود داشته باشیم.

UX را در Tuts+ یاد بگیرید

ما آموزش‌های ویدیویی UX زیادی در Tuts+ داریم، از معماری اطلاعات، اصول اصلی تا طراحی حرکت، که همه توسط کارشناسان صنعت آموزش داده شده‌اند. نگاهی بیاندازید!