آشنایی با انیمیشن سازی در فریمورک Vue

با کمک این دوره رابط وب خود را جان بخشی می کنید و تجربه کاربری خود را با انیمیشن های Vue بهبود می بخشید.

چرا متحرک سازی؟

احتمالاً شنیده اید که انیمیشن های وب می توانند تجربه کاربری اپلیکیشن Vue شما را بهبود بخشند. اما آیا می دانید چه مواردی را باید متحرک کنید و چگونه این کار را در Vue انجام دهید؟ در دوره تسلط به انیمیشن Vue، آنچه که یک انیمیشن وب را موثر می‌ سازد بررسی می‌ کنیم و ساده‌ ترین راه‌ ها را برای شروع متحرک سازی رابط‌ های خود یاد می‌ گیرید تا کاربران بهتر بتوانند اپلیکیشن شما را ناوبری کنند و از آن لذت ببرند.

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

هدایت تمرکز

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

ما می توانیم از قدرت انیمیشن استفاده کنیم تا توجه کاربرمان را متمرکز کنیم. و هنگامی که این ویژگی را داریم، می توانیم آن ها را به جایی که می خواهیم هدایت کنیم.

اقدام الهام بخش

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

در این مثال، call to action ما دکمه‌ ای است که می‌ خواهیم کاربر روی آن کلیک کند. با استفاده از موشن، حواس‌ پرتی را حذف کرده‌ ایم و هرگونه سردرگمی را در ذهن کاربر در مورد اینکه کجا باید تمرکز کنند و چگونه باید با اپلیکیشن ما شروع به تعامل کنند، از بین برده‌ ایم.

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

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

ایجاد جریان

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

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

ما می‌ توانیم با متحرک کردن آن در collapsed state، به کاربر نشان دهیم که منویی که تازه باز کرده به کجا رفته است. ما می‌ توانیم از انیمیشن برای ایجاد حسی از فضا و زمان فیزیکی در داخل یا اپلیکیشن استفاده کنیم، جایی که عناصر در یک مدت زمان قابل پیش‌ بینی بین پوزیشن ها و states تغییر می‌ کنند. وقتی این امر به خوبی پیاده شود، کاربر با «جهان» اپلیکیشن ما احساس آشنایی می کند. آن‌ ها می‌ دانند که آیتم ها در آن کجا قرار دارند، بنابراین بهتر به یاد می‌ آورند که در صورت لزوم چگونه مواردی را که به آن نیاز دارند پیدا کنند و می‌ دانند که اپلیکیشن چگونه رفتار می‌ کند تا از آن سرگردان، ناامید یا خسته نشوند.

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

لذت و سورپرایز

با تعداد بی پایانی از اپلیکیشن ها، که بسیاری از آن ها ممکن است نسبتاً معمولی و کسل کننده باشند، کاربران ما از تاچ های متفکرانه ای که اپلیکیشن ما را سرگرم کننده تر و لذت بخش تر می کند، قدردانی خواهند کرد. اگر کاری کنید کاربر شما لبخند بزند، پس به تازگی یک طرفدار پیدا کرده اید.

این تاچ های متفکرانه می‌ تواند هر چیزی باشد، از یک اسپینر بارگذاری سفارشی، تا یک فرم فوق‌ العاده تمیز و مفید که بار پر کردن تعدادی فیلد را کاهش می‌ دهد، تا دکمه‌ ای که state موفقیت یا خطا را نشان می‌ دهد.

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

بیایید مرور کنیم

در دروس بعدی، روش هایی را بررسی خواهیم کرد که می‌ توانیم از قدرت Vue برای ایجاد انیمیشن‌ هایی استفاده کنیم که تقریباً هر وب اپلیکیشن می‌ تواند از آن بهره ببرد. در حالی که راه های زیادی برای انیمیشن سازی در Vue وجود دارد و می تواند بسیار پیشرفته و پیچیده باشد، هدف این دوره این نیست که هر یک از گزینه های موجود را به شما نشان دهد. هدف ما است که ابزارها و بینشی را در اختیار شما قرار دهیم تا شروع به افزودن انیمیشن های ساده و کاربردی به اپلیکیشن های Vue خود کنید که تمرکز را هدایت می کنند، الهام بخش عمل هستند، جریان ایجاد می کنند و لذت و غافلگیری را موجب می شوند.