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


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

Примечание.

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

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

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

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

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

Примечание.

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

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

Чтобы решить, рассмотрите следующие вопросы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Общие

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

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

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

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

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

Неправильно: Снимок экрана: большая, квадратная кнопка

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

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

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

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

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

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

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

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

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

Разделять кнопки

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

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

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

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

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

Наклейки

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

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

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

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

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

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

    Исключения.

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

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

    Хорошо:

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

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

    Лучший:

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

    В этом примере cd burn cd является более конкретным, чем OK.

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

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

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

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

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

    Хорошо:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    снимок экрана перезапуска и перезагрузки позже

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

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

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

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

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

    Правильное.

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

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

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

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

    Правильное.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Правильное.

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

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

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

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

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

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

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

Рекомендации по меткам кнопки фиксации (ОК, отмена, да или нет, закрыть, остановить, применить, далее, готово), см. в разделе "Текст пользовательского интерфейса".

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

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

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

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