上一个主题是 迁移业务和数据层。
Windows 应用在电脑、移动设备和许多其他设备上共享常见的外观。 用户界面、输入和交互模式非常相似,在设备之间移动的用户将欢迎熟悉的体验。 将物理大小、默认方向和有效像素分辨率等设备之间的差异作为影响因素,Windows 10 会相应地呈现通用 Windows 平台(UWP)应用。 好消息是,系统使用智能概念(如有效像素)为你处理大部分繁重的工作。
不同的外形规格和用户体验
不同的设备具有多种可能的竖屏和横屏分辨率,采用各种不同的纵横比。 你的 UWP 应用的界面、文本和资源的视觉元素将如何适配? 如何支持触摸以及鼠标和键盘输入? 在支持触摸的应用中,如何使控件在不同观看距离和不同大小的设备上,既能成为合适的触摸目标,并且 其内容在不同距离处也能被轻松读取? 以下部分介绍需要了解的内容。
屏幕的大小到底是多少?
简短的回答是,它是主观的,因为它不仅取决于显示器的目标大小,也取决于你离它有多远。 所谓的主观性是指我们必须设身处地为用户着想,而优秀的应用程序开发人员无论如何都会这样做。
客观地说,屏幕以英寸单位和物理(原始)像素进行测量。 了解这两个指标可让你知道有多少像素适合一英寸。 这就是像素密度,也称为 DPI(每英寸点),也称为 PPI(每英寸像素)。 DPI 的倒数是像素的物理大小(以一英寸的一小部分为单位)。 像素密度也称为 分辨率,尽管该术语通常用于松散地表示像素计数。
随着观看距离的增加,所有这些客观指标 看起来 更小,并化为屏幕的 有效大小和其 有效分辨率。 手机通常最接近你的眼睛,其次是平板电脑,然后是电脑显示器,最远的是 Surface Hub 设备和电视。 为了进行补偿,设备往往随着观看距离的增加显得客观上更大。 当您为 UI 元素设置大小时,是以有效像素(epx)为单位进行设置的。 Windows 10 将考虑 DPI 以及与设备的典型观看距离,以计算物理像素中 UI 元素的最佳大小,以提供最佳观看体验。 请参阅 视图/有效像素、查看距离和比例系数。
即便如此,我们建议你使用许多不同的设备测试应用,以便你可以自行确认每个体验。
触摸分辨率和查看分辨率
触发器(UI 小组件)需要有合适的尺寸以便于触摸。 因此,触摸目标需要多或少地在可能具有不同像素密度的不同设备上保留其物理大小。 有效像素也能在这里帮助你:它们在不同的设备上缩放(考虑到像素密度),以实现大致固定的物理大小,适合触摸操作的目标。
文本需要是易于阅读的正确大小(12 磅字体在 20 英寸的观看距离是一个很好的经验法则),图像需要在适当的观看距离内具有正确的大小和有效的分辨率。 在不同的设备上,相同的有效像素缩放使 UI 元素保持正确大小和可读性。 文本和其他基于矢量的图形会自动缩放,效果很好。 如果开发人员以单一的大尺寸提供资产,则基于光栅(位图)的图像也会自动缩放。 最好开发人员能够提供每个资产的多种大小,这样可以根据目标设备的缩放比例自动选用合适的版本。 有关详细信息,请参阅 视图/有效像素、观看距离和比例系数。
布局和自适应视觉状态管理器
我们描述了对屏幕大小有意义的理解所涉及的因素。 现在,让我们考虑你的应用的布局,以及如何在应用可用时使用额外的屏幕空间。 请考虑这个页面,它来自一款设计为在窄型移动设备上运行的非常简单的应用程序。 此页应该在较大的屏幕上显示什么?
移动版本受限于仅纵向方向,因为这是书籍列表的最佳纵横比;对于文本页面,我们会执行相同的操作,最好在移动设备上保留单个列。 但是,无论哪种方向,电脑和平板电脑屏幕都很大,因此移动设备约束在较大的设备上似乎是不必要的限制。
将应用程序光学缩放至仅仅是移动版本的放大版,未能充分利用设备的更大空间,这样无法很好地为用户提供服务。 我们应该考虑显示更多的内容,而不是将相同的内容放大。 即使在 phablet 上,我们也可以显示更多一行内容。 我们可以使用额外的空间来显示不同的内容,例如广告,或者我们可以将列表框更改为列表视图,并使其将项目包装成多个列(如果可以)以这种方式使用空间。 请参阅 列表和网格视图控件指南。
除了新的控件(如列表视图和网格视图),Windows Phone Silverlight 中大多数已建立的布局类型在通用 Windows 平台(UWP)中具有等效项。 例如 ,Canvas、 Grid 和 StackPanel。 移植使用这些类型的大部分 UI 应该很简单,但始终寻找利用这些布局面板的动态布局功能的方法,以便在不同大小的设备上自动调整和重新布局。
除了 Windows 10 系统控件和布局面板内置的动态布局之外,我们还可以使用一个新的功能,称为 Adaptive Visual State Manager。
输入形式
Windows Phone Silverlight 接口特定于触摸。 当然,移植的应用界面也应该支持触摸,但你也可以选择支持其他输入形式,例如鼠标和键盘。 在 UWP 中,鼠标、笔和触摸输入被统一为 指针输入。 有关详细信息,请参阅 处理指针输入,以及 键盘交互。
最大化标记和代码重用
请参阅 最大化标记和代码重用 列表,了解如何将 UI 共享到具有各种外形规格的目标设备。