Перенос Windows Phone Silverlight в UWP для форм-фактора и пользовательского интерфейса
Предыдущий раздел — перенос бизнес-слоев и уровней данных.
Приложения Windows используют общий внешний вид и интерфейс на компьютерах, мобильных устройствах и многих других типах устройств. Пользовательский интерфейс, входные данные и шаблоны взаимодействия очень похожи, и пользователь, перемещающийся между устройствами, будет приветствовать знакомый интерфейс. Различия между устройствами, такими как физический размер, ориентация по умолчанию и фактор эффективного разрешения пикселей в том, как приложение универсальная платформа Windows (UWP) отрисовывается Windows 10. Хорошая новость заключается в том, что большая часть тяжелого подъема обрабатывается системой с помощью умных концепций, таких как эффективные пиксели.
Различные форм-факторы и взаимодействие с пользователем
Различные устройства имеют несколько возможных портретных и альбомных разрешений в различных пропорциях. Как визуальные аспекты своего интерфейса, текста и ресурсов приложения UWP будут масштабироваться? Как можно поддерживать сенсорный ввод, а также ввод мыши и клавиатуры? И с приложением, которое поддерживает касание различных размеров устройств с разными расстояниями просмотра, как можно управлять как правильным целевым объектом сенсорного ввода в разных плотностях пикселей и иметь его содержимое доступно для чтения на разных расстояниях? В следующих разделах рассматриваются сведения, которые необходимо знать.
Какой размер экрана, действительно?
Короткий ответ заключается в том, что это субъективная, потому что это зависит не только от целевого размера дисплея, но и от того, насколько далеко от него вы. Субъективность означает, что мы должны поставить себя в обувь пользователя, и это то, что разработчики хороших приложений делают в любом случае.
Объективно экран измеряется в единицах дюйма и физических (необработанных) пикселях. Зная оба этих метрика, вы узнаете, сколько пикселей помещается в дюйм. Это плотность пикселей, также известная как DPI (точки на дюйм), также известная как PPI (пиксели на дюйм). И взаимность DPI — это физический размер пикселей в доли дюйма. Плотность пикселей также называется разрешением, хотя этот термин часто используется слабо для среднего количества пикселей.
По мере увеличения расстояния все эти целевые метрики выглядят меньше, и они разрешаются в эффективном размере экрана и его эффективном разрешении. Ваш телефон обычно находится ближе всего к вашему глазу; Планшет, после чего монитор компьютера будет следующим, и самые дальние — устройства Surface Hub и телевизоры. Для компенсации устройства, как правило, получают объективно больше с расстоянием просмотра. При установке размеров элементов пользовательского интерфейса эти размеры задаются в единицах, называемых эффективными пикселями (epx). И Windows 10 будет учитывать DPI и типичное расстояние просмотра от устройства, чтобы вычислить лучший размер элементов пользовательского интерфейса в физических пикселях, чтобы обеспечить лучший интерфейс просмотра. Просмотр и действующие пиксели, расстояние просмотра и коэффициенты масштабирования.
Даже поэтому мы рекомендуем протестировать приложение с различными устройствами, чтобы подтвердить каждый опыт самостоятельно.
Разрешение и разрешение сенсорного ввода
Доступность (мини-приложения пользовательского интерфейса) должна быть правильным размером для касания. Таким образом, целевой объект сенсорного ввода должен сохранять свой физический размер на разных устройствах, которые могут иметь разные плотности пикселей. Эффективные пиксели также помогают вам здесь: они масштабируются на разных устройствах с учетом плотности пикселей, чтобы достичь более или менее постоянного физического размера, идеально подходящего для целевых объектов касания.
Текст должен быть правильным размером для чтения (12 точек текста на расстоянии 20 дюймов просмотра является хорошим правилом пальца), а изображение должно быть правильным размером и эффективным разрешением для расстояния просмотра. На разных устройствах такое же эффективное масштабирование пикселей обеспечивает правильный размер и чтение элементов пользовательского интерфейса. Текст и другие векторные графические шкалы автоматически и очень хорошо. Графики на основе растровых изображений также масштабируются автоматически, если разработчик предоставляет ресурс в одном, большом размере. Но для разработчика рекомендуется предоставить каждому ресурсу в диапазоне размеров, чтобы соответствующий для коэффициента масштабирования целевого устройства был автоматически загружен. Дополнительные сведения об этом см. в разделе "Просмотр и действующие пиксели", "Расстояние просмотра" и "Коэффициенты масштабирования".
Макет и адаптивный диспетчер визуальных состояний
Мы описали факторы, участвующие в понятном понимании размера экрана. Теперь давайте подумайте о макете приложения и о том, как использовать дополнительное пространство экрана, когда оно доступно. Рассмотрим эту страницу из очень простого приложения, которое было разработано для запуска на узком мобильном устройстве. Что должно выглядеть на более крупном экране?
Мобильная версия ограничена ориентацией только на портрет, так как это лучшее соотношение пропорций для списка книг; и мы делаем то же самое для страницы текста, который лучше всего хранится в одном столбце на мобильных устройствах. Но экраны пк и планшета имеют большой размер в любой ориентации, поэтому ограничение мобильных устройств кажется ненужным ограничением на более крупных устройствах.
Оптическое масштабирование приложения, чтобы выглядеть как мобильная версия, просто больше, не использует преимущества устройства и его дополнительного пространства, и это не служит пользователю хорошо. Мы должны думать о том, чтобы показать больше содержимого, а не то же содержимое больше. Даже на фаблете мы могли бы показать еще несколько строк содержимого. Мы могли бы использовать дополнительное пространство для отображения другого содержимого, например рекламы, или мы могли бы изменить поле списка в представление списка и поместить элементы в несколько столбцов, когда это возможно, чтобы использовать пространство таким образом. См . рекомендации по элементам управления представления списка и сетки.
Помимо новых элементов управления, таких как представление списка и представление сетки, большинство установленных типов макетов из Windows Phone Silverlight имеют эквиваленты в универсальная платформа Windows (UWP). Например, Canvas, Grid и StackPanel. Перенос большей части пользовательского интерфейса, использующего эти типы, должен быть простым, но всегда искать способы использования возможностей динамического макета этих панелей макета для автоматического изменения размера и повторного размещения на устройствах с различными размерами.
Переход за рамки динамического макета, встроенного в системные элементы управления и панели макета, можно использовать новую функцию Windows 10 с именем Адаптивный диспетчер визуальных состояний.
Входные модальности
Интерфейс Windows Phone Silverlight зависит от сенсорного интерфейса. И интерфейс переносимого приложения, конечно, должен поддерживать сенсорный ввод, но вы можете также поддерживать другие входные модальности, такие как мышь и клавиатура. В UWP, мыши, перо и сенсорные входные данные унифицированы как входные данные указателя. Дополнительные сведения см. в разделе "Обработка ввода указателя" и "Взаимодействие с клавиатурой".
Максимизация разметки и повторного использования кода
Вернитесь к списку максимизации разметки и повторного использования кода для методов совместного использования пользовательского интерфейса на целевых устройствах с широким спектром форм-факторов.