螢幕大小與中斷點Screen sizes and breakpoints

Windows 應用程式可在執行 Windows,包括手機、平板電腦、桌機、電視,以及更多的任何裝置上執行。Windows apps can run on any device running Windows, which includes phones, tablets, desktops, TVs, and more. Windows 10 生態系統跨越大量裝置目標與螢幕大小,與其針對每個裝置最佳化您的 UI,我們建議設計幾個重要的寬度類別 (也稱為「中斷點」) :With a huge number of device targets and screen sizes across the Windows 10 ecosystem, rather than optimizing your UI for each device, we recommended designing for a few key width categories (also called "breakpoints"):

  • 小型 (小於 640 像素)Small (smaller than 640px)
  • 中型 (641 - 1007 像素)Medium (641px to 1007px)
  • 大型 (1008 和更高像素)Large (1008px and larger)

提示

當針對特定中斷點進行設計時,請針對您應用程式,而不是螢幕大小,可以使用的螢幕空間量 (應用程式的視窗) 進行設計。When designing for specific breakpoints, design for the amount of screen space available to your app (the app's window), not the screen size. 當應用程式以全螢幕執行時,應用程式視窗會與螢幕大小相同,但當應用程式不是全螢幕時,視窗則小於螢幕。When the app is running full-screen, the app window is the same size as the screen, but when the app is not full-screen, the window is smaller than the screen.

中斷點Breakpoints

下表描述不同大小的類別和中斷點。This table describes the different size classes and breakpoints.

回應式設計中斷點

大小類別Size class 中斷點Breakpoints 一般螢幕大小 (對角線)Typical screen size (diagonal) 裝置Devices 視窗大小Window sizes
小型Small 640px 或更少640px or less 4" 到 6";20" 到 65"4" to 6"; 20" to 65" 手機、電視Phones, TVs 320x569、360x640、480x854320x569, 360x640, 480x854
Medium 641px 到 1007px641px to 1007px 7" 到 12"7" to 12" 平板手機、平板電腦Phablets, tablets 960x540960x540
大型Large 1008px 或更大像素1008px or greater 13" 及更大13" and larger 電腦、膝上型電腦、Surface HubPCs, laptops, Surface Hubs 1024x640、1366x768、1920x10801024x640, 1366x768, 1920x1080

為何電視被認定為「小型」?Why are TVs considered "small"?

大部分電視實體都相當大 (40 到 65 英吋是常見) 和高解析度 (HD 或 4k),設計從 10 英呎遠處觀看的 1080P 電視,和設計坐在桌前一英呎遠觀看 1080p 監視器,是大不同的。While most TVs are physically quite large (40 to 65 inches is common) and have high resolutions (HD or 4k), designing for a 1080P TV that you view from 10 feet away is different from designing for a 1080p monitor sitting a foot away on your desk. 當考慮距離,電視的 1080 像素更像是更近的 540 像素監視器。When you account for distance, the TV's 1080 pixels are more like a 540-pixel monitor that's much closer.

UWP 的有效像素系統會自動考量您觀看的距離。UWP's effective pixel system automatically takes viewing distance in account for you. 當指定控制項的大小或中斷點範圍時,您實際上是在使用「有效」像素。When you specify a size for a control or a breakpoint range, you're actually using "effective" pixels. 例如,您為 1080 像素及更高像素建立回應式程式碼時,1080 監視器會使用該程式碼,但 1080p 電視不會,因為 1080p 電視雖有 1080 實體像素,但只有 540 個有效像素。For example, if you create responsive code for 1080 pixels and higher, a 1080 monitor will use that code, but a 1080p TV will not--because although a 1080p TV has 1080 physical pixels, it only has 540 effective pixels. 在這部分,設計電視與設計手機很雷同。Which makes designing for a TV similar to designing for a phone.

有效像素與縮放比例Effective pixels and scale factor

UWP 應用程式會自動調整您的 UI 以確保應用程式在所有 Windows 10 裝置上可辨識。UWP apps automatically scale your UI to guarantee that your app will be legible on all Windows 10 devices. Windows 會根據 DPI (每英吋點數) 以及裝置的檢視距離,自動縮放每個螢幕的比例。Windows automatically scales for each display based on its DPI (dots-per-inch) and the viewing distance of the device. 使用者可以移至 [設定] > [顯示] > [縮放與版面配置] 設定頁面,覆寫預設值。Users can override the default value and by going to Settings > Display > Scale and layout settings page.

一般建議General recommendations

小型Small

  • 設定左右視窗邊界為 12px,以在應用程式視窗左右邊緣建立視覺區隔。Set left and right window margins to 12px to create a visual separation between the left and right edges of the app window.
  • 應用程式列固定在視窗底部以改善存取性。Dock app bars to the bottom of the window for improved reachability.
  • 一次使用 1 個欄/區域。Use one column/region at a time.
  • 使用圖示來表示搜尋 (不顯示搜尋方塊)。Use an icon to represent search (don't show a search box).
  • 瀏覽窗格以重疊模式放置,以節省螢幕空間。Put the navigation pane in overlay mode to conserve screen space.
  • 如果您使用主要詳細資料模式,請使用堆疊展示模式,以節省螢幕空間。If you're using the master details pattern, use the stacked presentation mode to save screen space.

Medium

  • 設定左右視窗邊界為 24px,以在應用程式視窗左右邊緣建立視覺區隔。Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • 應用程式列之類的命令元素放置在應用程式視窗的頂端。Put command elements like app bars at the top of the app window.
  • 最多使用 2 個欄/區域。Use up to two columns/regions.
  • 顯示搜尋方塊。Show the search box.
  • 瀏覽窗格以窄條模式放置,以便讓圖示帶狀線永遠顯示。Put the navigation pane into sliver mode so a narrow strip of icons always shows.
  • 請考慮進一步自訂電視體驗Consider further tailoring for TV experiences.

大型Large

  • 設定左右視窗邊界為 24px,以在應用程式視窗左右邊緣建立視覺區隔。Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • 應用程式列之類的命令元素放置在應用程式視窗的頂端。Put command elements like app bars at the top of the app window.
  • 最多使用 3 個欄/區域。Use up to three columns/regions.
  • 顯示搜尋方塊。Show the search box.
  • 瀏覽窗格以停駐模式放置,以便讓它永遠顯示。Put the navigation pane into docked mode so that it always shows.