Ленты Windows 7

Примечание

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

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

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

screen shot of a ribbon

Типичная лента.

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

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

Ленты были первоначально представлены с Microsoft Office 2007 года. Сведения о том, почему Office необходимо использовать ленту и множество проблем с помощью ленты, см. в разделе "История ленты".

Примечание

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

Это правильный пользовательский интерфейс?

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

Тип программы

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

Проблемы с обнаружением и обучением

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

Характеристики команд

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

Масштабирование команд

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

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

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

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

screen shot of a ribbon with a calculator

Пожалуйста, не делайте этого!

Семь самых важных вещей

  1. Выберите решение команды, подходящее для типа программы. Использование ленты должно сделать программу проще, эффективнее и проще использовать никогда не наоборот. Если использование ленты не подходит, рассмотрите возможность использования расширенных команд.
  2. Не недооценивайте проблему создания эффективной ленты. Не ожидайте, что это простой порт существующих строк меню и панелей инструментов. И не примите за должное, что использование ленты автоматически делает вашу программу лучше. Готовность зафиксировать время и усилия, необходимые для изменения команды, является важным фактором при выборе ленты.
  3. Сделайте команды обнаруживаемыми. Выберите структуру вкладок, которая имеет четкое, очевидное уникальное сопоставление между командами и описательными вкладками, в которых они находятся. Пользователи должны иметь возможность быстро и уверенно определять, какая вкладка имеет нужную команду, и редко выбирайте неправильную вкладку.
  4. Сделайте команды понятными. Пользователи должны понимать влияние команды на основе метки, значка, подсказки и предварительного просмотра. Им не нужно экспериментировать или читать раздел справки, чтобы узнать, как работает команда.
  5. Эффективнее использовать команды:
    • Пользователи должны проводить большую часть времени на вкладке "Главная".
    • Пользователи редко должны изменять вкладки во время распространенных задач.
    • Если окно развернуто и пользователи находятся на правильной вкладке, наиболее часто используемые команды имеют наибольший визуальный акцент, и пользователи могут вызывать их одним щелчком мыши. Пользователи могут выполнять все другие команды на вкладке с не более чем четырьмя щелчками мыши.
    • Пользователям не нужно открывать диалоговые окна, чтобы предоставлять команды и изменять атрибуты в общих задачах.
  6. Помогите пользователям уверенно выбирать команды и параметры и свести к минимуму потребность в пробной версии и ошибке. При необходимости используйте команды, ориентированные на результаты, часто в виде коллекций и динамических предварительных просмотров.
  7. Убедитесь, что лента хорошо масштабируется от самых больших размеров окна до наименьшего.

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

Адаптация ленты в существующей программе

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

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

Природа лент

