ارتقا ux با استفاده از انیمیشن در اندروید

ارتقا ux با استفاده از انیمیشن در اندرویدReviewed by مهرخ on Dec 5Rating: 5.0ارتقا ux با استفاده از انیمیشنهدف اصلی انیمیشن ها سرگرم کردن کاربران نیست از انیمیشن ها برای استفاده ی بهتر از برنامه و دادن اطلاعات به کاربران استفاده می شود. انیمیشن ها در سطح ها و موقعیت های مختلف به کار برده می شوند تا همزمان عملکرد و زیبایی برنامه ارتقا پیدا کند. انیمیشن برکارکرد کاربران ، نوع ارتباط آنها با برنامه اثر می گذارد توجهشان را جلب می کند و به آنها کمک می کند که چگونه از برنامه استفاده کنند.

ارتقا ux با استفاده از انیمیشن

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

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

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

animation1

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

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

ادریان زوبرونین Adrian Zumberunnin یک نمونه کار خوب از scrolling animation دارد که کاربر با زدن بر روی لینک میتواند چگونگی فرایند کار را بفهمد. اول به نمونه ی استاتیک دقت کنید:

hard-cutss

و حالا با نمونه ی انیمیشنی مقایسه اش کنید:

state-design

همانطور که می بینید transition دوم به کاربر کمک می کند که مراحل مختلف برنامه و روند کاری interface را درک کند.و همچنین بفهمد که مرحله ی بعدی کار چگونه است.

باید رابطه ی بین اجزای برنامه را توضیح دهید.

انیمیشن ها حس حضور مستقیم در برنامه را به کاربر منتقل می کند. برای مثال فکر کنید که یک menu icon با transition به playback control برود و دوباره برگردد. این effect دکمه ی function را به کاربر نشان می دهد.همچنین تبدیل play icon به pause به کاربر نشان می دهد که دو تا از عملکردها با هم مرتبط هستند و در صورت نبودن یکی از انها دیگری هم وجود ندارد.

animation-element

مثال دوم: وقتی دکمه ی floating action  زده می شود علامت به علاوه تبدیل به مداد می شود. این نشان می دهد که علامت مداد متد اولیه است. همین تغییر کوچک به کاربر نشان می دهد که در مرحله بعدی چه اتفاقی می افتد و عملکرد هر حالت را مشخص می کند.

animation-element2

از feedback برای نشان دادن خطاها استفاده کنید.

برای مثال استفاده از انیمیشن به بهبود فرم های ثبت نام بسیار کمک می کند. اگر اطلاعات درست وارد شود با یک انیمیشن ساده “nod” می توانیم تکمیل فرایند را نشان دهیم و اگر اطلاعات نادرست باشد میتوانیم از یک حرکت افقی (horizontal shake) برای نشان دادن خطا استفاده کنیم. با دیدن این انیمیشن ها بلافاصله کاربر متوجه می شود که چه اتفاقی افتاده است.

entryاز feedback برای نشان دادن کارهای تمام شده استفاده کنید.

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

payment

نتیجه گیری

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

ترجمه کاری از سایت لرن اس تی یو، مهرخ اکبری

پاسخ دهید