منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۶ شهریور ۱۴۰۵ · زمان مطالعه: حدود ۱۲ دقیقه

طراحی حرکت (Motion Design) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

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

تعریف

طراحی حرکت، به‌کارگیری هدفمند تغییرِ تصویر در طول زمان است تا رابط برای کاربر روشن‌تر و درگیرکننده‌تر شود.

موضوعش جلوه‌های بصری پویاست: چیزی که جابه‌جا می‌شود، بزرگ و کوچک می‌شود، یا محو و پدیدار می‌شود.

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

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

پس معیار ساده است: هر جابه‌جایی باید نقشی معنادار و سازنده در رابط داشته باشد. حرکتی که فقط زیباست، هزینه است.

حرکت چه کاری برای کاربر می‌کند

حرکت در رابط، هم به کارکرد کمک می‌کند و هم به جذابیت. طراح‌ها با آن تغییرها را برجسته می‌کنند، کاربر را در یک کار همراهی می‌کنند، بازخورد می‌دهند، و به طرح پرداخت نهایی می‌دهند.

یک: راهنمای چشم. حرکت توجه را جذب می‌کند و نشانهٔ بصری می‌سازد. تعامل شهودی‌تر می‌شود و مسیر ناوبری پیداتر.

دو: پیوستگی میان حالت‌ها. گذارِ نرم بین دو حالت یا دو صفحه، بار شناختی را پایین می‌آورد و جلوی سردرگمی کاربر را می‌گیرد.

سه: اطمینان‌بخشی. وقتی حرکت به کنش کاربر پاسخ می‌دهد، کاربر مطمئن می‌شود که سیستم زنده است و ورودی‌اش دیده شده.

چهار: شخصیت. حرکت به محصول احساس و شخصیت تزریق می‌کند. تجربهٔ به‌یادماندنی می‌سازد و یک برند را از رقیبش جدا می‌کند.

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

هفت جای درست برای حرکت

• - ۱. بهتر کردن تجربه: گذار نرم میان صفحه‌های یک اپ، حس ناوبری را روان‌تر می‌کند.
• - ۲. هدایت رفتار: حرکت به‌عنوان نشانهٔ بصری، کاربر را به سمت کنشی که باید انجام دهد می‌برد.
• - ۳. دادن بازخورد: انیمیشن بارگذاری یعنی سیستم در حال پردازش درخواست است.
• - ۴. کم‌کردن بار شناختی: محو تدریجی عنصرها می‌فهماند که کاری تمام شده است.
• - ۵. ساختن پیوند احساسی: یک حرکت بازیگوش پس از پایان کار، حس دستاورد می‌سازد.
• - ۶. توضیح فرایند پیچیده: یک نمودار متحرک، یک روند چندمرحله‌ای را ساده می‌کند.
• - ۷. تقویت هویت برند: سبک ثابت حرکت در سراسر محصول، پیام برند را تکرار می‌کند.

هر هفت مورد یک چیز مشترک دارند. در همه‌شان حرکت پاسخ یک پرسش کاربر است، نه تزئین یک صفحه.

شش قاعدهٔ به‌کارگیری

• - هدف و ربط: هر حرکت باید هدفی روشن داشته باشد؛ روایت را پیش ببرد، تعامل را شفاف کند، یا کاربر را راه ببرد.
• - سادگی: حرکت پیچیده کاربر را گیج و رابط را کند می‌کند. هدف، جابه‌جایی نرم و قابل فهم است.
• - کارایی: حرکت نباید سرعت محصول را قربانی کند، به‌ویژه روی موبایلی که منابع محدودی دارد.
• - یکدستی: سبک و زمان‌بندی حرکت‌ها در سراسر محصول یکسان بماند تا انتظار کاربر ثابت شود.
• - بازخورد: ظاهر دکمه پس از فشرده‌شدن عوض شود تا کاربر بازخورد فوری بگیرد.
• - دسترس‌پذیری: کاربرِ حساس به حرکت و کاربرِ فناوری کمکی باید بتوانند حرکت را کم یا خاموش کنند.

