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


Ленты Windows 7

Примечание.

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

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

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

Снимок экрана ленты

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

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

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

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

Примечание.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Снимок экрана ленты с калькулятором

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

Семь наиболее важных вещей

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

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

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

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

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

Природа лент

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

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

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

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

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

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

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

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

Природа богатых команд

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

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

    Правильное.

    Снимок экрана ленты форматирования символов

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

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

    Снимок экрана ленты с редко используемыми значками

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

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

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

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

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

    Снимок экрана с широкой лентой с кнопками с равным размером Снимок экрана с небольшой лентой с смешанными кнопками

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

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

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

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

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

    Снимок экрана: параметры раскрывающегося меню с значками

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

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

    Снимок экрана: результаты выбора форматирования

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

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

    Снимок экрана: большая подсказка с текстом и рисунком

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

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

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

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

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

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

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

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

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

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

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

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

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

Снимок экрана: непрямый путь к команде границ

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

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

Вкладки

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

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

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

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

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

Группы

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

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

  • Стандартное группирование. Хотя существуют значительные различия в командах между программами, существуют стандартные группы , которые распространены во многих программах. Наличие этих команд с одинаковыми именами и аналогичными расположениями значительно улучшает возможности обнаружения.
Правильное Неправильное
Снимок экрана: масштабирование, разделенное от группы редактирования
Группа команд редактирования включает все команды редактирования, но не включает команду Zoom.
Снимок экрана: увеличение, включенное в группу редактирования
Команда Zoom не является командой редактирования, но находится в группе редактирования.
  • Granularity. Некоторая структура хороша, но слишком много структуры затрудняет поиск команд. Если имена групп являются универсальными, возможно, недостаточно детализации. Если есть группы только с одной или двумя командами, возможно, слишком много (хотя у вас есть коллекция на ленте без каких-либо других команд в группе является приемлемым).
Правильное Неправильное
Снимок экрана: масштабирование, разделенное от группы редактирования
Группа команд редактирования включает все команды редактирования
Снимок экрана: группа редактирования разделена на две группы
Группа команд редактирования разделена на разделы, которые слишком детализированы. Избегайте групп только одной или двух команд.
  • Имена Хорошие имена групп объясняют назначение своих команд. Если имена групп не соответствуют, измените имя или группирование. Если вы не можете определить понятное, описательное имя, вероятно, это связано с тем, что группа не хорошо разработана.
Правильное Неправильное
Снимок экрана: команды, разделенные на четыре группы
Используйте имена групп, которые достаточно конкретные, чтобы описать команды, содержащиеся в группе.
Снимок экрана: группа форматирования с несколькими командами
Это имя группы слишком расплывчато, чтобы быть полезным. Более точным подходом будет реорганизация этих команд в более конкретные группы.
  • Заказ. Люди читают в порядке слева направо (в западных культурах), поэтому вы можете подумать, что группы в крайнем левом углу наиболее заметны. Однако выделенное имя вкладки и содержимое окна, как правило, выступает в качестве фокусных точек, поэтому группы в центре вкладки обычно получают больше внимания, чем левая группа. Поместите наиболее часто используемые группы в наиболее известных расположениях и убедитесь, что существует логический поток для групп на вкладке.

Снимок экрана группы буфера обмена слева

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

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

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

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

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

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

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

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

Снимок экрана раскрывающегося списка шрифтов

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

Снимок экрана: коллекция эскизов подложки

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

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

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

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

Снимок экрана: кнопки команды форматирования текста

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

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

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

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

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

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

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

Снимок экрана: команды форматирования в меню переполнения Панели инструментов масштабируется с помощью кнопки переполнения.

Снимок экрана ленты с различными ширинами Размер ленты по умолчанию отсутствует. Наименьший размер — это значок одной всплывающей группы.

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