По сравнению с традиционными панелями меню и панелями инструментов ленты имеют следующие характеристики:

  • Один пользовательский интерфейс для всех команд. Панели меню являются исчерпывающими и простыми в изучении, а панели инструментов эффективны и прямые, но почему бы не использовать дополнительное пространство экрана для создания единого пользовательского интерфейса команд, которые выполняют все эти задачи? При использовании только одного пользовательского интерфейса лентам не требуется, чтобы пользователи узнали, какую команду они ищут.
  • Видимый и понятный. Команды строки меню являются самообъяснительными с помощью меток, но скрыты в представлении большей части времени. Чтобы сохранить экранное пространство, кнопки панели инструментов в основном представлены значками, а не метками (хотя некоторые кнопки панели инструментов используют оба) и зависят от подсказок, когда значок не является саморазумительным. Однако пользователи обычно знают значки только для наиболее часто используемых команд.
  • При отображении большинства команд с помеченными значками команды ленты отображаются и поясняются, а также используются подсказки только для предоставления дополнительных сведений. Нет необходимости идти в другом месте (например, справка), чтобы понять команду.
  • Группирование с метками. Хотя категории меню помечены, группы в раскрывающемся меню не указываются и указываются только с разделителем без меток. Группы на панелях инструментов также указываются с разделителями без меток.
  • Упорядочив команды в помеченных группах, ленты упрощают поиск команд и их назначение.
  • Модальный, но не иерархический. Строки меню масштабируется путем создания иерархии команд. Меню с несколькими элементами могут использовать один или несколько уровней подменю для предоставления дополнительных команд.
  • Для команд ленты требуется больше места, чем команды панели инструментов, поэтому для масштабирования используются вкладки. Использование вкладок делает ленты модальными, требуя, чтобы пользователи иногда изменяли режимы для поиска команд. Однако на вкладке большинство команд являются прямыми или используют одну кнопку разделения или кнопку меню, а не иерархию.
  • Прямое и немедленное. Команда прямая, если она вызывается одним щелчком мыши (т. е. без перехода по меню) и немедленно, если она вступает в силу немедленно (то есть без диалоговых окон для сбора дополнительных входных данных). Команды строки меню всегда непрямы и часто не сразу. Как и панели инструментов, большинство команд ленты предназначены для прямого и немедленного выполнения, при этом наиболее часто используемые команды вызываются одним щелчком мыши и не требуются диалоговые окна для сбора дополнительных входных данных.
  • Просторные. Панели меню и панели инструментов в первую очередь предназначены для эффективного пространства. Для предоставления преимуществ лентам может потребоваться больше вертикального пространства, что примерно эквивалентно строке меню плюс три строки панелей инструментов. В том случае, что у нескольких программ есть три или более строк панелей инструментов, ленты обычно занимают больше места, чем традиционные пользовательские интерфейсы для команд.
  • Имеет кнопку "Приложение" и панель быстрого доступа. Лента всегда отображается с кнопкой "Приложение" и панелью быстрого доступа. Это позволяет пользователям получать доступ к файлам и часто используемым командам без изменения вкладок и повышает согласованность между программами.
  • Минимальная настройка. Хотя в строках меню есть фиксированная презентация, многие панели инструментов довольно настраиваются, что позволяет пользователям задавать расположения, размеры и содержимое. Сама лента не настраивается, но панель быстрого доступа предоставляет ограниченную настройку.
  • Улучшена специальные возможности клавиатуры. Строки меню имеют отличную доступность клавиатуры, так как нажатие клавиши ALT напрямую дает фокус ввода в строке меню. Однако такой механизм для панелей инструментов отсутствует, так как они совместно используют навигацию с помощью клавиатуры с содержимым окна. Следовательно, пользователи должны перейти на панель инструментов с помощью клавиши TAB (которая получает последнюю остановку табуляции), а затем перейти к определенной команде с помощью клавиш со стрелками.

В отличие от этого, ленты обеспечивают расширенные специальные возможности клавиатуры с помощью подсказок клавиш, как правило, с трехэтапным процессом:

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

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

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

    Этот подход является весьма наглядным. Он также более гибкий, что позволяет лучше масштабироваться и иметь более mnemonic key assignments.

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

Природа расширенных команд

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

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

    Правильно:

    screen shot of a character-formatting ribbon

    Эти команды очень хорошо известны, поэтому им не нужны метки.

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

    screen shot of a ribbon with seldom-used icons

    Эти неразборчивые значки требуют меток для расширенных команд.

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

    screen shot of one large and three small buttons

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

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

    screen shot of wide ribbon with equal-size buttons screen shot of small ribbon with mixed buttons

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

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

    screen shot of save as command and its options

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

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

    screen shot of drop-down menu options with icons

    В этих примерах при нажатии кнопки меню отображается список вариантов, отображающих их эффект.

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

    screen shot of results of formatting choices

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

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

    screen shot of large tooltip with text and graphic

    Расширенные подсказки кратко объясняют связанные с ними команды.

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

Лента всегда имеет кнопку "Приложение" и панель быстрого доступа

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

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

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

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

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

Организация и возможность обнаружения

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

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

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

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

screen shot of indirect path to borders command

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

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

Вкладки

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

Для нестандартных вкладок рассмотрите следующие проблемы:

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

Вкладка "Главная" является исключением из этих соображений. Хотя вам не нужно иметь вкладку "Главная", большинство программ должны. Вкладка "Главная" является первой вкладкой и содержит наиболее часто используемые команды. Если вы часто использовали команды, которые не помещаются на другие вкладки, вкладка "Главная" — это подходящее место для них.

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

Группы

Разделение команд на группы структурирует команды на связанные наборы. Метка группы объясняет общую цель своих команд.

Существуют различные факторы, которые следует учитывать при определении групп и их презентации.

  • Стандартное группирование. Хотя существуют значительные различия в командах в разных программах, существуют стандартные группы , которые являются общими для многих программ. Наличие этих команд с одинаковыми именами и похожими расположениями значительно улучшает возможности обнаружения.
Правильно Неверно.
screen shot of zoom separated from editing group
Группа команд редактирования включает все команды редактирования, но не включает команду Zoom.
screen shot of zoom included in editing group
Команда Zoom не является командой редактирования, но находится в группе редактирования.
  • Степень детализации. Некоторые структуры хороши, но слишком много структуры затрудняет поиск команд. Если имена групп являются универсальными, возможно, недостаточно детализации. Если есть группы только с одной или двумя командами, вероятно, у вас слишком много (хотя коллекция на ленте без каких-либо других команд в группе является приемлемой).
