Перенос с Windows Phone Silverlight на UWP для форм-фактора и взаимодействия с пользователем

  • Статья

Предыдущий раздел — Перенос уровней бизнеса и данных.

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

Разные параметры формы и взаимодействие с пользователем

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

Что такое размер экрана на самом деле?

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

Объективно, экран измеряется в дюймах и физических (необработанных) пикселях. Зная эти два параметра, вы знаете количество пикселей на дюйм. Это плотность пикселей, также известная как DPI (точек на дюйм) или PPI (пикселей на дюйм). И обратная величина DPI — это физический размер пикселей как части дюйма. Плотность пикселей также известна как разрешение, хотя термин часто используется в широком смысле для обозначения количества пикселей.

По мере увеличения расстояния просмотра все эти объективные показатели кажутся меньшими и сводятся к эффективному размеру экрана и его эффективному разрешению. Телефон обычно используется из наиболее близкого расстояния к глазам. Планшет и монитор ПК следуют после, а наибольшее расстояние до устройств Surface Hub и телевизоров. Чтобы компенсировать различия, устройства становятся объективно большими с дистанцией просмотра. Когда вы устанавливаете размер элементов пользовательского интерфейса, вы устанавливаете размеры в единицах, которые называются эффективными пикселями (epx). Windows 10 учтет число точек на дюйм и обычное расстояние до экрана, чтобы вычислить наилучший размер элементов пользовательского интерфейса в физических пикселях для обеспечения наивысшего удобства просмотра. См. раздел Пиксели просмотра/эффективные пиксели, расстояние от экрана и коэффициенты масштабирования.

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

Разрешение сенсорного ввода и разрешение просмотра

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

Текст должен быть правильного размера для чтения (текст размером 12 pt на расстоянии просмотра 20 дюймов является "золотым" правилом), а изображение должно иметь соответствующий размер и эффективное разрешение согласно расстоянию просмотра. На разных устройствах тот же масштаб эффективных пикселей обеспечивает соответствующий размер и удобочитаемость элементов пользовательского интерфейса. Текст и другие графические элементы на основе вектора масштабируются автоматически и при этом очень хорошо. Растровая графика также масштабируется автоматически, если разработчик предоставит ресурс в одном крупном размере. Тем не менее, желательно, чтобы разработчик предоставил каждый ресурс в ряде размеров. Это позволит автоматически загружать ресурс необходимого размера согласно коэффициенту масштабирования целевого устройства. Подробнее об этом см. в разделе Пиксели представления и эффективные пиксели, расстояние до экрана и коэффициенты масштабирования.

Макет и адаптивный диспетчер визуальных состояний

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

перенесенное приложение магазина windows phone

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

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

Кроме новых элементов управления, например, представления списка и представления сетки, большинство установленных типов макета из Windows Phone Silverlight имеют эквиваленты в UWP. Например: Canvas, Grid и StackPanel. При перенесении большинства элементов пользовательского интерфейса, которые используют эти типы, не должно возникнуть трудностей, но следует всегда искать способы максимально использовать возможности динамического макета этих панелей макета, чтобы автоматически изменять размер и макет на устройствах разных размеров.

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

Модальности ввода

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

Максимальное использование существующей разметки и кода

Методы совместного использования пользовательского интерфейса для таргетирования устройств с широким диапазоном форм-факторов см. в списке развертывания разметки и повторного использования кода.

Дополнительные сведения и рекомендации по проектированию