Оптимизация для альбомной и книжной ориентаций экрана

Во время демонстраций Windows 8 на многочисленных форумах мы, как правило, использовали альбомную ориентацию (широкий экран). В основном это связано с тем, что мы применяли проектор, а для него больше подходит именно такая ориентация. Другая причина заключается в том, что многие из современных устройств (например, планшетный компьютер Samsung, представленный на конференции //build/ с предварительной версией Windows для разработчиков) широкоэкранные, что идеально подходит для одновременного отображения окон приложений с помощью новой функции «Привязка» в альбомной ориентации. Мы проделали огромный объем работы, чтобы обеспечить быстрый поворот экрана и удобный интерфейс для пользователей, предпочитающих книжную ориентацию. Как вы узнаете далее, на такое решение значительно повлияли результаты проведенного нами исследования факторов, участвующих в выборе пользователями той или иной ориентации. И это еще не все — мы также поработали над средствами разработки Visual Studio и Expressions, чтобы разработчики получили удобные инструменты для создания приложений, одинаково хорошо работающих в обеих ориентациях. Эту статью об альбомной и книжной ориентациях экрана в Windows 8 написал Дэвид Вашингтон (David Washington) из группы разработчиков пользовательского интерфейса. Также вы можете посмотреть его выступление APP-207T на конференции //build/. — Стивен

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

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

При разработке пользовательского интерфейса Windows 8 для разных форм-факторов мы использовали следующие принципы:

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

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

Человек, сидящий на диване и использующий планшетный компьютер в книжной ориентации

Сначала мы думали, что на выбор ориентации устройства (альбомная или книжная) больше всего влияют личные предпочтения. Каждый пользователь, за которым мы наблюдали, поворачивал устройство, и все они ожидали, что интерфейс и само устройство в этот момент будут работать. Удивительно было то, что, когда участники исследования лучше познакомились с устройствами и используемыми приложениями, самым влиятельным фактором при выборе ориентации экрана стал тип отображаемого контента. Если контент и интерфейс удобнее размещались на экране при альбомной ориентации, пользователи работали с приложением в альбомном режиме. Если же более удобной была книжная ориентация, применялась именно она. Приведем пример: большинство пользователей предпочитали смотреть полноэкранное видео в альбомном режиме без черных полос, но длинные статьи или веб-страницы они предпочитали читать в книжном режиме, так как при этом нужно реже прокручивать экран. По словам пользователей, на их предпочтения сильно влияло их собственное ощущение того, удобно ли работать с приложением в той или иной ориентации. Нам задавали вопросы о том, предназначена ли система Windows 8 больше для альбомной или книжной ориентации. Мы считаем, что важны обе ориентации, и каждая из них может обеспечить комфортную работу. Вместо того чтобы оптимизировать систему для определенной позы тела и ориентации устройства, мы постарались сделать так, чтобы удобство работы с ней не зависело от того, как вы держите устройство, и чтобы эта система адаптировалась к текущему приложению и его контенту.

Мы поставили перед собой следующие цели в отношении ориентации экрана:

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

Windows в альбомном режиме

Некоторые спрашивали, почему на конференции //build/ мы показали так много примеров пользовательского интерфейса Windows 8 в альбомном режиме. Windows 8 — это переосмысление всех персональных компьютеров, а не только планшетных. Эта операционная система будет работать на многих миллионах ноутбуков и настольных компьютеров (созданных для Windows 7 и новых, которые еще только будут создаваться для Windows 8), многие из которых поддерживают (или будут поддерживать) только альбомную ориентацию экрана. Кроме того, в альбомном и широкоэкранном режиме возможна многозадачность (закрепление окон двух приложений рядом друг с другом) и воспроизведение полноэкранного видео без черных полос. (Также немаловажно, что многие из наших масштабных демонстраций мы проводим с помощью проектора на огромных экранах, а для этого больше подходит альбомный режим.)

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

Окно приложения AllThingsD, прикрепленное к окну приложения Stocks в альбомном режиме

Windows в книжном режиме

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

Приложение Stocks в книжном режиме с соотношением сторон 3:4, 10:16 и 9:16

Поворот экрана

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

Важной частью перехода между альбомной и книжной ориентацией является анимация. Именно анимация отвечает за видимый эффект плавного перехода между двумя состояниями экрана. Время анимации очень важно, так как она должна быть быстрой и высокочувствительной, но при этом достаточно плавной, чтобы переход не казался слишком резким. Анимацией управляет диспетчер окон рабочего стола (DWM), обеспечивающий плавную анимацию в Windows 7 и Windows 8.

На временной шкале отмечены моменты времени, когда датчик поворота начинает двигаться, когда устройство поворачивается для перехода в книжный режим, когда датчик поворота стабилизируется (100 мс) и когда временная шкала заканчивается (500 мс)

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

Команды блокировки и отключения блокировки поворота

Ориентация разных экранов

В следующей статье мы подробно поговорим о том, как Windows 8 масштабирует изображение на разных экранах с точки зрения разработчика. Но тема различных размеров экрана заслуживает рассмотрения также и в контексте альбомной и книжной ориентации. Windows 8 будет работать на компьютерах с разным размером экрана, разным разрешением и разным соотношением сторон, от экранов формата 4:3, больше похожих на квадрат, до широкоэкранных мониторов формата 16:9 и разнообразных промежуточных модификаций. Наша платформа масштабирования позволяет системе Windows и приложениям легко адаптироваться, рационально размещать контент на разных экранах и с пользой применять все доступное пространство. Многие из этих устройств можно использовать и в книжном, и в альбомном режиме. Такое разнообразие — отличительная характеристика операционной системы Windows. Она дает вам шанс выбрать именно то устройство и ту ориентацию экрана, которые лучше всего подходят для ваших целей.

Альбомный режим с соотношением сторон 4:3, 16:10 и 16:9

Минимальное разрешение для приложений Windows 8 в стиле Metro — 1024 x 768 точек. Мы выбрали этот размер, потому что это самое распространенное разрешение в Интернете, а подавляющее большинство (98,8 %) пользователей Windows имеют возможность работать с этим или более высоким разрешением (см. диаграмму ниже).

42 % пользователей Windows 7 работают с разрешением экрана 1366 x 768. Для всех остальных разрешений этот показатель составляет 12 % или меньше. Разрешения 1024 x 600 и 1280 x 720 поддерживают только настольные приложения, в то время как другие разрешения поддерживают все приложения Windows 8.

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

Разрешение, поддерживающее все возможности Windows 8, в том числе многозадачность с закреплением окон приложений, — 1366 x 768. Мы выбрали именно это разрешение, так как оно позволяет разместить прикрепленное приложение шириной 320 пикселей (что также является шириной экрана многих телефонов) рядом с основным приложением размером 1024 x 768 (наиболее распространенный в Интернете формат).

Эти ограничения будут применяться во время выполнения. Мы решили отказаться от прежней стратегии и не предоставлять никакого способа обойти эти ограничения, поскольку наша цель — обеспечить полнофункциональную работу приложений в стиле Metro при определенном разрешении. В предварительном выпуске для разработчиков не было никаких предупреждений по этому поводу во время выполнения (кроме объявления на сайте загрузки), что мы, конечно, исправим в бета-версии. Мы заметили, что у некоторых пользователей, работающих на виртуальных машинах с разрешением 600 x 800 и нетбуках с разрешением 1024 x 600, это вызвало неудобства. Приносим свои извинения. Следует отметить, что число компьютеров с разрешением 1024 x 600 очень мало, так как нижняя граница передвинулась на разрешение 1280 x 800, которое поддерживает приложения в стиле Metro без привязки. Но это разрешение все равно находится лишь на втором месте, сильно уступая разрешениям, поддерживающим все возможности, и мы ожидаем сдвиг к более высоким разрешениям экранов по мере выпуска новых компьютеров.

Поворот с точки зрения разработчиков

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

Используя те же методики, которые применялись для создания возможности прикрепления или поддержки разных размеров экрана, разработчики могут легко обеспечить поддержку книжной ориентации. Разработчики HTML5 будут использовать мультимедиа запросы CSS для привязки стиля макета к ориентации системы, а разработчики XAML смогут изменять макет в ответ на изменение состояния экрана. В языках HTML и XAML все адаптивные элементы управления и шаблоны, предоставляемые платформой, будут поддерживать обе ориентации экрана. Кроме того, система автоматически обрабатывает анимацию перехода без дополнительных усилий со стороны разработчиков. Если в приложении есть контент, для которого больше подходит определенная ориентация, разработчики могут предпочесть именно ее, а система будет сохранять представление приложения в соответствующем режиме (если устройство его поддерживает).

Что касается тестирования, Visual Studio 11 и Expression Blend позволяют разработчикам тестировать приложения в книжном и альбомном режимах на экранах разного размера и с разным соотношением сторон даже при отсутствии доступа к планшетному устройству.

Альбомная и книжная ориентация в Visual Studio 11 Simulator

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

Вот короткое видео, в котором вы можете наблюдать переход от альбомной к книжной ориентации в действии.

Ваш браузер не поддерживает видео HTML5.

Загрузите это видео, чтобы просмотреть его в своем мультимедиа-проигрывателе:
MP4, высокое качество | MP4, низкое качество

Мы с нетерпением ждем ваших отзывов об этих новых возможностях!

Спасибо за внимание,
Дэвид