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

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

< Лекция 9 || Лекция 10: 123 || Лекция 11 >

Задание

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

  1. Каким будет ваш макет: фиксированным или адаптивным?
  2. Если в первом вопросе вы выбрали адаптивный макет, какой способ вы будете использовать для настройки макета: предоставите больше контента, расширите контент или будете увеличивать поля и отступы?
  3. Нарисуйте, как будет выглядеть ваш макет после масштабирования. На примере приложения FoodTruck (передвижные палатки быстрого питания) был выбран адаптивный макет и масштабирование за счет увеличения отображаемого количества информации. Содержание первых двух разделовГде мои палатки? (Mytruck) и Я голоден (Hungrynow) зафиксировано, разделы Отличные палатки (Featuredtrucks) и Хочется чего-то нового (FellingAdventurous) расширены дополнительными столбцами при появлении свободного пространства.
Решите, как будет выглядеть ваше приложение на экранах с различным размерами

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

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

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

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

а) Приложение Погода в прикрепленном режиме. b) Пользователь перетаскивает приложение, находящееся в режиме заполняющего просмотра, в левую часть экрана, где оно преобразуется для просмотра в режиме прикрепленного приложения

увеличить изображение
а) Приложение Погода в прикрепленном режиме. b) Пользователь перетаскивает приложение, находящееся в режиме заполняющего просмотра, в левую часть экрана, где оно преобразуется для просмотра в режиме прикрепленного приложения

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

  • приспособьте ваш макет для прикрепленного режима (один столбец, шириной 320 пикселей);
  • сохраните контекст и состояние приложения;
  • стремитесь к сохранению функциональности приложения;
  • позвольте пользователю контролировать ситуацию.

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

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

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

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

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

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

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

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

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

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

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

  • В прикрепленном режиме кнопки панели приложения должны отображаться только в виде значков, без подписей. Максимально допустимое количество кнопок - пять в одной строке.
  • Если в приложении более пяти кнопок, количество строк будет увеличено.
  • Тщательно продумывайте назначение кнопок, имеющих значение в прикрепленном режиме. Лишние кнопки можно удалить программным образом.
  • Группируйте команды осмысленно.

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

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

Задание

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

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

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

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

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

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



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

Итоги

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

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

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

Вопросы

  1. Каково минимальное разрешение для WinRT-приложений?
  2. Объясните разницу между адаптивным и фиксированным макетом. Как это связано с приложениями для Магазина Windows?
  3. Что называю прикрепленным режимом просмотра в WinRT-приложениях? Назовите преимущества оптимизации внешнего вида приложения для этого режима.

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

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

  • Отзывчивый Веб-дизайн

    http://www.alistapart.com/articles/responsive-web-design/

    Эта статья написана в 2010 году Итеном Маркотте и является первой универсальной теоретической работой, касающейся концепций адптивного дизайна. Хотя Маркотте называл его отзывчивым дизайном (responsive design) и использовал веб-модель как основную модель, эти принципы актуальны и для WinRT-приложений.
  • Адаптация к устройству

    http://msdn.microsoft.com/ru-ru/library/windows/apps/hh708740.aspx

    Документация по @-ms-viewport, разъясняющая разработчикам WinRT-приложений правила использования JavaScript для оптимизации макетов веб-сайтов и приложений для различных устройств.
  • Руководство по прикрепленному и заполненному режимам апредставления

    http://msdn.microsoft.com/ru-ru/library/windows/apps/hh465371.aspx

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

Ответы

  1. Минимальный размер разрешения для WinRT-приложения - 1024 х 768, но для разработки рекомендуется разрешение 1366 х 768.
  2. В адаптивном макете интерфейс настраивается разработчиком в зависимости от размеров экрана. Методы для масштабирования макета включают в себя масштабирование или размещение дополнительного контента, добавление или удаление колонок, а также увеличение или сокращение величины отступов.Фиксированный макет представляет собой зафиксированное или центрированное содержимое, когда, в зависимости от доступного пространства на экране, автоматически настраивается размер свободного пространства.
  3. Прикрепленный режим просмотра представляет собой ваше приложение в размере 320 пикселей в ширину и отображается в виде столбца слева или справа от основного приложения. Режим прикрепленного просмотра вызывается пользователем жестом на планшетном компьютере, или вызовом контекстного меню через клавиатуру, или щелчком мышки на настольном ПК. В режиме прикрепленного просмотра можно сохранить структуру, содержание и интерактивность вашего приложения. Хорошо оптимизированные приложения будут дольше присутствовать на начальном экранее ииметь успех у пользователей.
< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Максим Домшенко
Максим Домшенко
Россия, Курск, Региональный Финансово-Экономический Институт
Андрей Бобылев
Андрей Бобылев
Россия, Москва