Penggeser

  • Artikel

Slider adalah kontrol yang memungkinkan pengguna memilih dari rentang nilai dengan memindahkan kontrol jempol di sepanjang trek.

Kontrol penggerak

Apakah ini kontrol yang tepat?

Gunakan penggeser saat Anda ingin pengguna Anda dapat mengatur nilai yang ditentukan dan berdekatan (seperti volume atau kecerahan) atau rentang nilai diskrit (seperti pengaturan resolusi layar).

Slider adalah pilihan yang baik ketika Anda tahu bahwa pengguna menganggap nilai sebagai kuantitas relatif, bukan nilai numerik. Misalnya, pengguna berpikir tentang mengatur volume audio mereka ke rendah atau sedang—bukan tentang mengatur nilai ke 2 atau 5.

Jangan gunakan penggaris untuk pengaturan biner. Gunakan sakelar pengalih sebagai gantinya.

Berikut adalah beberapa faktor tambahan yang perlu dipertimbangkan saat memutuskan apakah akan menggunakan slider:

  • Apakah pengaturan tampak seperti jumlah relatif? Jika tidak, gunakan tombol radio atau kotak daftar.
  • Apakah pengaturan nilai numerik yang tepat dan diketahui? Jika demikian, gunakan kotak teks numerik.
  • Apakah pengguna akan mendapat manfaat dari umpan balik instan tentang efek perubahan pengaturan? Jika demikian, gunakan penggerak. Misalnya, pengguna dapat memilih warna dengan lebih mudah dengan segera melihat efek perubahan pada warna, saturasi, atau nilai luminositas.
  • Apakah pengaturan memiliki rentang empat nilai atau lebih? Jika tidak, gunakan tombol radio.
  • Bisakah pengguna mengubah nilainya? Slider adalah untuk interaksi pengguna. Jika pengguna tidak dapat mengubah nilainya, gunakan teks baca-saja sebagai gantinya.

Jika Anda memutuskan antara slider dan kotak teks numerik, gunakan kotak teks numerik jika:

  • Ruang layar ketat.
  • Pengguna cenderung lebih suka menggunakan keyboard.

Gunakan penggerak jika:

  • Pengguna akan mendapat manfaat dari umpan balik instan.

Rekomendasi

  • Ukuran kontrol sehingga pengguna dapat dengan mudah mengatur nilai yang mereka inginkan. Untuk pengaturan dengan nilai diskrit, pastikan pengguna dapat dengan mudah memilih nilai apa pun menggunakan mouse. Pastikan titik akhir slider selalu pas di dalam batas tampilan.
  • Berikan umpan balik langsung saat atau setelah pengguna membuat pilihan (jika praktis). Misalnya, volume Windows mengontrol bip untuk menunjukkan volume audio yang dipilih.
  • Gunakan label untuk memperlihatkan rentang nilai. Pengecualian: Jika slider berorientasi vertikal dan label atas adalah Maksimum, Tinggi, Lebih, atau setara, Anda dapat menghilangkan label lain karena maknanya jelas.
  • Nonaktifkan semua label atau visual umpan balik terkait saat Anda menonaktifkan pengguncur.
  • Pertimbangkan arah teks saat mengatur arah alur dan/atau orientasi slider Anda. Skrip mengalir dari kiri ke kanan dalam beberapa bahasa, dan dari kanan ke kiri di bahasa lain.
  • Jangan gunakan slider sebagai indikator kemajuan.
  • Jangan ubah ukuran jempol penggagas dari ukuran default.
  • Jangan membuat slider berkelanjutan jika rentang nilai besar dan pengguna kemungkinan besar akan memilih salah satu dari beberapa nilai perwakilan dari rentang. Sebagai gantinya, gunakan nilai-nilai tersebut sebagai satu-satunya langkah yang diizinkan. Misalnya jika nilai waktu mungkin hingga 1 bulan tetapi pengguna hanya perlu memilih dari 1 menit, 1 jam, 1 hari, atau 1 bulan, lalu membuat slider hanya dengan 4 titik langkah.

Panduan penggunaan tambahan

Memilih tata letak yang tepat: horizontal atau vertikal

Anda dapat mengorientasikan slider Anda secara horizontal atau vertikal. Gunakan panduan ini untuk menentukan tata letak mana yang akan digunakan.

  • Gunakan orientasi alami. Misalnya, jika slider mewakili nilai dunia nyata yang biasanya ditampilkan secara vertikal (seperti suhu), gunakan orientasi vertikal.
  • Jika kontrol digunakan untuk mencari di dalam media, seperti di aplikasi video, gunakan orientasi horizontal.
  • Saat menggunakan penggeser di halaman yang dapat digeser ke satu arah (secara horizontal atau vertikal), gunakan orientasi yang berbeda untuk penggeser daripada arah panning. Jika tidak, pengguna mungkin menggesek penggerak dan mengubah nilainya secara tidak sengaja saat mereka mencoba menggeser halaman.
  • Jika Anda masih tidak yakin orientasi mana yang akan digunakan, gunakan orientasi yang paling sesuai dengan tata letak halaman Anda.

Arah rentang

