Ползунки (основы проектирования)

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

Типичный ползунок.

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

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

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

Чтобы определиться, ответьте на вопросы:

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

Если можно использовать ползунок или числовое текстовое поле, используйте числовое текстовое поле, если:

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

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

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

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

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

• Сориентируйте ползунок в соответствии с культурой пользователей. Например, западные язык и региональные параметры читают слева направо, поэтому для горизонтальных ползунков поместите низкий конец диапазона слева и высокий конец справа. Для языков и региональных параметров, которые читают справа налево, сделайте наоборот.

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

• Рассмотрите возможность использования нелинейной шкалы, если диапазон значений большой и пользователи, скорее всего, будут выбирать значения на одном конце диапазона. Например, значение времени может быть равно 1 минуте, 1 часу, 1 дню или 1 месяцу.

• Когда это практически возможно, дайте немедленную обратную связь во время или после того, как пользователь делает выбор. Например, элемент управления громкости Microsoft Windows сигналит, чтобы указать результирующий звуковой громкость.

• Используйте метки для показа диапазона значений.

  Исключение: Если ползунок ориентирован по вертикали, а верхняя метка — Maximum, High, More или эквивалентная, можно опустить другие метки, так как значение понятно.

  

  В этом примере вертикальная ориентация ползунка делает метки диапазона ненужными.

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

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

  

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

• Для горизонтально ориентированных ползунков поместите галочки под ползунком. Для вертикально ориентированных ползунков поместите галочки справа для западных культур; Для языков и региональных параметров, которые читают справа налево, сделайте наоборот.

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

  Неправильно:

  

  В этом примере метка значения не выравнивается под ползунком.

• При отключении ползунка также отключите все связанные метки.

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

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

• Не используйте ползунок в качестве индикатора хода выполнения.

• Не изменяйте размер индикатора ползунка по умолчанию.

  Неправильно:

  

  В этом примере используется размер меньше, чем значение по умолчанию.

  Правильно:

  

  В этом примере используется размер по умолчанию.

• Не помечайте каждый галочку.

Рекомендуемые размеры и интервалы

Рекомендуемые размеры и интервалы для ползунков.

Метки

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

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

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

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

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

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

• Выровняйте текст относительно элемента управления и добавьте единицы измерения (например, пиксели).

  

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

Документация

При обращении к ползункам:

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

Пример. Чтобы увеличить разрешение экрана, переместите ползунок Разрешение экрана вправо.

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

Словарь терминов