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

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

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

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

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

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

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

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

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

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

Переместить

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

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

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

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

Адаптация

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

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

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

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

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

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

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

Replace

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

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

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

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

См. также

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