جادوی طراحی حرکت را باز کنید: رابط وب خود را با استفاده از اصول انیمیشن بازسازی کنید
شما یک وب سایت را باز می کنید ، و همه چیز در هنگام حرکت ، با انیمیشن های صاف شروع می شود. دکمه ها به طور ظریف محو می شوند ، تصاویر به آرامی روی صفحه می چرخند ، انتقال متن از بخش به بخش بی دردسر و نه تنها احساس زیبایی نمی کند. تقریباً جادو است. این جادوی طراحی حرکت در توسعه وب است و با سرعت دیجیتالی امروز ، بازی در حال تغییر است.
بنابراین ، چرا طراحی حرکت اهمیت دارد؟ مهمتر از همه ، چگونه می توانید از اصول انیمیشن برای تقویت رابط وب سایت خود استفاده کنید؟
قدرت طراحی حرکت در رابط های وب
طراحی حرکت فقط به معنای زیبا کردن چیزها نیست-این در مورد تقویت تجربه کاربر است. در صورت اجرای صحیح ، طراحی حرکت می تواند باعث شود وب سایت شما تعاملی ، بصری و لذت بخش باشد. کاربران فقط سایت شما را نمی بینند. آنها آن را احساس می کنند ، و اینگونه است که شما توجه آنها را به خود جلب می کنید.
این که آیا شما یک توسعه دهنده وب ، یک طراح UX/UI هستید ، یا یک برندی که به دنبال انتقال سایت خود به سطح بعدی هستید ، واقعاً باید در مورد اصول انیمیشن بدانید. اما اگر طراح نیستید ، آن را عرق نکنید-این پست در مراحل ساده آن را برای شما تجزیه می کند.
اصول طراحی حرکت چیست؟
قبل از نکات خاص ، بیایید به طور خلاصه اصول اصول طراحی حرکت را طی کنیم. اینها از زمانی که والت دیزنی و پیکسار به دلیل ایجاد انیمیشن های طبیعی به وجود آمده اند ، وجود دارد. استفاده از این اصول در طراحی وب شما می افزاید: لایه اضافی لهستانی که طبیعی و شهودی است.
در اینجا 12 اصل انیمیشن اقتباس شده برای رابط های وب:
کدو حلوایی و کشش: این اصل با بیش از حد حرکات ، زندگی را به اشیاء می کشد. نمونه های کلاسیک نمونه های توپ تندرست است که در لحظه ضربه زدن به زمین و کدو حلوایی هنگام بازگشت به آن امتداد می یابد.
پیش بینی: این تکنیک در احساس آنچه اتفاق می افتد ایجاد می شود. دکمه ای که قبل از کلیک کردن “کوچک” می شود ، مثال خوبی است. این پیش بینی کاربر را ایجاد می کند و همچنین یک عنصر تعجب آور را اضافه می کند.
مرحله بندی: این می تواند تأکید بر اقدام اصلی باشد. به عنوان مثال ، با هموار کردن آن ، توجه را به یک دکمه CTA جلب می کند.
مستقیم پیش رو و نمایش به تصویر: این تکنیک ها به ترتیب در مورد حرکت صاف ، بدون وقفه یا برجسته شدن لحظات کلیدی است. در یک رابط وب ، این ممکن است روشی باشد که یک تصویر بار یا منو ظاهر می شود.
عمل را دنبال کنید و با هم همپوشانی داشته باشید – هنگامی که یک قسمت از یک شیء سریعتر از دیگری حرکت می کند ، مانند یک درب نوسان یا موهای یک شخصیت انیمیشن که در پشت سر آنها جاری است. این را می توان در وب سایت خود برای عنصری که “دنبال” دیگری است ، استفاده کنید و جای خود را برای صاف کردن توالی های بصری فراهم می کند.
آهسته و آهسته – این شتاب و کاهش سرعت اشیاء است. انتقال هایی که صاف هستند ، مانند اثرات شناور ، باید در ابتدا و در پایان احساس مایعات کند.
قوس ها-حرکات انسانی و حیوان معمولاً مانند قوس هستند. بنابراین ، استفاده از مسیرهای دایره ای برای انیمیشن ها باعث می شود احساس طبیعی تر شود. هنگام انتقال یک عنصر در صفحه وب ، قوس ها را می توان اعمال کرد.
عمل ثانویه – این زمانی است که یک عمل ثانویه انیمیشن اصلی را تقویت می کند ، مانند دکمه ای که هنگام کلیک کمی می چرخد. این عمق و علاقه را می افزاید.
زمان بندی – این تعریف می کند که انیمیشن چقدر سریع یا کند می شود ، برای ایجاد ریتم و خلق و خوی بسیار مهم است. سرعت بخشیدن به انتقال انرژی باعث ایجاد انرژی می شود ، در حالی که کاهش سرعت باعث آرامش می شود.
اغراق – کمی اغراق آمیز حرکت می تواند به تعامل کاربر اضافه شود. به عنوان مثال اگر کاربر روی یک دکمه معلق باشد ، می تواند کمی بزرگتر شود و این عمل را برجسته تر کند.
نقاشی جامد – شکل و شکل شفاف به اعتبار انیمیشن ها کمک می کند. در وب ، این بدان معنی است که عناصر متحرک و قابل شناسایی هستند.
جذابیت – و آخرین و مهمترین چیز ، هر آنچه را که شما تحریک می کنید باید تا حدودی جذابیت داشته باشد. این بدان معنا نیست که هر عنصر باید “ناز” باشد ، اما همه چیز باید از نظر زیبایی شناسی خوشایند باشد و به یک هدف خدمت کند.
5 نکته برای اجرای اصول طراحی حرکت در وب سایت خود
اکنون که ما اصول بنیادی را پوشش داده ایم ، بیایید به نکات مربوط به طراحی حرکتی عملی که می توانید هم اکنون از آن استفاده کنید ، برای زنده کردن رابط وب خود بپردازیم.
- با استفاده از انتقال سهولت و سهولت ، از سهولت و سهولت برای انتقال های یکپارچه استفاده کنید ، به طور موثری شیوه ای را که به طور طبیعی اتفاق می افتد شبیه سازی می کنید ، به عنوان مثال ، شتاب هنگام شروع راه رفتن و کاهش سرعت هنگام متوقف شدن. برای مواردی مانند دکمه ها ، کشویی ها و پاپ آپ ، این تعامل ها را کمتر ناراحت کننده و برای کاربر جالب تر می کند.
نکته: برای صاف کردن انتقال و ایجاد یک تجربه کاربری جلا تر ، از توابع تسکین دهنده CSS مانند سهولت ، سهولت در خارج یا مکعب (مکعب) استفاده کنید.
- رفتار کاربر مستقیم با حرکت یک انیمیشن بی نظیر می تواند بهترین ابزار شما برای هدایت کاربران از طریق یک صفحه باشد. به عنوان مثال ، یک دکمه CTA انیمیشن که کمی در Hover مقیاس می کند ، کاربران را به کلیک تشویق می کند. اگر به درستی انجام شود ، شما فقط به کاربران نمی گویید که چه کاری باید انجام دهند-شما آنها را با نشانه های بصری هدایت می کنید.
نکته: هرگز مهمترین اقدامات کاربر را از تمرکز خارج نکنید. CTA ها ، پیوندهای مهم و منوها را برای تمرکز آنها برای کاربران خود تحریک کنید.
- بازخورد فوری با میکرو تحرکات میکروآمیزهای کوچک نکات بینایی کوچک است که اتفاقی افتاده است. به عنوان مثال ، یک دکمه می تواند هنگام کلیک رنگ ، رنگ را بچرخاند ، یا یک اسپینر در حالی که سیستم اطلاعات را بدست می آورد ظاهر می شود. اینها تجربه کاربر را بهبود می بخشد و به کاربران اطمینان می دهد که اقدامات آنها ثبت شده است.
نکته: فوراً در مورد هر عمل بازخورد ارائه دهید. اگر کاربر روی یک دکمه کلیک کرد ، یک واکنش بصری کوچک مانند اثر موج دار باید به تعامل کاربر پاسخ دهد.
- آن را ساده نگه دارید – در حالی که انیمیشن می تواند تجربه کاربر را افزایش دهد ، بیش از حد بار دیگر نیست ، حرکت بیش از حد می تواند بسیار زیاد و پریشان باشد. روی تعامل کلیدی مانند انتقال بین صفحات یا اثرات شناور تمرکز کنید. ظرافت کلید با طراحی حرکت است تا بتواند آن را برای شما مفید کند و مخاطبان خود را تحت الشعاع قرار ندهد.
نکته: بیش از حد بیش از حد نباشید و باعث بیماری حرکتی شوید یا کاربر را اشتباه بگیرید. فقط از آنچه لازم است استفاده کنید.
- بهینه سازی برای عملکرد در حالی که انیمیشن ها برای UX عالی هستند ، در صورت عدم استفاده بهینه ، می توانند وب سایت شما را کاهش دهند. اطمینان حاصل کنید که انیمیشن های شما برای بهینه سازی عملکرد انتقال های پیچیده ، سبک و اهرم درخواست AnimationFrame هستند.
نکته: سعی کنید از انیمیشن CSS و انتقال به جای JavaScript در صورت امکان برای سهولت در استرس عملکرد در وب سایت خود استفاده کنید.
نتیجه گیری: طراحی حرکت کلید یک تجربه به یاد ماندنی کاربر است
طراحی حرکتی یک محو نیست. این یک اصل برجسته طراحی کاربر محور است که می تواند در صورت استفاده صحیح ، وب سایت را از خوب به عالی برساند. این یک صفحه فرود ، یک ویژگی محصول تعاملی یا یک وبلاگ ساده است ، استفاده از اصول انیمیشن در سایت شما باعث می شود احساس پویاتر و جذاب تر شود.
بنابراین ، چگونه از طراحی حرکت در وب سایت خود استفاده می کنید؟ در نظرات زیر به من اطلاع دهید ، و در صورت تمایل به اشتراک گذاری وب سایت هایی که ذهن شما را با تکنیک های انیمیشن خود منفجر می کنند ، به اشتراک بگذارید!
این نکات و اصول را برای ایجاد تجربه کاربر اعمال کنید که نه تنها کاربردی بلکه لذت بخش است. به یاد داشته باشید ، نکته اصلی همه چیز در مورد ظرافت و زمان بندی است: انیمیشن های خود را کامل کنید و کاربران تفاوت را احساس می کنند.
