وبلاگ - نکات و ترفندها

0
133
درک ریز تعاملات در طراحی اپلیکیشن موبایل – بخش دوم

درک ریز تعاملات در طراحی اپلیکیشن موبایل – بخش دوم

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

مثال ها

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

1. اپلیکیشنی با ایونت های متحرک

blog_22911_1

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

2. صفحه تعاملی اپلیکیشن تمرینات ورزشی

blog_22911_2

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

3. ریز تعاملات اپلیکیشن جستجو

blog_22911_3

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

4. ریز تعاملات Fitness Goal

blog_22911_4

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

5. کشیدن برای مشاهده انیمیشن بازنشانی

blog_22911_5

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

6. ریز تعاملات تب

blog_22911_6

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

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

7. انیمیشن بارگذاری

blog_22911_7

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

جمع بندی

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

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

 

منبع:

http://www.hongkiat.com

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

بسته های آموزشی جذاب!بیشتر