تاگل سوییچ Toggle Switch

کامپوننت Toggle Switch یک عنصر تعاملی است که به کاربر این امکان را می‌دهد تا وضعیت یک ویژگی را بین حالت فعال (ON) و غیرفعال (OFF) تغییر دهد. این کامپوننت برای تنظیمات باینری مانند روشن/خاموش یا فعال/غیرفعال بودن یک گزینه استفاده می‌شود.

با تغییر وضعیت Toggle، کاربر می‌تواند به راحتی وضعیت فعلی ویژگی یا عملکرد را مشاهده کند.

نمونه زنده

تمدید خودکاراعلان‌های ایمیلیحالت نگهداریهمگام‌سازی پشتیبان

انواع

وضعیت	توضیح
On	زمانی که Toggle در حالت فعال قرار دارد و ویژگی مربوطه روشن یا فعال است.
Off	زمانی که Toggle در حالت غیرفعال قرار دارد و ویژگی مربوطه خاموش یا غیرفعال است.
Disabled	حالت غیرفعال که در آن Toggle قابل تغییر نیست و برای نمایش وضعیت غیرقابل دسترس استفاده می‌شود.

آناتومی

1. محور یا بدنه اصلی (Base): این بخش پس‌زمینه‌ای است که کلید روی آن حرکت می‌کند. رنگ زمینه به گونه‌ای طراحی شده است که تفاوت بین دو حالت «روشن» و «خاموش» به وضوح نمایش داده شود. این بخش نقش اساسی در شفاف‌سازی وضعیت کلید تغییر ایفا می‌کند.
2. دکمه سوییچ (Thumb): دکمه سوییچ قابل لمس یا کلیک است که کاربر با جابجا کردن آن بین دو طرف، وضعیت سوییچ را تغییر می‌دهد. این بخش به‌طور مستقیم مسئول تغییر وضعیت کلید است و به کاربر امکان تعامل با آن را می‌دهد.
3. لیبل کلید تغییر (Label): برچسب، توضیح می‌دهد که چه اتفاقی می‌افتد زمانی که کلید تغییر (ToggleSwitch) در حالت روشن قرار دارد. این برچسب باید همیشه همراه با کلید تغییر باشد. زمانی که برچسب تعریف نشده باشد، کلید تغییر به‌صورت مستقل در نظر گرفته می‌شود. کلید تغییر مستقل فقط باید زمانی استفاده شود که ارتباط آن با سایر کامپوننت‌ها واضح باشد و زمینه کافی برای درک عملکرد آن فراهم شود.

ساختار

کامپوننت Toggle Switch از دو قسمت اصلی تشکیل شده است: دکمه‌ی سوییچ که وضعیت فعال یا غیرفعال را نشان می‌دهد، و برچسب (اختیاری) که می‌تواند در کنار سوییچ قرار گیرد تا عملکرد آن را توضیح دهد.

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

موضوع	مقدار
عرض و ارتفاع کلی	24px
سایز دکمه سوییچ (Thumb)	12px
فاصله بین Toggle و لیبل	4px
پدینگ داخلی کامپوننت	2px
پدینگ داخلی Thumb نسبت به Base	4px

چیدمان

کامپوننت Toggle Switch در فرم‌ها یا بخش‌های تنظیمات استفاده می‌شود و باید به‌گونه‌ای چیده شود که دسترسی به آن برای کاربر راحت و سریع باشد. وضعیت سوییچ (ON/OFF) باید در کنار لیبل مربوط به خود قرار بگیرد تا کاربر بتواند به‌راحتی ارتباط بین وضعیت سوییچ و متن را درک کند.

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

هم‌ترازی

لیبل Toggle Switch باید به گونه‌ای قرار بگیرد که به‌طور واضح ارتباط بین وضعیت سوییچ (فعال/غیرفعال) و متن مشخص باشد. در صورتی که لیبل وجود داشته باشد، فاصله بین سوییچ و متن آن باید ۴ پیکسل باشد.

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

• چیدمان عمودی: بهترین حالت برای اسکن سریع و مقایسه وضعیت‌ها. فاصله بین هر سوییچ ۸ پیکسل است.

• چیدمان افقی: زمانی که فضای محدودتری دارید. فاصله بین هر سوییچ ۱۶ پیکسل است.

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

سلسله‌مراتب

در Toggle Switch، تنها دو وضعیت اصلی وجود دارد: فعال (ON) و غیرفعال (OFF). بنابراین، تمرکز اصلی باید بر روی وضوح این دو وضعیت و تغییر آن‌ها باشد. هیچ‌کدام از حالت‌های فعال یا غیرفعال اهمیت بیشتری نسبت به دیگری ندارند. حالت ON به‌عنوان فعال بودن و وضعیت مثبت نمایش داده می‌شود، در حالی که OFF نمایانگر غیرفعال بودن یا وضعیت منفی است. توجه به این نکته که تغییر وضعیت باید برای کاربر قابل تشخیص و ساده باشد، امری ضروری است.

چه زمانی از تاگل سوییچ استفاده کنیم؟

تغییر بین دو حالت: Toggle Switch برای تغییر بین دو حالت متضاد، مانند روشن/خاموش یا فعال/غیرفعال، مناسب است.

تنظیمات سریع: برای تنظیماتی که کاربر به‌طور مکرر نیاز به تغییر آن‌ها دارد و نیاز به دسترسی سریع دارند، مانند فعال یا غیرفعال کردن اعلان‌ها، Toggle Switch گزینه‌ای مناسب است.

فضای کم: در صورت محدودیت فضای صفحه، Toggle Switch‌ها به دلیل طراحی ساده و کوچک خود، گزینه‌ای ایده‌آل برای استفاده هستند.