Общие

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

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

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

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

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

  • Используйте контекстную вкладку, чтобы отобразить коллекцию команд, релевантных только при выборе определенного типа объекта. Если есть только несколько часто используемых команд, это может быть удобнее и стабильнее использовать обычную вкладку и просто отключить команды, когда они не применяются.
  • Снимок экрана: вырезанные команды и команды копирования неактивны
    Лучше отключить распространенные команды, такие как "Вырезать" и "Копировать", чем использовать контекстную вкладку.
  • Включите только команды, относящиеся к конкретному типу объекта. Не помещайте команды только на контекстную вкладку, если пользователям может потребоваться их без первого выбора объекта.
  • Включите команды, часто используемые при работе с определенным типом объекта. Поместите часто используемые общие контекстные команды в контекстные меню и мини-панели инструментов, чтобы избежать переключения вкладок во время часто выполняемых задач. Кроме того, рекомендуется поместить общие команды на контекстную вкладку, если это позволяет избежать частого переключения вкладок. Но не переусердствовайте это. Не пытайтесь включить каждую команду, которую может потребовать пользователь при работе с объектом.
  • Снимок экрана: команда границ на вкладке конструктора
    В этом примере команда "Границы" включена на вкладку "Конструктор", чтобы избежать частого переключения вкладок во время часто выполняемых задач.\
  • Выберите цвет контекстной вкладки, отличный от отображаемых контекстных вкладок. Один и тот же набор вкладок может отображаться позже с помощью другого цвета, чтобы добиться этого, но по возможности старайтесь использовать согласованные назначения цветов для вызовов.
  • Выбор контекстной вкладки автоматически помогает обнаруживать, улучшает восприятие стабильности и уменьшает необходимость переключения вкладок. Автоматически выберите контекстную вкладку, когда:
    • Пользователь вставляет объект. В этом случае выберите первую контекстную вкладку в наборе.
    • Пользователь дважды щелкает объект. В этом случае выберите первую контекстную вкладку в наборе.
    • Пользователь выбрал контекстную вкладку, щелкнув объект, а затем сразу же щелкнул объект одного типа. В этом случае вернитесь на ранее выбранную контекстную вкладку.
  • При удалении контекстной вкладки, которая является активной, сделайте вкладку "Главная" или первую вкладку активной вкладкой. Это кажется наиболее стабильным.
  • Используйте модальную вкладку, чтобы отобразить коллекцию команд, применяемых с определенным временным режимом, и ни одна из основных вкладок не применяется. Если некоторые из основных вкладок применяются, используйте контекстную вкладку и отключите команды, которые не применяются. Так как модальные вкладки очень ограничены, их следует использовать только в том случае, если нет лучшей альтернативы.
  • Снимок экрана: вкладка предварительного просмотра печати
    Предварительный просмотр печати — это часто используемая модальная вкладка.
  • Чтобы закрыть модальную вкладку, введите команду режима> закрытия <в качестве последней команды на вкладке. Используйте значок закрытия, чтобы упростить поиск команды. Предоставьте режиму в команде, чтобы предотвратить путаницу о закрытии.
  • Снимок экрана: кнопка
    В этом примере явным образом метка команды Close с помощью режима удаляет любые сомнения о закрытии.
  • Чтобы закрыть модальную вкладку, также переопределите кнопку "Закрыть" в строке заголовка окна, чтобы закрыть режим вместо программы. Тестирование пользователей показало, что многие пользователи ожидают этого поведения.

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Буфер обмена
  • Шрифт
  • Абзац
  • Редактирование

Вкладка "Вставка"

  • Таблицы
  • Иллюстрации

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

  • Themes
  • Настройка страницы
  • Упорядочить

Вкладка "Проверка"

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

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

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

Команды

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

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

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

Презентация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • Кнопки команд, флажки, переключатели и коллекции на месте. Это всегда прямо.
    • Разделять кнопки. Прямо для наиболее распространенной команды, но косвенно для вариантов команд.
    • Кнопки меню. Это непрямые, но присутствуют многие команды, которые легко найти.
    • Текстовые поля (с элементами управления спином). Для ввода текста обычно требуется больше усилий, чем другие типы элементов управления.
  • Снимок экрана ленты с кнопками меню только
    Если лента состоит в основном из кнопок меню при отображении в полном размере, вы также можете использовать строку меню.

  • Предпочитайте немедленные команды. Снимок экрана: кнопка разделения печати и ее подменю
    Команда немедленно вступает в силу (т. е. без диалоговых окон для сбора дополнительных входных данных). Если для команды могут потребоваться входные данные, рекомендуется использовать разделительную кнопку с немедленной командой в части кнопки и командами, которым требуются входные данные в подменю.

