Спонсор: Microsoft
Опубликован: 27.12.2012 | Доступ: свободный | Студентов: 427 / 35 | Длительность: 09:19:00
Специальности: Программист
Лекция 10:

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

< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Аннотация: В этой лекции вы узнаете, как разработать привлекательное приложение, поддерживающее различное разрешение экрана. Вы научитесьпользоваться преимуществами прикрепленного режима просмотра и портретного режима, уникальных для Windows 8 и форм-фактора планшетных ПК. Мы расскажем, как масштабировать ваши приложения для устройств с различной плотностью пикселей. Операционная система Windows 8 поддерживает различную плотность пикселей, в отличие от других операционных систем семейства Windows, и ваше приложение может воспользоваться этим.

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

Цель лекции

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

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

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

Разнообразные устройства и экраны

Разнообразные устройства и экраны

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

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

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

Сетка макета WinRT-приложения, оптимизированная для монитора разрешением 1366 x 768

Сетка макета WinRT-приложения, оптимизированная для монитора разрешением 1366 x 768
Сетка макета WinRT-приложения, не оптимизированная для монитора разрешением 1920x1080

Сетка макета WinRT-приложения, не оптимизированная для монитора разрешением 1920x1080

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

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

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

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

Сетка макета WinRT-приложения, оптимизированная для монитора разрешением 1366 x 768

Сетка макета WinRT-приложения, оптимизированная для монитора разрешением 1366 x 768
Сетка макета WinRT-приложения, использующая адаптивный макет для оптимизации на экране разрешением 1920 x 1080

Сетка макета WinRT-приложения, использующая адаптивный макет для оптимизации на экране разрешением 1920 x 1080

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

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

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

  • минимальное разрешение в WinRT-приложении - 1024 х 768;
  • рекомендуемый размер для начала разработки - 1366 х 768

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

Сетка макета WinRT-приложения, использующая адаптивный макет для оптимизации на экране разрешением 1920 x 1080

увеличить изображение
Сетка макета WinRT-приложения, использующая адаптивный макет для оптимизации на экране разрешением 1920 x 1080

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

Сетка типового шаблона в WinRT-приложения, разработанного в Visual Studio

увеличить изображение
Сетка типового шаблона в WinRT-приложения, разработанного в Visual Studio

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

Разделение макета на Заголовок, Описание и Содержимое визуально поможет понять, как макет будет выглядеть при различном разрешении

увеличить изображение
Разделение макета на Заголовок, Описание и Содержимое визуально поможет понять, как макет будет выглядеть при различном разрешении

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

  • отображать большее количество Содержимого;
  • растянуть Содержимое;
  • увеличить/уменьшить пустое пространство.

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

< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Максим Домшенко
Максим Домшенко
Россия, Курск, Региональный Финансово-Экономический Институт
Андрей Бобылев
Андрей Бобылев
Россия, Москва