رابط کاربری اپلیکیشن های محبوب خود را انیمیشنی کنید

انیمیشن ها توانایی بیشتری در انتقال اطلاعات دارند. انیمیشن ها به دلیل ویژگی‌های بصری که دارند می‌توانند بک رابط کاربری خوب برای اپلیکیشن ها محسوب شوند. برای مثال می‌توانید رابط کاربری یک اپلیکیشن را طوری طراحی کنید که کاری که آن اپ انجام می‌دهد را با تصویر انتقال دهند.

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

برخی از دلایلی که برای انیمیشنی کردن رابط کاربری می‌توان به آنها اشاره کرد عبارتند از:

درگیر کردن کاربر : انیمیشن ها با دادن یک دیدگاه از محتوای اپلیکیشن ، می‌توانند ذهن مخاطب را درگیر خود کرده و او را برای دریافت و نصب ترغیب کنند. جی‌میل یک مثال خوب در این زمینه است که برای بازخوانی (refresh) شدن و بارگذاری ایمیل های جدید از انیمیشن استفاده می‌کند.

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

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

در این مبحث قصد داریم نحوه اجرای برخی از این انیمیشن‌ها را به منظور بهبود بخشیدن به رابط کاربری اپلیکیشن ها ، با شما در میان بگذاریم. باپلازا همراه باشید.

اسلایدر معرفی (Introduction Slider)

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

نتیجه کار باید به این صورت باشد:

این کد XML را در فایلی به نام slide.xml وارد کنید:

این کد را هم به فایل slide2.xml اضافه کنید:

این کد را به slide3.xml اضافه کنید:

برای ساخت صفحه خوش آمد گویی ، کدهای زیر را در فایلی به نام activity_welcome.xml وارد کنید:

این فایل xml برای swipe کردن و دکمه ها و رفتن به صفحه قبل و بعد است. برای ایجاد تعاریفی مانند @string/redeem نیاز به کد زیر دارید:

همانطور که اشاره کردیم ، صفحه خوش آمد گویی فقط برای بار اول که برنامه اجرا می‌شود باید نمایش داده شود. برای این منظور باید یک کلاس PrefManager.java ایجاد کرده و نام آن را setFirstTimeLaunch (true) بگذارید.

در نهایت کدهای زیر را به WelcomeActivity.java اضافه کنید:

کدهای WelcomeActivity را به manifest file اضافه کنید:

دکمه های انیمیشنی

دکمه ها به عنوان تنها راه برقراری ارتباط ، بخش جداناشدنی از اپلیکیشن ها هستند. ببینیم چگونه می‌توانیم این دکمه ها را طراحی کنیم. در پوشه drawable یک drawable XML با نام drawable/ripple.xml ایجاد کنید. از آن برای ساخت پس زمینه دکمه ها استفاده می کنیم.