Коллекции

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

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

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

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

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

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

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

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

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

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

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

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

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

Значки

  • Снимок экрана раскрывающегося списка и флажков
    Укажите значки для всех элементов управления лентой, кроме раскрывающихся списков, флажков и переключателей. Большинству команд потребуются значки пикселей 32x32 и 16x16 (только значки пикселей 16x16 используются панелью быстрого доступа). Коллекции обычно используют значки пикселей 16x16, 48x48 или 64x48 пикселей.

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

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

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

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

    Правильное Неправильное
    снимок экрана с голубым падающим глазом и желтым карандашом
    Используйте фигуру и цвет, чтобы сделать значки простыми для различания.
    снимок экрана с голубым падающим глазом и синим карандашом
    Значки с одинаковым цветом трудно отличить
  • Снимок экрана: команда примечаний в всплывающем контейнере
    Рассмотрите возможность создания значков всплывающих групп, поместив значок пикселя 16x16 наиболее видной команды в группе внутри визуального контейнера 32x32 пикселей. Вам не нужно создавать различные значки для всплывающих групп.

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

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

Правильное Неправильное
Снимок экрана двухмерных значков команд
Используйте двухмерные значки.
Снимок экрана: трехмерные значки команд
Не используйте трехмерные значки.

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

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

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

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

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

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

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

    Снимок экрана: подсказка для команды нападающего

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

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

    Снимок экрана подсказки и графа для вставки диаграммы

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

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

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

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

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

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

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

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

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

    • Назначьте F кнопке "Приложение". Это назначение используется из-за сходства кнопки "Приложение" с традиционным меню "Файл".
    • Снимок экрана: подсказки клавиш на ленте
      Для панели быстрого доступа и недавно использованных списков файлов назначьте ключи доступа числовым образом.
  • Снимок экрана: подсказки клавиш для вкладок
    Для вкладок:

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

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

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

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

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

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

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

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

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

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

    • Метка с именем команды.
    • Значок пикселя 32x32.
    • Краткое описание. Убедитесь, что описание может отображаться с помощью не более двух строк текста.
  • Снимок экрана: подсказка, документирование сочетания клавиш
    Используйте подсказки для документирования сочетаний клавиш. В отличие от обычных меню, меню приложений не документирует сочетания клавиш с помощью меток.

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

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

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

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

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

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

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

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

    снимок экрана: диалоговое окно

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

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

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

    Снимок экрана диалогового окна шрифта

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

Наклейки

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

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

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

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

Метки группы

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

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

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

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

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

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

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

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

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

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

Метки команд

  • Метка всех команд. Наличие явных текстовых меток помогает пользователям находить и понимать команды. Исключение: команда может быть не помечена, если его значок очень хорошо известен, и пространство находится в категории "Премиум". Скорее всего, на вкладке "Главная" будут отключены команды. В этом случае присвойте свойству Name соответствующую текстовую метку. Это позволяет вспомогательным технологическим продуктам, таким как средства чтения с экрана, предоставлять пользователям альтернативные сведения о рисунке.
  • Для кнопок команд используйте краткую метку самообъяснения. По возможности используйте одно слово; максимум четырех слов.
  • Для раскрывающихся списков, если список всегда имеет значение, используйте текущее значение в качестве метки.
  • Снимок экрана: запрос адресной книги поиска
    Если редактируемый раскрывающийся список не имеет значения, используйте запрос.
  • Раскрывающиеся списки, которые не являются самообъяснительными или редко используются, требуют явной метки. Поместите двоеточие в конец метки.
  • Снимок экрана автоматически после: [секунды] <br.>Для текстовых полей используйте явную метку. Поместите двоеточие в конец метки.
  • Прописные буквы следует использовать как в предложениях. Это лучше подходит для тона Windows.
  • Запустите метку с императивной командой. Если она не совпадает с именем вкладки или группы или общей командой, например Show, Create, Insert или Format.
  • Не используйте конечные знаки препинания.
  • Чтобы сохранить пространство, не помещайте многоточие на метки команд ленты. Однако многоточие используется командами в кнопке "Приложение" и раскрывающихся меню.

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

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

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

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

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

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

Примеры:

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