رابط کاربری و کارتون های والت دیزنی

موشن دیزاین در طراحی رابط کاربری
موشن دیزاین در طراحی رابط کاربری

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

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

https://t.me/Dexign

و مثال هایی در مقاله ی منتشر شده وجود داشت که قابل تقدیر هستند.

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

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

پس گشتم به دنبال سوالی که در سرم شکل گرفته بود.

چرا که در واقع انیمیشن ها و میکرو اینترکشن ها برای کاربرهای نهایی شما هستند و این نیاز وجود دارد که بدانیم کی و کجا از حد خود خارج میشویم و افتضاح به بار می آوریم؟

نکته: انیمیشن مثل فحش دادن است کافیست در آن زیاده روی کنید دیگر اثری نخواهد داشت.

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

بسیاری از موشن دیزاینر ها از استفاده کردن از این انیمیشن ها برای اپلیکیشن ها تنها برای پر کردن پورتفولیو خود استفاده میکنند و این سودی به جز اینکه بخواهند امیدوار باشند توسط پیکسار جذب شوند برای اونها نخواهد داشت.

ضرر آن این است که بقیه دیزاینر ها(من و شما ) برای پیدا کردن روش موشن دیزاین و میکرو اینترکشن به سایت هایی مثل دریبل و بیهانس سر میزنند و الگو برداری میکنند و نتیجه فاجعه بار است.

چند نکته که به شما کمک میکند خط قرمز ها را خوب بشناسید:

  1. دقیقا مطمئن شوید که انیمیشنی که به کار میبرید کاری به نفع کاربر انجام میدهد و این یک نیاز ضروریست.
  2. مدت زمان انیمیشن ها را زیر 30 ms نگهدارید و از آن عبور نکنید.
  3. از هیچ انیمیشن خطی استفاده نکنید . استفاده از انیمیشن خطی باعث میشود کار شما مکانیکی و بی حس به نظر میرسه.
  4. ۹۹ درصد انیمیشن ها نیاز دارند که از “Ease-In” و “Ease-Out” استفاده کنند.
  5. خیلی خیلی خیلی به ندرت پیش میاد که شما نیاز به طراحی انیمیشنی با استفاده SpringوBounce داشته باشید.(جهشی و فنری)

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


منابع استفاده شده :

https://medium.com/developers-writing/the-unsolicited-ux-audit-ep-1-105de8bb2c09
https://startupsventurecapital.com/your-ui-isn-t-a-disney-movie-703f7fbd24d2