تم تاریک
فیلد Field
کامپوننت Field به عنوان یک کانتینر استاندارد برای مدیریت و نمایش انواع ورودیها (Inputs) به کار میرود. این کامپوننت با یکپارچه کردن برچسب، بدنه ورودی و پیامهای وضعیت، به طراحان اجازه میدهد فرمهایی منظم، قابل فهم و با حداقل خطای کاربری طراحی کنند.
نمونه زنده
آناتومی
- برچسب (Label): نام یا توضیح مختصری که نوع داده درخواستی را مشخص میکند.
- بخش ورودی (Swap me): هسته اصلی فیلد که بسته به نیاز میتواند با کامپوننتهای مختلف جایگزین شود.
- پیام وضعیت (Status Message): ارایه بازخورد، راهنمایی یا هشدارهای سیستمی به کاربر.
انواع ورودی در فیلد
بخش مرکزی فیلد (Swap me) منعطف است و میتواند میزبان کامپوننتهای زیر باشد:
| نوع ورودی | کاربرد |
|---|---|
| Text Input | برای دریافت متون کوتاه و ساده. |
| Text Area | برای ورود متنی چند خطی و طولانی. |
| Dropdown | برای انتخاب یک یا چند گزینه از لیست. |
| Slider | برای انتخاب یک مقدار از محدودهای مشخص. |
وضعیتها
پیامهای وضعیت (Status Message) بر اساس شرایط تعامل کاربر به دو دسته تقسیم میشوند:
- اطلاعات (Info): جهت ارایه راهنمایی یا توضیحات تکمیلی برای پر کردن صحیح فیلد.
- هشدار (Warning/Error): برای آگاهسازی کاربر از نواقص ورودی یا خطاهای سیستمی و کمک به رفع آنها.
سلسلهمراتب
برای استفاده صحیح از کامپوننت Field، رعایت این اولویتها الزامی است:
- تعیین برچسب: همیشه با یک Label واضح شروع کنید.
- انتخاب ورودی متناسب: بر اساس ماهیت داده، ورودی (Input/Slider/Dropdown) را انتخاب کنید.
- پیکربندی وضعیت: پیامهای راهنما یا خطا را برای پوشش سناریوهای مختلف تنظیم کنید.
نوشتار
برچسب
- باید واضح، مستقیم و کوتاه باشد تا کاربر در نگاه اول ماهیت فیلد را درک کند.
پیام وضعیت
- وضوح: خطاها را به صورت مختصر توضیح داده و راه حل رفع آن را ارایه دهید (مثال: «لطفاً یک آدرس ایمیل معتبر وارد کنید»).
- ایجاز: متن پیام نباید از ۲ خط تجاوز کند. کاربران باید بتوانند در یک نگاه (Scan) محتوا را درک کنند.
- اجتناب از پیچیدگی: از به کار بردن اصطلاحات فنی یا دستورالعملهای پیچیده که باعث سردرگمی کاربر میشود، خودداری کنید.
نکات تکمیلی
- تیک زدن یا پر کردن فیلد باید همیشه معنای ایجابی داشته باشد.
- از نشانههای نگارشی (مانند نقطه) در انتهای برچسبها استفاده نکنید.