Кнопки команд в Windows 7

Примечание

Это руководство по проектированию было создано для Windows 7 и не было обновлено для более новых версий Windows. Большая часть рекомендаций по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.

С помощью кнопок команд в Windows 7 пользователи инициируют немедленные действия.

Снимок экрана: кнопка

Типичная кнопка команды.

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

Примечание

Рекомендации, связанные с макетом , представлены в отдельной статье.

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

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

  • Используется ли кнопка команды для запуска немедленного действия? Если нет — используйте другой элемент управления.
  • Будет ли ссылка лучшим выбором? Используйте ссылку, если:
    • Действие заключается в переходе к другой странице, окну или разделу справки. Исключение: навигация мастера использует кнопки "Назад" и "Далее".
    • Команда внедряется в текст текста.
    • Команда является вторичной по своей природе. То есть он не относится к основной цели окна. В этом случае будет уместно либо упрощенная кнопка команды, либо ссылка.
    • Команда является частью меню или группы связанных ссылок.
    • Метка длинна, состоящая из пяти или более слов, что дает кнопке команды неловкое оформление.
  • Будет ли лучше использовать сочетание переключателей и универсальных кнопок команд? Часто переключатели используются в сочетании с универсальными кнопками команд (ОК, отмена) вместо набора определенных кнопок команд, если любое из следующих кнопок имеет значение true:
    • Существует пять или более возможных действий.

    • Перед принятием решения пользователям необходимо просмотреть дополнительные сведения.

    • Перед принятием решения пользователям необходимо взаимодействовать с вариантами (возможно, чтобы просмотреть дополнительные сведения).

    • Пользователи просматривают варианты в качестве параметров вместо разных команд.

      Правильныйснимок экрана: диалоговое окно, переключатели и текст

      В этом примере переключатели объединяются с кнопками "ОК" и "Отмена", чтобы предоставить дополнительные сведения о параметрах.

      Неправильныйснимок экрана сообщения с кнопками команд

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

Принципы проектирования

Использование многоточия

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

Снимок экрана: кнопка

В этом примере печать... Команда отображает диалоговое окно "Печать" для сбора дополнительных сведений.

Снимок экрана: кнопка

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

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

Это не означает, что вы должны использовать многоточие каждый раз, когда действие отображает другое окно. Используйте многоточие только в том случае, если для выполнения действия требуются дополнительные сведения. Следовательно, любая кнопка команды, неявная команда которой заключается в том, чтобы "показать другое окно" не принимает многоточие, например с командами About, Advanced, Help (или любой другой командой, связывающейся с разделом справки), параметрами, свойствами или параметрами.

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

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

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

Варианты использования

Кнопки команд имеют несколько шаблонов использования:

