Руководство по панелям навигации (приложения Магазина Windows)

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

Порядок использования панели навигации

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

Анатомия панели навигации

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

Изображение панели навигации с кнопками и эскизами

На верхней панели приложения можно разместить и другие функции, например кнопку "+" для создания новой вкладки или сеанса, либо интегрировать поле поиска. Разместите эти дополнительные функции с правой стороны панели навигации.

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

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

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

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

 

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

Для разработчиков
Проектирование командного интерфейса
Проектирование навигации
Для разработчиков (приложения Магазина Windows на JavaScript)
Краткое руководство: добавление панели навигации (NavBar)
Создание специальной панели приложения
Для разработчиков (приложение Магазина Windows на C++, C# или Visual Basic)
Краткое руководство: навигация между страницами
Для разработчиков (приложения Магазина Windows на DirectX и C++)
Создание панели приложения или чудо-кнопки "Параметры"

 

 

Показ:
© 2014 Microsoft