Руководство по панелям приложения

Applies to Windows and Windows Phone

Пример внешнего вида стандартного элемента управления “Панель навигации”

Пример стандартного элемента управления “Панель приложения”

Описание

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

Дополнительную информацию о навигации см. в нашей серии Компоненты приложений от А до Я.:  "Плоская навигация от А до Я" (HTML и XAML) и "Иерархическая навигация от А до Я" (HTML и XAML)

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

Верхняя панель приложения

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

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

Функции верхней панели приложения можно расширить — например, добавив поле поиска или кнопку "+" для создания нового объекта. При добавлении других элементов рекомендуется размещать их на правой стороне панели приложения.

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

Панель навигации можно также разделить на несколько областей, как в приложении Магазина. Здесь можно заметить, что верхний раздел предназначен для глобальной навигации, а нижний раздел — для категорий приложений.

Изображение панели навигации для приложения Магазина

Нижняя панель приложения

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

Стандартный элемент управления "Панель приложения" предназначен для разработчиков, которым нужно создать панель приложения, не настраивая ее. Хотя создать панель приложения легко, трудно гарантировать, что ее поведение будет соответствовать инструкциям и шаблонам Windows. С помощью CommandBar class и WinJS.UI.AppBar object разработчик может создать панель приложения, соответствующую правилам проектирования и поведению приложения, не тратя время на каждую мелочь и не отклоняясь от стандартной процедуры.

Если вы не хотите использовать стандартное поведение, а хотите настроить собственные панели приложения, используйте элемент управления AppBar вместо элемента управления CommandBar в XAML.

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

Примеры

Верхняя панель приложения

Снимок экрана, иллюстрирующий стандартный элемент управления “Панель навигации”

 

Нижняя панель приложения

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

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

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

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

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

  • Придерживайтесь соглашений о размещении:

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

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

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

    Внешний вид всплывающего элемента и меню

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

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

    В приложениях на C#/C++/VB изменение размера обрабатывается в случае использования элемента управления CommandBar. Дополнительную информацию см. в разделе Использование панели приложения при разных размерах.

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

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

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

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

Дополнительные рекомендации по использованию

Масштабирование для окон разных размеров

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

  • Разработайте как минимум два представления панели приложения: одно полноразмерное и одно уменьшенное (как минимум до 500px или 320px). Большинство пользователей используют общие размеры окна: полный экран или 50/50 с другим приложением.
  • Группируйте команды при разработке представлений меньшего размера. Если команды не группируются по смыслу, поместите их в группу "дополнительных", используя значок с многоточием.
Общие разрешения окна (в пикселях)Количество уменьшенных кнопок без меток в одной строкеКоличество полноразмерных кнопок без меток в одной строке
13662213
10241610
768127
50085
32053

 

Обработка правой кнопки мыши

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

Следуйте этим рекомендациям при разработке элементов управления для своего приложения.

  • Если для выполнения важной функции приложения требуется правая кнопка мыши, используйте ее непосредственно для этой функции. Не активируйте контекстные элементы пользовательского интерфейса или панель приложения, если это несущественно для работы приложения.
  • Отображайте панель приложения, когда пользователь щелкает правой кнопкой мыши области приложения, где не нужны контекстные действия, вызываемые щелчком правой кнопки мыши, такие как меню для изменения границ.
  • Если поддержка правой кнопки мыши требуется в любом месте, рассмотрите возможность вызова панели приложения, когда пользователь щелкает правой кнопкой мыши самый верхний горизонтальный ряд пикселей, самый нижний горизонтальный ряд пикселей или и то, и другое.
  • Если этих решений недостаточно, используйте пользовательские элементы управления, чтобы открыть панель приложения с помощью мыши.
  • Используйте события класса MouseDevice, такие как MouseMoved, чтобы реализовать собственные функции контекстного меню.
  • Помните, что нажатие и удерживание при сенсорном управлении идентично щелчку правой кнопкой мыши. Обрабатывайте оба события одинаково. Чтобы обработать такое событие и определить для него настраиваемый результат, зарегистрируйте событие Holding. Чтобы включить удерживание, установите Hold (для сенсорного взаимодействия и ввода с помощью пера) и HoldWithMouse в свойстве GestureSettings.
  • Не меняйте поведение при нажатии сочетания клавиш Win + Z. Приложение должно отображать панель приложения или контекстное меню. Зарегистрируйте события KeyDown и AcceleratorKeyActivated, чтобы определить, когда нажимаются эти две клавиши.

Связанные разделы

Для разработчиков
Шаблоны команд
Схемы навигации
Создание специальной панели приложения
Для разработчиков (приложения среды выполнения Windows на JavaScript и HTML)
WinJS.UI.AppBar object
WinJS.UI.NavBar object
Пример элемента управления AppBar HTML
Пример элемента управления HTML NavBar
Пример навигации и журнала навигации
Ваше первое приложение. Часть 3. Объекты PageControl и навигация
Добавление панелей приложения
Добавление панелей навигации
Навигация между страницами (HTML)
Для разработчиков (приложения среды выполнения Windows на C#/VB/C++ и XAML)
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Пример элемента управления AppBar XAML
Пример XAML Navigation
Ваше первое приложение. Часть 3. Навигация, макет и представления.
Ваше первое приложение. Добавление навигации и представлений в приложение Магазина Windows на C++ (учебник, часть 3 из 4)
Добавление панелей приложения (XAML)
Навигация между страницами (XAML)
Для разработчиков (приложения среды выполнения Windows на DirectX и C++)
Создание панели приложения или чудо-кнопки "Параметры"

 

 

Показ:
© 2014 Microsoft