UWP 设备的 UI 注意事项UI considerations for UWP devices

设备

了解支持通用 Windows 平台 (UWP) 应用的设备将帮助你提供每个外形规格的最佳用户体验。Getting to know the devices that support Universal Windows Platform (UWP) apps will help you offer the best user experience for each form factor.

支持 Windows 的设备

针对特定设备进行设计时,主要注意事项包括应用将如何显示在该设备上,在该设备上使用应用的位置、时间和方式,以及用户将如何与该设备交互。When designing for a particular device, the main considerations include how the app will appear on that device, where, when, and how the app will be used on that device, and how the user will interact with that device.

电脑和笔记本电脑PCs and laptops

Windows 电脑和笔记本电脑包括种类多样的设备和屏幕大小。Windows PCs and laptops include a wide array of devices and screen sizes. 总体而言,电脑和笔记本电脑可以比手机或平板电脑显示更多的信息。In general, PCs and laptops can display more info than phone or tablets.

屏幕尺寸Screen sizes

  • 13 英寸及更大13” and greater

电脑

典型用法Typical usage

  • 台式机和笔记本电脑上的应用可以共享使用,但一次只能由一个用户使用,并且通常使用时间较长。Apps on desktops and laptops see shared use, but by one user at a time, and usually for longer periods.

UI 注意事项UI considerations

  • 应用可以具有窗口化视图,大小由用户确定。Apps can have a windowed view, the size of which is determined by the user. 根据窗口大小,可以包含一到三个框架。Depending on window size, there can be between one and three frames. 在较大的显示器上,应用可以包含三个以上的框架。On larger monitors, the app can have more than three frames.

  • 在台式机或笔记本电脑上使用应用时,用户可以控制应用文件。When using an app on a desktop or laptop, the user has control over app files. 作为应用设计者,请确保提供用于管理应用内容的机制。As an app designer, be sure to provide the mechanisms to manage your app’s content. 请考虑包含命令和功能,例如“另存为”、“最近使用的文件”等。Consider including commands and features such as "Save As", "Recent files", and so on.

  • 系统返回是可选的。System back is optional. 当应用开发人员选择显示它时,它显示在应用标题栏中。When an app developer chooses to show it, it appears in the app title bar.

输入Inputs

  • 鼠标Mouse
  • 键盘Keyboard
  • 笔记本电脑和一体机上的触摸。Touch on laptops and all-in-one desktops.
  • 有时会使用游戏板,如 Xbox 控制器。Gamepads, such as the Xbox controller, are sometimes used.

典型设备功能Typical device capabilities

  • 相机Camera
  • 麦克风Microphone

平板电脑和二合一设备Tablets and 2-in-1s

超便携平板电脑配有触摸屏、相机、麦克风和加速计。Ultra-portable tablet computers are equipped with touchscreens, cameras, microphones, and accelerometers. 平板电脑屏幕大小范围通常在 7 英寸到 13.3 英寸之间。Tablet screen sizes usually range from 7” to 13.3”. 二合一设备可以充当平板电脑或笔记本电脑(带有键盘和鼠标),具体取决于配置(通常涉及折叠屏幕还是垂直倾斜)。2-in-1 devices can act like either a tablet or a laptop with a keyboard and mouse, depending on the configuration (usually involving folding the screen back or tilting it upright).

屏幕尺寸Screen sizes

  • 7 英寸到 13.3 英寸(对于平板电脑)7” to 13.3” for tablet
  • 13.3 英寸及更大(对于二合一设备)13.3" and greater for 2-in-1

平板电脑设备

典型用法Typical usage

  • 平板电脑 80% 的时间由所有者使用,其余 20% 为共享使用。About 80% of tablet use is by the owner, with the other 20% being shared use.
  • 它最常用作在家中观看电视时的配套设备。It’s most commonly used at home as a companion device while watching TV.
  • 与手机和平板手机相比,它的使用时间更长。It’s used for longer periods than phones and phablets.
  • 采用简短快速的形式输入文本。Text is entered in short bursts.

