قبل از اینکه بخوایم انواع اسلایدر رو توضیح بدیم و ویژگیهاش رو بررسی کنیم باید بفهمیم که اسلایدر چیه و ماهیتش رو درک کنیم؛ ساده بهتون بگم اسلایدر یک کنترلگره که ما اون رو به شکل گرافیکی به کاربر نشون میدیم تا بتونه بین محدودهها حق انتخاب داشته باشه. حالا که متوجه کاربرد و ماهیت اسلایدر شدیم بیاید تا با هم انواع اسلایدر و کاربرد اون رو بررسی کنیم.
۱- اسلایدر تک محوره ( Single Slider )
زمانی که کاربر فقط یک محدوده انتخاب داره ما به سراغ اسلایدر تک محوره میریم؛ به این شکل که یک مینیموم داریم و یک ماکسیمم یا همون صفر و صد خودمون که کاربر میتونه از صفر تا صد انتخاب خودش رو تغییر بده و بین محدوده دیگهای نمیتونه انتخابش رو جابجا کنه.
مثال: شدت نور، حجم صدا و یا هرچیزی که یک مقدار داره.
۲- اسلایدر دو محوره ( Range Slider )
اسلایدر دو محوره و تک محوره بسیار شبیه به هم هستند با این تفاوت که کاربر میتونه محدوده انتخاب خودش رو از دو طرف تغییر بده؛ یعنی میتونه صفر و صد رو جابجا کنه. بزارید واضحتر بهتون بگم: من به عنوان کاربر میتونم مینیموم خودم رو برای مثال روی ۳۰ و ماکسیمم رو روی ۷۰ قرار بدم، در این موقعیت حق آزادی و حق انتخاب بیشتری دارم و به عنوان کاربر ارتباط بهتری میتونم با رابط کاربری بگیرم.
مثال: محدوده قیمت، بازه زمانی
۳- اسلایدر مرحله ای ( Discrete Slider )
اسلایدر مرحلهای یا گسسته مناسب زمانیه که ما میخوایم به کاربر یک سری مقادیر از پیش تعیین شده رو بدیم تا از بین آنها بتونه انتخاب کنه؛ در واقع حق انتخاب دیگهای نداره. پیشنهاد میکنم به زمانی که میخواید کیفیت یک فیلم رو انتخاب کنید دقت کنید؛ شما کیفیتهای از پیش تعیین شده رو میبینید که فقط از بین اون ها میتونید انتخابی داشته باشید.
مثال: کیفیت ویدیو، سطح سختی بازی
به همین راحتی انواع اسلایدر رو یاد گرفتیم. به عنوان کلام آخر میخوام چند نکته اصول طراحی ( UX ) بهتون بگم که در عین سادگی کارتون رو بهتر میکنند.
+ با استفاده از یک برچسپ یا متن در بالای اسلایدر نشون بدین که اسلایدر مربوط به چیه و مقدار چه چیزی رو مشخص میکنه.
+ محور جابجایی رو جوری طراحی کنید که واضح و قابل لمس باشه و کاربر به راحتی بتونه محدوده انتخابش رو جابجا کنه.
+ مقدار انتخاب شده رو حتما به کاربر نشون بدین؛ به ویژه در اسلایدر دو محوره که در هر دو طرف باید مقدار انتخابی کاربر رو نشون بدین؛ بدون نمایش مقدار، کاربر حس کنترل ندارد.
