Проектирование для экранов, различных по размеру и разрешению
Отображение большего количества контента
Увеличенное свободное пространство можно заполнить большим количеством контента несколькими способами. Так как WinRT-приложение будет сильно зависеть от списков, вам необходимо ознакомиться с возможностями элемента управления ListView. На следующей иллюстрации можно увидеть маленький экран, на котором располагается сетка из четырех строк и нескольких столбцов; другая иллюстрация показывает шесть строк и также некоторое количество столбцов.
| Адаптация макета к экрану большого разрешения может осуществляться увеличением количества строк контента - с 4 до 6 в данном случае, - и отображением большего количества контента по горизонтали |
Вы можете удивиться, почему визуальное представление элемента управления ListView выглядит как сетка. Каждая из миниатюр в коде в действительности является всего лишь одним из элементов, в то же время здесь применен стиль отображения GridLayout (макет на основе сетки). Эти параметры устанавливаются разработчиком в коде для элемента управления ListView, подробности на этом этапе не имеют значения; однако, это нужно отметить, чтобы быть в курсе происходящего.
Следующий способ позволяет отображать большее количества контента за счет использования нескольких колонок текста с помощью соответствующего элемента управления. На картинке, представленной ниже, дано отображение на маленьком экране с использованием двух столбцов текста и большой экран с использованием трех столбцов текста. Опять же, имейте в виду, что каждый экран отражает различные таблицы стилей, но установку количества столбцов с несколькими текстовыми столбцами сделать очень просто:
Расширение области контента
Во многих случаях отображение большего количества контента - не самый лучший вариант: возможно, у вас не так уж и много данных, либо отображение будет выглядеть неэстетично. Другим вариантом заполнения свободного пространства является изменения масштаба содержимого. В следующем примере показаны макеты для большого и маленького экрана, где структура столбцов и строк аналогична, но произведено пропорциональное изменение размеров элементов интерфейса.
Управление пустым пространством
В зависимости от контента и внешнего вида макета, применение обычного масштабирования может быть не лучшей идеей. Другой способ заключается в корректировке расстояния между элементами для большого экрана. При правильном использовании отступов и полей на экране большого разрешения можно создать макет, идентичный макету экрана с меньшим разрешением.
| Добавив дополнительные отступы, можно создать макет для экрана большого разрешения, аналогичный экрану с меньшим разрешением |
Фиксированный макет против адаптивного
Рекомендованный способ оптимизации макетов для различных разрешений экранов - использование адаптивных макетов. В то же время, из-за нехватки времени и других причин зачастую нет возможности найти более глобальное решение для разработки макетов, подходящих к экранам различных разрешений. В этом случае можно воспользоваться опцией "ScaletoFit" (Масштаб по размеру). Если эта опция включена разработчиком в элементе управленияViewBox, то размеры вашего приложения могут иметь фиксированное значение. В итоге, приложение автоматически масштабируется в соответствии с размерами экрана. Эта опция не универсальна и не подходит для всех возможных ситуаций, однако, иногда она позволяет сэкономить время при настройке макета.
Плотность пикселей
Напомним, макет приложения можно подобрать на этапе принятия решения о ширине и высоте окна приложения. Минимальная величина разрешения - 1024 х 768, рекомендуемая - 1366 х 768. Какое бы разрешение вы ни выбрали, всегда возникает вопрос о плотности пикселей. Зависимость от плотности пикселей можно показать на следующем примере: допустим, вы решили разработать макет приложения размерами 1366 х 768. Экраны многих планшетных устройств имеют такое же разрешение (11,6 дюйма - стандартный размер), но в зависимости от производителя и по другим причинам разрешение некоторых 11,6-дюймовых устройств гораздо больше. Высокое разрешение, в отличие от экранов с низким разрешением, характеризуется более четким текстом и графикой, но если конечный макет основан лишь на разрешении экрана, он может выглядеть по-разному на устройствах с одинаковыми физическими размерами экрана, что вызовет проблемы при взаимодействии пользователя с приложением.Экраны с высоким разрешением выглядят лучше, но пользовательский интерфейс может уменьшиться, что создает неудобства при использовании сенсорного взаимодействия с приложением. В другом случае, если вы решите "растянуть" макет приложения, спроектированный для более низкого разрешения, возникает другая проблема - текст и картинки могут отображаться нечетко.
В некоторой степени, это чисто теоретическая опасность, т.к. в WinRT-приложениях такая проблема не возникнет при выполнении простых правил. Процесс масштабирования в операционной системе Windows 8 и приложении для Магазина Windows выглядит следующим образом:
Представленная выше формула показывает три возможных разрешения Windows 8, в зависимости от устройства. Это значит, что не нужно беспокоиться о корректном отображении текста, Windows 8 автоматически отображает текст корректно, даже при масштабировании макета. Однако, эта функция доступна только при соответствующей настройке размера шрифта в интерфейсе Windows.
Для получения более подробной информации о размерах шрифта просмотрите "Знакомство с принципом нового дизайна Microsoft: Мастерством стоит гордиться" .
Работа с изображениями сложнее: чтобы убедиться, что ваши изображения выглядят корректно на экранах любых размеров и разрешений, необходимо создать три варианта графических материалов (различные по размерам) и следовать определенным правилам именования изображений, чтобы они были использованы соответствующим образом. Формула для определения размеров картинок и их названий выглядит так:
- Используйте загрузку ресурсов и укажите высоту и ширину изображения:
<imgsrc="projector.jpg" width=80px height=80px/> - Изображения автоматически загружаются при следующем порядке именования:
При этом способе "за кулисами" замена на соответствующую по размерам картинку происходит автоматически, в зависимости от плотности пикселей. Так, при разрешении экрана "по умолчанию" 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.