Макет

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

Макет в Windows

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

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

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

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

Новые идеи в макете

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

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

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

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

Примеры

Facebook

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

Foursquare

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

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

NOOK

Приложение NOOK от Barnes & Noble использует фундаментальные принципы иерархической модели с главным разделом, но в индивидуальной интерпретации для создания особенного фирменного интерфейса. Легкая тень под каждой книгой имитирует ее физические свойства вместо простого отображения обложки. В этом случае предложение аналога из реального мира улучшает взаимодействие с пользователем.

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

Руководство по элементу управления "Главный раздел"

Схемы навигации

Создание макета страницы приложения

Создание макета пользовательского интерфейса (приложения среды выполнения Windows)

Выбор макета (приложения Магазина Windows на JavaScript и HTML)

Создание макета пользовательского интерфейса (XAML)

Коллекция