Слайдеры

Ползунок — это элемент управления, позволяющий пользователю выбирать из диапазона значений путем перемещения элемента управления пальцем по дорожке.

Это правильный элемент управления?

Используйте ползунок, если вы хотите, чтобы пользователи могли задавать определенные, смежные значения (например, громкость или яркость) или диапазон дискретных значений (например, параметры разрешения экрана).

Ползунок является хорошим выбором, когда вы знаете, что пользователи считают значение относительным количеством, а не числовым значением. Например, пользователи думают о настройке громкости звука на низкий или средний , а не о настройке значения 2 или 5.

Не используйте ползунок для двоичных параметров. Используйте переключатель вместо этого.

Ниже приведены некоторые дополнительные факторы, которые следует учитывать при выборе того, следует ли использовать ползунок:

• Можно ли представить значение параметра в виде относительной величины? Если нет, используйте радиокнопки или список.
• У параметра есть точное и заранее известное числовое значение? В этом случае используйте числовое текстовое поле.
• Требуется ли пользователю мгновенная обратная связь при изменении значения параметра? В этом случае используйте ползунок. Например, пользователи могут легко выбрать цвет, сразу же видя эффект изменений, влияющих на оттенки, насыщенность или значения света.
• Параметр может принимать 4 и более значений? В противном случае используйте радиокнопки.
• Может ли пользователь изменить значение? Ползунки предназначены для взаимодействия пользователя. Если пользователь никогда не может изменить значение, используйте вместо этого текст только для чтения.

Если вы выбираете ползунок и числовое текстовое поле, используйте числовое текстовое поле, если:

• Пространство экрана ограничено.
• Пользователь, скорее всего, предпочитает использовать клавиатуру.

Используйте ползунок, если:

• Пользователи получат выгоду от мгновенной обратной связи.

Рекомендации

• Размер элемента управления, чтобы пользователи могли легко задать нужное значение. Для параметров с дискретными значениями убедитесь, что пользователь может легко выбрать любое значение с помощью мыши. Убедитесь, что конечные точки ползунка всегда соответствуют границам представления.
• Дайте немедленный отзыв в то время или после того, как пользователь делает выбор (когда практический). Например, система управления громкостью Windows издает звуковой сигнал, чтобы указать выбранный уровень громкости.
• Используйте метки для отображения диапазона значений. Исключение. Если ползунок ориентирован по вертикали, а верхняя метка — Maximum, High, More или эквивалентна, можно опустить другие метки, так как значение ясно.
• Отключите все связанные метки или визуальные элементы обратной связи при отключении ползунка.
• Учитывайте направление текста при настройке направления потока и /или ориентации ползунка. Текст пишется слева направо в некоторых языках и справа налево в других.
• Не используйте ползунок в качестве индикатора хода выполнения.
• Не изменяйте размер ползунка слайдера от размера по умолчанию.
• Не создавайте непрерывный ползунок, если диапазон значений имеет большой размер, и пользователи, скорее всего, выберет один из нескольких репрезентативных значений из диапазона. Вместо этого используйте эти значения в качестве допустимых шагов. Например, если значение времени может составлять до 1 месяца, но пользователям нужно выбрать только 1 минуту, 1 час, 1 день или 1 месяц, а затем создать ползунок только с 4 шагами.

Дополнительные рекомендации по использованию

Выбор правильного макета: горизонтальная или вертикальная

Ползунок можно сориентировать по горизонтали или по вертикали. Используйте эти рекомендации, чтобы определить, какой макет следует использовать.

• Используйте естественную ориентацию. Например, если ползунок представляет реальное значение, которое обычно отображается вертикально (например, температура), используйте вертикальную ориентацию.
• Если элемент управления используется для поиска в средствах массовой информации, например в видео-приложении, используйте горизонтальную ориентацию.
• При использовании ползунка на странице, которая может быть сдвигаться в одном направлении (горизонтально или вертикально), используйте другую ориентацию ползунка, чем направление сдвига. В противном случае пользователи могут смахнуть ползунок и случайно изменить его значение, когда пытаются прокрутить страницу.
• Если вы по-прежнему не уверены, какая ориентация используется, используйте тот, который лучше всего подходит для макета страницы.

Направление диапазона

Направление диапазона — это направление перемещения ползунка при переходе от текущего значения к максимальному значению.