UI 注意事项UI considerations

  • 在横向和纵向方向中,平板电脑允许一次查看两个框架。In both landscape and portrait orientations, tablets allow two frames at a time.
  • 系统返回位于导航栏上。System back is located on the navigation bar.

输入Inputs

  • 触控Touch
  • 触笔Stylus
  • 外部键盘(有时)External keyboard (occasionally)
  • 鼠标(有时)Mouse (occasionally)
  • 语音(有时)Voice (occasionally)

典型设备功能Typical device capabilities

  • 相机Camera
  • 麦克风Microphone
  • 移动传感器Movement sensors
  • 位置传感器Location sensors

备注

大部分电脑和笔记本电脑的注意事项也适用于二合一设备。Most of the considerations for PCs and laptops apply to 2-in-1s as well.

Xbox 和电视Xbox and TV

坐在房间中的沙发上使用游戏板或遥控器与电视交互的体验称为 10 英尺体验The experience of sitting on your couch across the room, using a gamepad or remote to interact with your TV, is called the 10-foot experience. 如此命名是因为用户通常坐在离屏幕大约 10 英尺的位置。It is so named because the user is generally sitting approximately 10 feet away from the screen. 这提出了 2 英尺体验(假设)中或与电脑交互时所不存在的独特挑战。This provides unique challenges that aren't present in, say, the 2-foot experience, or interacting with a PC. 如果你要为 Xbox One 或任何连接到电视屏幕并且可能使用游戏板或遥控器进行输入的其他设备开发应用,应始终牢记这一点。If you are developing an app for Xbox One or any other device that's connected to a TV screen and might use a gamepad or remote for input, you should always keep this in mind.

针对 10 英尺体验设计 UWP 应用与针对此处所列的任何其他设备类别进行设计大不相同。Designing your UWP app for the 10-foot experience is very different from designing for any of the other device categories listed here. 有关详细信息,请参阅 针对 Xbox 和电视进行设计For more information, see Designing for Xbox and TV.

屏幕尺寸Screen sizes

  • 24 英寸及更大24" and up

Xbox 和电视

典型用法Typical usage

  • 通常在多人之间共享,尽管也经常只由一个人使用。Often shared among several people, though is also often used by just one person.
  • 通常用于长时间内使用。Usually used for longer periods.
  • 通常在家中,呆在一个地方时使用。Most commonly used at home, staying in one place.
  • 很少询问文本输入,因为使用游戏板或遥控器花费时间更长。Rarely asks for text input because it takes longer with a gamepad or remote.
  • 屏幕方向是固定的。Orientation of the screen is fixed.
  • 通常一次只运行一个应用,但是可以将应用贴靠在一侧(例如贴靠在 Xbox 上)。Usually only runs one app at a time, but it may be possible to snap apps to the side (such as on Xbox).

UI 注意事项UI considerations

  • 应用通常保持相同大小,除非另一应用贴靠在一侧。Apps usually stay the same size, unless another app is snapped to the side.
  • 系统后退是大多 Xbox 应用中提供的有用功能,使用游戏板上的 B 按钮进行访问。System back is useful functionality that is offered in most Xbox apps, accessed using the B button on the gamepad.
  • 由于客户坐在离屏幕大约 10 英尺的位置,因此请确保 UI 显示要大,能够看得清楚。Since the customer is sitting approximately 10 feet away from the screen, make sure that UI is large and clear enough to be visible.

输入Inputs

  • 游戏板(例如 Xbox 手柄)Gamepad (such as an Xbox controller)
  • 遥控器Remote
  • 语音(有时,如果客户有 Kinect 或耳机)Voice (occasionally, if the customer has a Kinect or headset)