Использование Пример
Стандартные кнопки команд Для запуска немедленного действия можно использовать стандартные кнопки команд.
Снимок экрана: кнопка стандартной (серой) команды
Стандартная кнопка команды.
Кнопки команд по умолчанию Кнопка команды по умолчанию в окне указывает кнопку команды, которая будет активирована, когда пользователи нажимают клавишу ВВОД.
Снимок экрана: кнопка команды по умолчанию (синяя)
Кнопка команды по умолчанию.
Любая кнопка команды становится значением по умолчанию при переходе на вкладку "Пользователи". Если фокус ввода находится на элементе управления, который не является кнопкой команды, кнопка с атрибутом кнопки по умолчанию становится значением по умолчанию. По умолчанию может быть только одна кнопка команды в окне.
Упрощенные кнопки команд Упрощенная кнопка команды похожа на стандартную кнопку, за исключением того, что ее рамка кнопки отображается только при наведении указателя мыши.
Снимок экрана: одна из двух выбранных кнопок печати
В этом примере команда имеет очень упрощенный внешний вид (аналогично ссылке), пока пользователь не навел указатель мыши на команду, в какой момент она будет нарисована с помощью рамки кнопки.
Вы можете использовать упрощенные кнопки команд в ситуациях, когда вы будете использовать стандартную кнопку, но вы хотите избежать всегда отображения рамки кнопки. Упрощенные кнопки команд идеально подходят для команд, которые нужно недооценивать, и использование ссылки не подходит.
Кнопки меню Используйте кнопку меню, если вам нужно меню для небольшого набора связанных команд.
Снимок экрана: кнопка меню форматирования и ее команды
Кнопка меню с небольшим набором связанных команд.
Используйте кнопку меню, если строка меню является нежелательной, например в диалоговом окне, панели инструментов или другом окне без строки меню. Один треугольник вниз указывает, что при нажатии кнопки будет раскрываться меню.
Разделенные кнопки Используйте кнопку разделения, чтобы консолидировать набор вариантов команды, особенно если в большинстве случаев используется одна из команд.
Снимок экрана: кнопка
свернутая кнопка разделения.
Как и кнопка меню, один треугольник вниз указывает, что при щелчке крайней правой части кнопки будет раскрываться меню.
Снимок экрана: кнопка
кнопка разбиения вниз.
в этом примере кнопка разделения используется для консолидации шести вариантов открытой команды. Обычная команда открытия используется большую часть времени, поэтому пользователям обычно не нужно просматривать другие команды. При использовании кнопки разделения сохраняется значительное количество экранного пространства, а также предоставляется мощный выбор.
в отличие от кнопки меню, щелкнув левую часть кнопки, непосредственно выполняет действие с меткой. Кнопки разделения эффективны в ситуациях, когда следующее действие с определенным инструментом, скорее всего, будет таким же, как и последнее действие. В этом случае метка изменяется на последнее действие, как и при выборе цвета:
Снимок экрана: кнопка разделения заливки без команд
В этом примере метка изменяется на последнее действие.
Кнопки обзора Используйте кнопку обзора, чтобы отобразить диалоговое окно, чтобы помочь пользователям выбрать допустимое значение.
Диалоговые окна, запускаемые кнопкой обзора, помогают пользователям выбирать файлы, папки, компьютеры, пользователи, цвета и т. д. Обычно они объединяются с неограниченным элементом управления, например текстовым полем. Обычно они помечены как обзор, другие или более, и всегда имеют многоточие, чтобы указать, что требуется дополнительная информация.
Снимок экрана: текстовое поле с кнопкой обзора
текстовое поле с кнопкой обзора.
для окон с множеством кнопок обзора можно использовать короткую версию:
Снимок экрана: кнопка короткого обзора с многоточием
Короткая кнопка обзора.
Кнопки прогрессивного раскрытия Используйте кнопку прогрессивного раскрытия для отображения или скрытия редко используемых параметров.
скрытие редко используемых параметров до тех пор, пока они не потребуются, называется прогрессивное раскрытие. Двойные шевроны используются для обозначения прогрессивного раскрытия информации, и они указывают в направлении, в котором будет происходить выявление или скрытие:
Снимок экрана: кнопка с дополнительными стрелками и стрелками вправо
После нажатия кнопки ее метка изменится, чтобы указать, что следующий щелчок будет иметь противоположный эффект:
Снимок экрана: кнопка с стрелками влево и
Дополнительные сведения и примеры см. в разделе " Прогрессивные элементы управления раскрытием информации".
Кнопки направления Используйте кнопку направления, чтобы указать направление, в котором будет выполняться действие.
В этом случае используется одна угловая скобка вместо двойного шеврона:
Снимок экрана: кнопки со стрелками вправо и влево
Кнопка направления указывает направление действия.

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