• Для вертикального ползунка поместите наибольшее значение в верхней части ползунка независимо от направления чтения. Например, для ползунка громкости всегда устанавливайте максимальную громкость в верхней части ползунка. Для других типов значений (например, дней недели) следуйте указаниям на чтение страницы.
• Для горизонтальных стилей поместите нижнее значение в левой части ползунка для макета страницы слева направо и справа для макета страницы справа налево.
• Одним из исключений из предыдущего руководства является панель поиска мультимедиа: всегда помещайте меньшее значение слева от ползунка.

Шаги и галочки

• Используйте точки шага, чтобы ползунок не разрешал произвольные значения между минимальным и максимальным. Например, если вы используете ползунок для указания количества билетов на фильмы, не разрешайте значения с плавающей запятой. Присвойте ему значение шага 1.
• Если вы укажете шаги (также известные как точки привязки), убедитесь, что последний шаг должен совпадать с максимальным значением ползунка.
• Используйте метки, когда вы хотите показать пользователям расположение основных или значимых значений. Например, ползунок, который управляет масштабом, может иметь галочки для 50%, 100 %, и 200 %.
• Показывать галочки, когда пользователям нужно знать приблизительное значение параметра.
• Отображение меток и значения, когда пользователям необходимо знать точное значение параметра, не взаимодействуя с контролем. В противном случае они могут использовать подсказку значения, чтобы увидеть точное значение.
• Всегда отображать галочки, если точки шага не очевидны. Например, если ползунок имеет ширину 200 пикселей и имеет 200 точек привязки, можно скрыть галочки, так как пользователи не заметят поведение прикрепления. Но если есть только 10 точек привязки, покажите деления.

Наклейки

• Метки ползунка

  Метка ползунка указывает, для чего используется ползунок.

  • Используйте метку без конечного знака препинания (это принято для всех меток элементов управления).
  • Разместите метки над ползунком, когда ползунок находится в положении, при котором большая часть меток оказывается над элементами управления.
  • Размещайте метки по бокам, когда ползунок находится в форме, которая располагает большую часть его меток сбоку от элементов управления.
  • Избегайте размещения меток под ползунком, так как палец пользователя может закрыть метку, когда он прикасается к ползунку.

• Метки диапазона

  Диапазон или заполнение меток описывает минимальные и максимальные значения ползунка.

  • Пометьте два конца диапазона ползунка, если вертикальная ориентация не делает это ненужным.
  • Используйте только одно слово, если это возможно, для каждой метки.
  • Не используйте конечные знаки препинания.
  • Убедитесь, что эти метки являются описательными и параллельными. Примеры: максимальный/минимальный, больше/меньше, низкий/высокий, мягкий/громкий.

• Метки значений

  Метка значения отображает текущее значение ползунка.

  • Если вам нужна метка значения, отобразите ее под ползунком.
  • Центрируйте текст относительно элемента управления и включите единицы измерения (например, пиксели).
  • Так как ползунок скрывается при его перетаскивании, стоит подумать о показе текущего значения иным способом — с помощью метки или другого визуального элемента. Ползунок настройки размера текста может отображать образец текста подходящего размера рядом с ползунком.

Внешний вид и взаимодействие

Ползунок состоит из дорожки и пальца. Трек — это панель (которая может отображать различные стили тиковых меток), представляющую диапазон значений, которые могут быть входными. Большой палец — это селектор, который пользователь может разместить, коснувшись дорожки или перетаскивая его назад и вперед.

Ползунок имеет большую область сенсорного ввода. Чтобы обеспечить сенсорную доступность, ползунок должен быть расположен достаточно далеко от края дисплея.

При разработке индивидуального ползунка следует подумать о способах предоставления пользователю всей необходимой информации с минимальными отвлекающими факторами. Используйте метку значения, если пользователю необходимо знать единицы, чтобы понять параметр; найти творческие способы представления этих значений графически. Ползунок, который управляет громкостью, например, может отображать изображение динамика без звуковых волн в начале ползунка и изображение динамика со звуковыми волнами в конце.

Примеры

Ползунок с галочками в интервалах от 0 до 100.

Создание ползунка

Приложение WinUI 3 Gallery включает интерактивные примеры большинства элементов управления и возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

Вот как создать ползунок в XAML.

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

Вот как создать ползунок в коде.

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);

Получить и задать значение ползунка можно из свойства Value. Обеспечить ответ на изменения значения можно путем привязки к свойству Value или обработки события ValueChanged.

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

UWP и WinUI 2

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии содержит новый шаблон для этого элемента управления, использующего округленные углы. Дополнительные сведения см. в разделе о радиусе угла.

Связанные темы

• Выключатели
• Класс Slider