Правильно Неверно.
screen shot of zoom separated from editing group
Группа команд редактирования включает все команды редактирования
screen shot of editing group split into two groups
Группа команд редактирования разделена на разделы, которые слишком детализированы. Избегайте групп с одной или двумя командами.
  • Имена Хорошие имена групп объясняют назначение своих команд. Если имена групп нет, передумайте имя или группирование. Если вы не можете определить понятное описательное имя, вероятно, это связано с тем, что группа не хорошо разработана.
Правильно Неверно.
screen shot of commands divided into four groups
Используйте имена групп, которые достаточно конкретные, чтобы описать команды, содержащиеся в группе.
screen shot of format group with several commands
Это имя группы слишком расплывчато, чтобы быть полезным. Лучший подход заключается в реорганизации этих команд в более конкретные группы.
  • Заказ. Люди читают в порядке слева направо (в западных культурах), поэтому вы можете думать, что группы на крайнем левом краю являются наиболее заметными. Однако выделенное имя вкладки и содержимое окна, как правило, выступает в качестве центральных точек, поэтому группы в центре вкладки обычно получают больше внимания, чем левая группа. Поместите наиболее часто используемые группы в наиболее известные расположения и убедитесь, что на вкладке есть логический поток для групп.

screen shot of clipboard group on far left

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

screen shot of tracking group on review tab

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

  • Единообразия. Команды могут быть трудно распознать, когда презентация команды выглядит одинаково. Использование значков с различными фигурами и цветами, группами с различными форматами и командами с различными размерами упрощает распознавание групп команд пользователями. Команды должны иметь однородное изменение размера, только если лента масштабируется до меньших размеров.
Правильно Неверно.
screen shot of group with different-sized icons
Использование различных размеров значков для улучшения возможности повторного использования
screen shot of group with same-sized icons
Эти команды слишком похожи друг на друга, так как они имеют одинаковый размер.

Предварительный просмотр

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

Ниже приведены некоторые из различных типов предварительных версий, которые можно использовать:

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

screen shot of font drop-down list

В этом примере раскрывающийся список "Шрифт" показывает каждое имя шрифта с помощью самого шрифта.

screen shot of watermark thumbnail gallery

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

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

screen shot of paragraph styles gallery

В этом примере Microsoft Word изменяет коллекцию стилей в соответствии с текущими стилями.

screen shot of text formatting command buttons

В этом примере Word изменяет цвет выделения текста и команды цвета шрифта, чтобы указать их текущий эффект.

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

screen shot of page color command color selector

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

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

Масштабирование ленты

Масштабирование панели инструментов очень простое: если окно слишком узкое для отображения панели инструментов, панель инструментов отображает то, что подходит, и делает все остальное доступной с помощью кнопки переполнения. Цель расширенных команд — воспользоваться всеми преимуществами доступного пространства, поэтому масштабирование ленты требует большей работы по проектированию. Размер ленты по умолчанию отсутствует, поэтому не следует проектировать ленту с определенной шириной. Вам нужно проектировать макеты с широким диапазоном ширины и понимать, что любой из них может быть одним из них, который будет видеть большинство пользователей. Масштабирование — это основная часть проектирования ленты, а не последний шаг. При проектировании вкладки укажите различные макеты для каждой группы (до трех), а также сочетания, которые можно использовать вместе. На ленте отображается наибольшее допустимое сочетание, которое соответствует текущему размеру окна.

screen shot of format commands in overflow menu Панели инструментов масштабируется с помощью кнопки переполнения.

screen shot of ribbons with various widths Размер ленты по умолчанию отсутствует. Наименьший размер — это один значок всплывающей группы.

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

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

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

Использование вкладок

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

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

