نوشته شده در دیدگاه‌تان را بنویسید

استفاده از میکرو انیمیشن در طراحی

microAnimation

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

میکرو انیمیشن ها کوچک هستند، ترجیحا انیمیشن های عملکردی هستند که کاربر را با ارائه بازخورد بصری و نمایش تغییرات به روشنی پشتیبانی می کنند. با استفاده از میکرو انیمیشن ها، بدون استفاده از یک کلمه می توان توضیح زیادی ارایه داد.

رابط های بصری

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

تغییر و متن را مشخص کنید

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

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

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

شما می توانید آن را حتی بیشتر تغییر دهید. به عنوان مثال، با یک دکمه “کامنت”، آن را به فرم تبدیل می کنید. محتوا توسط وامنشو گسترش می یابد.

شما همچنین می توانید پیشرفت های انیمیشن را به خوبی نشان دهید و به سوالات پاسخ دهید مانند: “آیا روی آن کلیک کردم؟” یا “آیا آپلود من در حال اجرا است؟” با نوار پیشرفت استاتیک، می توانید پیشرفت را نیز نشان دهید. اما یک نسخه متحرک می تواند کاربر را با تأکید بر پیشرفت، پاداش دهد. این به خصوص درفرم ها مطلوب است.

سلسله مراتب و تمرکز

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

اما مراقب باشید، با استفاده بیش از حد از انیمیشن ها تنها سلسله مراتب را از بین می برید و پیامتان را مخدوش می کنید.

همانطور که سوفی پاکتون آن را به درستی در پست خود قرار می دهد، این که رابط کاربری شما یک فیلم دیزنی نیست:

“شما هر جمله ای از یک سند را به یک عنوان نمی دهید. همین اصل در انیمیشن نیز صدق کی کند. هر عنصر متحرک در UI خود را به عنوان معادل عنوان در یک سند نوشته شده در نظر بگیرید. این باید برای نشان دادن اهمیت یک عنصر استفاده شود. “

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

یا هنگامی که یک کاربر بخشی را مب بندد، می توانید از انیمیشن برای مشخص کردن اینکه کدام بخش را می توان بازیابی کرد، استفاده کنید.

یک گزینه را به اشتراک بگذارید. قبل از اینکه بخواهید به اشتراک گذاری مقاله فکر کنید، ممکن است فکر نکنید که آیا شما آن را در توییتر، فیس بوک یا LinkedIn می خواهید به اشتراک بگذارید. اما هنگامی که دکمه «اشتراک گذاری» را کلیک کنید یا آن را بکشید، این انتخاب ها نمایان می شود.

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

دستکاری مستقیم

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

لمس

دستگاه های لمسی دارای حالت های هاور نیستند. اما این تکنیک هنوز هم مفید است برای استفاده از انیمیشن ها در دستگاه های لمسی. شما می توانید بازخوردی را درباره اقداماتی که به پایان رسیده اند، ارائه دهید.

هنگامی که آن را ضربه بزنید، یک انگشت را پوشش دهید. این ممکن است برای طراحی شما مفید باشد برای بازخورد در لحظه لمس.

پاداش

برای پاداش یک کاربر می توانید از انیمیشن های کوچک نیز استفاده کنید. برای مثال، با نشان دادن یک انیمیشن کوچک زمانی که یک کاربر یک فرم را تکمیل می کند. یک کارتون ایجاد نکنید، اما از یک میکرو انیمیشن کوچک مانند مثال زیر استفاده کنید:

تجربه برند

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

نتیجه

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

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

از میکرو انیمیشن ها کجا استفاده می کنید؟ به ما اطلاع دهید!

مقاله نمونه های زیبای طراحی فلت را از اینجا بخوانید.

منبع

آخرین پست ها:

flat-design-colors

طراحی فلت و رنگ ها

در طراحی فلت و رنگ ها، طراح با طیف وسیعی از رنگ های مختلف کار می کند، اما اغلب طراحان آن رنگ هایی را انتخاب می کنند که جسورانه و روشن باشند…
ادامه خواندن
پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *