Вкладки

Примечание

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

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

Типичный набор вкладок.

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

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

Примечание

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

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

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

• Могут ли элементы управления удобно разместиться на одной странице достаточного размера? Если да, используйте одну страницу.
• Существует ли только одна вкладка? Если да, используйте одну страницу.
• Связаны ли вкладки друг с другом каким-то очевидным образом? В противном случае рассмотрите возможность разделения информации на отдельные окна связанных сведений.
• Если используется для параметров, являются ли параметры на разных страницах полностью независимыми? Повлияет ли изменение параметра на одной странице на другие страницы? Если они не независимы, используйте страницы задач или мастер .
• Являются ли вкладки в основном однорангами друг друга или существует иерархическая связь? Если это иерархия, рассмотрите возможность использования последовательного раскрытия или дочерних диалоговых окон для отображения связанных сведений.
• Используются ли вкладки для отображения шагов в задаче? Вкладки можно использовать для отображения шагов в рамках задачи, только если они представлены как шаги и есть очевидный альтернативный способ перехода к текстовому шагу, например кнопка Далее. В противном случае, если эти действия необходимы, используйте страницы в потоке страниц или в мастере. Если шаги являются необязательными, отобразите необязательные шаги с помощью модальных диалоговых окон .
• Различаются ли вкладки представления одних и того же данных? Если это так, рассмотрите возможность использования кнопки разделения или раскрывающегося списка для изменения представлений. Хотя вкладки можно эффективно использовать для изменения представлений, альтернативы являются более легкими.

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

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

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

Если вы делаете только одно...

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

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

Общие сведения

• Используйте горизонтальные вкладки, если:

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

• Используйте вертикальные вкладки, если:

  • Окно свойств содержит восемь или более вкладок.

  • Использование горизонтальных вкладок потребует более одной строки.

    

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

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

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

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

  

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

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

  

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

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

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

  

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

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

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

Значки

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

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

  

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

  Исключение: Если места недостаточно для отображения значимых меток, можно использовать четко распознаваемые значки:

  Правильно:

  

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

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

Шаблон динамической поверхности окна

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

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

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

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

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

  

  В этом примере вкладка Расположения файлов неправильно отключена, если в качестве редактора электронной почты используется microsoft Word. Вместо того чтобы отключать эту вкладку, ее следует удалить, так как пользователи не будут ожидать просмотра или изменения расположений файлов в этом контексте.

• Если вкладка не применяется к текущему контексту и пользователи могут ожидать от нее следующего:

  • Отображение вкладки.
  • Отключите элементы управления на странице.
  • Включите текст, объясняющий, почему элементы управления отключены.

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

  

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

Шаблоны нескольких представлений и документов

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

Шаблон эксклюзивных параметров

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

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

  

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

  Правильно:

  

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

Метки

• Вкладки меток на основе их шаблона. Используйте существительные, а не глаголы, не завершая знаки препинания. Дополнительные сведения см. в предыдущих рекомендациях по шаблонам.
• Используйте выделение прописных букв, как в предложении.
• Не назначайте ключ доступа. Вкладки доступны с помощью сочетаний клавиш (CTRL+TAB, CTRL+SHIFT+TAB, CTRL+PgUp, CTRL+PgDn). Существует нехватка правильных вариантов ключей доступа, поэтому отсутствие назначения клавиш доступа вкладкам упрощает их назначение другим элементам управления.

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

При обращении к вкладкам:

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

Пример. В меню Сервис выберите пункт Параметры, а затем откройте вкладку Вид .