Оконные рамки

Примечание

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

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

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

снимок экрана: рамка окна вокруг окна Блокнота

Типичная рамка окна.

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

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

Стеклянные оконные рамы

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

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

Стеклянные оконные рамы.

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

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

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

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

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

Для средств просмотра содержимого часто используется возможность отображения содержимого в полноэкранном режиме. Примеры: Windows Internet Обозреватель , Фотоальбом Windows Live, Windows Movie Maker HD, Microsoft PowerPoint и Microsoft Word.

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

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

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

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

иллюстрация с изображением головоломки и рамки

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

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

Оконные рамки

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

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

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

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

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

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

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

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

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

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

    Правильно:

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

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

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

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

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

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

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

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

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

    Снимок экрана: полноэкранные кнопки и кнопки отменить изменения

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

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

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

Стекло

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

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

Правильно:

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

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

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

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

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