Проектирование для экранов, различных по размеру и разрешению

Отображение большего количества контента

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

Адаптация макета к экрану большого разрешения может осуществляться увеличением количества строк контента - с 4 до 6 в данном случае, - и отображением большего количества контента по горизонтали

Вы можете удивиться, почему визуальное представление элемента управления ListView выглядит как сетка. Каждая из миниатюр в коде в действительности является всего лишь одним из элементов, в то же время здесь применен стиль отображения GridLayout (макет на основе сетки). Эти параметры устанавливаются разработчиком в коде для элемента управления ListView, подробности на этом этапе не имеют значения; однако, это нужно отметить, чтобы быть в курсе происходящего.

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

увеличить изображение
Экран небольшого размера отображает два столбца текста

увеличить изображение
Экран большого размера отображает три столбца текста

Расширение области контента

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

увеличить изображение

увеличить изображение

Содержание большого экрана аналогично малому за счет масштабирования блоков контента

Управление пустым пространством

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

увеличить изображение

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

Фиксированный макет против адаптивного

Рекомендованный способ оптимизации макетов для различных разрешений экранов - использование адаптивных макетов. В то же время, из-за нехватки времени и других причин зачастую нет возможности найти более глобальное решение для разработки макетов, подходящих к экранам различных разрешений. В этом случае можно воспользоваться опцией "ScaletoFit" (Масштаб по размеру). Если эта опция включена разработчиком в элементе управленияViewBox, то размеры вашего приложения могут иметь фиксированное значение. В итоге, приложение автоматически масштабируется в соответствии с размерами экрана. Эта опция не универсальна и не подходит для всех возможных ситуаций, однако, иногда она позволяет сэкономить время при настройке макета.

Плотность пикселей

Напомним, макет приложения можно подобрать на этапе принятия решения о ширине и высоте окна приложения. Минимальная величина разрешения - 1024 х 768, рекомендуемая - 1366 х 768. Какое бы разрешение вы ни выбрали, всегда возникает вопрос о плотности пикселей. Зависимость от плотности пикселей можно показать на следующем примере: допустим, вы решили разработать макет приложения размерами 1366 х 768. Экраны многих планшетных устройств имеют такое же разрешение (11,6 дюйма - стандартный размер), но в зависимости от производителя и по другим причинам разрешение некоторых 11,6-дюймовых устройств гораздо больше. Высокое разрешение, в отличие от экранов с низким разрешением, характеризуется более четким текстом и графикой, но если конечный макет основан лишь на разрешении экрана, он может выглядеть по-разному на устройствах с одинаковыми физическими размерами экрана, что вызовет проблемы при взаимодействии пользователя с приложением.Экраны с высоким разрешением выглядят лучше, но пользовательский интерфейс может уменьшиться, что создает неудобства при использовании сенсорного взаимодействия с приложением. В другом случае, если вы решите "растянуть" макет приложения, спроектированный для более низкого разрешения, возникает другая проблема - текст и картинки могут отображаться нечетко.

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

Стандартное масштабирование в процентах: 100%, 140% и 180%

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

Для получения более подробной информации о размерах шрифта просмотрите "Знакомство с принципом нового дизайна Microsoft: Мастерством стоит гордиться" .

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

• Используйте загрузку ресурсов и укажите высоту и ширину изображения:

  <imgsrc="projector.jpg" width=80px height=80px/>
        
• Изображения автоматически загружаются при следующем порядке именования:

  \projector.scale-100.jpg

  \projector.scale-140.jpg

  \projector.scale-180.jpg

При этом способе "за кулисами" замена на соответствующую по размерам картинку происходит автоматически, в зависимости от плотности пикселей. Так, при разрешении экрана "по умолчанию" 1366 х 768 (135 dpi, точек на дюйм) будет использоваться картинка"projector.scale-100.jpg.". Масштаб экрана 140%, при разрешении 1920 х 1980 (190 dpi) будет использоваться картинка projector.scale-140.jpg. И масштаб 180%, при разрешении экрана 2560 x 1440 (253 dpi) - картинка projector.scale-180.jpg.