معرفی اسلایدر ها در طراحی رابط کاربری

کنترل‌های اسلایدر (Slider) بهترین راه‌حل برای تنظیم تنظیماتی مثل صدا و روشنایی هستن. اونا بلافاصله اعمال میشن و به کاربرها اجازه میدن با حرکت دادن دستگیره، مقدار رو به دقت تنظیم کنن. اسلایدر‌ها می‌تونن خیلی خوب به این منظور خدمت کنن، مخصوصاً وقتی دقت خیلی مهم نیست.

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

دونستن نحوه‌ی ایجاد کنترل‌های مؤثر به طراحان کمک می‌کنه راه‌حل‌های مختلف رو بررسی کنن و از دکمه‌های قابل پیش‌بینی و خسته‌کننده دوری کنن.

مسیر (Track)

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

دستگیره (Thumb)

دستگیره یه قطعه‌ست که کاربرها می‌تونن اون رو روی یه مسیر به عقب و جلو بکشن تا مقدار اسلایدر رو تغییر بدن. مطمئن بشین که ناحیه‌ی لمس دستگیره تو دستگاه‌های موبایل به اندازه‌ی کافی بزرگ باشه و برای کاربرها، مخصوصاً برای کسایی که ناتوانی حرکتی دارن، مشکل ایجاد نکنه.

نشانگر (Tick)

نشانگر یه خط یا نقطه‌ی کوچیکه که موقعیت‌های از پیش تعریف شده رو روی یه مسیر نشون میده. بعضی وقتا، یه تخمین تقریبی کافیه، مثلاً وقتی دارین برای یه تعطیلات برنامه‌ریزی می‌کنین، دنبال اقامتگاه می‌گردین و قیمت تقریبی رو تعیین می‌کنین.

وقتی مقدار دقیق مهمه، مثلاً وقتی چند اتاق یا مهمان رو انتخاب می‌کنین، نشانگرها می‌تونن به عنوان نقاط مرجع قابل اعتماد هنگام حرکت دادن اسلایدر استفاده بشن.

مقدار (Value)

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

برای صفحه‌های لمسی، مطمئن بشین که وقتی کاربرها کنترل رو دستکاری می‌کنن، مقدار توسط انگشتانشون پنهان نشه.

قسمت پر شده (Filled part)

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

یه نکته‌ی حرفه‌ای! از رنگ‌های متضاد برای قسمت‌های پر شده و پر نشده‌ی مسیر استفاده کنین.

حداقل/حداکثر مقدار (Min/max value)

نشون دادن حداقل و حداکثر مقادیر روی یه اسلایدر به کاربرها درک واضحی از محدوده‌ای که باهاش کار می‌کنن میده. تو زبان‌هایی که از چپ به راست نوشته میشن، معمولاً حداقل مقدار رو در منتهی الیه سمت چپ و حداکثر مقدار رو در منتهی الیه سمت راست پیدا می‌کنین. برای زبان‌هایی که از راست به چپ نوشته میشن، فقط اون جهت رو برعکس کنین.

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

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

مقدار ورودی (Input value)

گاهی اوقات، جذابیت یه اسلایدر تو تنظیم سریع و بصریشه. با این حال، بعضی از کاربرها دقت رو که فقط ورودی دستی می‌تونه ارائه بده، می‌خوان، مخصوصاً برای کارهایی که به اعداد دقیق نیاز دارن. برای پاسخگویی به هر دو نوع کاربر، ارائه‌ی یه جعبه‌ی ورودی متن در کنار اسلایدر رو در نظر بگیرین.

این جعبه به اسلایدر متصل میشه و به موقعیت دستگیره اجازه میده وقتی کاربرها به صورت دستی مقدار مورد نظرشون رو وارد می‌کنن، به طور خودکار به‌روزرسانی بشه. این یه برد-برد هست: شما جذابیت شهودی اسلایدر رو حفظ می‌کنین در حالی که یه مسیر برای کسایی که دنبال دقت هستن هم ارائه میدین.

اسلایدر‌ی پیوسته (Continuous slider)

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

اسلایدر‌ی دوتایی (Dual slider)

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

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