Общее

  • Отображение указателя занятости, если результат нажатия кнопки команды не является мгновенным. Без обратной связи пользователи могут предположить, что нажатие кнопки не произошло и снова щелкните.
  • Если одна и та же кнопка команды отображается в нескольких окнах, попробуйте использовать один и тот же текст метки и ключ доступа и найдите ее примерно в одном месте в каждом окне, когда это удобно.
  • Для кнопок с текстовыми метками используйте минимальную ширину кнопки и высоту стандартной кнопки. Дополнительные сведения см. в разделе "Рекомендуемые размеры и интервалы".
  • Для каждого окна кнопки команд будут одинаковой ширины. Если это непрактично, ограничьте количество различных ширин для кнопок команд с текстовыми метками до двух.
  • Когда другой элемент управления взаимодействует с кнопкой команды, например текстовым полем с кнопкой "Обзор", обозначают связь, поместив кнопку команды в одно из трех мест:
    • Справа от другого элемента управления, выровненного по верхнему краю.
    • Ниже и слева выровнены с другим элементом управления.
    • По вертикали между элементами управления, которые взаимодействуют (например, кнопки "Добавить" и "Удалить" между двумя полями списка взаимодействия).
  • Если несколько кнопок команд взаимодействуют с одинаковым элементом управления, вертикально сложите их справа от другого элемента управления или горизонтально поместите их по левому краю под элементом управления.
  • Если кнопки команд подчинены другим элементам управления, используйте приведенное выше размещение и отключите подчиненную кнопку команды, пока не будет выбран элемент управления " Выше".
  • Не используйте узкие, короткие или высокие кнопки команд с текстовыми метками , так как они, как правило, выглядят некорректно. Попробуйте работать с шириной и высотой по умолчанию.

Правильно:снимок экрана кнопки

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

Неправильно:снимок экрана с короткой кнопкой

В этом примере кнопка слишком мала.

Неправильно:снимок экрана с большой квадратной кнопкой

В этом примере кнопка имеет слишком много места вокруг метки.

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

Правильно:снимок экрана: команда поворота с изогнутой стрелкой

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

Правильно:снимок экрана адресной строки со значками и текстом

В этом примере стандартные символы объединяются с текстом для упрощения понимания

Неправильныйснимок экрана кнопки со значком x и отменой

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

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

Разделенные кнопки

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

Значения по умолчанию

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

схема размеров кнопки в пикселях и dlus

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