典型设备功能Typical device capabilities

  • 相机(有时,如果客户有 Kinect)Camera (occasionally, if the customer has a Kinect)
  • 麦克风(有时,如果客户有 Kinect 或耳机)Microphone (occasionally, if the customer has a Kinect or headset)
  • 移动传感器(有时,如果客户有 Kinect)Movement sensors (occasionally, if the customer has a Kinect)

手机和平板手机Phones and phablets

手机是所有计算设备中最广泛使用的设备,它可以借助有限的屏幕空间和基本输入完成许多操作。The most widely-used of all computing devices, phones can do a lot with limited screen real estate and basic inputs. 手机有多种尺寸可供选择;较大的手机称为平板手机。Phones are available in a variety of sizes; larger phones are called phablets. 平板手机上的应用体验类似于手机上的应用体验,但平板手机增加的屏幕空间支持在内容使用中进行某些关键更改。App experiences on phablets are similar to those on phones, but the increased screen real estate of phablets enable some key changes in content consumption.

通过适用于手机的 Continuum(这是兼容 Windows 10 移动版设备的一种新体验),用户可以将手机连接到监视器,甚至使用鼠标和键盘来使手机像笔记本电脑一样工作。With Continuum for Phones, a new experience for compatible Windows 10 mobile devices, users can connect their phones to a monitor and even use a mouse and keyboard to make their phones work like a laptop. (有关详细信息,请参阅适用于手机的 Continuum 文章。)(For more info, see the Continuum for Phone article.)

屏幕尺寸Screen sizes

  • 4 英寸到 5 英寸(对于手机)4'' to 5'' for phone
  • 5.5 英寸到 7 英寸(对于平板手机)5.5'' to 7'' for phablet

Windows Phone

典型用法Typical usage

  • 主要在纵向方向使用,主要是由于单手持有手机比较方便,并且这样可以与手机完全交互,但是有一些体验适用于横向方向,例如查看照片和视频、阅读书籍和撰写文字。Primarily used in portrait orientation, mostly due to the ease of holding the phone with one hand and being able to fully interact with it that way, but there are some experiences that work well in landscape, such as viewing photos and video, reading a book, and composing text.
  • 通常只供一个人使用,即设备的所有者。Mostly used by just one person, the owner of the device.
  • 始终在身旁,通常放在口袋或包中。Always within reach, usually stashed in a pocket or a bag.
  • 在短时间内使用。Used for brief periods of time.
  • 使用手机时,用户通常会执行多个任务。Users are often multitasking when using the phone.
  • 采用简短快速的形式输入文本。Text is entered in short bursts.

UI 注意事项UI considerations

  • 由于手机的屏幕较小,在手机在纵向和横向方向中仅允许一次查看一个框架。The small size of a phone's screen allows only one frame at a time to be viewed in both portrait and landscape orientations. 手机上的所有分层导航模式都使用“钻取”模型,使用户可在单框架 UI 层中进行导航。All hierarchical navigation patterns on a phone use the "drill" model, with the user navigating through single-frame UI layers.

  • 与手机类似,平板手机在纵向模式下一次只能查看一个框架。Similar to phones, phablets in portrait mode can view only one frame at a time. 但借助平板手机上提供的更大屏幕空间,用户能够旋转到横向方向并保持不变,因此一次可以查看两个应用框架。But with the greater screen real estate available on a phablet, users have the ability to rotate to landscape orientation and stay there, so two app frames can be visible at a time.

  • 在横向和纵向方向中,确保在显示屏幕键盘时有足够的屏幕空间用于应用栏。In both landscape and portrait orientations, be sure that there's enough screen real estate for the app bar when the on-screen keyboard is up.

输入Inputs

  • 触控Touch
  • 语音Voice

典型设备功能Typical device capabilities

  • 麦克风Microphone
  • 相机Camera
  • 移动传感器Movement sensors
  • 位置传感器Location sensors

 

Surface Hub 设备Surface Hub devices

Microsoft Surface Hub 是设计用于由多个用户同时使用的大屏幕团队协作设备。Microsoft Surface Hub is a large-screen team collaboration device designed for simultaneous use by multiple users.

