Рекомендации по изменению размера для узких макетов
Проектируйте пользовательский интерфейс своего приложения так, чтобы он перестраивался при переходе к высокому или узкому представлению. Планировать это помогут рекомендации в данном разделе.
- Установите минимальную ширину приложения 320 пикселей вместо стандартных 500 пикселей (узкий макет).
- Проектируйте переключение своего приложения на вертикальный макет, когда пользователь изменяет его размер таким образом, что высота становится больше ширины (высокий макет).
Более общие рекомендации см. в разделе Guidelines for supporting multiple screen sizes. Конкретные рекомендации по разработке игр для узких макетов см. в книге идей об играх.
Чтобы увидеть, как эти рекомендации применяются в примерах, см.:
- Макет для окон, размер которых изменяется до ширины 320 пикселей
- Макет для окон, высота которых больше высоты широкого образца
Примеры
Узкие макеты
Минимальная ширина приложения Магазина Windows по умолчанию составляет 500 пикселей. Вот приложение шириной 500 пикселей.
А вот приложение шириной 320 пикселей.
Если вы решили обеспечить поддержку минимальной ширины менее 500 пикселей, вам понадобится реализовать некоторые изменения, чтобы приложение хорошо работало при такой ширине. Следуйте разделу Рекомендации, чтобы ваше приложение хорошо работало при ширине менее 500 пикселей.
Высокие макеты
Кроме того, вы можете внести изменения в структуру приложения, если его высота превышает его ширину. Например, когда высота приложения становится больше его ширины, вы можете включить для него вертикальный сдвиг вместо горизонтального.
Вот приложение, которое сдвигается горизонтально в полноэкранном режиме.
А вот приложение, когда его высота больше ширины. Приложение теперь сдвигается по вертикали.
Должно ли мое приложение поддерживать минимальную ширину 320 пикселей?
Должны ли вы поддерживать ширину, которая меньше минимальной по умолчанию, зависит от ваших ожиданий того, как пользователи будут работать с приложением. Вот несколько распространенных сценариев, в которых следует поддерживать окна малой ширины (от 320 пикселей):
- для вашего приложения важна многозадачность;
- вы хотите, чтобы пользователи оставляли ваше приложение на экране;
- ваше приложение работает совместно с другим приложением для решения общей задачи.
- ваше приложение хорошо работает в окне малой ширины.
Если вы оставите минимальную ширину по умолчанию 500 пикселей, вам не придется дополнительно адаптировать приложение для узких макетов.
Рекомендации
Если в полноэкранном режиме приложение поддерживает сдвиг по горизонтали, переключите его на сдвиг по вертикали при использовании окна, высота которого превышает ширину.
Чтобы приспособить узкий размер, внесите следующие изменения в дизайн, когда ширина приложения меньше 500 пикселей:
- Используйте кнопку "Назад" меньшего размера. Подробнее о размере кнопки "Назад": Список значков Symbol.
- Задайте левое поле шириной 20 пикселей.
- Задайте для заголовка приложения размер 20 пунктов.
- Используйте меньшие значения смещения для анимации перехода по страницам и анимации перехода по содержимому.
Вот приложение "Калькулятор" с обычной шириной:
Вот то же приложение с шириной 320 пикселей. Его левое поле теперь составляет 20 пикселей, а шрифт заголовка уменьшен до 20 пунктов согласно рекомендациям для узкого макета.
Если в полноэкранном режиме приложение поддерживает сдвиг по вертикали, в окне малой ширины перейдите к макету с одним столбцом или панелью. Вы можете точно задать значение ширины, при котором приложение переключается на макет с одним столбцом или панелью. Убедитесь, что в режиме с одним столбцом или панелью поддерживается возможность перехода между панелями.
Проектируйте макет приложения и все элементы управления с учетом уменьшения вплоть до минимального размера, а также чтобы оно работало в высоком и узком окнах приложения. Ниже приведены важные элементы управления, на которые нужно обратить внимание.
Не переводите пользователя в другую часть приложения, когда уменьшается ширина окна приложения.
Не поддерживайте значения меньше минимальной ширины по умолчанию (500 пикселей), если вы не можете обеспечить большую часть функциональных возможностей приложения при меньшей ширине.
Связанные разделы
Для разработчиков (HTML)
Краткое руководство: определение макетов приложения
Для разработчиков (XAML)
Краткое руководство: разработка приложений для разных размеров окон
Windows.UI.Xaml.VisualStateManager
Примеры
Макет для окон, размер которых изменяется до ширины 320 пикселей
Макет для окон, высота которых больше высоты широкого образца