قاعدهٔ آخر معمولاً آخر هم اجرا می‌شود، و همین مشکل اصلی است. در بخش دسترس‌پذیری برمی‌گردیم سراغش.

دوازده اصل انیمیشن، ترجمه‌شده به رابط

دو انیماتور دیزنی، اولی جانستون و فرانک توماس، دوازده اصل انیمیشن را صورت‌بندی کردند و در ۱۹۸۱ در کتاب The Illusion of Life منتشرش کردند. این کتاب را «انجیل انیمیشن» می‌نامند.

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

• - ۱. له‌شدن و کش‌آمدن: توهم وزن و انعطاف می‌سازد. در رابط، عنصر را لمس‌پذیر می‌کند؛ شرطش این است که حجم شیء ثابت بماند.
• - ۲. پیش‌درآمد: بیننده را برای چیزی که قرار است رخ دهد آماده می‌کند. در رابط، همان حرکت کوچک دکمه زیر نشانگر است.
• - ۳. صحنه‌آرایی: چشم را به مهم‌ترین چیز صحنه می‌برد. در رابط، حرکت نشان می‌دهد کاربر کجا باید تمرکز کند.
• - ۴. فریم‌به‌فریم یا کلیدفریم: دو رویکرد ساخت. طراح رابط تقریباً همیشه از کلیدفریم استفاده می‌کند، مثلاً برای ساخت حالت‌های یک جزء.
• - ۵. دنباله و هم‌پوشانی: اجزای یک شیء هم‌زمان نمی‌ایستند. تصویر، عنوان و توضیح با نرخ‌های متفاوت می‌آیند و همین سلسله‌مراتب بصری را می‌سازد.
• - ۶. کند در ورود و کند در خروج: هر خودرویی آرام راه می‌افتد و آرام می‌ایستد. بدون این شتاب‌گیری، حرکت رباتیک حس می‌شود.
• - ۷. کمان: بیشتر اشیای دنیای واقعی روی کمان حرکت می‌کنند. مسیر کمانی به‌جای خط راست، حرکت را زنده می‌کند.
• - ۸. کنش ثانویه: حرکتی که کنش اصلی را تقویت می‌کند. مثلاً جشن کوچکی پس از ثبت یک فرم طولانی.
• - ۹. زمان‌بندی: سرعت حرکت خودش اطلاعات است. سرعت انیمیشن بارگذاری می‌تواند بزرگی فایل را برساند.
• - ۱۰. اغراق: به حرکت شخصیت می‌دهد و تمرکز می‌سازد. اغراق زیاد اما آزاردهنده می‌شود.
• - ۱۱. طراحی درست: دانستن اصول طراحی بصری. سایه‌ای که پرسپکتیو درستی ندارد، حس خرابی می‌دهد؛ در اسکئومورفیسم این حساسیت بیشتر هم هست.
• - ۱۲. جذابیت: فرمول ریاضی ندارد و با پژوهش و آزمون به دست می‌آید. حرکت می‌تواند شخصیت محصول را تعریف کند.

نکتهٔ مشترک این دوازده‌تا این است که هیچ‌کدام دربارهٔ سلیقه نیستند. همه دربارهٔ این‌اند که مغز آدم چه چیزی را واقعی می‌بیند.

زمان، شتاب و مسافت

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

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

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

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

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

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

دسترس‌پذیری: حرکت برای همه بی‌خطر نیست

حرکت تنها عنصر رابط است که می‌تواند کاربر را از نظر جسمی بیمار کند. پس دسترس‌پذیری اینجا یک ویژگی اختیاری نیست.

• - اختیار بدهید: کاربر باید بتواند حرکت را متوقف یا پنهان کند، به‌ویژه وقتی محتوا چشمک می‌زند.
• - حالت کاهش حرکت: سیستم‌عامل‌ها یک تنظیم «کاهش حرکت» دارند و رابط باید به آن گوش بدهد.
• - خوانایی را قربانی نکنید: حرکت نباید متن یا اطلاعات مهم را از دسترس بیرون ببرد.
• - چشمک و حرکت تند ممنوع: چشمک‌زدن برای کاربر مبتلا به صرع خطرناک است و نرخش باید محدود بماند.
• - گذار معنادار: حرکت باید فهم رابط را آسان کند، نه اینکه سر راه فهم بایستد.
• - با صفحه‌خوان بیازمایید: نقش حرکت باید برای فناوری کمکی هم قابل بیان باشد.

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

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