Метки

  • Пометка каждой кнопки команды.

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

    Снимок экрана: кнопки вверх, вниз и копирование

    В этом примере показаны графические кнопки; Эти кнопки помечены как "Назад", "Далее" и "Копировать".

  • Для кнопок короткого обзора (с меткой "...") внутренняя метка должна быть "Обзор".

  • Назначьте уникальный ключ доступа. Рекомендации см. в разделе "Клавиатура".

    Исключения:

    • Не назначайте клавиши доступа кнопкам "ОК" и "Отмена", так как ввод является ключом доступа для кнопки по умолчанию (обычно это кнопка "ОК"), а esc — ключом доступа для cancel. Это упрощает назначение других ключей доступа.
    • Не назначайте клавиши доступа для кнопок короткого обзора (с меткой "..."), так как они не могут быть назначены уникальным образом.
  • Предпочитать определенные метки вместо универсальных. В идеале пользователям не нужно ничего читать, чтобы понять метку. Пользователи гораздо чаще считывают метки кнопок команды, чем статический текст.

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

    Хорошо:

    Снимок экрана: кнопки

    В этом примере "ОК" и "Отмена" являются допустимыми, но неспецифичными метками.

    Лучше:

    Снимок экрана: кнопка

    В этом примере запись записи cd более конкретна, чем ok.

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

    снимок экрана: компакт-диск и кнопки компакт-диска не сгорают

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

  • Запустите метки с императивной командой и четко опишите действие, выполняемое кнопкой. Не используйте знаки препинания в конце метки.

    • Исключение: Следующие стандартные метки допустимы без глаголов: Advanced, Back, Details, Forward, Less, More, New, Next, No, OK, Options, Previous, Properties, Settings и Yes.
  • Хотя короткие метки предпочтительнее, используйте достаточно текста, чтобы объяснить команду достаточно. Используйте прямой объект (существительное после команды), если объект не очевиден из контекста. В идеале пользователям не нужно ничего читать, чтобы понять метку.

    Хорошо:

    Снимок экрана: кнопка с добавлением метки

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

    Лучше: (если добавить не ясно)

    Снимок экрана: кнопка с меткой добавления элементов

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

    Лучше всего: (если добавление или добавление элементов не ясно)

    Снимок экрана: кнопка с добавлением выбранных элементов

    В этом примере метка является самообъяснительной.

  • Используйте прописную букву в стиле предложений. Это лучше подходит для тона Windows и использования коротких фраз для кнопок команд.

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

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

    Снимок экрана: кнопка с меткой скачивания

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

    Снимок экрана: кнопка с меткой

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

    Теперь следует пометить только одну команду в потоке задач. Например, команда Download now не должна следовать другой команде Download now .

  • Не используйте более поздние метки кнопок, если это означает действие, которое не произойдет. Например, не используйте установку позже (в отличие от установки сейчас), если только эта команда не установит позже. Вместо этого используйте команду "Не устанавливать" или "Отмена".

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

    Снимок экрана: перезапуск сейчас и перезагрузка позже

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

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

    Неправильно: (если варианты на самом деле не являются расширенными)

    Снимок экрана: кнопка с расширенной меткой

    В этом примере Advanced вводит в заблуждение.

    Правильно:

    Снимок экрана: кнопка с меткой дополнительных параметров

    В этом примере метка является более точной и точной.

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

  • При вопросе используйте метки, соответствующие вопросу. Не используйте кнопку "ОК/Отмена", чтобы ответить на вопросы "Да/Нет".

    Правильно:

    Снимок экрана:

    В этом примере кнопки отвечают на вопрос.

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

    Снимок экрана: кнопки

    В этом примере кнопки не отвечают на вопрос.

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

    • Исключение: Графические метки не принимают многоточие.

    Правильно: (если отображается диалоговое окно "Параметры печати")

    Снимок экрана: кнопка печати с многоточием

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

  • Не используйте многоточие, если успешное завершение действия просто отображает другое окно. Следующие команды никогда не принимают многоточие: About, Advanced, Options, Properties, Help.

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

    Снимок экрана: кнопка

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

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

    Правильно:

    Другие цвета...

    Сведения о версии

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

  • Для кнопок обзора используйте кнопки короткого обзора (..."), если в окне более двух кнопок обзора. Всегда используйте короткую версию, если вы хотите отобразить кнопку обзора в сетке.

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

В следующей таблице показаны некоторые распространенные метки кнопок команды и их использование.

Метка кнопки Значение Ключ доступа
Назад
В мастерах и потоках задач перейдите на предыдущую страницу.
'B'
Обзор...
Отображение диалогового окна для поиска файла или объекта.
"B" или "r"
Параметры
Отображение вариантов, доступных пользователям для настройки программы.
'O'
Приостановить
Выполняющиеся диалоговые окна приостанавливают задачу.
"P"
Personalize
Настройте основной интерфейс, который имеет решающее значение для личной идентификации пользователя с помощью программы.
"P"
Параметры
Не используйте. Вместо этого используйте параметры.
Не применяется
Свойства
Отображение атрибутов и параметров объекта.
"P" или первый "r"
Сохранить
Сохраните группу параметров или сохраните файл или объект, используя его текущее имя.
'S'
Сохранить как...
Сохраните файл или объект с помощью указанного имени.
Второй "a"
Параметры
Не используйте. Вместо этого используйте параметры.
Не применяется
Устранение неполадок
Не используйте. Используйте конкретную ссылку справки.
Не применяется

Рекомендации по подписям кнопок фиксации (OK, Cancel, Yes/No, Close, Stop, Apply, Next, Finish, Done) см. в разделе "Текст пользовательского интерфейса".

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

При ссылке на кнопки команд:

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

Пример. Нажмите кнопку "Печать ", чтобы распечатать документ.