تم تاریک
دکمه رادیویی Radio Button
رادیو باتنها عناصر قابل انتخابی هستند که برای انتخاب یک گزینه از میان چند گزینه مرتبط استفاده میشوند. هر گزینه شامل یک دایره کوچک به همراه یک برچسب متنی است و انتخاب آن باید به صورت شفاف نشان دهد کدام مقدار یا حالت فعال شده است.
از رادیو باتنها برای ارایه مجموعهای از گزینههای متقابل استفاده میشود. در هر گروه، کاربر فقط میتواند یک گزینه را انتخاب کند و با انتخاب گزینه جدید، انتخاب قبلی به صورت خودکار لغو میشود.
نمونه زنده
انواع
| وضعیت | توضیح |
|---|---|
Checked | زمانی که یک گزینه توسط کاربر انتخاب شده و به عنوان مقدار فعال در گروه در نظر گرفته میشود. |
Unchecked | زمانی که گزینه انتخاب نشده است یا با انتخاب گزینه دیگر از حالت فعال خارج شده است. |
آناتومی
- برچسب گروه: (اختیاری) گروه گزینهها را توصیف میکند یا راهنمایی برای انجام یک انتخاب ارایه میدهد.
- ورودی دکمه رادیویی: یک دکمه رادیویی که وضعیت مناسب را نشان میدهد. به طور پیش فرض یک گزینه انتخاب میشود.
- برچسب دکمه رادیویی: اطلاعاتی را که میخواهید انتخاب یا انتخاب نکنید توصیف میکند.
ساختار
کامپوننت دکمه رادیویی از مجموعهای از دایرههای قابل انتخاب، همراه با برچسب متنی هر گزینه تشکیل شده است. برچسب هر گزینه در کنار دکمه رادیویی قرار میگیرد و در صورت وجود یک گروه از گزینهها، میتوان برای کل مجموعه یک برچسب گروه نیز در نظر گرفت.
| موضوع | مقدار |
|---|---|
| ابعاد کلی عرض و ارتفاع | 20px |
| سایز آیکون داخلی | 12px |
| فاصله بین ورودی و برچسب | 4px |
| پدینگ داخلی | 2px |
| شعاع گوشه | 6px |
| ضخامت استروک در حالت انتخابنشده | 1px |
| ارتفاع خط برچسب دکمه رادیویی | 20px |
چیدمان
همترازی
لیبل هر گزینه در دکمه رادیویی در کنار ورودی آن قرار میگیرد تا ارتباط بین انتخاب و متن به صورت واضح قابل درک باشد. لازم به ذکر است ترازبندی میبایست به صورتی باشد که در لیبلهای چندخطی، رادیو در ابتدای لیبل قرار گیرد.
در صورت وجود چند گزینه، آنها میتوانند بسته به ساختار رابط کاربری به صورت عمودی یا افقی نمایش داده شوند. در اغلب موارد، چیدمان عمودی ترجیح داده میشود، زیرا خوانایی بهتری دارد و مقایسه گزینهها را برای کاربر آسانتر میکند.
- عمودی: بهترین حالت برای اسکن سریع (فاصله بین هر مورد:
8px).
- افقی: برای فضاهای محدود (فاصله بین هر مورد:
16px).
فاصله در فرمها
- فرمهای کوچک (تا
456px): فاصلهSpace-05(معادل16px) از کامپوننت بعدی.
در فرمهایی با عرض 456px یا کمتر، دکمه رادیویی میتواند با فاصله 16px (Space-05) زیر یا قبل از کامپوننت بعدی قرار گیرد تا کاربر بتواند آنها را به راحتی از هم تشخیص دهد و انتخاب کند. این فاصله زمانی که فضا محدودتر است یا فرم پیچیدهتر است، توصیه میشود.
- فرمهای بزرگ (تا
624px): فاصلهSpace-06(معادل24px) از کامپوننت بعدی.
در یک فرم با عرض 624px به پایین، دکمه رادیویی میتواند با فاصله 24px (Space-06) از کامپوننت بعدی جدا شود.
- فرمهای بسیار بزرگ (تا
1104px): فاصلهSpace-07(معادل32px) از کامپوننت بعدی.
در یک فرم با عرض 1104px به پایین، دکمه رادیویی میتواند با فاصله 32px (Space-07) از کامپوننت بعدی جدا شود.
سلسلهمراتب
در یک گروه از دکمههای رادیویی، همه گزینهها از نظر اهمیت در یک سطح قرار دارند و هیچکدام به تنهایی تاکید بیشتری نسبت به بقیه ندارند. تمرکز اصلی باید روی وضوح گزینهها و قابل مقایسه بودن آنها باشد تا کاربر بتواند به سادگی یک انتخاب مشخص انجام دهد.
چه زمانی استفاده کنیم؟
دکمه رادیویی در بخشهایی از رابط کاربری قرار میگیرد که کاربر باید از بین چند گزینه، یک مورد را انتخاب کند.
- در فرمها (صفحات کامل، مودال یا پنلهای کناری)
- برای تغییر تنظیمات در منوها
- برای انتخاب یک گزینه واحد در جداول داده
چه زمانی استفاده نکنیم؟
اگر کاربر مجاز به انتخاب چند گزینه است، حتما به جای رادیو باتن از چکباکس استفاده کنید.
- رادیو باتن را زمانی استفاده کنید که فقط یک مورد میتواند انتخاب شود.
- از گروه چکباکسها برای انتخاب چند گزینه در یک لیست شامل 2 مورد یا بیشتر استفاده کنید.
نوشتار
- برچسبها باید کوتاه (ترجیحا زیر 3 کلمه)، واضح و قابل اسکن باشند.
- هر گزینه باید یک انتخاب مستقل و قابل فهم را نشان دهد و بدون نیاز به توضیح اضافه، از گزینههای دیگر قابل تشخیص باشد.
- گزینههای یک گروه باید از نظر لحن و ساختار نوشتاری یکدست باشند؛ برای مثال همه به صورت اسم، فعل یا عبارت کوتاه نوشته شوند.
- از گزینههای مبهم یا همپوشان پرهیز کنید، چون کاربر باید بتواند فقط یک گزینه را با اطمینان انتخاب کند.
- در انتهای برچسب گزینهها از نقطه استفاده نکنید.
- در صورت نیاز به توضیح بیشتر، از دکمه اطلاعات و تولتیپ در مقابل متن استفاده کنید.
- در متون چندخطی، رادیو باتن باید با خط اول متن تراز باشد.
