適用於 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 應用程式,與為這裡所列出的任何其他裝置類別設計 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 體驗類似智慧型手機,但因為平板手機有更大的螢幕實際可用空間,所以在內容使用的方式有一些重要變更。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 上的 App 會以 4 種狀態之一顯示 - 完整 (標準的全螢幕檢視)、背景 (在 App 仍在執行時從檢視隱藏,可使用工作切換器切換)、填滿 (固定的檢視,佔用可用的顯示區域),以及貼齊 (可變的檢視,佔用顯示區域的左或右側)。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 資訊看板並水平地壓縮 App。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. 這些裝置通常透過網路或是網際網路,回報在真實世界感測到的資料,並在某些情況下執行動作。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

  • 通常透過網路或是網際網路,回報在真實世界感測到的資料,並在某些情況下執行動作。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