Макет страницыPage layout

В приложениях Windows каждая страница обычно содержит элементы навигации, управления и содержимого.In Windows apps, each Page generally has navigation, command, and content elements.

В приложении может быть несколько страниц: когда пользователь запускает приложение Windows, код приложения создает кадр, чтобы поместить его в окно приложения.Your app can have multiple pages: when a user launches a Windows app, the application code creates a Frame to place inside of the application's Window. Затем кадр может переходить между экземплярами страницы приложения.The Frame can then navigate between the application's Page instances.

Большинство страниц использует общепринятую структуру макета, и в этой статье рассматриваются необходимые элементы пользовательского интерфейса и их положение на странице.Most pages follow a common layout structure, and this article covers which UI elements you'll need, and where they should go on a page.

Структура страницы

Макет приложения начинается с выбора модели навигации, которая определяет, как пользователи переходят между страницами в приложении.Your app layout begins with the navigation model you choose, which defines how your users navigate between pages in your app. В этой статье рассматриваются два распространенных шаблона навигации: область навигации слева или вверху.For this article, we'll discuss two common navigation patterns: left nav and top nav. Рекомендации по выбору других вариантов навигации см. в разделе Основы проектирования навигации для приложений Windows.For guidance on choosing other navigation options, see Navigation design basics for Windows apps.

Шаблоны области навигации вверху и слева

Левая область навигацииLeft nav

Левая область навигации, или шаблон области навигации, обычно резервируется для навигации на уровне приложения и используется на самом верхнем уровне в приложении. Это означает, что левая область навигации всегда должна быть видимой и доступной.Left nav, or the nav pane pattern, is generally reserved for app-level navigation and exists at the highest level within the app, meaning that it should always be visible and available. Рекомендуется использовать левую область навигации, если в приложении имеются более пяти элементов навигации или страниц.We recommend left nav when there are more than five navigational items, or more than five pages in your app. Шаблон области навигации обычно содержит:The nav pane pattern typically contains:

  • Элементы навигацииNavigation items
  • точку входа в параметры приложения;Entry point into app settings
  • точку входа в параметры учетной записи.Entry point into account settings

Элемент управления NavigationView реализует шаблон левой области навигации для UWP.The NavigationView control implements the left nav pattern for UWP.

При выборе элемента навигации кадр должен перейти на страницу выбранного элемента.When a navigation item is selected, the Frame should navigate to the selected item's Page.

Развернутая область навигации

Кнопка меню позволяет пользователям разворачивать и сворачивать область навигации.The menu button allows users to expand and collapse the nav pane. Если размер экрана больше 640 пикселей, при нажатии кнопки меню область навигации сворачивается в полосу.When the screen size is larger than 640 px, clicking the menu button collapses the nav pane into a bar.

Компактная область навигации

Если размер экрана меньше 640 пикселей, то область навигации полностью сворачивается.When the screen size is smaller than 640 px, the nav pane is fully collapsed.

Свернутая область навигации

Верхняя область навигацииTop nav

Верхняя область навигации также может использоваться для навигации верхнего уровня.Top nav can also act as top-level navigation. Если левую область навигации можно свернуть, то верхняя область навигации всегда видна.While left nav is collapsible, top nav is always visible. Элемент управления NavigationView реализует шаблон верхней области навигации и вкладок для UWP.The NavigationView control implements the top navigation and tabs pattern for UWP.

Верхняя область навигации

Панель командCommand bar

Может возникнуть потребность предоставить пользователям удобный доступ к самым распространенным задачам приложения.Next, you might want to provide users with easy access to your app's most common tasks. Панель команд может предоставить доступ к командам приложения или страниц, и ее можно использовать с любым шаблоном навигации.A command bar can provide access to app-level or page-level commands, and it can be used with any navigation pattern.

Размещение панели команд вверхуcommand bar placement at top

Панель команд можно разместить в верхней или нижней части страницы, в зависимости от того, что лучше подходит для вашего приложения.The command bar can be placed at the top or bottom of the page, whichever is best for your app.

Размещение панели команд внизу

СодержимоеContent

Наконец, содержимое разных приложений значительно отличается, поэтому вы можете представлять его различными способами.Finally, content varies widely from app to app, so you can present content in many different ways. Здесь описаны некоторые распространенные шаблоны страниц, которые можно использовать в приложении.Here, we describe some common page patterns that you might want to use in your app. Многие приложения используют некоторые или все эти распространенные шаблоны страниц для отображения различных типов содержимого.Many apps use some, or all, of these common page patterns to display different types of content. Аналогичным образом вы можете комбинировать и сопоставлять эти шаблоны для оптимизации своего приложения.Likewise, feel free to mix and match these patterns to optimize for your app.

Целевая страницаLanding

целевая страница

Целевые страницы, также называемые главными экранами, часто отображаются на верхнем уровне взаимодействия с приложением.Landing pages, also known as hero screens, often appear at the top level of an app experience. Область с большой поверхностью выступает в качестве уровня приложений, на котором можно выделить содержимое, которое пользователи могут захотеть просматривать или использовать.The large surface area serves as a stage for apps to highlight content that users may want to browse and consume.

КоллекцииCollections

галерея

Коллекции позволяют пользователям просматривать группы содержимого или данных.Collections allow users to browse groups of content or data. Представление в виде сетки является хорошим способом размещения фотографий или мультимедиа-содержимого, а представление списка — содержимого с большим количеством текста или данных.Grid view is a good option for photos or media-centric content, and list view is a good option for text-heavy content or data.

Основные и подробные данныеMaster/detail

основные и подробные данные

Модель основных и подробных данных состоит из представления списка (основные данные) и представления содержимого (подробные данные).The master/details model consists of a list view (master) and a content view (detail). Обе области закреплены и поддерживают вертикальную прокрутку.Both panes are fixed and have vertical scrolling. Если выбран элемент в представлении списка, представление содержимого обновляется соответствующим образом.When an item in the list view is selected, the content view is correspondingly updated.

ФормыForms

Снимок экрана: форма с пустым текстовым полем и кнопкой.

Форма — это группа элементов управления, которые собирают данные пользователей и отправляют их.A form is a group of controls that collect and submit data from users. В большинстве приложений, если не во всех из них, используется форма определенного рода для страниц параметров, процедуры входа на порталы, центров отзывов, создания учетных записей и других целей.Most, if not all apps, use a form of some sort for settings pages, log in portals, feedback hubs, account creation, or other purposes.

Примеры приложенийSample apps

Чтобы узнать, как реализовать эти шаблоны, ознакомьтесь с примерами приложений Windows:To see how these patterns can be implemented, check out our Windows sample apps: