جسچرها و انیمیشن ها: ستون های طراحی موبایل (بخش دوم) صفحه اصلی //

جسچرها و انیمیشن ها: ستون های طراحی موبایل (بخش دوم)

جسچرها و انیمیشن ها: ستون های طراحی موبایل (بخش دوم)

در ادامه ی بخش اول مقاله جسچرها و انیمیشن ها: ستون های طراحی موبایل ، با هم به بحث انیمیشن ها در طراحی موبایل می پردازیم…

 

انیمیشن : تحقق یک خیال

یکی از دلایل اصلی اینکه کنترل های حرکت (جسچر) برای ما خیلی طبیعی و محسوس جلوه می کنند اینه که اونها تداعی کننده تعامل با یک شی واقعی هستن. برای دور انداختن یک آیتم، ما اون رو انتخاب کرده، روی سطل زباله کشیده و سپس رها می کنیم. همونطور که در الگوهای رابط کاربری وب ۲۰۱۴ بحث شده، چنین تعاملی خیلی راضی کننده تر از یک حرکت کشیدن و رها کردن رایج هست. اما به منظور ساخت مجدد این احساسات زندگی-مانند بصورت دیجیتالی، انیمیشنی که خوب اجرا شده باشه چیزی کمتر از ضرورت نیست.

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

 

الگوهای-طراحی-موبایل-در-اپلیکیشن-های-برجستهمنبع: Capptivate

شبیه سازی دیجیتالی واکنش های واقع گرایانه ساده نیست، اما وقتی به درستی انجام بشه برای این تلاش یک پاداش خوب محسوب میشه. راشل هینمن محقق UX موبایل در اینتل، یک لیست از ۱۲ اصل پایه ای برای انیمیشن ترجمه کرده، برگرفته از کتاب The Illusion of Life: Disney Animation (1981)، اما مطابق با طراحی موبایل.

  1. فشردن و کشیدن: از حجم و سختی شی مطلع باشید، که به وسیله چگونگی فشردن یا کشیدن اون حین انتقال به نمایش در میاد. شی شما مثل یک قطعه ثابت حرکت میکنه یا منعطف نشون داده میشه؟
  2. پیش بینی: مشخصا پیشبینی اقدام بعدی میتونه به کاهش بخشی از سردرگمی کاربر کمک کنه، به همون اندازه ی ایجاد یک UX جذاب تر.
  3. نمایش: ارائه درست محتوای شما به حفظ کاربر ها کمک میکنه به این صورت که اونها در تعامل با اپلیکیشن/سایت احساس راحتی بیشتری میکنند.
  4. سرراست و حالت به حالت: از انیمیشن سرراست و راحت برای ضبط حرکات پویا و پیچیده و از انیمیشن حالت به حالت برای پوشش سایر حرکات قابل پیشبینی استفاده کنید.
  5. حرکت پیش رونده و متداخل: اکثر حرکت ها بصورت مستمر راکد نمیمونن، به تفاوت میان ناحیه های مختلف توجه داشته باشید، برای مثال، یک مرد در حال راه رفتن دست هاش رو بصورتی متفاوت از حرکت پاهاش تکون میده.
  6. ورود و خروج آهسته: افزودن فریم های بیشتر به ابتدا و انتها، گفتار، پیمایش از طریق یک منو، این تصور رو ایجاد میکنه که اپلیکیشن/سایت مانند هر شی دیگه ای در دنیای واقعی از قوانین سکون پیروی میکنه.
  7. کمان ها: حرکت در امتداد یک کمان ارگانیک تر به نظر میرسه در حالی که حرکت در راستای خطوط مستقیم مکانیکی به نظر میاد.
  8. حرکت ثانویه: در عالم واقع، حرکات عواقب چند گانه دارن؛ یک مثال خوب از حرکت ثانویه در یک اپلیکیشن موبایل/سایت میتونه این باشه: وقتی کاربر یک پنجره جدید باز میکنه، پنجره قبلی با انیمیشن بسته بشه.
  9. زمانبندی: قانون واحدی برای زمانبندی وجود نداره، همون طور که سرعت های مختلف صدا های مختلفی میرسونه. سریع ممکنه برای اپلیکیشن/سایت های سبک یا سرگرم کننده بهتر کار کنه، در حالی که آهسته میتونه برای اغلب اپلیکیشن/سایت های ساختاربندی شده و پیچیده بهتر باشه.
  10. اغراق: از بزرگنمایی نترسید، اینکه از واقعیت پیروی می کنید به این معنی نباشه که در زمانی مناسب قانون شکنی نکنید.
  11. ساده کشیدن: از فضای سه بعدی، وزن و صدا به همون نسبت اشیا در جهان واقع استفاده کنید.
  12. درخواست: به عنوان یه اصل تئوری تر، به اپلیکیشن/سایت مقداری جنبه اختصاصی و کاریزما بدید، یک ارتباط شخصی میتونه گام بلندی در بهبود تجربه کاربری باشه.

برای مطالعه بیشتر پیرامون الگو های طراحی رابط موبایل، و میزان تاثیر جسچرها و انیمیشن ها در طراحی موفق موبایل، یک نسخه رایگان از الگوهای طراحی UI موبایل ۲۰۱۴ از UXPin دانلود کنید. در این کتاب، راهنمایی هایی در مورد ورودی های مختلف رابط ها، انواع نویگیشن، سیستم های مدیریت محتوا و داده، و تجمیع شبکه های اجتماعی در داخل طراحی موبایل شما وجود داره.

توسط محمد هادی شجاری

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


نظر ارسال کنید

آدرس ایمیل شما منتشر نمی شود


ارسال نظر