优化横向与纵向显示

Building Windows 8

来自 Windows 工程团队的内部视点

优化横向与纵向显示

Rate This
  • Comments 2

尽管 Windows 8 已在众多论坛中频频亮相,但一直以来,我们更倾向于使用横向(宽屏)来展示它的风貌。究其原因,这主要是因为我们通常横向显示图像,并且这种方式可提供更佳的用户体验。另外一个原因则在于许多早期设备(例如 //build/ 大会上发放的配备有 Windows 开发人员预览版的 Samsung 平板电脑)均为宽屏,而宽屏是利用全新的“捕捉”功能显示并排应用程序的理想形式,并且宽屏非常适合横向显示内容。为了获得快速流畅的屏幕旋转体验,并为偏好纵向显示的用户提供卓越使用体验,我们进行了大量工作,正如您将在接下来的内容中所读到的,我们所开展的有关横向、纵向显示偏好影响因素的体验研究对这些工作产生了深远影响。我们甚至对 Visual Studio 和 Expressions 工具进行了改进,以确保开发人员可获得充分的工具支持,构建可在两个方向中同时提供出色显示效果的应用程序。用户体验团队的 David Washington 撰写了本篇有关 Windows 8 中横向与纵向屏幕的博文,他同时还在 //build/ 大会上主持了 APP-207T 讨论会。--Steven

Windows 8 PC 实际上是一类新的设备,它的范围从小型、仅需触控操作的平板电脑到便携式计算机和台式计算机不等。在颠覆 Windows 8 的过程中,我们的设计目标是:无论外形与屏幕方向如何,均可向您提供一个出色的用户体验。平板设备可提供符合人体工程学的灵活性,并让您按照最适合您以及显示内容的方向来手持设备。

平板设备的最大优势之一在于您可以将其握在手中。它完全属于您一个人。无论您是在阅读星期日的报纸,抑或是浏览一摞婚纱照,让您对平板设备心驰神往的原因在于您可以手持它,触控它,并与它互动。数字时代中,至关重要的内容均位于各种数字设备中,因此当我们规划 Windows 8 时,我们希望确保其用户体验可支持设备所能放置的任何方向。

在我们设计 Windows 8 中不同外形尺寸的端到端体验时,我们采用了以下原则:

  • 该体验为所有外形尺寸而量身定制:小屏幕、宽屏幕、便携式计算机和台式计算机。
  • 该体验为多任务执行与全屏视频播放而采用了宽屏格式。
  • 能以用户最舒适的方式手持设备,并与其互动。
  • 开发人员能以最简便的方式创建一个可在所有视图和各种外形尺寸的不同方向运行的应用程序。

我们花费了大量时间来研究用户在我们的可用性实验室及其各自家中使用平板设备的情况。我们的观察对象既包括对于平板设备已轻车熟路的用户,也包括刚开始使用这些外形尺寸各不相同的设备的用户,并在数月后与他们保持联络。我们的观察内容包括他们手持平板设备的方式、身体姿势、手部动作以及与各种应用程序、设备位置和方向的互动。观察结果千差万别,我们听取了用户的描述,并识别出影响其身体与设备方向选择的因素。这些影响选择的因素包括人体因素,如手掌大小、拇指所能触碰的距离,人体工程学因素,如重复与疲劳,硬件因素,如硬件按钮的可接近程度,环境因素,如在何处使用平板电脑(如在厨房、卧室或起居室),以及物理因素,如是在站立、坐在沙发上,或坐在办公桌前使用平板电脑。其各种因素组合的数量多得惊人,但其有助于得出一个基本结论,即人体姿势、手持力度及方法的变化相当频繁。简单地说,并没有一种手持设备的固定方法,人们将自然寻求一个在当时适用于使用该设备的舒适姿势和方向。

一位用户坐在沙发上,在纵向模式下使用平板电脑

我们起初认为横向或纵向显示主要取决于个人偏好。我们观察发现每位用户都旋转了设备,而且都希望该设备和用户界面能够在当时能为其提供良好的使用体验。而我们觉得奇怪的是,当人们逐渐熟悉了这一设备以及他们所关注的应用程序之后,决定他们是否旋转设备最独特的影响因素是屏幕中所显示的内容类型。如果其内容与体验在横向显示中效果更好,人们自然将在横向模式中使用该应用程序,如果其内容与体验在纵向显示中效果更佳,人们则将在纵向模式中使用该应用程序。举例来说,大多数的人们都偏好在无黑边的横向全屏中观看电影,而偏好纵向阅读长文章或网页,因为这样可以减少滚动页面的需求。我们了解到,人们所表达的偏好大多取决于其认为该方向是否将提供一个不错的用户体验。我们已经收到了很多有关 Windows 8 是“横向优先”还是“纵向优先”的提问或反馈。而我们的观点是纵向和横向都很重要,因此我们将在两个方向中均提供卓越的用户体验。我们并没有选取某个姿势或方向来进行优化,而是将卓越的用户体验设计为与手持设备的方式无关,并让您认为这一体验是专为该应用程序及其内容而打造。

在涉及横向与纵向时,我们的目标如下:

  • 您可轻松将平板电脑旋转至最适合您的任务或符合人体工程学的姿势。
  • 在 Windows 中可以快速、流畅地旋转屏幕。
  • 可预知 Windows 在整个系统和应用程序间的旋转方向,让用户掌握控制权。
  • 开发人员可根据其希望启用的体验,有目的地轻松构建高质量的横向和纵向布局。

横向模式下的 Windows

一些人们问道为何我们在 //build/ 大会上以横向形式展出了这么多 Windows 8 用户界面。Windows 8 是对所有 PC 的颠覆,而不仅仅针对平板电脑。它还将在成千上万台便携式计算机和台式计算机(专为 Windows 7 所设计,对于 Windows 8 而言,尚属于新内容)上运行,这些计算机中大部分只可用于横向显示。同时,在横向与宽屏中,我们可提供多任务处理体验(并排捕捉两个应用程序),并在去除上下黑边的情况下全屏播放视频。(此外,对于我们所投影至巨幅屏幕中的较大展示片而言,横向显示的效果更佳。)

我们所设计的 Windows 8 力求在各个方向均能为您提供符合人体工程学的舒适感。我们发现横向使用平板电脑最舒适的姿势是双手握住平板电脑,并使用拇指触控屏幕。基于这个原因,我们将大部分的用户体验设计在您的拇指可接触到的范围之内。我们同时优化了系统,以进行水平滚动,从而让横向与纵向模式下的滚动同样快速而流畅。

在横向模式下,捕捉 AllThingsD 应用程序并将其与 Stocks 应用程序并排显示

纵向模式下的 Windows

我们设计的 Windows 在纵向模式下也有不俗表现。我们研究了大量应用场景,例如在网页浏览器中阅读新闻,查看纵向排列的照片,以及滚动查看电子邮件的长列表,并基于这些研究设计了一个能够在不同方向间无缝运行的系统。我们调整了诸如键盘、文件选择器以及个性分类等系统体验,从而让其与横向模式下的体验一样出色。我们希望您在切换至纵向模式时,无须重新学习该系统,而是可“即换即用”。

3:4、10:16 和 9:16 纵横比条件下采用纵向模式显示的 Stocks 应用程序

旋转

由于我们的目标之一是实现横向与纵向显示间快速而流畅的旋转切换,Windows 的各个团队为简化这一切换中的各个环节而开展了大量工作,从硬件加速计到应用程序图形堆栈不等。

而横向与纵向显示切换的一个重要部分便是动画。采用动画可以在两个布局状态之间流畅切换。由于动画必须实现快速响应,同时保持切换流畅,避免给用户留下切换生涩的感觉,因此动画的时间控制十分重要。桌面窗口管理器 (DWM) 是确保 Windows 7 和 Windows 8 中流畅动画效果的基础,这一动画便是由 DWM 编排而成。

时间线显示了加速计开始移动的时间,设备旋转成纵向的时间,加速计稳定的时间(100 毫秒),以及时间线完成的时间(500 毫秒)

我们知道突如其来的旋转将是多么令人讨厌,因此我们不懈努力以尽可能地确保该旋转是稳定的,并可预测的。在旋转开始前,系统将等待加速计稳定,从而防止意外旋转情况。我们同时希望您可拥有旋转体验的控制权,因而避免意外情况发生。我们引入了一个硬件方向锁来“操纵地心引力”,让您的设备时刻处于您所想要的方向。

旋转锁以及旋转锁关闭命令

不同的屏幕

在今后的博文中,我们将从开发人员的角度深入探讨 Windows 8 是如何缩放以适应不同屏幕的内容,但在横向与纵向背景下,屏幕尺寸也是值得一提的主题。Windows 8 将在各种 PC 上运行,他们各自的屏幕尺寸、分辨率以及纵横比各不相同,从接近方形的 4:3 屏幕,到 16:9 的宽屏,再到二者之间的屏幕不等。我们的缩放平台可让 Windows 和应用程序调整内容,无缝适应各种不同屏幕,并充分利用空间。您可纵向或横向地使用这其中的大量设备。为您提供多种选择是 Windows 的独特优势。您可选择最适合您需求和使用条件的设备与方向。

4:3、16:10 和 16:9 纵横比条件下的横向模式

运行 Windows 8 Metro 风格的应用程序的最低分辨率为 1024x768。我们选择了这一尺寸,因为这是为网络使用而设计的一种常见尺寸,此外,绝大多数(即 98.8%)的 Windows 用户可在此分辨率或更高分辨率下运行(参见下图)。

约有 42% 的 Windows 7 用户的屏幕分辨率为 1366x768。而分辨率为其他数值的用户则为 12% 或更少。1024x600 和 1280x720 仅支持桌面应用程序,而其他分辨率则可支持所有 Windows 8 应用程序。

我们认为为应用程序设定最低分辨率十分重要,因为这可让所有开发人员设计其应用程序的最小主视图,而无需在各个设备中不断细分。设置该最小分辨率同时可避免用户由于屏幕尺寸过小而看见应用程序断开的布局。

可支持 Windows 8 所有功能(包括启用“捕捉”功能的多任务处理)的分辨率为 1366x768。我们选择这一分辨率,是因为它适合次应用程序的宽度,即 320 像素(这同时也是为许多电话布局而设计的宽度),仅次于 1024x768 应用程序中的主应用程序(为网络使用而设计的常见尺寸)。

这些限制将在运行时强制实施。我们突破了传统做法,并没有为此提供变通方案,这主要是考虑到我们旨在确保 Metro 风格的应用程序的设计能够在所发布的特定分辨率下正常运行。在开发人员预览版中,我们并未在下载站点中提供任何有用的通信外运行时间警报,当然我们将在试用版中解决这一问题。我们也注意到,这给使用 600x800 虚拟机或 1024x600 上网本的一群用户带来了诸多不便,在此我们深表歉意。值得注意的是 1024x600 计算机的平均销售额非常低,因为低端屏幕分辨率已经上升至 1280x800,该分辨率可以在不启用“捕捉”功能的前提下支持 Metro 风格的应用程序。该分辨率相对于全功能的分辨率仍有很长一段距离,随着新 PC 的上市,我们有望看到分辨率屏幕上升到一个更高的水平。

旋转与开发人员

在 Windows 8 中,用户体验的重要决定因素为应用程序,因此我们曾致力于让开发人员尽可能简便地构建横向和纵向视图。因为在其他任何平台上,开发人员均可选择支持其应用程序的方向和定制其体验的方式。由于便携式计算机与台式计算机构成了当今 PC 市场的主流,因此我们预计大多数开发人员将提供横向视图。然而,如果一个应用程序的体验可支持横向与纵向显示,那么支持纵向视图将只是一个增量布局工作。

借助用于构建“捕捉”功能或不同尺寸屏幕的相同技术,开发人员可轻松构建纵向体验。HTML5 开发人员将使用 CSS 媒体查询来使其布局风格与系统方向绑定,而 XAML 开发人员则将改变其布局,以响应对状态事件的查阅。在 HTML 和 XAML 中,平台所提供的所有自适应控制和模板都将支持横向与纵向显示。此外,系统无需开发人员的额外工作,即可自动处理切换动画。如果某一应用程序中有内容适合于某一方向,开发人员可首选使用某一或另一方向,而系统将让该应用程序保持这一方向(如果该设备可支持)。

为测试应用程序,Visual Studio 11 和 Expression Blend 可让开发人员在纵向和横向模式,以及不同屏幕尺寸和纵横比中测试其应用程序,即便他们无法接触某一平板设备。

Visual Studio 11 Simulator 的横向与纵向模式

您可选择最适合您偏好的设备,用最舒适的方式拿起它,并充分享受适合这一姿势的用户体验。应用程序可采用宽屏多任务处理的优势,并在不大幅增加您负担的前提下提供纵向显示的出色视觉效果。

以下短片向您展示了横向与纵向间切换的动态效果。


请下载此视频在您常用的媒体播放器中进行观看:
高质量 MP4 | 低质量 MP4

我们期待您的试用!

谢谢,
David

  • Loading...
Leave a Comment
  • Please add 6 and 1 and type the answer here:
  • Post