Контекстные вкладки

  • Используйте контекстную вкладку, чтобы отобразить коллекцию команд, релевантных только в том случае, если пользователи выбирают определенный тип объекта. Если есть только несколько часто используемых команд, это может быть удобнее и стабильнее использовать обычную вкладку и просто отключить команды, когда они не применяются.
  • screen shot of cut and copy commands dimmed
    Лучше отключить распространенные команды, такие как Вырезать и копировать, чем использовать контекстную вкладку.
  • Включите только команды, относящиеся к конкретному типу объекта. Не помещайте команды только на контекстную вкладку, если пользователям может потребоваться их без предварительного выбора объекта.
  • Включите команды, которые часто используются при работе с определенным типом объекта. Поместите часто используемые общие контекстные команды в контекстные меню и мини-панели инструментов, чтобы избежать переключения вкладок во время часто выполняемых задач. Кроме того, рекомендуется поместить общие команды на контекстную вкладку, если это позволяет избежать частого переключения вкладок. Но не переусердствовайте. Не пытайтесь включить каждую команду, которая может потребоваться пользователю при работе с объектом.
  • screen shot of borders command on design tab
    В этом примере команда "Границы" включена на вкладку "Конструктор", чтобы избежать частого переключения вкладок во время часто выполняемых задач.\
  • Выберите цвет контекстной вкладки, отличный от отображаемых контекстных вкладок. Тот же набор вкладок может появиться позже, используя другой цвет, чтобы достичь этого, но по возможности старайтесь использовать согласованные назначения цветов в вызовах.
  • Выбор контекстной вкладки автоматически помогает обнаруживать, улучшает восприятие стабильности и сокращает необходимость переключения вкладок. Автоматически выберите контекстную вкладку, когда:
    • Пользователь вставляет объект. В этом случае выберите первую контекстную вкладку в наборе.
    • Пользователь дважды щелкает объект. В этом случае выберите первую контекстную вкладку в наборе.
    • Пользователь выбрал контекстную вкладку, щелкнул объект, а затем сразу же щелкнул объект того же типа. В этом случае вернитесь на ранее выбранную контекстную вкладку.
  • При удалении контекстной вкладки, которая является активной, сделайте вкладку "Главная" или первую вкладку активной. Это выглядит наиболее стабильным.
  • Используйте модальную вкладку, чтобы отобразить коллекцию команд, применяемых с определенным временным режимом, и ни одна из основных вкладок не применяется. Если применяются некоторые основные вкладки, используйте контекстную вкладку и отключите команды, которые не применяются. Так как модальные вкладки очень ограничены, их следует использовать только в том случае, если нет лучшей альтернативы.
  • screen shot of print preview tab
    Предварительный просмотр — это часто используемая модальная вкладка.
  • Чтобы закрыть модальную вкладку, поместите команду режима> закрытия <в качестве последней команды на вкладке. Используйте значок закрытия, чтобы упростить поиск команды. Предоставьте режим в команде, чтобы предотвратить путаницу с тем, что закрывается.
  • screen shot of close print preview button
    В этом примере явное присвоение метки команде Close с помощью режима устраняет любые сомнения в том, что закрывается.
  • Чтобы закрыть модальную вкладку, также переопределите кнопку "Закрыть" в строке заголовка окна, чтобы закрыть режим, а не программу. Тестирование пользователей показало, что многие пользователи ожидают этого поведения.

Стандартные вкладки ленты

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

Обычные вкладки

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

Большинству программ не нужны вкладки "Рецензирование" и "Разработчик".

Стандартные контекстные вкладки

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

Если у вас есть контекстные команды, связанные с форматом, дизайном и макетом, но недостаточно для нескольких вкладок, просто предоставьте вкладку "Формат".

Стандартные группы

  • При практическом применении используйте стандартные группы. Наличие общих команд с одинаковыми именами и аналогичными расположениями значительно улучшает возможности обнаружения. См. стандартные группы лент далее в этой статье.
  • Добавьте новую группу , если:
    • Ее команды тесно связаны и могут быть точно описаны меткой группы. Добавление группы должно помочь упростить поиск своих команд, а не сложнее.
    • Ее команды имеют более слабую связь с командами в других группах. Хотя все команды на вкладке должны быть строго связаны, некоторые связи команд сильнее других.
    • Группа имеет достаточно команд, чтобы оправдать наличие дополнительного места для просмотра. Цель для 3-5 команд для большинства групп. Избегайте групп с использованием только 1–2 команд, хотя коллекция на ленте без каких-либо других команд в группе приемлема. Наличие нескольких групп с одной командой предполагает слишком много структуры или отсутствия сплоченности команд.
  • Не переупорядочение путем добавления групп, в которых они не нужны.
  • Рассмотрите возможность разделения группы , если:
    • screen shot of disorganized command group
      Группа имеет множество команд разных размеров и потребностей организации.
    • screen shot of two long paragraph group names
      Группа имеет команды, которые значительно выигрывают от добавления дополнительных меток.
  • Поместите наиболее часто используемые группы в наиболее известные расположения и убедитесь, что на вкладке есть логический порядок групп.
  • Оптимизируйте структуру группы, чтобы пользователи быстро и уверенно нашли команды. Все остальные рекомендации являются дополнительными.
  • Не масштабируйте группы, содержащие одну кнопку, на значок всплывающей группы. При уменьшении масштаба оставьте их одной кнопкой.
  • Используйте не более семи групп. Если существует более семи групп, становится сложнее определить, какая группа имеет команду.

Стандартные группы ленты

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

Главная вкладка

  • буфер обмена
  • Шрифт
  • Paragraph
  • Редактирование

Вкладка «Вставить»

  • Таблицы
  • Рисунки

Вкладка "Макет страницы"

  • Темы
  • Параметры страницы
  • Упорядочить

Вкладка "Рецензирование"

  • Проверка правописания
  • Комментарии

Вкладка «Вид»

  • Представления документов
  • Показать или скрыть
  • Zoom
  • Окно

Команды

  • screen shot of line numbers command on ribbon
    Воспользуйтесь преимуществами возможности обнаружения и масштабируемости лент, предоставляя все часто используемые команды. При необходимости переместите часто используемые команды из диалоговых окон на ленту, особенно те, которые, как известно, трудно найти. В идеале пользователи должны иметь возможность выполнять общие задачи без использования диалоговых окон.

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

    • screen shot of mini toolbar and context menu
      Используйте контекстные меню и мини-панели инструментов для локальных контекстных команд.
    • Перемещение (или сохранение) редко используемых команд в диалоговых окнах. Используйте средства запуска диалоговых окон для доступа к этим командам. Вы по-прежнему можете использовать диалоговые окна с лентами! Просто попробуйте уменьшить потребность в использовании во время распространенных задач.
    • Исключите избыточные, редко используемые функции.

Уровень представления

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

  • В группе поместите команды в логический порядок, предоставляя предпочтение наиболее часто используемым командам. В целом команды должны иметь логический поток, чтобы упростить их поиск, при этом наиболее часто используемые команды появляются в первую очередь. Как правило, команды со значками пикселей 32x32 отображаются перед командами со значками 16 x 16 пикселей для упрощения сканирования между группами.

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

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

  • screen shot of font and paragraph groups
    Рекомендуется использовать группы в стиле панели инструментов для наборов строго связанных хорошо известных команд, которые не требуют меток. Это позволяет представить множество команд в компактном пространстве, не затрагивая возможности обнаружения и простоты обучения. Чтобы быть настолько хорошо известными, такие команды часто используются, мгновенно распознаются и поэтому обычно находятся на вкладке "Главная".

  • Используйте значки пикселей 32x32 для наиболее часто используемых и важных команд с метками. При уменьшении масштаба группы сделайте эти команды последними для преобразования в значки пикселей 16x16.

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

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

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

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

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

    Правильно Неверно.
    screen shot of insert note and delete note
    Отключить команды, если они недоступны
    screen shot of insert note, no delete note
    Не скрывайте команды, даже если они недоступны
  • Предпочитать прямые элементы управления. Команда прямая, если она вызывается одним щелчком мыши (т. е. без перехода по меню). Однако, за исключением коллекций на ленте, прямые элементы управления не поддерживают предварительную версию Live, поэтому потребность в предварительной версии Live также является фактором.

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

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

    • Кнопки команд, флажки, переключатели и коллекции на месте. Они всегда прямые.
    • Разделение кнопок. Прямая для наиболее распространенной команды, но непрямая для вариантов команд.
    • Кнопки меню. Это непрямые, но присутствуют многие команды, которые легко найти.
    • Текстовые поля (с элементами управления спином). Ввод текста обычно требует больше усилий, чем другие типы элементов управления.
  • screen shot of ribbon with only menu buttons
    Если лента состоит в основном из кнопок меню при отображении в полном размере, вы также можете использовать строку меню.

  • Предпочитать немедленные команды.screen shot of split print button and its submenu
    Команда немедленно вступает в силу (то есть без диалоговых окон для сбора дополнительных входных данных). Если для команды могут потребоваться входные данные, рассмотрите возможность использования кнопки разделения с немедленной командой в части кнопки и командами, которым требуются входные данные в подменю.

Коллекции

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

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

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

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

Эскизы в коллекциях

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

  • Для коллекций на ленте используйте эскизы 16x16, 48x48 или 64x48 пикселей.
  • Для коллекций раскрывающихся списков используйте эскизы 16x16, 32x32, 48x48, 64x48, 72x96, 96x72, 96x96 или 128x128 пикселей.
  • Все элементы коллекции должны иметь одинаковый размер эскиза.

Для коллекций на ленте:

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

