ویرگول
ورودثبت نام
Amirdh.Uix
Amirdh.Uixمن امیرم. توی دنیای هنر غرقم؛ کارم طراحی محصول و در زمینه UI/UX فعالیت حرفه ای انجام میدم. تجربه های ساده تر و جذاب میسازم.
Amirdh.Uix
Amirdh.Uix
خواندن ۳ دقیقه·۱ ماه پیش

کامپوننت های حمایتگر UIUX

کامپوننت های حمایتگر:

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


Tooltip:

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

مثال: وقتی روی آیکون دوربین در یک سایت می‌مونیم ظاهر میشه و بهمون میگه که این آیکون برای عکس گرفتن یا برای آپلود کردن عکس است.

نکته ریز: اگه برای همه چیز میخوای تول تیپ بزاری یعنی طراحیت مشکل داره.


Loader :

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

مثال: وقتی می‌خوایم صفحه رو مجدد بارگذاری کنیم یا به اصطلاح Refresh کنیم یک آیکون دایره‌ای در حال چرخش ظاهر می‌شه و توجه ما رو به خودش جلب میکنه.


پیام اعتبار سنجی ( Validation messages ) :

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

مثال: وقتی می‌خوایم یک رمز عبور انتخاب کنیم گاهی اوقات با پیام [ رمز عبور باید حداقل ۸ کاراکتر داشته باشد ] مواجه میشیم.


اعلان ها ( Notifications ) :

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

بیاید در قالب مثال چندین اعلان مختلف رو بررسی کنیم:

+ اعلان نشان که کنار یک برنامه به شکل نقطه یا عدد به نمایش در میاد و به کاربر خبر میده که پیام خوانده نشده یا کار نیمه تمام داره.

+ نشان وضعیت که با توجه به اسمش وضعیت فرایند یا یک آیتم خاص رو نشون میده مثل زمانی که در فضای مجازی آنلاین هستیم و این آنلاین بودن با یک رنگ سبز یا متن نشون داده می‌شود.

+ اعلان هشدار که می‌تونه شامل ۴ وضعیت اطلاعات، موفقیت، اخطار و خطا باشد.

۱- اعلان اطلاعات برای اطلاع رسانی مختصر و آموزنده به کاربر .

۲- اعلان اخطار برای پیشگیری قبل از اینکه کاربر دچار مشکل اصلی شود.

۳- اعلان خطا برای بیان یک خطا یا موقعیت اضطراری که نیاز به اقدام فوری کاربر دارد.

۴- اعلان موفقیت برای منتقل کردن یک خبر خوب مانند تایید ارسال پیام به کاربر.

Toast / Snackbar :

دو کامپوننت حمایتی جذاب که خیلی به هم شبیه هستند؛ این کامپوننت‌ها پیام‌های کوتاهی هستند که در بالا یا پایین صفحه ظاهر میشن اما در جایگاه و تاثیری گذاری متفاوت هستند.

اسنک بار :

- پیام کوتاه که معمولا پایین صفحه ظاهر میشود.

- یک دکمه دارد.

- برای اطلاع رسانی و بازخورد لحظه ای کاربر ظاهر میشود.

مثال: سفارش شما ارسال شد. [ مشاهده ]

تُست :

- پیام کوتاه که معمولا در پایین صفحه ظاهر میشود.

- بدون دکمه است.

- طرفا برای اطلاع رسانی به کاربر ظاهر میشود.

مثال: فایل ذخیره شد.

کلام آخر :

در نهایت خیلی ساده باید بیان کنیم که کامپوننت‌های حمایتی واقعاً حمایتگر هستند؛ گستردگی زیادی دارند و در زمان استفاده از رابط‌های کاربری بارها باهاشون در تعامل هستیم و هدایتگر ما هستند بدون اینکه متوجهشون بشیم. یادگیری و استفاده از این کامپوننت‌ها باعث نرمی و روان‌تر شدن تجربه کاربر می‌شود؛ چیزی که همه ما به دنبالش هستیم.

رابط کاربریطراحی رابط کاربریuiux
۷
۰
Amirdh.Uix
Amirdh.Uix
من امیرم. توی دنیای هنر غرقم؛ کارم طراحی محصول و در زمینه UI/UX فعالیت حرفه ای انجام میدم. تجربه های ساده تر و جذاب میسازم.
شاید از این پست‌ها خوشتان بیاید