Рекомендации по изменению размера для узких макетов

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

  • Установите минимальную ширину приложения 320 пикселей вместо стандартных 500 пикселей (узкий макет).
  • Проектируйте переключение своего приложения на вертикальный макет, когда пользователь изменяет его размер таким образом, что высота становится больше ширины (высокий макет).

Более общие рекомендации см. в разделе Guidelines for supporting multiple screen sizes. Конкретные рекомендации по разработке игр для узких макетов см. в книге идей об играх.

Чтобы увидеть, как эти рекомендации применяются в примерах, см.:

Примеры

Узкие макеты

Минимальная ширина приложения Магазина Windows по умолчанию составляет 500 пикселей. Вот приложение шириной 500 пикселей.

Приложение с минимальной шириной по умолчанию 500 пикселей.

А вот приложение шириной 320 пикселей.

Приложение с минимальной шириной 320 пикселей.

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

Высокие макеты

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

Вот приложение, которое сдвигается горизонтально в полноэкранном режиме.

Приложение с горизонтальным сдвигом, полноэкранный режим

А вот приложение, когда его высота больше ширины. Приложение теперь сдвигается по вертикали.

Приложение, высота которого больше ширины, с вертикальным сдвигом.

Должно ли мое приложение поддерживать минимальную ширину 320 пикселей?

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

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

Если вы оставите минимальную ширину по умолчанию 500 пикселей, вам не придется дополнительно адаптировать приложение для узких макетов.

Рекомендации

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

  • Чтобы приспособить узкий размер, внесите следующие изменения в дизайн, когда ширина приложения меньше 500 пикселей:

    Вот приложение "Калькулятор" с обычной шириной:

    Приложение “Калькулятор” и приложение “Путешествия Bing” на одном экране

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

    Приложение “Калькулятор”: ширина 320 пикселей, уменьшенный заголовок и границы

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

    Приложение с вертикальным сдвигом в полноэкранном режиме с двумя областями

    Приложение с вертикальным сдвигом в узком представлении с одной областью

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

  • Не переводите пользователя в другую часть приложения, когда уменьшается ширина окна приложения.

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

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

Для разработчиков (HTML)

Краткое руководство: определение макетов приложения

CoreWindow.SizeChanged

OffsetWidth property

Для разработчиков (XAML)

Краткое руководство: разработка приложений для разных размеров окон

CoreWindow.SizeChanged

Windows.UI.Xaml.VisualStateManager

Примеры

Макет для окон, размер которых изменяется до ширины 320 пикселей

Макет для окон, высота которых больше высоты широкого образца