Проектирование для экранов, различных по размеру и разрешению
Презентацию к данной лекции можно скачать здесь.
Цель лекции
Цель этой лекции - научить вас создавать приложения для экранов различных размеров и разрешения. Особое внимание будет обращено на основные отличия между фиксированными и адаптивными макетами, на прикрепленном режиме просмотра в WinRT-приложениях и методах разработки для него. Кроме того, вы узнаете, как создавать приложения, рассчитанные на различные режимы просмотра и форм-факторы.
Особенности разработки для различных экранов
В этом разделе вы узнаете, почему так важно разработать приложение, которое будет работать на экранах любых размеров. За последние годы экосистема компьютеров резко возросла, помимо настольных компьютеров в неё влился новый класс мобильных устройств. В результате появилось много сценариев использования экранов, различных по размерам и разрешению, и ваше приложение должно корректно отображаться на каждом из них.
Сложности для разработчика вызывают не только физические размеры экранов. Приложение для WindowsStore, кроме того, должно быть оптимизировано для портретного и ландшафтного режимов просмотра, и необходимо понять, как пользователю будет удобнее воспользоваться всеми возможностями в различных режимах. Нужно помнить, что для высокого разрешения экрана требуются картинки и графика соответствующего разрешения. Вы научитесь решать эти проблемы в последующих разделах, но начать следует с решения первого вопроса: как настроить макет для корректного отображения в различных разрешениях.
Использование адаптивных макетов для экранов разных размеров
Дизайнеры нового интерфейса Windows столкнулись с некоторыми проблемами с макетами при разработке системы. Основная проблема заключалась в решении дилеммы: как оптимизировать макет и для планшета, и для большого экрана. На рисунке ниже представлена эта дилемма. На первой картинке представлен макет, оптимизированный для 11,6-дюймового монитора (разрешение 1366 x 768), на второй картинке тот же макет на 20-дюймовом мониторе (разрешение 1920x1080).
Из рисунка видно, что неоптимизированный макет далеко не идеально отображается на большом экране. Контент занимает лишь часть экрана, и это не позволяет пользователю полноценно использовать приложение. Фактически, окно приложения уменьшено.
Если вы принимали участие в веб-разработке, вам должны быть знакомы эти проблемы. Но подобные сложности исчезли с появлением полезных инструментов для разработки, позволяющих создавать макеты для экранов различного разрешения. Такой стиль проектирования называют адаптивным дизайном (иногда - "отзывчивым дизайном", responsivedesign).
Сравнение с веб-разработкой в данном случае важно, так как WinRT-приложения разрабатывают с использованием HTML, CSS и JavaScript, и они, фактически заимствовали адаптивный дизайн у веб-страниц. И те и другие достигают целей построения адаптивного интерфейса за счет использования медиа-запросов CSS3.
Основная идея медиа-запросов состоит в том, что отображение макета зависит от возможностей устройств пользователей. Если у пользователя разрешение экрана 1366 x 768, макет определяется одной таблицей стилей. Если у пользователя разрешение экрана составляет 1920x1080, макет использует другую таблицу стилей, оптимизированную под эти размеры экрана.
![Сетка макета WinRT-приложения, использующая адаптивный макет для оптимизации на экране разрешением 1920 x 1080](/EDI/16_08_14_2/1408137470-25747/tutorial/1140/objects/10/files/10_04.jpg)
Сетка макета WinRT-приложения, использующая адаптивный макет для оптимизации на экране разрешением 1920 x 1080
На последнем примере видно, что макет большого экрана удобнее: здесь три строки содержания вместо двух строк и несколько столбцов, располагающихся на всем экране. При использовании этого способа приложение создаёт эффект погружения и выглядит логично, дополнительное пространство экрана задействовано рационально.
Адаптивные макеты заставляют вас думать о пропорциях
С точки зрения разработки, хорошей новостью является то, что технические детали для настраиваемого макета приложения для Магазина Windows, в основном, не требуют серьезного вмешательства, функционируя по умолчанию. Однако, существует несколько основных положений, которые необходимо учитывать:
- минимальное разрешение в WinRT-приложении - 1024 х 768;
- рекомендуемый размер для начала разработки - 1366 х 768
С одной стороны, вам не нужно прилагать много усилий, чтобы воспользоваться адаптивными макетами приложений, ведь многие технические операции выполняются без вашего участия. С другой стороны, если потратить больше времени, норазработать свой макет, учитывая пропорции,то получится хороший конечный результат. Для четкого понимания термина "разработка в пропорциях", рассмотрим следующую структуру, созданную на основе сетки шаблона в VisualStudio.
увеличить изображение
Сетка макета WinRT-приложения, использующая адаптивный макет для оптимизации на экране разрешением 1920 x 1080
Теперь представьте, что ваш шаблон растянулся на большом экране. Каковы варианты развития событий? Какие разделы могут расшириться, а какие должны иметь фиксированное положение и размеры? Для лучшего понимания этих вопросов можно разделить этот макет на невидимые "зоны": Заголовок (Header), Описание (Description) и Содержимое (Content).
При таком определении "зон" можно использовать несколько вариантов изменения макета при различных размерах экрана: Заголовок может растянуться, а Описание и Содержимое- остаться неизменными; либо Заголовокможетостатьсянеизменным, аОписание и Содержимое растянутся. Из предыдущих лекций известно, что Заголовок всегда располагается в верхнем левом углу с зафиксированной верхней и правой границей. Таким образом, это исключает изменение размеров и положения Заголовка. В WinRT-приложении Содержимое является самой важной частью и лучшим местом для начала работы.
увеличить изображение
Разделение макета на Заголовок, Описание и Содержимое визуально поможет понять, как макет будет выглядеть при различном разрешении
В итоге, вы должны решить, чем заполнить свободное пространство, появляющееся на большом экране.В решении этой проблемы могут помочь три варианта:
- отображать большее количество Содержимого;
- растянуть Содержимое;
- увеличить/уменьшить пустое пространство.
Вы можете воспользоваться одним из советов или комбинировать все три. Для каждого способа существуют свои особенности, с которыми необходимо ознакомиться.