屏幕尺寸Screen sizes

  • 55 英寸和 84 英寸55” and 84''

Surface Hub

典型用法Typical usage

  • Surface Hub 上的应用可在较短的时间段内共享使用,例如在会议中。Apps on Surface Hub see shared use for short periods of time, such as in meetings.

  • Surface Hub 设备主要是固定的,很少移动。Surface Hub devices are mostly stationary and rarely moved.

UI 注意事项UI considerations

  • Surface Hub 上的应用可以在以下四种状态之一下显示:全屏(标准全屏视图)、后台(从视图中隐藏,同时应用仍然运行,可从任务切换程序中使用)、填充(占据可用平台区域的固定视图)和贴靠(占据平台的左侧或右侧的可变视图)。Apps on Surface Hub can appear in one of four states - full (standard full-screen view), background (hidden from view while the app is still running, available in task switcher), fill (a fixed view that occupies the available stage area), and snapped (variable view that occupies the right or left sides of the stage).
  • 在贴靠模式或填充模式下,系统显示 Skype 边栏并水平缩小应用。In snapped mode or fill modes, the system displays the Skype sidebar and shrinks the app horizontally.
  • 系统返回是可选的。System back is optional. 当应用开发人员选择显示它时,它显示在应用标题栏中。When an app developer chooses to show it, it appears in the app title bar.

输入Inputs

  • 触控Touch
  • Pen
  • 语音Voice
  • 键盘(屏幕上/远程)Keyboard (on-screen/remote)
  • 触摸板(远程)Touchpad (remote)

典型设备功能Typical device capabilities

  • 相机Camera
  • 麦克风Microphone

 

Windows IoT 设备Windows IoT devices

Windows IoT 设备是一类新兴的设备,主要围绕在物理对象内嵌入小型电子产品、传感器和连接。Windows IoT devices are an emerging class of devices centered around embedding small electronics, sensors, and connectivity within physical objects. 这些设备通常通过网络或 Internet 连接以报告它们感知到的实际数据,并且在某些情况下对其执行操作。These devices are usually connected through a network or the Internet to report on the real-world data they sense, and in some cases act on it. 设备可以没有屏幕(也称为“无外设”设备)或连接到小型屏幕(也称为“有外设”设备),屏幕大小通常为 3.5 英寸或更小。Devices can either have no screen (also known as “headless” devices) or are connected to a small screen (known as “headed” devices) with a screen size usually 3.5” or smaller.

屏幕尺寸Screen sizes

  • 3.5 英寸或更小3.5'' or smaller
  • 一些设备没有屏幕Some devices have no screen

IoT 设备

典型用法Typical usage

  • 通常通过网络或 Internet 连接以报告它们感知到的实际数据,并且在某些情况下对其执行操作。Usually connected through a network or the Internet to report on the real-world data they sense, and in some cases act on it.
  • 和手机或其他较大的设备不同,这些设备一次只能运行一个应用程序。These devices can only run one application at a time unlike phones or other larger devices.
  • 它不是始终进行交互的设备,而是在你需要时可用,不需要时则退居一旁。It isn’t something that is interacted with all the time, but instead is available when you need it, out of the way when you don’t.
  • 应用没有提供专用的后退,这是开发人员的责任。App doesn’t have a dedicated back affordance, that is the developers responsibility.

UI 注意事项UI considerations

  • “无外设”设备没有屏幕。"headless" devices have no screen.
  • “有外设”设备的显示器很小,由于屏幕空间和功能有限,仅显示必要的内容。Display for “headed” devices is minimal, only showing what is necessary due to limited screen real estate and functionality.
  • 方向在大部分情况下是锁定的,因此你的应用只需要考虑一个显示方向。Orientation is most times locked, so your app only needs to consider one display direction.

输入Inputs

  • 变量,具体取决于设备Variable, depending on the device

典型设备功能Typical device capabilities

  • 变量,具体取决于设备Variable, depending on the device