Arah rentang adalah arah Anda memindahkan pengguncur saat Anda menggesernya dari nilai saat ini ke nilai maksnya.

  • Untuk pengguncur vertikal, letakkan nilai terbesar di bagian atas slider, terlepas dari arah membaca. Misalnya, untuk penggerak volume, selalu letakkan pengaturan volume maksimum di bagian atas pengguncur. Untuk jenis nilai lain (seperti hari dalam seminggu), ikuti arah baca halaman.
  • Untuk gaya horizontal, letakkan nilai yang lebih rendah di sisi kiri penggeser untuk tata letak halaman kiri-ke-kanan, dan di sebelah kanan untuk tata letak halaman kanan-ke-kiri.
  • Satu pengecualian untuk pedoman sebelumnya adalah untuk bilah pencarian media: selalu letakkan nilai yang lebih rendah di sisi kiri penggerak.

Langkah-langkah dan tanda centang

  • Gunakan poin langkah jika Anda tidak ingin penggeser mengizinkan nilai arbitrer antara min dan maks. Misalnya, jika Anda menggunakan penggeser untuk menentukan jumlah tiket film yang akan dibeli, jangan izinkan nilai floating point. Berikan nilai langkah 1.
  • Jika Anda menentukan langkah-langkah (juga dikenal sebagai titik rekam jepret), pastikan langkah terakhir selaras dengan nilai maks slider.
  • Gunakan tanda centang saat Anda ingin memperlihatkan lokasi nilai utama atau signifikan kepada pengguna. Misalnya, penggeser yang mengontrol zoom mungkin memiliki tanda centang untuk 50%, 100%, dan 200%.
  • Tampilkan tanda centang saat pengguna perlu mengetahui perkiraan nilai pengaturan.
  • Tampilkan tanda centang dan label nilai saat pengguna perlu mengetahui nilai yang tepat dari pengaturan yang mereka pilih, tanpa berinteraksi dengan kontrol. Jika tidak, mereka dapat menggunakan tipsalat nilai untuk melihat nilai yang tepat.
  • Selalu tampilkan tanda centang saat titik langkah tidak jelas. Misalnya, jika slider lebarnya 200 piksel dan memiliki 200 titik snap, Anda dapat menyembunyikan tanda centang karena pengguna tidak akan melihat perilaku snapping. Tetapi jika hanya ada 10 titik snap, tunjukkan tanda centang.

Label

  • Label penggerak

    Label slider menunjukkan untuk apa pengguncur digunakan.

    • Gunakan label tanpa tanda baca akhir (ini adalah konvensi untuk semua label kontrol).
    • Posisikan label di atas slider saat pengguncur berada dalam formulir yang menempatkan sebagian besar labelnya di atas kontrolnya.
    • Posisikan label ke sisi saat pengguncur berada dalam bentuk yang menempatkan sebagian besar labelnya ke sisi kontrolnya.
    • Hindari menempatkan label di bawah penggeser karena jari pengguna mungkin menempati label saat pengguna menyentuh penggeser.

  • Label rentang

    Rentang, atau isi, label menjelaskan nilai minimum dan maksimum slider.

    • Beri label dua ujung rentang penggunjung, kecuali jika orientasi vertikal membuat ini tidak perlu.
    • Gunakan hanya satu kata, jika memungkinkan, untuk setiap label.
    • Jangan gunakan tanda baca akhir.
    • Pastikan label ini deskriptif dan paralel. Contoh: Maksimum/Minimum, Lebih/Kurang, Rendah/Tinggi, Lembut/Keras.

  • Label nilai

    Label nilai menampilkan nilai slider saat ini.

    • Jika Anda memerlukan label nilai, tampilkan di bawah penggerak.
    • Tengahkan teks relatif terhadap kontrol dan sertakan unit (seperti piksel).
    • Karena jempol penggagas tercakup selama menggosok, pertimbangkan untuk memperlihatkan nilai saat ini dengan cara lain, dengan label atau visual lainnya. Ukuran teks pengaturan penggeser dapat merender beberapa teks sampel dengan ukuran yang tepat di samping penggeser.

Tampilan dan interaksi

Pengguncur terdiri dari trek dan jempol. Trek adalah bilah (yang secara opsional dapat menampilkan berbagai gaya tanda centang) yang mewakili rentang nilai yang dapat dimasukkan. Jempol adalah pemilih, yang dapat diposisikan pengguna dengan mengetuk trek atau dengan menggosok bolak-balik di atasnya.

Slider memiliki target sentuhan yang besar. Untuk mempertahankan aksesibilitas sentuh, penggeser harus diposisikan cukup jauh dari tepi layar.

Saat Anda merancang slider kustom, pertimbangkan cara untuk menyajikan semua info yang diperlukan kepada pengguna dengan kekacauan sesedikit mungkin. Gunakan label nilai jika pengguna perlu mengetahui unit untuk memahami pengaturan; temukan cara kreatif untuk mewakili nilai-nilai ini secara grafis. Slider yang mengontrol volume, misalnya, dapat menampilkan grafik speaker tanpa gelombang suara di ujung minimum pengguk, dan grafik speaker dengan gelombang suara di ujung maksimum.

Contoh

Slider dengan tanda centang pada interval 10 titik dari 0 hingga 100.

Pengguncur dengan tanda centang

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat Radius sudut.

Membuat penggerak

Buka aplikasi Galeri WinUI 3 dan lihat Penggeleksi beraksi.

Aplikasi WinUI 3 Gallery mencakup contoh interaktif sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Berikut cara membuat slider di XAML.

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

Berikut cara membuat slider dalam kode.

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

Anda mendapatkan dan mengatur nilai slider dari properti Nilai . Untuk menanggapi perubahan nilai, Anda dapat menggunakan pengikatan data untuk mengikat properti Nilai, atau menangani peristiwa ValueChanged .

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

Dapatkan kode sampel