تغییرات فوری: زمانی که تغییر وضعیت باید بلافاصله اعمال شود و نیازی به تایید اضافی نباشد، استفاده از Toggle Switch مناسب است.

چه زمانی از تاگل سوییچ استفاده نکنیم؟

زمانی که نیاز به تایید بیشتر یا چند مرحله است: اگر اقدام نیاز به تایید بیشتر یا انجام یک فرآیند چند مرحله‌ای دارد، از Toggle Switch استفاده نکنید. در این موارد بهتر است از دکمه‌ها یا روش‌های دیگر استفاده شود که فرآیند تایید یا چند مرحله‌ای را پشتیبانی کنند.

زمانی که تغییر نیاز به ارسال همراه با داده‌های دیگر دارد: اگر تغییر وضعیت به داده‌های دیگری نیاز دارد تا همراه با آن ارسال شود (مانند تغییر در تنظیمات پیچیده)، بهتر است از چک‌باکس به‌جای Toggle Switch استفاده کنید.

برای اقداماتی که نیاز به حذف یا اعمال تغییرات دایم دارند: اگر تغییر وضعیت باید یک اقدام خاص مانند حذف یا نصب یک اپلیکیشن را انجام دهد، استفاده از Toggle Switch مناسب نیست، زیرا خاموش کردن آن باعث حذف یا تغییر عمل نمی‌شود. به‌جای آن، بهتر است از یک دکمه برای انجام اینگونه اقدامات استفاده کنید.

زمانی که گزینه‌ها به حالت‌های پیچیده‌تری نیاز دارند: اگر وضعیت تغییرات به حالت‌های پیچیده‌تری نیاز دارد که بیشتر از دو وضعیت فعال و غیرفعال را پوشش می‌دهند، از Toggle Switch استفاده نکنید. برای چنین سناریوهایی بهتر است از گزینه‌های دیگری مانند دکمه‌های انتخابی یا منوها استفاده شود.

محل قرارگیری

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

در فرم‌ها: ToggleSwitch‌ها برای گزینه‌هایی با دو حالت مانند «بله/خیر»، «فعال/غیرفعال» یا «روشن/خاموش» در فرم‌ها استفاده می‌شوند. آن‌ها می‌توانند برای تنظیماتی مانند فعال‌سازی اعلان‌ها، تغییر حالت‌های برنامه، یا فعال‌سازی ویژگی‌های خاص به کار روند.

در پنجره‌های مودال: در پنجره‌های مودال که برای تنظیمات، هشدارها، یا تایید عملیات استفاده می‌شوند، ToggleSwitch‌ها برای ارایه گزینه‌های ساده روشن/خاموش به کار برده می‌شوند.

در پنل‌های تنظیمات: یکی از رایج‌ترین استفاده‌های ToggleSwitch، در پنل‌های تنظیمات است، جایی که کاربران می‌توانند تنظیمات مختلف برنامه یا دستگاه را تغییر دهند.

در نوارهای کناری (Sidebars) یا منوها: برای فعال یا غیرفعال کردن ویژگی‌ها یا حالت‌های خاص در برنامه، ممکن است ToggleSwitch‌ها در نوارهای کناری یا منوها قرار گیرند.

در داشبوردها یا پنل‌های کنترل (SidePanel): در داشبوردها یا پنل‌های کنترل که نمایش داده‌ها یا تنظیمات مختلف مدیریت می‌شوند، ToggleSwitch‌ها می‌توانند برای فعال‌سازی یا غیرفعال‌سازی ویژگی‌های خاص استفاده شوند.

نوشتار

برچسب کوتاه و مختصر: برچسب برای یک کلید تغییر باید توصیفی کوتاه و مختصر از وضعیت روشن یا خاموش باشد؛ دو حالتی که به طور متقابل انحصاری‌اند. از یک توصیف کوتاه (۱ تا ۳ کلمه) برای تنظیم استفاده کنید. سعی کنید تمامی اطلاعات ضروری را در برچسب قرار دهید، اما در صورت نیاز، می‌توانید از توضیحات تکمیلی بعد از آن استفاده کنید.

استفاده از کلمات کلیدی: برچسب‌های کلید تغییر باید شامل کلمات کلیدی باشد که مفهوم آن‌ها سریع قابل درک باشد. برای مثال، هنگام طراحی صفحه تنظیمات برای ترجیحات اعلان، به‌جای پرسیدن «آیا می‌خواهید اعلان‌های ایمیل را دریافت کنید؟»، بهتر است از عباراتی مانند «اعلان ایمیل» یا «اعلان متنی» استفاده کنید. به یاد داشته باشید که کاربران اطلاعات را سریع اسکن می‌کنند، بنابراین برچسب‌های خود را با کلمات کلیدی پر کنید و از عبارات اضافی پرهیز کنید.

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

پرهیز از استفاده از افعال مرتبط با وضعیت‌ها: از استفاده از عبارات فعلی مرتبط با وضعیت‌های فعالیت، مانند «روشن کردن» یا «خاموش کردن» خودداری کنید. یک کلید تغییر به‌طور طبیعی یا در وضعیت روشن یا خاموش قرار دارد، بنابراین تکرار اینکه چیزی «روشن» یا «خاموش» است اضافی است و موجب شلوغ شدن رابط کاربری می‌شود.

توصیف بی‌طرفانه ویژگی‌ها یا تنظیمات: کلیدهای تغییر باید بی‌طرفانه توصیف شوند و از کلمات یا تنظیماتی که توضیح‌دهنده عملکرد ویژگی‌ها هستند استفاده کنید. به ندرت به کاربر به‌طور مستقیم اشاره کنید و از ضمیر دوم شخص مثل «تو» پرهیز کنید.