پرسش رسانه‌ای prefers-reduced-motion دقیقاً برای همین ساخته شده. کاربر یک بار در تنظیمات دستگاهش می‌گوید حرکت را کم کن، و مرورگر آن را به هر سایتی می‌گوید.

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

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

خرده‌تعامل در برابر حرکت تمام‌قد

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

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

در مقابل، حرکت تمام‌قد بزرگ‌تر و پیچیده‌تر است. گرافیک متحرک مفصل و گذارهای گستردهٔ صفحه در این دسته‌اند و هدفشان روایت، بیان هویت برند، یا ساختن یک فضای غوطه‌ور است.

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

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

اما یک استثنای جالب هم هست. حرکت می‌تواند زمانِ انتظارِ ادراک‌شده را کوتاه کند. ذهن، زمانِ پرشده را کوتاه‌تر از زمانِ خالی حس می‌کند و انیمیشن انتظار را پر می‌کند.

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

سه نشانهٔ حرکتِ بد

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

یک: کاربر حرکت را می‌بیند. اگر کسی بعد از استفاده بگوید «آن انیمیشن قشنگ بود»، احتمالاً آن انیمیشن کند بوده. حرکت درست دیده نمی‌شود، فقط کار می‌کند.

دو: حرکت بار دوم آزاردهنده می‌شود. هر حرکتی را باید در تکرار پنجاهم قضاوت کرد، نه در بار اول. چیزی که در دموی محصول جذاب است، در استفادهٔ روزمره مالیات است.

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

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

در بافت فارسی

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

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

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

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

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

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

چهار: حق خاموش‌کردن حرکت اینجا تقریباً پیاده نشده. پشتیبانی از تنظیم «کاهش حرکت» چند خط کد است و در بیشتر محصولات فارسی غایب.

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

جمع‌بندی

• - طراحی حرکت: جلوهٔ بصری پویا که تعامل را روشن‌تر و تجربه را درگیرکننده‌تر می‌کند
• - کار اصلی: هدایت کاربر · روشن‌کردن نسبت عنصرها · دادن بازخورد · زنده‌کردن محصول
• - شرط: هدفمند · عامدانه · ظریف · پاسخگو · آزموده‌شده با کاربر
• - هفت جای درست: بهبود تجربه · هدایت رفتار · بازخورد · کاهش بار شناختی · پیوند احساسی · توضیح فرایند پیچیده · هویت برند
• - شش قاعده: هدف · سادگی · کارایی · یکدستی · بازخورد · دسترس‌پذیری
• - دوازده اصل دیزنی از جانستون و توماس، از له‌شدن و کش‌آمدن تا جذابیت، به رابط ترجمه‌پذیرند
• - زمان: زیر صد میلی‌ثانیه دیده نمی‌شود · بالای پانصد کند حس می‌شود · مدت به مسافت بستگی دارد · خروج سریع‌تر از ورود
• - دسترس‌پذیری: اختیار توقف · حالت کاهش حرکت · خوانایی · ممنوعیت چشمک · گذار معنادار · آزمون با صفحه‌خوان
• - اختلال دهلیزی واقعی است: هیچ اطلاعاتی نباید فقط در حرکت باشد و کاهش حرکت یعنی حذف جابه‌جایی نه حذف بازخورد
• - خرده‌تعامل کوچک و پاسخگوست؛ حرکت تمام‌قد روایت می‌کند و هزینهٔ کارایی دارد
• - حرکت زمان انتظار ادراک‌شده را کوتاه می‌کند، به شرطی که به زمان واقعی اضافه نکند
• - سه نشانهٔ حرکت بد: کاربر می‌بیندش · بار پنجاهم آزار می‌دهد · تأخیر واقعی را پنهان می‌کند
• - در فارسی: جهت هم‌سو با خواندن · انیمیشن چیدمان با بلندترین متن · گوشی میان‌رده مرجع · حق خاموش‌کردن حرکت