Для коллекций раскрывающихся списков:

  • Отображение коллекции из поля со списком, раскрывающегося списка, кнопки разделения или кнопки меню.
  • Если пользователь щелкает главное окно, чтобы закрыть раскрывающуюся коллекцию, просто закройте коллекцию без выбора или изменения содержимого главного окна.
  • Если коллекция имеет множество вариантов и некоторые варианты редко используются, упростите коллекцию по умолчанию, сосредоточив внимание на часто используемых вариантах. Для остальных команд укажите соответствующую команду в нижней части раскрывающегося списка коллекции.
    • Если в команде отображается список дополнительных вариантов, назовите его "Дополнительные singular feature name параметры..."
    • Если команда представляет диалоговое окно, позволяющее пользователям создавать собственные настраиваемые параметры, назовите его "Custom feature name..."
  • Упорядочение вариантов по группам, если это делает просмотр более эффективным.
  • screen shot of symbols gallery and filters
    Если коллекция содержит много элементов, рассмотрите возможность добавления фильтра, чтобы помочь пользователям найти варианты более эффективно. Чтобы избежать путаницы, сначала отобразите коллекцию без фильтра. Однако большинству коллекций не требуется фильтр, так как они не должны иметь столько вариантов выбора, и использование групп должно быть достаточно.

Предварительные версии команд

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

Значки

  • screen shot of drop-down list and check boxes
    Предоставьте значки для всех элементов управления лентой, кроме раскрывающихся списков, флажков и переключателей. Для большинства команд требуются значки 32x32 и 16x16 пикселей (на панели быстрого доступа используются только значки 16 x 16 пикселей). Коллекции обычно используют значки пикселей 16x16, 48x48 или 64x48 пикселей.

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

  • Убедитесь, что значки ленты четко видны цвету фона ленты. Всегда оценивать значки ленты в контексте и в режиме высокой контрастности.

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

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

    Правильно Неверно.
    screen shot of blue eye dropper and yellow pencil
    Используйте фигуру и цвет для упрощения различения значков.
    screen shot of blue eye dropper and blue pencil
    Значки с одинаковым цветом трудно отличить
  • screen shot of comments command in popup container
    Рассмотрите возможность создания значков всплывающих групп, поместив значок 16x16 пикселей наиболее заметной команды в группе в контейнер визуального элемента 32x32 пикселей. Вам не нужно создавать различные значки для всплывающих групп.

  • screen shot of text formatting command buttons
    Если это полезно, измените значок, чтобы отразить текущее состояние. Это особенно полезно для кнопок разделения, эффект по умолчанию которых может измениться.

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

Правильно Неверно.
screen shot of two-dimensional command icons
Используйте двумерные значки.
screen shot of three-dimensional command icons
Не используйте трехмерные значки.

Расширенные подсказки

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

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

    screen shot of tooltip that repeats command name

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

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

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

    screen shot of tooltip for strikethrough command

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

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

    screen shot of tooltip and graph for insert chart

    В этом примере изображение подсказки иллюстрирует эффект команды.

Рекомендации по маркировке см. в разделе "Улучшенные метки всплывающих подсказок".

Ключи доступа и подсказки ключей

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

Клавиши доступа для команд раскрывающегося меню указываются подчеркнутым символом. Они отличаются от клавиш доступа к меню следующими способами:

  • Можно использовать два ключа доступа к символам. Например, FP можно использовать для доступа к команде "Формат по образцу".

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

  • Назначьте ключи доступа всем вкладкам и командам ленты. Единственное возможное исключение — для команд, поступающих из устаревших надстроек.

  • Для кнопки "Приложение" и панели быстрого доступа:

    • Назначьте F кнопке "Приложение". Это назначение используется из-за схожести кнопки "Приложение" с традиционным меню "Файл".
    • screen shot of command keytips on a ribbon
      Для панели быстрого доступа и недавно использовавшихся списков файлов назначьте ключи доступа числовым образом.
  • screen shot showing keytips for tabs
    Для вкладок:

    • Назначьте H домашней странице.
    • Начиная с наиболее часто используемых вкладок назначьте первую букву метки.
    • Для всех вкладок, которые не могут быть назначены первой букве, выберите отличительный консонант или гласную букву в метке.
    • Для программ, которые использовались для поддержки строк меню, старайтесь поддерживать совместимость ключей доступа в максимальной степени практически. Избегайте назначения различных значений для доступа к ключам из устаревших категорий меню. Например, если в устаревшей версии строки меню программы есть меню "Изменить", старайтесь использовать клавишу доступа E к эквивалентной вкладке. Если нет эквивалентной вкладки, не назначайте клавишу доступа E для любой вкладки, чтобы предотвратить путаницу.
  • screen shot showing keytips for a ribbon
    Для команд ленты, меню и подменю:

    • Назначьте уникальные сочетания клавиш доступа на вкладке. Можно повторно использовать сочетания клавиш доступа на разных вкладках.
    • По возможности назначьте стандартные ключи доступа для часто используемых команд. См. таблицу стандартных ключей доступа.
    • Для других команд:
      • Для наиболее часто используемых команд выберите буквы в начале первого или второго слова метки, предпочтительно первую букву.
      • Для менее часто используемых команд выберите буквы, которые являются отличительным консонантом или гласным в метке, например "x" в "Exit".
      • Для наименее часто используемых команд и средства запуска диалоговых окон при необходимости используйте две буквы.
      • Для меню и подменю используйте одну букву, чтобы уменьшить количество нажатий клавиш, необходимых для выполнения команды.
      • Не используйте ключи доступа, начиная с J, Y или Z, так как они используются для контекстных вкладок, неназначенных подсказок ключей и групп всплывающих окон.
  • screen shot of keytips for pop-up groups
    Для всплывающих групп:

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

