Рамки окна

Заметка

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

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

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

Снимок экрана окна окна вокруг окна блокнота

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

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

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

Рамы для стеклянных окон

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

снимок экрана стеклянной рамки вокруг калькулятора

Рамы для стеклянных окон.

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

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

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

Скрытые кадры

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

Зрители контента часто выигрывают от возможности отображать его на весь экран. Примерами являются Windows Internet Explorer, Средства просмотра фотографий Windows Live, Киностудия Windows Movie Maker HD, Microsoft PowerPoint и Microsoft Word.

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

В этом примере проигрыватель Windows Media может отображать его содержимое в полноэкранном режиме.

Индивидуальные рамки

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

иллюстрация драмблированного рисунка головоломки и кадра

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

Руководящие принципы

Рамы окон

  • Используйте стандартные рамы окон.

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

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

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

        Неправильный:

        Снимок экрана: отвлекающий кадр

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

  • Не добавляйте элементы управления в рамку окна. Поместите элементы управления в окно.

    Неправильный:

    Снимок экрана элемента управления в рамке окна

    Правильно:

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

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

Полноэкранный режим

  • Для программ, имеющих необязательный полноэкранный режим, чтобы включить полноэкранный режим:

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

      Снимок экрана окна с полноэкранным меню

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

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

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

    снимок экрана с полноэкранным и обратным кнопками

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

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

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

Стекло

Стандартные оконные рамки автоматически используют стекло в Windows, но вы также можете использовать стекло на участках, которые примыкают к оконной раме.

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

Правильно:

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

В этом примере стекло используется для предоставления окна ALT+TAB упрощенного внешнего вида. Стекло подходит для этого окна, так как состоит из графики и одной четкой текстовой метки.

Неправильный:

Снимок экрана окна с двенадцатью графиками

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