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

UWP app 可在執行 Windows 10,包括手機、平板電腦、桌面、電視,以及更多的任何裝置上執行。UWP apps can run on any device running Windows 10, 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"):

  • 小型 (小於 640px) Small (smaller than 640px)
  • 中型 (641px 到 1007px)Medium (641px to 1007px)
  • 大型 (1008px 和更大的)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 app 會自動調整您的 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.

提示

具有適用於手機的後續發展,使用者可以將相容的 Windows 10 行動裝置連線至監視器、 滑鼠和鍵盤進行像是膝上型電腦使用他們的電話。With Continuum for Phones, users can connect compatible Windows 10 mobile devices to a monitor, mouse and keyboard to make their phones work like laptops. 針對特定中斷點進行設計時,請記住這項新功能- 行動電話不會永遠留在大小類別中。Keep this new capability in mind when designing for specific breakpoints - a mobile phone will not always stay in the size class.