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

Презентацию к данной лекции можно скачать здесь.

Цель лекции

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

Особенности разработки для различных экранов

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

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

Использование адаптивных макетов для экранов разных размеров

Дизайнеры нового интерфейса Windows столкнулись с некоторыми проблемами с макетами при разработке системы. Основная проблема заключалась в решении дилеммы: как оптимизировать макет и для планшета, и для большого экрана. На рисунке ниже представлена эта дилемма. На первой картинке представлен макет, оптимизированный для 11,6-дюймового монитора (разрешение 1366 x 768), на второй картинке тот же макет на 20-дюймовом мониторе (разрешение 1920x1080).

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

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

Сравнение с веб-разработкой в данном случае важно, так как WinRT-приложения разрабатывают с использованием HTML, CSS и JavaScript, и они, фактически заимствовали адаптивный дизайн у веб-страниц. И те и другие достигают целей построения адаптивного интерфейса за счет использования медиа-запросов CSS3.

Основная идея медиа-запросов состоит в том, что отображение макета зависит от возможностей устройств пользователей. Если у пользователя разрешение экрана 1366 x 768, макет определяется одной таблицей стилей. Если у пользователя разрешение экрана составляет 1920x1080, макет использует другую таблицу стилей, оптимизированную под эти размеры экрана.

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

Адаптивные макеты заставляют вас думать о пропорциях

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

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

Теперь представьте, что ваш шаблон растянулся на большом экране. Каковы варианты развития событий? Какие разделы могут расшириться, а какие должны иметь фиксированное положение и размеры? Для лучшего понимания этих вопросов можно разделить этот макет на невидимые "зоны": Заголовок (Header), Описание (Description) и Содержимое (Content).

При таком определении "зон" можно использовать несколько вариантов изменения макета при различных размерах экрана: Заголовок может растянуться, а Описание и Содержимое- остаться неизменными; либо Заголовокможетостатьсянеизменным, аОписание и Содержимое растянутся. Из предыдущих лекций известно, что Заголовок всегда располагается в верхнем левом углу с зафиксированной верхней и правой границей. Таким образом, это исключает изменение размеров и положения Заголовка. В WinRT-приложении Содержимое является самой важной частью и лучшим местом для начала работы.

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

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

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

Увеличенное свободное пространство можно заполнить большим количеством контента несколькими способами. Так как 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.

Для получения более подробной информации о размерах шрифта просмотрите лекцию 6.

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

<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.

Задание

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

Разработка для прикрепленного режима просмотра

Структура операционной системыWindows 8дает возможность запускать два приложения одновременно с помощью функции просмотра в режиме прикрепленного приложения. Когда запущено одновременно два приложения, прикрепленное приложение имеет фиксированные размеры по ширине в 320 пикселей, всегда занимая часть экрана меньшей ширины. Размеры окна приложения в прикрепленном режиме всегда 320 пикселей, эти размеры не могут быть изменены ни разработчиком, ни пользователем! Большая часть экрана - это так называемая область заполняющего просмотра (filledview), ширина которого зависит от размеров экрана.

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

Внимательно изучите картинку, особенно вариантb). Во второй части рисунка макет приложения ContosoFoodTrucks заметно изменился. Структура из нескольких столбцов рисунка а) изменилась на структуру, состоящую из одного столбца (рисунок b). Это неизбежно: Ваше приложение должно функционировать и в прикрепленном режиме, ширина которого 320 пикселей, что намного меньше ширины основного экрана. Макет, состоящий из нескольких столбцов и отображаемый в режиме заполняющего приложения, не может быть просто уменьшен в соответствии с размерами прикрепленного режима просмотра, так как это сделает приложение практически бесполезным. Этого следует избегать. Вот несколько советов, которые помогут выполнить требования, необходимые для оптимизации вашего приложения для работы в прикрепленном режиме:

Как перечисленные выше советы повлияют на ваши действия по отношению к макету? Давайте рассмотрим каждый пункт в отдельности.

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

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

Сохраните контекст и состояние приложения

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

Стремитесь к сохранению функциональности приложения

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

Позвольте пользователю контролировать ситуацию

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

Панель приложения в прикрепленном режиме

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

Не забудьте о режиме заполняющего приложения!

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

Задание

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

Проектирование портретного режима просмотра

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

Здесь представлены несколько принципов, которые можно применить в вашем приложении для возможности работы в портретном режиме просмотра.

a)Режим просмотра приложения в горизонтальном положении (ландшафтный режим); b) Режим просмотра приложения в вертикальном положении (портретный режим)

Итоги

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

Самостоятельная работа

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

Вопросы

Дополнительные источники

Ниже перечислены дополнительные источники, которые могут помочь в понимании принципов адаптивного макета и прикрепленного режима просмотра.

Ответы