Windows 10 特刊 2015
第 30 卷，第 11 期
本文章是由機器翻譯。
UI 設計 - 通用 Windows 應用程式的回應式設計
由 Mike Jacobs |Windows 2015
Windows 通用應用程式可以在任何 windows 裝置，從您的電話 tablet 或電腦上執行。您甚至可以建立 wearables 或家電產品 compact 裝置執行的 Windows 通用應用程式。您可以限制您的應用程式至單一裝置系列 (例如行動裝置家族中) 或您可以選擇在執行 Windows 的所有裝置上提供應用程式。
設計看起來很不錯的這類各式各樣的裝置上的應用程式可以是一大挑戰。那麼要如何呢設計在裝置提供絕佳的 UX 大幅不同的螢幕大小和輸入的方法的應用程式? 幸好通用 Windows 平台 (UWP) 提供一組內建的功能和通用建置組塊，可協助您達成這件事。本文說明 UWP 的設計功能並提供建立反應迅速的 UI 差異裝置和外型規格適應建議。
我們先來看看一些時建立通用 Windows 應用程式的功能。您不必執行任何動作可受益於這些功能 — 它們已併入 UWP。
其中一項功能是調整平台的最佳化 Windows powered 裝置正在使用類型為基礎的 UI。系統會採用的演算法來標準化方式控制項、 字型和其他 UI 項目會顯示在螢幕上。此調整演算法會考慮針對認知的大小 (而非實體大小) 進行最佳化檢視距離和螢幕密度 (每英吋的像素)。調整演算法可確保 24 像素字型介面中樞顯示組 10 英呎離開給使用者以作者為 24 像素字型是開幾英吋的 5 英吋 smartphone 螢幕上。因為調整系統的運作方式，當您設計您的 Windows 通用應用程式時您設計有效的像素，而不是實際且實體的像素。
UWP 的另一個內建的功能是透過智慧型互動啟用的通用輸入。雖然您可以設計您的應用程式特定的輸入的模式和裝置，您不需要。這是因為預設的 Windows 通用應用程式依賴智慧型互動。這表示您可以設計中心按一下互動而不需要知道或定義是否只要按一下是來自實際滑鼠按一下或點選的手指。
通用建置組塊
此外，UWP 提供有用輕鬆地設計應用程式的多個裝置系列的建置組塊。這些建置組塊包括通用控制項、 通用樣式及通用範本。
通用控制項一定會在所有 Windows powered 裝置從介面中樞顯示的智慧型手機上順利運作。它們執行的範圍選項按鈕和文字方塊方塊類似一般表單控制項至格線檢視和清單檢視，可以從資料流的資料與範本產生的項目清單等複雜的控制項。這些控制項感知輸入而且部署的適當的輸入的將、 事件狀態和每個裝置家族的整體功能集。
UWP 也會自動說您的應用程式與一組預設的樣式最佳化每個目標外型規格的簡報。您可以自訂預設樣式或取代它們完全以建立唯一的視覺體驗。通用樣式提供許多功能，包括：
- 一組樣式，來自動提供您的應用程式的淡或暗的佈景主題選項也可以納入使用者的區分腔調字的色彩設定
- 可確保應用程式文字看起來清晰在所有裝置上 Segoe 型別遞增
- 互動的預設動畫
- 自動高對比模式的支援。這些樣式的設計與高對比記住，因此當高對比模式中的裝置上執行應用程式，會正確顯示
- 自動支援其他語言。預設樣式會自動選取 Windows 支援的每種語言正確的字型。您甚至可以在相同的應用程式中使用多種語言和它們會正確顯示
- 內建支援由右至左讀取順序
最後，UWP Adobe Illustrator 和 Microsoft PowerPoint 提供通用的範本並包含您要開始設計 UWP 應用程式的所有項目。這些範本功能通用控制項和通用裝置大小的每個類別的配置。若要下載的範本，請移至設計下載專區的 Windows 開發人員中心在 bit.ly/1KHun6J。
了解裝置
若要提供最佳的可能 UX 應用程式中，請務必熟悉 UWP 所支援之各種裝置系列。主要的考量在設計時的特定裝置，包括如何應用程式會出現在該裝置，使用者會與該裝置互動的方式和位置、 如何及何時將會在該裝置上使用應用程式。
智慧型手機 最廣泛使用的所有運算裝置、 電話可以進行很多的有限的螢幕畫面和基本輸入。電話中各種不同的大小，與大多數介於 4 到 6 英吋對角線，畫面大於 6 英吋通常稱為 phablets 電話時可用。雖然類似標準大小智慧型手機上的那些 phablets 的應用程式體驗、 較大螢幕啟用內容消耗一些重要變更。
電話主要用於直向，大部分是因為輕鬆保存單手電話時與它互動。在運作良好的橫向經驗包括檢視相片和視訊、 書籍、 讀取和撰寫文字。不論大小和使用量模式電話並共用幾個特性。大部分是用來只是一個人 — 裝置的擁有者 — 且可能會幾乎都完成、 通常是存放在 pocket 或封包。電話也通常用於很短的時間。
使用者與他們的電話透過觸控和語音互動。大部分的電話提供網路攝影機、 麥克風、 移動感應器和位置感應器。
平板電腦 超級可攜式平板電腦之間的差距手機和膝上型電腦。經常配備觸控、 攝影機、 麥克風和加速計、 平板電腦瓜通常介於 7 到大約 13 英吋的螢幕大小。如同手機、 平板電腦會是主要是供一個人，擁有者。它們最常用在家裡、 辦公室和用於較長的時間比電話。使用者透過觸控、 手寫筆和有時鍵盤和滑鼠的平板電腦與互動。
Pc 和膝上型電腦 Windows 電腦包含各式各樣的裝置和螢幕大小。一般而言，電腦和膝上型電腦可以顯示比電話或平板電腦的詳細資訊。典型的螢幕大小為 13 英吋及更大。應用程式在電腦和膝上型電腦共用，請參閱使用時，而是由一位使用者一次並通常較長時間。應用程式可以顯示在視窗檢視中的大小取決於使用者。PC 和膝上型電腦的使用者主要是與使用滑鼠和鍵盤、 應用程式互動，但許多膝上型電腦和某些 Pc 支援以及觸控式互動。電腦和桌上型電腦通常沒有最多的內建感應器與其他裝置與最配有數位相機及麥克風。
Surface 中樞裝置 Microsoft 介面集線器是大螢幕、 小組共同作業裝置針對同時使用多個使用者。介面中樞位於 55-84 英吋螢幕大小。介面集線器上的應用程式請參閱共用的使用短的時間，例如會議，而且可以出現在四個狀態之一: 填滿 (佔據可用的階段區域的固定檢視)、 完整 (標準全螢幕檢視中) 貼齊 (佔用右側或左側邊階段的變數檢視) 和 (從檢視看不見時仍在執行應用程式的背景用於工作切換器)。介面的集線器支援觸控、 畫筆、 語音和鍵盤互動，包括將相機與麥克風。
Windows 網際網路的事情裝置 這個新興的類別以內嵌小型電子產品、 感應器和實體物件中的連線能力為主。這些裝置通常會透過網路或網際網路來報告他們說您懂了及在某些情況下操作的實際資料連接。裝置可以具有任何畫面 ("無周邊"裝置) 或連接到螢幕很小 (「 雙向 」 裝置) 3.5 英吋或更小。輸入和裝置功能可能會大幅裝置不同。
設計特定裝置
因為 Windows 在幕後以確保程式碼 UI 跨所有裝置是易於閱讀和功能，您就不必自訂應用程式進行任何特定裝置或螢幕大小。不過，有些的時候您可能想要執行這項操作。例如，當您的應用程式在電腦或膝上型電腦上執行時可能會顯示會弄亂類似於電話的小型裝置螢幕的其他內容。
有許多方法可增強您的應用程式特定的螢幕大小。其中有些是快速而簡單的而有些則需要一些工作。
我們先說有點深入了解有效的像素。如前所述，當您設計您的 Windows 通用應用程式時，您在設計中有效的像素，不是實際實體的像素。有效的像素可讓您把重心放在實際的認知大小的 UI 項目而不必擔心像素密度或檢視之間的不同裝置的距離。例如，當您設計的 1 英吋的 1 英吋項目，該項目將似乎約 1 英吋在所有裝置上。在具有高像素密度極大畫面上，此項目可能 200 200 的實際像素，例如電話、 較小裝置上可能是 150 x 150 實體的像素。
那麼如何執行此影響的方式設計您的應用程式嗎? 您可以在設計時忽略像素密度和實際的螢幕解析度。而是設計大小類別的有效解決方法 (在有效的像素解析度)。我會深入探討在稍後在本文中的大小類別解析度。此外，快速秘訣： 當影像編輯程式中建立畫面模型，務必 PPI 設 72 並將影像尺寸設為您的目標大小類別的有效解決方法。
若要確保您的應用程式的標尺完全，是必須遵守的四個規則： 藉由您的邊界、 大小和位置的 UI 項目貼齊您的設計得以 4 x 4 像素格線 — 包括文字的位置 — 四個有效的像素的倍數。[圖 1 顯示設計元素會對應到 4 x 4 像素格線。設計元素永遠會清晰、 清晰的邊緣。相反地，未對應到 4x4 方格的設計元素在某些裝置上的模糊、 柔邊。
.png "對齊 4 x 4 像素格線清晰的文字和影像呈現")
[圖 1 對齊 4 x 4 像素格線清晰的文字和影像呈現
儘管這些資源和功能，有時候是肯定您可能想要自訂特定裝置系列的應用程式的 UI。比方說，您可能需要進行最有效利用空間並降低對使用者的瀏覽負擔。設計用來尋找理想電話等的螢幕很小的裝置上的應用程式能夠用在 PC 上使用更大的顯示，但很可能會有某些浪費的空間。您可以自訂應用程式以特定大小大於螢幕時顯示更多的內容。例如，購物應用程式可能會在電話上一次顯示一個商品類別但電腦或膝上型電腦上同時顯示多個類別和產品。將更多的內容放在螢幕上，您可以減少使用者需要執行的瀏覽的量。
其他案例首先想到的是，比方說，當您需要充分利用裝置的能力。電話很可能具有位置感應器和攝影機，比方說，而電腦可能沒有任何項目。您的應用程式可以偵測到可用的哪些功能並啟用功能使用它們。
最後，您可能想要為輸入進行最佳化。通用控制項程式庫適用於所有輸入型別 (觸控、 畫筆、 鍵盤和滑鼠)，但您仍然可以重新排列您的 UI 項目將最佳化特定輸入類型。例如，如果您在畫面底部放置巡覽項目，它們您可以更輕鬆電話的使用者存取 — 但大多數的電腦使用者預期會看見螢幕的上方導覽項目。
回應設計技術
當最佳化應用程式的 UI 特定的螢幕寬度時，您要建立回應的設計。有幾種有用的回應式設計技術可讓您自訂您的應用程式 UI 並採取充分善用螢幕面積和不同的裝置類型的可用功能。有六個要考慮的技巧： 重新調整位置、 調整大小、 重新排列、 顯示、 取代和 rearchitect。
重新定位應用程式的 UI 項目是一種方式充分利用每個裝置。在 [圖 2, ，因為只有一個完整的畫面會顯示一次捲動的使用者介面、 強制執行的電話或 phablet [縱向] 檢視。當應用程式會轉譯為平板電腦或其他裝置可讓兩個完整、 螢幕上的框架，無論是在直向或橫向列印方向時、 框架 B 可以轉移至所佔用的專用的空間。如果您使用方格來定位，您可以從相同的方格 UI 項目會重新定位時。
.png "若要利用較大的螢幕重新定位框架")
[圖 2 重新定位框架利用較大的螢幕
您也可以調整邊界和利用縮小或放大螢幕的 UI 項目最佳化框架。這可讓您以成長的內容框架、 騰出更多的文字和減少捲動來加強較大螢幕上，例如的閱讀經驗。由相同的 token，不同畫面大小會提供機會重新排列根據裝置和方向的 UI 項目。比方說，當要更大的螢幕，合理使用較大的容器、 加入資料行，以及產生的清單項目比智慧型手機上不同的方式。
顯示 UI 元素是威力強大的方法可以呈現特定裝置上支援的功能 — smartphone 攝影機，例如 — 同時也提供利用不同的螢幕大小和方向的選項。顯示或隱藏 UI 的常見範例適用於 media player 控制項其中按鈕設定是在較小的裝置上降低而較大的裝置上展開。在電腦上，例如媒體播放程式可以處理更螢幕上比它的功能可以在電話上。
顯示或隱藏技巧的組件包含選擇時顯示多個中繼資料。不動產是有代價時最好顯示少量的中繼資料、 在桌上型或膝上型電腦時電腦可讓大量的中繼資料可呈現。顯示或隱藏中繼資料的處理方式的一些範例包括：
- 電子郵件應用程式： 顯示使用者的 avatar
- 音樂應用程式: 顯示專輯或演出者的詳細資訊
- 視訊應用程式: 顯示電影或節目，例如 cast 和人員的詳細資料的詳細資訊
- 任何應用程式: 中斷分開的資料行和顯示更多詳細資料
- 任何應用程式: 某堆疊具有垂直和水平; 配置在較大的裝置上堆疊的清單項目可以變更要顯示的清單項目資料列和資料行的中繼資料
最後兩個回應的 UI 技術會取代和 rearchitect。取代技術可讓您切換特定裝置大小類別或方向的 UI。比方說，雖然這些控制項 prelaced 利用執行沿著螢幕頂端的索引標籤上更大的螢幕 compact 裝置可能會顯示按鈕、 堆疊的數列。
最後，您可以摺疊或分叉更針對特定裝置的應用程式的架構。在範例中 [圖 3, ，要正確的裝置從左裝置示範頁面的聯結。影像說明可在較大的畫面上，結合了主控制項與單一畫面上的 [設定] 窗格的智慧型主應用程式。在較小的裝置上的控制項和設定會顯示不同的畫面上。
.png "重新架構應用程式顯示針對不同螢幕大小")
[圖 3 重新架構應用程式顯示針對不同螢幕大小
設計中斷點
裝置目標以及跨 Windows 10 生態系統的螢幕大小的數目是擔心最佳化針對每個 UI 太大。相反地，建議您設計的三個索引鍵的寬度 (也稱為中斷點): 320 720 及 1024年有效的像素。[圖 4 描述中斷點。
[圖 4 回應 UI 的設計中斷點
| 大小類別 | 小型 | 中型 | Large |
| 有效的像素的寬度 | 320 | 720 | 1024 |
| 典型的螢幕大小 (斜線) | 4"至 6" | 6 +"12" | 13"和寬度 |
| 典型的裝置 | 電話 | 平板電腦與大型螢幕的電話 | 電腦、 膝上型電腦介面中心 |
當設計特定的中斷點，請考慮提供給您的應用程式 (或應用程式視窗) 的螢幕空間數量。當應用程式執行全螢幕時，應用程式視窗的螢幕大小相同但在其他情況下，是較小。
設計小型的 UI，每個像素時寶貴，所以 [確定] 以隱藏不必要的主要案例將它放在功能表或工具列的功能。它也是內容的個不錯的主意一次顯示一個資料行或區域和使用的圖示來表示不會顯示在搜尋方塊搜尋。
移至中型的 Ui 和利用額外的空間來顯示在搜尋方塊 (如果有的話) 和兩個資料行或區域中的主要內容版面配置。當您逐步大型 UI 時更多功能與內容可以顯示、 減少點擊和 UI 互動來取得內容或執行動作所需的數目。
將記住寬度為 320 有效的像素可能表示您的應用程式在電話上執行或大型的畫面上，使用的電腦上的小視窗因此請務必考慮裝置的主要輸入 — 滑鼠或觸控。觸控式裝置上可以藉由將導覽及命令的項目放在畫面底部其中它們輕鬆地捲動方塊與已達時簡化導覽及手持裝置上的互動。時使用滑鼠，不過，使用者會預期導覽項目出現在螢幕的頂端。您的應用程式可以使用 Windows.UI.ViewManagement.UIViewSettings.UserInteractionMode 屬性探索主要的輸入的裝置並據以調整其 UI。
通用的 Windows 平台會開啟廣泛的應用程式從極大的介面集線器小畫面 wearables 的裝置。藉由實作回應設計技術並利用平台的內建功能和建置組塊 (控制項和樣式)，就可以建立看起來很棒的所有大小和形狀的裝置上的 UI。
Mike Jacobs擔任 Microsoft 的資深內容開發人員。許多年，他有記載從 Windows Presentation Foundation 和 Silverlight 的 Direct2D 的 Microsoft 技術的圖形和簡報層面。
感謝下列 Microsoft 技術專家來檢閱並提供給這篇文章： JeffArnold、 Eugene Gavrilov、 Ross Heeter Chigusa Sansen，Joe Tobens，以及有關 Mike Bottemiller (Murphy & Associates)
Jeff Arnold 是 Windows 中的高階設計。他的小組會與開發人員平台小組不斷演變的 UWP 本文內的創意、 實際解決方案一起緊密地運作。
Mike Bottemiller 是 scripting guy microsoft 與 Murphy & Associates 的資深顧問。他升遷 veered 從軟體測試之前先坐下來設計和使用者經驗的寫入器為發行至專案管理的內容。他曾經撰寫設計指南與 Visual Studio、 Xbox 和 UWP 應用程式的文件。
Eugene Gavrilov
Ross Heeter 是 microsoft 的資深設計。他的專長是互動的裝置、 平台與輸入上 — 需要花時間在 Xbox 設計主控台儀表板、 SmartGlass 同一系列文件和 Indie 遊戲 Creator's Club 體驗。他目前針對 Windows 和裝置群組中設計的應用程式體驗。
Chigusa Sansen 是 microsoft 資深程式管理員曾與許多不同的裝置 UI 經驗、 從 Windows Mobile、 PC、 電話、 平板電腦及 Xbox Windows CE。她勤奮地從 UI 架構的觀點來看回到 Windows Phone 以及 Windows 10 (UWP) 的主要 UX 發展。
Joe Tobens 是 microsoft 的資深設計工具。他設計和跨越多個裝置和應用程式的 Windows 10 記載快速回應的 UI。他目前正在輸入的 Windows 和裝置群組。