کامپوننتهای حمایتی (Supportive Components)
کامپوننتهای حمایتی در طراحی رابط کاربری میان تا کاربر رو راهنمایی کنن، بهش کمک کنن مسیر درست رو پیدا کنه و از سیستم بهتر استفاده کنه.
بهعبارتی، حضورشون باعث میشه کاربر سردرگم نشه، سریعتر تصمیم بگیره و تجربه بهتری از کار با سیستم داشته باشه.
این کامپوننتها معمولاً همیشه جلوی چشم نیستن؛ فقط وقتی وارد تعامل با کاربر میشن ظاهر میشن تا پیام، راهنمایی یا بازخوردی بدن.
به زبون سادهتر:
> به کاربر میگن «چیکار کن»، «چرا» و «چطوری».
حالا بریم سراغ انواع کامپوننتهای حمایتی 👇
---
🪄 Tooltip
تولتیپها همون متنهای راهنمای کوتاهی هستن که وقتی ماوس رو روی یه دکمه یا آیکن نگه میداریم، ظاهر میشن.
به ما کمک میکنن بفهمیم کار اون دکمه یا عنصر چیه.
📍 مثال: وقتی روی سطل زباله در دسکتاپ نگه میداری، یه تولتیپ کوچیک میاد که مینویسه «حذف (Delete)».
🔹 تولتیپها همیشه کوتاه، ساده و مختصر هستن.
---
🔔 Notification
نوتیفیکیشنها پیامهایی هستن که برای اطلاعرسانی به کاربر میان.
ممکنه کاربر رو از اتفاقی آگاه کنن، یا درباره وضعیت و مرحله بعدی راهنماییاش کنن.
📱 مثل وقتی که از بالای گوشی نوتیف دریافت میکنی.
📌 انواع نوتیفیکیشنها:
Badge Notification:
یه علامت کوچیک روی آیکن (مثل دایره قرمز با عدد) که نشون میده یه چیز جدید برای بررسی داری.
مثال: عدد قرمز روی آیکن اینستاگرام یعنی پیام یا نوتیف جدید داری.
Notification Banner:
نوارهایی هستن که معمولاً بالا یا پایین صفحه ظاهر میشن و بعد از چند ثانیه محو میشن.
این بنرها سه حالت دارن:
🟢 موفقیتآمیز (عمل انجام شد)
🔴 خطا یا مشکل
🟡 هشدار یا احتیاط
🔵 اطلاعرسانی ساده
---
🏷️ Status Badge
نشان وضعیت به ما میگه الان وضعیت کاربر یا سیستم چیه.
📍 مثال: در تلگرام وقتی کسی آنلاینه، یه دایره سبز کنار پروفایلش میاد.
رنگها معنی خاصی دارن:
🟩 سبز = آنلاین
🟨 زرد = در حال انتظار یا پردازش
🟥 قرمز = خطا یا آفلاین
⬜️ خاکستری = غیرفعال
---
🍞 Toast Bar
تستبارها اعلانهای کوچیکی هستن که سریع میان و سریع میرن.
فقط یه پیام نشون میدن و نیازی به پاسخ کاربر ندارن.
📍 معمولاً پایین یا گوشه صفحه نمایش داده میشن.
مثالها:
فایل با موفقیت ذخیره شد ✅
اینترنت شما ضعیف است ⚠️
ارسال پیام با خطا مواجه شد ❌
نسخه جدید در دسترس است 🔄
---
🍪 Snack Bar
اسنکبارها هم مثل تستبار هستن، اما یه تفاوت مهم دارن:
در کنار پیام، یه دکمه اکشن (عمل) هم دارن.
📍 مثالها:
وقتی یه چت رو حذف میکنی، پایین صفحه پیامی میاد:
«چت حذف شد» + دکمه «لغو»
یا وقتی پست آپلود نشد:
«آپلود ناموفق» + دکمه «تلاش مجدد»
🔹 فرق تستبار و اسنکبار:
تستبار فقط پیام نشون میده
اسنکبار پیام + دکمه عمل داره
تستبار مدت کوتاهتری میمونه، اسنکبار کمی بیشتر
---
🔄 Loader
لودرها به کاربر نشون میدن که سیستم در حال انجام کاره، نه اینکه هنگ کرده.
این کامپوننتها صبر رو توجیه میکنن! 😄
📍 مثالها:
در حال بارگذاری...
در حال ارسال پیام...
دانلود در حال انجام است...
میتونن به شکل دایره، نوار پیشرفت یا انیمیشنهای کوچک باشن.
---
💬 Divider (جداکننده)
جداکنندهها یا Dividerها به چشم ممکنه ساده بیان، ولی نقش مهمی دارن.
برای مرتبسازی بصری محتوا استفاده میشن تا کاربر راحتتر اطلاعات رو از هم تفکیک کنه.
📍 مثال: خط باریکی که در منوی تنظیمات بین گزینهها میاد.
---
🧩 Chip (چیپها)
چیپها المانهای کوچیکی هستن که اطلاعات فشرده، برچسبها یا انتخابها رو نمایش میدن.
کارشون اینه که کاربر سریع بفهمه چه گزینههایی انتخاب یا فعال هستن.
📍 مثالها:
برچسبهای فیلتر در اپلیکیشن فروشگاهی (مثلاً: "زنانه" 🟣 "ارزانترین" 🟢)
نام کاربرانی که در گفتوگو تگ شدن
دستهبندیها در جستوجو
چیپها ممکنه قابل حذف (با آیکن ×) یا قابل انتخاب باشن.
---
🕸️ Network States (وضعیتهای شبکه)
این مورد هم جزو کامپوننتهای حمایتیه چون به کاربر اطلاع میده اتصال شبکه چه وضعیتی داره.
📍 مثالها:
«اتصال اینترنت برقرار نیست»
«در حال اتصال مجدد...»
«اتصال برقرار شد»
این پیامها معمولاً با رنگ یا آیکن خاصی نشون داده میشن تا کاربر سریع وضعیت رو درک کنه.
---
🌟 جمعبندی
کامپوننتهای حمایتی مثل دوستایی هستن که وقتی گیج شدی، میان کمکت کنن مسیرت رو پیدا کنی.
بهت میگن الان چی داری، چی کار کردی، و بعدش باید چی کار کنی.
و همین تعاملهای کوچیک باعث میشن تجربه کاربری نرم، طبیعی و لذتبخش بشه 💫
