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


Рамки окна

Заметка

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

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

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

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

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

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

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

Оконные рамки стекла

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

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

Оконные рамки стекла.

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

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

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

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

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

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

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

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

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

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

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

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

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

Кадры окон

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

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

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

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

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

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

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

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

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

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

    правильно:

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

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

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

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

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

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

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

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

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

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

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

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

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

Стекло

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

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

правильно:

снимок экрана окна с четырьмя графическими и метками

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

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

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

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