Общие сведения о двухэкранных устройствах

Двухэкранными называются портативные устройства с двумя симметричными экранами. Они позволяют повысить производительности благодаря гибкому форм-фактору.

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

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

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

В этой статье мы поговорим о стандартных шаблонах проектирования и концепциях, которые применимы к любой операционной системе и любому языку разработки. Сведения о разработке приложений для двухэкранных устройств на конкретных платформах см. в соответствующих статьях о разработке на Kotlin и Java, React Native, Xamarin, разработке игр на Unity, о веб-технологиях или разработке для Windows.

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

Общие сведения о двухэкранных устройствах

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

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

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

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

Использование и оптимизация существующих возможностей

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

Адаптивные режимы отображения приложений

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

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

Учитывайте все возможные ориентации устройства

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

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

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

Поддержка разных методов ввода

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

Перетаскивание

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

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

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

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

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

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

Отображение одного изображения на фоне другого в мультимедийном приложении

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

Рекомендации по реализации интерфейса на двухэкранном устройстве

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

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

Ниже приведено несколько рекомендаций по выбору методов проектирования приложений для двухэкранных устройств.

• Обеспечьте возможность непрерывного использования преимуществ
  • Режим растягивания должен расширять существующие возможности в рамках потока задач, выполняемых в этом приложении. Нет смысла создавать такой режим, который будет использоваться только для уникальных задач. Думайте не о конкретных экранах, а об общей картине.
• Режим растягивания — не единственный возможный
  • Нельзя, чтобы приложение отлично работало только в режиме растягивания. Не привязывайте важные функции приложения к этому режиму так, чтобы для выполнения базовых задач приложение нужно было растягивать.
• Пользователь должен всегда сохранять контроль
  • Чтобы избежать неожиданных (и потенциально разрушительных) результатов работы с приложением, необходимо запретить возможность автоматического и перехода в режим растягивания без действия. Это действие должно явно инициироваться пользователем. Такие решения может принимать только пользователь.
• Режим растягивания должен работать предсказуемо
  • Необходимо распознавать намерение пользователя перейти в режим растягивания. Учитывайте это при проектировании. Сделайте переход в режим растягивания предсказуемым. Эта возможность должна приносить пользу в любом соответствующем сценарии.

Режим растягивания — это выбор пользователя

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

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

Учитывайте намерения пользователя и ориентацию устройства

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

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

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

Учитывайте все поддерживаемые режимы

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

• Один экран (стандартный режим)

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

• Режим растягивания (стандартный режим)

  • Когда устройство используется в режимах с поддержкой двух экранов, (двойной экран в книжной или альбомной ориентации), пользователь может растянуть одно приложение на два экрана, обеспечивая больше места для отображения содержимого. Этот режим должен включать пользователь. Нельзя, чтобы приложение переходило в него автоматически.
  • Поддержка не обязательна. Режим растягивания — это уникальная особенность двухэкранных устройств. Если вы не будете вносить никаких изменений в приложение, оно будет растянуто так, чтобы отображаться на двух экранах, как на одном большом. Но вы можете внести ряд оптимизаций, чтобы реализовать в приложении дополнительные полезные возможности, характерные для двухэкранных устройств. Эти возможности подробно описываются далее в этой статье.

• Один экран (полноэкранный режим)

  • Этот режим напоминает стандартный, но в нем скрыты все системные элементы пользовательского интерфейса (панель задач, область уведомлений, панель приложения, панель заголовка). Это позволяет убрать все лишнее, когда пользователь запускает игры или воспроизводит видео.
  • Поддержка не обязательна. Вы можете использовать доступные API, чтобы перевести приложение в полноэкранный режим.

• Режим растягивания (полноэкранный режим)

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

Как учитывать стык

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

В режиме растягивания будет заметен стык — пространство между двумя экранами. Это вынужденная мера. В этом разделе описаны рекомендации по правильному отображению приложения с учетом стыка между экранами.

Всегда ли нужно учитывать стык?

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

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

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

Как учитывать стык

Смещение содержимого на одну сторону

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

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

Нижнее меню также следует не растягивать, а сместить на одну сторону.

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

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

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

Привязка к стыку

Выравнивание по стыку при использовании четного количества столбцов

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

Используйте четное количество столбцов в сетках, особенно для контейнеров, таблиц и т. п., а также учитывайте отступ от стыка.

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

Переупорядочивание элементов пользовательского интерфейса

Сдвиг на любую сторону от стыка

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

Маскирование и разделение

Есть два способа отображения представления со стыком, реализованные в программном обеспечении. Первый из них называется маскированием, а второй — разделением.

Техника маскирования означает отрисовку изображения под стыком. При частичном перекрытии изображения наш мозг автоматически дорисовывает невидимое. Эта техника хорошо подходит для мультимедийных приложений (видео, фото), а также сценариев работы с холстом, где непрерывность изображения гораздо важнее, чем полное отображение всего содержимого.

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

Каждый из методов имеет своим преимущества в зависимости от типа создаваемого приложения, и мы продолжаем прорабатывать оптимальные варианты для разных сценариев использования.

Шаблоны приложений с поддержкой двух экранов

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

Ниже представлено пять распространенных режимов. Это не единственные способы работы с двухэкранными устройствами, но вы можете использовать их в качестве отправной точки.

Расширенный холст

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

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

Преимущества

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

Типы приложений с поддержкой этого режима

• Приложения карт
• Приложения на основе холста для рисования

Список: сведения

В шаблоне Список и подробные сведения есть главная панель (обычно с представлением списка) и область сведений для содержимого. При выборе элемента в списке область сведений обновляется. Этот режим подходит, если у вас есть более широкая область просмотра. Он часто используется для работы с электронной почтой и адресными книгами.

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

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

Преимущества

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

Типы приложений с поддержкой этого режима

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

Две страницы

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

В зависимости от особенностей приложения вы можете перелистывать страницы по одной или по две.

Преимущества

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

Типы приложений с поддержкой этого режима

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

Двойное представление

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

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

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

Преимущества

Наличие нескольких представлений в одном приложении в том же одном контейнере позволяет легко сравнивать сходное содержимое, размещенное рядом.

Типы приложений с поддержкой этого режима

• Средства редактирования, в которых нужно сравнивать состояния "до" и "после" (например, код разметки и предварительный просмотр)
• Размещение содержимого и контекста рядом (например, карта и список ресторанов)
• Приложения, в которых можно сравнивать сходные элементы
• Наличие двух холстов с согласованным содержимым, которое располагается на двух отдельных страницах (например, холст для рисования на одной стороне и заметки на другой)

Сопутствующая панель

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

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

Преимущества

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

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

Типы приложений с поддержкой этого режима

• Рабочие приложения, предоставляющие дополнительную информацию, которую удобно размещать рядом с основным содержимым
• Инструменты для творчества, например для рисования изображений
• Приложения для редактирования музыки или видео
• Игровые приложения

Дальнейшие действия

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

• Kotlin и Java
• Flutter
• React Native
• Xamarin
• Разработка игр на Unity
• Веб-технологии
• Windows