Поделиться через

Ползунки

  • Статья

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

Элемент управления ползунка

Выбор правильного элемента управления

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наклейки

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры

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

Ползунок с тиками

UWP и WinUI 2

Внимание

Сведения и примеры в этой статье оптимизированы для приложений, использующих пакет SDK для приложений Windows и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. См. справочник по API UWP для конкретных сведений и примеров платформы.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

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

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

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

Откройте приложение коллекции WinUI 3 и просмотрите ползунок в действии.

Приложение коллекции WinUI 3 включает интерактивные примеры большинства элементов управления, функций и функций 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;
    }
}

Получение кода примера

  • Пример коллекции WinUI. Просмотрите все элементы управления XAML в интерактивном формате.