Методики гибкого дизайна

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

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

• Чтобы сделать наиболее эффективным использование пространства и уменьшить необходимость навигации

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

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

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

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

• Оптимизация входных данных

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

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

Переместить

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

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

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

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

Переформатирование

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

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

Показать/скрыть

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

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

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

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

Перепроектировать

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

Адаптивный макет

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

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

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

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

• Fluent Design — Layout
• Размеры экрана и точки останова
• Адаптивные макеты с XAML
• Элементы управления XAML