Рекомендации по сочетанию клавиш см. в разделе "Клавиатура".

Кнопки приложения

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

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

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

    • Создать
    • Открыть
    • Сохранить
    • Сохранить как...
    • Печать...
    • Быстрая печать
    • Предварительный просмотр печати
    • Закрыть
    • Параметры
    • Выход
  • Резервировать команды, принадлежащие меню приложения только для этого меню. Не размещайте их избыточно на вкладках.

  • Для каждого пункта меню укажите:

    • Метка с именем команды.
    • Значок пикселя 32x32.
    • Краткое описание. Убедитесь, что описание может отображаться не более двух строк текста.
  • screen shot of tooltip documenting shortcut key
    Используйте подсказки для документирования сочетаний клавиш. В отличие от обычных меню, меню приложений не документировать сочетания клавиш с помощью меток.

Панели быстрого доступа

  • Используйте панель быстрого доступа для предоставления доступа к часто используемым командам. Команды можно выполнять с помощью кнопки "Приложение" или ленты.
  • Всегда предоставляйте панель быстрого доступа при использовании ленты. Сделайте это, даже если на ленте есть одна вкладка; это обеспечивает согласованность между программами.
  • Предварительно заполните панель быстрого доступа с часто используемыми командами в меню приложения. Укажите сохранение и отмену, если программа поддерживает их, и откройте и распечатайте, если они поддерживаются и часто используются.
  • В меню "Настройка панели быстрого доступа" предоставьте до 12 наиболее часто используемых немедленных команд. Немедленные команды не требуют дополнительных входных данных, прежде чем они вступают в силу, и поэтому хорошо подходят для панели быстрого доступа. Хотя это могут быть любые немедленные команды, предпочитайте эти команды, которые не находятся на вкладке "Главная", так как пользователи с большей вероятностью выбирают эти команды.
  • В меню "Настройка панели быстрого доступа", если есть пара связанных команд, укажите обе команды независимо от частоты. Распространенные пары: Open/Close, Back/Forward и Undo/Redo.
  • В диалоговом окне "Настройка панели быстрого доступа" предоставьте способ добавления любой команды. Укажите фильтр популярных команд, отображающий наиболее часто используемые команды, и выберите этот фильтр по умолчанию.

Средства запуска диалоговых окон

  • screen shot of font dialog box and font group
    Предоставьте группу с помощью средства запуска диалоговых окон, если есть связанное диалоговое окно с редко используемыми командами и параметрами. Диалоговое окно должно содержать все команды в группе, а также другие не совсем разные наборы команд или те же команды, что и группа.

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

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

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

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

    screen shot of reminder sound dialog box

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

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

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

    screen shot of font dialog box

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

Подписи

Метки вкладок

  • Пометка всех вкладок.
  • При практическом использовании стандартных вкладок ленты.
  • Предпочитайте краткие, одно слово метки. Хотя метки с несколькими словами приемлемы, они занимают больше места и труднее локализовать.
  • Выберите понятные имена вкладок, которые четко и точно описывают их содержимое. Имена должны быть конкретными, но не слишком конкретными. Имена вкладок должны быть достаточно предсказуемыми, чтобы пользователи не были удивлены их содержимым. Обратите внимание, что вкладка "Главная" обычно называется, так как она используется для наиболее часто используемых команд.
  • Не используйте имена групп, такие как "Базовый" и "Дополнительно". Им требуется, чтобы пользователи определяли, является ли требуемая команда базовой или расширенной.
  • Выберите имена вкладок, которые отражают их назначение. Рассмотрим цели или задачи, связанные с вкладкой.
  • Выберите имена вкладок, которые четко отличаются от всех остальных имен вкладок.
  • Используйте существительные или глаголы для вкладок. Имена вкладок не требуют параллельного выражения, поэтому выберите лучшую метку независимо от того, является ли это существительным или глаголом.
  • Не используйте gerunds (имена, заканчивающиеся на "-ing"). Используйте глагол, из которого производен герунд. (например, используйте "Рисование" вместо "Рисование".)
  • Избегайте имен вкладок с одинаковыми начальными буквами, особенно смежными вкладками. При уменьшении масштаба ленты эти имена вкладок будут иметь тот же усеченный текст.
  • Предпочитать уникальные имена. Однако можно использовать имя pural, если единственное имя неловкое.
  • Используйте прописную букву в стиле заголовка.
  • Не используйте знаки препинания в конце метки.

Контекстная вкладка и набор вкладок

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

Метки групп

  • Пометка всех групп , если группа не содержит одну команду, а метки групп и команд будут одинаковыми.

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

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

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

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

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

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

  • Предпочитать уникальные имена. Однако можно использовать имя pural, если единственное имя неловкое.

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

  • Не используйте знаки препинания в конце метки.

Метки команд

  • Пометка всех команд. Наличие явных текстовых меток помогает пользователям находить и понимать команды. Исключение: Команда может быть не помечена, если его значок очень хорошо известен, и пространство находится на уровне "Премиум". Скорее всего, команды без меток будут находиться на вкладке "Главная". В этом случае присвойте свойству Name соответствующую текстовую метку. Это позволяет специальным технологиям, таким как средства чтения с экрана, предоставлять пользователям альтернативные сведения об рисунке.
  • Для кнопок команд используйте краткие понятные метки. По возможности используйте одно слово; максимум четырех слов.
  • Для раскрывающихся списков, если список всегда имеет значение, используйте текущее значение в качестве метки.
  • screen shot of search address books prompt
    Если редактируемый раскрывающийся список не имеет значения, используйте запрос.
  • Раскрывающиеся списки, которые не являются самоуяснительными или редко используются, требуют явной метки. Поместите двоеточие в конец метки.
  • screen shot of automatically after: [seconds] <Br.>Для текстовых полей используйте явную метку. Поместите двоеточие в конец метки.
  • Используйте выделение прописных букв, как в предложении. Это более подходит для Windows тона.
  • Запустите метку с императивной командой. Если она не совпадает с именем вкладки или группы или общими командами, такими как Show, Create, Insert или Format.
  • Не используйте знаки препинания в конце метки.
  • Чтобы сохранить пространство, не размещайте многоточие на метках команд ленты. Однако многоточие используется командами в кнопках приложения и раскрывающихся меню.

Улучшенные метки всплывающих подсказок

  • При необходимости используйте заголовок, чтобы присвоить имя команды и его сочетание клавиш.
  • Для заголовка не используйте конечные знаки препинания.
  • Запустите описание с помощью команды. Используйте описание, чтобы помочь пользователям определить, является ли определенная функция нужной. Описание должно быть фразой, чтобы завершить предложение "Это правильная функция, которую следует использовать, если вы хотите...".
  • Оставьте описание коротким. Получите право на точку. Длинный текст не рекомендует читать.
  • screen shot of paste split button and two tooltips
    Для разбиения кнопок используйте другую подсказку, чтобы объяснить меню разделенных кнопок.
  • Используйте необязательное дополнительное описание, чтобы объяснить, как использовать элемент управления. Этот текст может содержать сведения о состоянии элемента управления (включая причину его отключения), если сам элемент управления не указывает состояние. Оставьте этот текст коротким и используйте раздел справки для более подробных объяснений.
  • screen shot of tooltip with graphic and text Для описания и дополнительного описания используйте полные предложения с конечными знаками препинания.
  • Используйте выделение прописных букв, как в предложении.

Метки кнопок приложения

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

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

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

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

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

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

Примеры:

  • На вкладке "Главная " нажмите кнопку " Вставить специальные".
  • На вкладке "Главная " в поле "Шрифт " введите Segoe UI.
  • На вкладке "Рецензирование " нажмите кнопку "Показать разметку", а затем щелкните "Рецензенты".
  • На вкладке "Формат " в инструментах "Рисунок" нажмите кнопку "Сжать рисунки".