نکات کلیدی بهره گیری از انیمیشن ها در UX



visibility  
mode_comment   ۳

راهنمای انیمیشن در UX

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

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

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

مدت زمان و سرعت انیمیشن ها

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

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

تحقیقات متعددی ثابت کرده اند که سرعت نمایش مناسب برای اجرای انیمیشن ها در طراحی رابط کاربری باید بین 200 تا 500 میلی ثانیه باشد . این اعداد بر اساس ویژگی های خاص مغز انسان به دست آمده است. هر انیمیشنی که کمتر از 100 میلی ثانیه سرعت اجرا داشته باشد، بسیار سریع نمایش داده شده و به خوبی مشاهده نخواهد شد. در حالی که انیمیشن هایی که با مدت زمان بیشتر از 1 ثانیه اجرا گردند، احساس تاخیر را منتقل می کنند و بنابراین برای کاربر خسته کننده خواهند بود.

مدت زمان انیمیشن شما بهتر است در رابطه با طراحی شما باشد

در دستگاه های تلفن همراه، دستورالعمل طراحی متریال دیزاین نیز پیشنهاد می دهد که مدت زمان انیمیشن باید تا 200-300 میلی ثانیه محدود شود. همچنین این زمان برای تبلت ها، 30٪ بیشتر توصیه گردیده و حدودا در بازه 400-450 میلی ثانیه پیشنهاد شده است.

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

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

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

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

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

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

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

حرکت المان ها باید واضح و شارپ باشد، بنابراین از خاصیت تاری حرکت (motion blur) استفاده نکنید. این امر حتی در تلفن های همراه و تبلت های مدرن نیز استفاده نمی شود.

در المان های لیستی و فهرست وار (کادر های خبری، لیست ایمیل ها، و غیره) باید تاخیر بسیار کوتاهی مابین هر کدام از مجموعه المان ها منظور گردد. به عبارت دیگر انیمیشن هر عنصر جدید، باید 20 تا 25 میلی ثانیه توقف داشته باشد و سپس بعد از المان قبلی ظاهر گردد. در غیر این صورت می تواند دید کاربر را آزار دهد.

سبک نمایش انیمیشن ها (Easing)

سبک ها کمک می کنند تا حرکت جسم طبیعی تر دیده شود.

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

حرکت خطی (Linear)

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

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

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

منحنی شتاب (Ease-in)

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

این سبک (Ease-in) باید زمانی استفاده شود که المان ها با نهایت سرعت از صفحه خارج می شوند. این المان ها می توانند اعلان های سیستمی، نوتیفیکیشن و یا کادر های محاوره ای باشند. اما به یاد داشته باشید که این سبک فقط باید زمانی استفاده شود که المان های موجود در صفحه نمایش را بخواهیم برای همیشه از صفحه بیرون ببریم و امکان بازگردانی آنها به صورت مجدد در صفحه وجود نداشته باشد.

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

در نهایت، با تغییر مناسب منحنی ها،  المان مورد نظر را می توان به شکلی که در جهان واقعی وجود دارد نمایش داد و برنامه را واقعی تر و طبیعی تر به دید کاربران آورد.

منحنی تعلیق یا افت (Ease-Out)

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

از این سبک (Ease-Out) برای ورود المان ها به صفحه نمایش استفاده می شود، به طوری که سرعت ورود به صفحه نمایش سریع بوده و به تدریج تا زمانی که به طور کامل متوقف گردد، از سرعتش کاسته می شود. این سبک را نیز می توان به کادر های مختلف ورودی و یا المان هایی که از خارج نمایشگر به داخل آن وارد می شوند، اعمال نمود.

منحنی ساده و یا استاندارد (Ease-in-out)

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

منحنی ساده

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

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

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

کشوی ناوبری با استفاده از منحنی استاندارد از صفحه خارج و سپس ظاهر می شود

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

نمایش و ناپدید شدن منوی سمت چپ با کاهش سرعت و منحنی استاندارد مطابق است

برای تعریف منحنی، از یک تابع استفاده می شود. این تابع مکعب نامیده می شود زیرا بر اساس چهار مقدار محاسبه می شود. مقدار اول با مختصات 0:0(پایین سمت چپ)، و آخرین مقدار  با مختصات 1:1(بالا سمت راست) که در حال حاضر در نمودار مشاهده می شود.

بر این اساس، ما باید فقط دو مقدار دیگر در نمودار را تعریف کنیم، که به واسطه چهار مقدار تابع، دو مقدار اول مختصات xو y نقطه اول هستند و دو مقدار دوم مختصات xو y نقطه دوم است.

برای ساده تر کردن کار با منحنی، پیشنهاد می شود از سایت های easings.net و cubic-bezier.com استفاده کنید . سایت اول شامل لیستی از منحنی هایی است که بیشتر استفاده می شوند، پارامترهایی که شما می توانید آنها را به ابزار نمونه اولیه خود کپی کنید. سایت دوم به شما امکان می دهد با پارامترهای مختلف منحنی بازی کنید و بلافاصله ببینید که چگونه اجسام حرکت می کنند.

انواع منحنی ها و پارامتر های آنها در عملکردهای متفاوت

هنر چیدمان در انیمیشن های رابط کاربری (رقص المانها انیمیشن)

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

در حال حاضر دو نوع رقص المان ها وجود دارد: تعامل برابر و وابسته.

تعامل برابر

تعامل برابر به معنای آن است که نمایش همه المان ها به یک قاعده خاص بستگی داشته باشد.

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

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

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

نمایش انیمیشن جدولی به صورت مورب صحیح است

طراحی رابط تعاملی زیرمجموعه ها

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

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

متحرک سازی یک المان مرکزی و نسبت دهی تمامی المان های باقی مانده به آن اشتباه است، لذا کاربر نمی تواند متوجه شود که کدام المان را باید دنیال نماید

با توجه به قوانین متریال دیزاین ، هنگامی که المان های متحرک به صورت نا متناسب تغییر ابعاد دهند، باید در امتداد مسیری کمانی شکل به جای یک خط مستقیم حرکت کنند این باعث می شود که انیمیشن طبیعی تر دیده شود. منظور از تغییر ابعاد نا متناسب این است که تغییر ارتفاع و عرض جسم با افزایش و یا کاهش به صورت نامتقارن انجام شود (به عنوان مثال یک کادر مربع تبدیل به یک کادر مستطیل شود).

انیمیشن یک المان که به صورت نا متناسب تغییر ابعاد می دهد باید در امتداد خطی کمانی صورت پذیرد

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

تغییرات متناسب ابعاد با انیمیشن در راستای خط مستقیم نمایش داده می شود

حرکت در مسیر منحنی از دو طریق حاصل می شود:

  1. عمودی : المان شروع به حرکت به صورت افقی می کند و با حرکتی عمودی به پیمایش خود پایان می دهد.
  2. افقی: المان شروع به حرکت به صورت عمودی کرده و با حرکتی افقی به پیمایش خود پایان می دهد.

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

جهت باز کردن / کشیدن کارت باید با محور هماهنگ باشد

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

المان ها می توانند بر روی سایر المان ها حرکت کنند

نتیجه گیری

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

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

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

comment دیدگاه کاربران
TIK MED

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

مصطفی قدیمی

سلام وقت بخیر

ممنون از نظر خوبتون انشالله وبرایش میشه

علیرضا موذن

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

امیدوارم همواره موفق و موید باشید.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.