Методы создания отзывчивого дизайна

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

• Максимальная оптимизация использования пространства и уменьшение потребности в навигации

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

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

• Использование возможностей устройств

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

• Оптимизация для ввода

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

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

Совет

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

Изменение положения

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

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

Изменить размер

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

Адаптация

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

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

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

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

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

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

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

Заменить

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

Элемент управления NavigationView поддерживает эту методику адаптации, позволяя пользователям задать расположение области вверху или слева.

Изменение архитектуры

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

Связанные темы

• Размеры экрана и точки останова
• Гибкие макеты на основе XAML
• Элементы управления и шаблоны UWP