Sliders | اسلایدرها
اسلایدر کنترل رابط کاربری است که با جابه‌جا کردن یک دستگیره روی مسیر مشخص، مقدار یا بازه‌ای را از میان یک مقیاس پیوسته یا گسسته انتخاب می‌کند. برخلاف منوی کشویی یا فیلد متنی خالی، اسلایدر مقیاس را دیداری نشان می‌دهد: کاربر می‌بیند کجای بازه ایستاده، نه فقط عددی که باید در ذهن بسازد. نمونه‌های آشنا تنظیم صدا، روشنایی، و فیلتر قیمت در فروشگاه آنلاین‌اند. این مدخل دربارهٔ کنترل بازه است، نه نوار پیشرفت، نه اسکرول‌بار صفحه، و نه مجموعهٔ کلی کنترل‌های انتخاب مثل رادیو و چک‌باکس.
آناتومی: مسیر، دستگیره و بازخورد مقدار
مسیر (track) بازه را نشان می‌دهد؛ دستگیره (thumb) نقطهٔ انتخاب است؛ و برچسب یا عدد کنار کنترل مقدار جاری را اعلام می‌کند. بدون بازخورد عددی یا نشانک، بسیاری از کاربران نمی‌دانند دقیقاً کجا ایستاده‌اند — مخصوصاً وقتی بازه وسیع است یا واحد غیرآشنا دارد. تیک‌های اختیاری روی مسیر برای مقادیر معنادار (مثلاً ۲۵، ۵۰، ۷۵) جهت‌گیری می‌دهند اما نباید مسیر را شلوغ کنند.
حالت‌های بصری — پیش‌فرض، هاور، فوکوس، غیرفعال — باید با بقیهٔ کنترل‌های فرم هماهنگ باشند تا اسلایدر مثل عنصر غریبه در صفحه ننشیند. پر شدن قسمتی از مسیر تا محل دستگیره به درک «چقدر از بازه انتخاب شده» کمک می‌کند.
تک‌مقداری در برابر بازه‌ای
اسلایدر تک‌دستگیره یک مقدار را برمی‌گزیند: حجم صدا، شدت فیلتر، مدت تایمر. اسلایدر دو‌دستگیره حداقل و حداکثر را با هم تعریف می‌کند؛ فیلتر «قیمت از تا» نمونهٔ کلاسیک است. انتخاب نوع باید با هدف تعامل یکی باشد. اگر کاربر فقط یک عدد دقیق نیاز دارد و مقیاس ذهنی ندارد، فیلد عددی یا استپر گاهی بهتر است.
در فیلترهای فروشگاهی، اسلایدر بازه‌ای وقتی مفید است که توزیع قیمت دیداری به تصمیم کمک کند. اگر بیشتر کاربران عدد دقیق می‌نویسند و به‌ندرت می‌کشند، ترکیب اسلایدر با دو فیلد عددی همگام‌شده تجربه را کامل می‌کند.
کی اسلایدر انتخاب درستی است
اسلایدر وقتی می‌درخشد که تقریب سریع مهم‌تر از رقم دقیق باشد و دیدن موقعیت روی مقیاس فهم را زیاد کند. تنظیمات حسی (صدا، روشنایی، زوم نقشه) مثال خوبند چون نتیجه فوری شنیده یا دیده می‌شود. برای وارد کردن کد ملی یا مبلغ دقیق فاکتور، اسلایدر معمولاً انتخاب ضعیفی است.
اگر تعداد گزینه‌های معنادار کم و گسسته است — مثلاً سه سطح سرعت — دکمه‌های سگمنت یا رادیو روشن‌ترند. اسلایدر را برای مقیاس‌هایی نگه دارید که پیوستگی یا بازهٔ واقعی دارند، نه برای تبدیل اجباری هر تنظیم به یک خط افقی.
پیوسته، گسسته و گام‌ها
مقدار پیوسته اجازه می‌دهد دستگیره در هر نقطه بایستد؛ مقدار گسسته روی گام‌های از پیش تعریف‌شده می‌پرد. گام باید با معنای دامنه جور باشد: برای درصد، گام یک یا پنج رایج است؛ برای قیمت ممکن است گرد کردن به هزار منطقی‌تر باشد. گام خیلی درشت کنترل را کندذهن می‌کند؛ گام خیلی ریز انتخاب دقیق را سخت می‌کند مخصوصاً روی لمسی.
اسنپ به نقاط محبوب — مثلاً برگرداندن نرم به مقدار پیش‌فرض — می‌تواند کمک کند به شرطی که کاربر حس قفل شدن ناخواسته نکند. همیشه راه خروج به مقدار دلخواه بماند.
بازخورد زنده و عملکرد
اسلایدرهایی که همزمان با کشیدن، پیش‌نمایش یا نتایج فیلتر را عوض می‌کنند حس کنترل قوی می‌سازند. اما اگر هر پیکسل حرکت یک درخواست شبکهٔ سنگین بفرستد، تأخیر اعتماد را می‌شکند. راه‌حل‌های رایج: به‌روزرسانی محلی فوری برای عدد، و تأخیر کوتاه (debounce) برای درخواست سرور؛ یا اعمال فیلتر با دکمهٔ تأیید وقتی داده گران است.
روی دستگاه ضعیف یا اتصال ناپایدار، اولویت با نرمی دستگیره است. اسلایدر laggy بدتر از فیلد عددی ساده است چون وعدهٔ دستکاری مستقیم می‌دهد و عمل نمی‌کند.
دسترس‌پذیری: کیبورد، لمس و خوانشگر
اسلایدر باید با کیبورد قابل تنظیم باشد: تمرکز روی دستگیره، کلیدهای جهت برای تغییر گام، و در صورت نیاز PageUp و Home و End برای جهش. نام دسترس‌پذیر و اعلام مقدار جاری برای خوانشگر صفحه ضروری است تا کاربر نابینا فقط «اسلایدر» نشنود بدون عدد. برچسب مرئی که به کنترل مرتبط شده باشد پایهٔ همین تجربه است.
هدف لمسی دستگیره باید به اندازهٔ کافی بزرگ باشد؛ مسیر باریک بدون دستگیرهٔ درشت روی موبایل منبع خطا است. برای کاربران با لرزش دست، گام بزرگ‌تر یا فیلد عددی مکمل مهربان‌تر است. رنگ به‌تنهایی نباید تنها نشانهٔ مقدار باشد؛ عدد و موقعیت با هم کار می‌کنند.
جهت، چیدمان و زمینهٔ RTL
اسلایدر افقی رایج‌ترین است؛ عمودی در میکسر صدا یا پنل‌های فشرده جا دارد. در رابط راست‌به‌چپ، توافق کنید افزایش مقدار به کدام سمت است و همان را در کل محصول ثابت نگه دارید تا مدل ذهنی نشکند. قرارگیری برچسب حداقل و حداکثر باید با جهت خواندن هماهنگ باشد.
در فرم‌های متراکم، فاصلهٔ عمودی اسلایدر با فیلد بعدی را طوری بگذارید که دستگیره با کنترل مجاور اشتباه گرفته نشود. اسلایدر داخل کارت فیلتر موبایل اغلب به عرض کامل نیاز دارد تا کشیدن راحت باشد.
اسلایدر در برابر استپر، اینپوت و کنترل‌های انتخاب
استپر برای تغییر عدد با دکمهٔ مثبت و منفی خوب است وقتی بازه کوچک و دقت مهم است. اینپوت متنی برای مقدار دقیق و کپی‌پیست. چک‌باکس و رادیو برای گزینه‌های نامقیاس. اسکرول‌بار برای پیمودن محتواست نه انتخاب مقدار تنظیمات. اسنک‌بار پیام موقت است. تنظیمات صفحه ممکن است اسلایدر داشته باشد اما خود مفهوم settings گسترده‌تر از این کنترل است. مرز را در واژه‌نامهٔ تیم نگه دارید تا تیکت «اسلایدر» به بازطراحی کل صفحهٔ تنظیمات تبدیل نشود.
گاهی بهترین UI ترکیب است: اسلایدر برای حس مقیاس، و فیلد عددی برای دقت؛ هر دو باید یک منبع حقیقت داشته باشند تا از هم جلو نزنند.
الگوهای محصول واقعی
در پخش رسانه، اسلایدر پیشرفت با درگ معمولاً هم جایگاه پخش را عوض می‌کند هم مقدار را نشان می‌دهد؛ باید از اسلایدر حجم که کار دیگری دارد تمییز بصری داشته باشد. در ابزار طراحی، اسلایدر شفافیت یا وزن خط با پیش‌نمایش زنده جفت می‌شود. در داشبورد تحلیل، اسلایدر زمان گاهی به صورت scrubber ظاهر می‌شود؛ باز هم همان منطق دستگیره روی بازه است با برچسب زمانی.
در فینتک، اسلایدر مبلغ وام یا مدت بازپرداخت باید عدد را بزرگ و خوانا نشان دهد چون پیامد مالی دارد؛ اینجا تقریب بدون رقم کافی نیست.
طراحی در سیستم و مشخصات تحویل
توکن اندازهٔ دستگیره، ضخامت مسیر، رنگ پرشده و حالت فوکوس را در سیستم طراحی ثابت کنید تا هر تیم یک اسلایدر متفاوت نسازد. در مشخصات، حداقل و حداکثر، گام، مقدار پیش‌فرض، و رفتار در لبه‌ها (رسیدن به انتها) را بنویسید. برای اسلایدر بازه‌ای، قانون جلوگیری از عبور دستگیره‌ها از روی هم را صریح کنید.
آزمون با بازهٔ خیلی کوچک و خیلی بزرگ، و با مقادیر اعشاری، قبل از لانچ جلوی باگ‌های آزاردهنده را می‌گیرد.
خطاهای رایج و راه اصلاح
استفاده از اسلایدر برای دادهٔ اسمی بدون مقیاس واقعی. نبود عدد کنار کنترل. دستگیرهٔ کوچک روی لمسی. به‌روزرسانی زنده بدون بهینه‌سازی شبکه. نادیده گرفتن کیبورد. و یکی دانستن اسلایدر با کاروسل تصاویر یا اسکرول افقی صفحه — آن‌ها الگوهای متفاوتی‌اند.
اصلاح با پرسش «آیا مقیاس دیداری به تصمیم کمک می‌کند؟» شروع می‌شود. اگر جواب نه است، کنترل دیگری انتخاب کنید. اگر بله است، بازخورد، دسترس‌پذیری و عملکرد را از روز اول در طراحی بگنجانید.
جمع‌بندی برای انتخاب کنترل بازه
اسلایدر ابزار دستکاری مستقیم مقدار روی بازه است: سریع، دیداری، و رضایت‌بخش وقتی درست ساخته شود. قدرت آن در نشان دادن مقیاس است؛ ضعف آن در دقت خام و دسترسی ضعیف ظاهر می‌شود. با انتخاب آگاهانه در برابر اینپوت و استپر، طراحی بازخورد واضح، و پشتیبانی کیبورد و لمس، اسلایدر به یکی از خوش‌دست‌ترین کنترل‌های تنظیمات و فیلتر تبدیل می‌شود — بدون اینکه با اسکرول‌بار یا بقیهٔ کنترل‌های انتخاب اشتباه گرفته شود.
سوالات متداول
کنترلی که با حرکت دستگیره روی یک مسیر، مقدار یا بازه‌ای را از میان مقیاس انتخاب می‌کند و بازخورد دیداری فوری می‌دهد.
تک‌مقداری یک دستگیره برای یک عدد دارد؛ بازه‌ای دو دستگیره برای حداقل و حداکثر، مثل فیلتر قیمت.
وقتی دقت رقم مهم است، مقیاس ذهنی ضعیف است، یا وارد کردن مستقیم عدد سریع‌تر و کم‌خطاتر از کشیدن دستگیره باشد.
برچسب مرتبط، کنترل با کیبورد، اعلام مقدار برای خوانشگر، هدف لمسی کافی، و تکیه نکردن صرف بر رنگ.
خیر. اسکرول‌بار محتوا را جابه‌جا می‌کند؛ کنترل‌های انتخاب مثل رادیو برای گزینه‌های گسستهٔ نامقیاس‌اند؛ اسلایدر مخصوص مقدار روی بازه است.