WINDOWS 10 2015 年特別版 # UI 設計 - 通用 Windows 應用的響應式設計 作者?[Mike Jacobs](https://msdn.microsoft.com/zh-cn/magazine/mt149362?author=Mike+Jacobs)?| Windows 2015 通用 Windows 應用可以在任何基于 Windows 的設備（包括從手機到平板電腦或電腦）上運行。您甚至可以創建在緊湊型設備（如便攜式設備或家用電器）上運行的通用 Windows 應用。您可以將您的應用限定用于單一的設備系列（如移動設備系列），也可以選擇使應用可在所有運行 Windows 的設備上使用。 將一個應用設計為可在各種各樣的設備上使用似乎是一個很好的想法，但卻是一項很大的挑戰。那么，您會如何針對屏幕尺寸和輸入法差別迥異的設備設計一款能夠提供完美 UX 的應用呢？ 所幸的是，通用 Windows 平臺 (UWP) 提供了一套內置功能和通用構建基塊，可以幫助您做到這一點。本文介紹了 UWP 的設計功能，并提供了一些關于創建可適應于不同設備和外形規格的響應式 UI 的建議。 當您創建通用 Windows 應用時，我們首先來考慮一些您可以使用的功能。您不必做任何事情便可使用這些功能 - 它們已包含在 UWP 之中。 其中一個功能是平臺縮放功能，可根據使用的 Windows 驅動的設備類型對 UI 進行優化。該系統使用一種算法來標準化控件、字體和其他 UI 元素在屏幕上的顯示方式。這個縮放算法考慮了觀看距離和屏幕密度（每英寸像素），以對感知大小（而不是物理大小）進行優化。縮放算法保證了在 10 英尺遠的 Surface Hub 顯示裝置上顯示的 24 像素字體與用戶在幾英寸遠的 5 英寸智能手機屏幕上顯示的 24 像素字體一樣清晰。鑒于縮放系統的這種工作模式，當您設計通用 Windows 應用時，您要使用有效像素進行設計，而不要使用實際的物理像素進行設計。 UWP 的另一個內置功能是通過智能交互啟用的通用輸入功能。雖然您可以針對特定的輸入模式和設備來設計您的應用，但這不是必要的。這是因為通用 Windows 應用在默認情況下依靠智能交互。這意味著，您可以圍繞著單擊交互進行設計，而不必知道或定義該單擊是源于實際的鼠標單擊還是源于手指的點按操作。 ## 通用構建基塊 此外，UWP 提供了有用的構建基塊，可以更容易地設計出適用于多個設備系列的應用。這些構建基塊包括通用控件、通用樣式和通用模板。 可以保證通用控件在所有以 Windows 為基礎的設備（從智能手機到 Surface Hub 顯示器）上正常工作。它們運行的域范圍從單選按鈕和文本框這類常見的窗體控件到網格視圖和列表視圖這類復雜的控件（可以從數據流和模板中生成項目列表）。這些控件具有輸入感知的特點，可針對每個設備系列部署一組適當的輸入提示、活動狀態和整體功能。 UWP 還會自動為您的應用套用一組默認的樣式，該組樣式會針對每個目標外形規格優化呈現方式。您可以自定義默認樣式或徹底進行替換，以創建獨特的視覺體驗。通用樣式提供了許多功能，包括： * 一組樣式，它可以自動為您的應用選擇淺色或深色主題并可結合用戶的色彩偏好 * 一種基于 Segoe 的類型校正，它確保該應用文本可在所有設備上呈現出清晰效果 * 默認的交互動畫 * 自動支持高對比度模式。這些樣式都特意采用高對比度設計，因此，當應用采用高對比度模式在設備上運行時，可正確進行顯示 * 自動支持其他語言。默認樣式為 Windows 支持的每一種語言自動選擇正確的字體。您甚至可以在相同的應用中使用多種語言，并正確顯示這些語言 * 內置支持從右到左的閱讀順序 最后，UWP 提供了適用于 Adobe Illustrator 和 Microsoft PowerPoint 的通用模板，并包含您開始設計 UWP 應用所需的一切。這些模板具有適用于每個通用設備尺寸類的通用控件和布局。若要下載模板，請轉到 Windows 開發人員中心?[bit.ly/1KHun6J](http://bit.ly/1KHun6J)?的設計下載部分。 ## 了解設備 為了在您的應用中盡可能提供最佳的 UX，熟悉 UWP 支持的各種設備系列非常重要。當設計用于特定設備時，主要考慮的因素包括：在該設備上應用如何顯示，用戶以何種方式與該設備進行交互，以及在該設備上應在何處、何時和如何使用該應用。 智能手機?是所有計算設備中最廣泛使用的；手機可以在有限的屏幕空間和基本的輸入模式下實現很多用途。手機有各種尺寸，大多數對角線長度范圍在 4 至 6 英寸之間，而屏幕大于 6 英寸的手機通常被稱為平板手機。雖然，在平板手機上的應用體驗與在標準大小的智能手機上的體驗非常相似，但大屏幕可以支持內容使用方面的某些重要變化。 手機主要在縱向上使用，這主要是為了在交互過程中易于用一只手拿著手機。橫向上的良好體驗則包括觀看照片和視頻、閱讀書籍以及撰寫文本。無論大小和使用模式如何，手機都具有某些相同特點。它們大多只供一個人（即設備的所有者）使用，并且往往是觸手可及，通常放在口袋或提包中。手機的使用時間通常較短。 用戶通過觸摸和語音與自己的手機交互。大多數手機提供照相機、麥克風、移動傳感器和位置傳感器功能。 平板電腦?超便攜式平板電腦填補了手機和筆記本電腦之間的空隙。常備觸摸屏、照相機、麥克風和加速計的平板電腦的屏幕大小范圍通常為 7 至 13 英寸左右。像手機一樣，平板電腦也主要由一個人（它的所有者）使用。它們常在家中使用，使用時間比手機長。用戶通過觸摸、觸筆，有時是鍵盤和鼠標，與平板電腦交互。 電腦和筆記本電腦?Windows 電腦包括各種大小的設備和屏幕尺寸。在一般情況下，電腦和筆記本電腦可以顯示比手機或平板電腦更詳細的信息。典型屏幕尺寸為 13 英寸或以上。電腦和筆記本電腦上的應用可共享使用，但一次可供一個用戶使用，通常使用時間較長。應用可以顯示在一個窗口視圖中，它的大小由用戶確定。電腦和筆記本電腦的用戶主要使用鼠標和鍵盤與應用交互，但許多筆記本電腦和一些電腦也支持觸摸交互。電腦和臺式機通常不會像其他設備那樣有非常多的內置傳感器，而且大部分僅配備一個照相機和一個麥克風。 Surface Hub 設備?Microsoft Surface Hub 是專為多個用戶同時使用而設計的大屏幕團隊協作設備。Surface Hub 的可用屏幕尺寸范圍為 55 到 84 英寸之間。Surface Hub 上的應用可在短時間內共享使用，例如在會議中使用，并且可以四種狀態進行顯示：填充（一個占據可用場景區域的固定視圖）、全屏（標準全屏視圖）、輔屏（一個占據場景的右側或左側的可變視圖）和背景（當應用仍在運行時，可通過任務切換器實現隱藏的效果）。Surface Hub 支持觸摸、觸筆、語音和鍵盤交互，并且包括照相機和麥克風。 Windows 物聯網設備?這一新興類以實物中嵌入的小電子產品、傳感器和連接性為中心。這些設備通常通過網絡或 Internet 實現互聯，并提供它們感測到的現實世界數據的報告，并且在某些情況下采取相應操作。設備可以沒有屏幕（“無外設”設備），或可以連接到一個 3.5 英寸或更小的小屏幕（“有外設”設備）上。輸入和設備功能因設備的不同而千差萬別。 ## 設計特定設備 由于 Windows 在后臺工作以確保您的 UI 清晰可辨并能跨所有設備正常運轉，所以您不必針對任何特定的設備或屏幕尺寸自定義您的應用。然而，有些時候您可能想要這樣做。例如，當您的應用運行在電腦或筆記本電腦上時，您要顯示的其他內容可能會打亂像手機這樣較小設備的屏幕。 有許多方法可以提高您的應用適應特定屏幕尺寸的功能；其中有一些既快速又簡單，而有些則需要做一些努力工作。 我們先再談些關于有效像素的內容。正如之前所述，當您設計通用 Windows 應用時，您要使用有效像素進行設計，而不要使用實際的物理像素進行設計。有效像素使您能夠專注于 UI 元素的實際感知大小，而不必擔心不同設備的像素密度或觀看距離。例如，當您設計一個 1 英寸 × 1 英寸的元素時，該元素將在所有設備上顯示為大約 1 英寸大小。在具有高像素密度的非常大的屏幕上，該元素可能是 200 × 200 個物理像素大小，而在像手機這種較小設備上，它可能是 150 × 150 個物理像素大小。 那么，這會對您設計應用的方式產生怎樣的影響呢？ 設計時可以忽略像素密度和實際的屏幕分辨率。相反，需要為尺寸類設計有效分辨率（有效像素的分辨率）。稍后，我將在本文中詳細介紹尺寸類分辨率。此外，有一個快速提示： 當在圖像編輯程序中創建屏幕模型時，請務必將 PPI 設置為 72，將圖像尺寸設置為您針對的尺寸類的有效分辨率。 為確保您的應用可徹底實現縮放，服從四個規則很重要： 通過使用 UI 元素的邊距、尺寸、位置（包括文本位置）構成四個有效像素的倍數關系，將您的設計對齊 4×4 像素網格。圖 1?顯示映射到 4×4 像素網格的設計元素。該設計元素將始終有清晰醒目的邊緣。相反，設計的元素如果映射不到 4x4 網格，在一些設備上將呈現出模糊和柔化邊緣的效果。 ? 圖 1 對齊到 4×4 像素網格可呈現清晰的文本和圖像 盡管有這些資源和功能，但有時候您可能想為特定的設備系列自定義您的應用的 UI。例如，您可能需要盡可能最有效地利用空間，減少用戶的導航負擔。將應用設計成在手機等小屏幕設備上具有出色的觀看效果，對于具有大尺寸顯示器的電腦而言是有用的，但也有可能浪費一些空間。您可以將應用自定義為在屏幕大于特定尺寸時可以顯示更多的內容。例如，購物應用在手機上可能一次只顯示一個商品類別，但在電腦或筆記本電腦上可同時顯示多個類別和產品。通過將更多的內容放在屏幕上，可以減少用戶需要執行導航的工作量。 其他可以想到的場景，例如您需要充分使用設備的功能時。例如，手機可能有位置傳感器和照相機，而電腦可能什么都沒有。您的應用可以檢測到哪些功能是可用的，然后啟用使用它們的功能。 最后，您可能想要優化輸入。通用控件庫可與所有輸入類型（觸摸、觸筆、鍵盤和鼠標）配合使用，但是您仍然可以通過重新安排 UI 元素對特定的輸入類型進行優化。例如，如果將導航元素放置在屏幕底部，便可以讓手機用戶更輕松地進行訪問，但大多數電腦用戶卻希望在屏幕頂部看到導航元素。 ## 響應式設計技術 當為特定的屏幕寬度優化您的應用 UI 時，您是在創建一個響應式設計。有很多有用的響應式設計技術可供您用于自定義您的應用 UI，以及充分利用不同設備類型的屏幕空間和可用的功能。有六個技術可供考慮：重新定位、重設大小、重排、顯示、替換和重構。 重新定位應用 UI 元素是充分利用每臺設備的一種方法。在圖 2?中，手機或平板手機的縱向視圖需要滾動 UI，因為一次只能看到一個完整的框架。當應用轉換到允許使用兩個完整屏幕框架的平板電腦或其他設備上時，無論是在縱向或在橫向方向，框架 B 都可以轉變為占據一個專用空間。如果使用網格進行定位，當重新定位 UI 元素時，您能始終貼緊同一網格。 ? 圖 2 重新定位框架可以充分利用較大的屏幕 也可以通過重設邊距和 UI 元素的大小對框架進行優化，以充分利用更小或更大的屏幕。例如，通過擴大內容框，為更多的文本騰出空間和減少滾動量，讓您在更大的屏幕上增大閱讀體驗。同樣的道理，不同的框大小可以根據設備和方向提供重排 UI 元素的機會。例如，屏幕較大時，使用較大容器、增加列并以不同于智能手機的方式生成列表項會變得很有意義。 顯示 UI 元素是一個功能強大的技術，可以顯示在特定設備上受支持的功能（例如，智能手機的照相機功能），同時也提供了一些利用不同屏幕尺寸和方向的選項。顯示或隱藏 UI 的常見示例適用于媒體播放器控件，即在較小的設備上按鈕集數量減少，而在較大的設備上，按鈕集數量增多。例如，比起在手機上，電腦上的媒體播放器可以操作更多的屏幕功能。 顯示或隱藏技術的一部分功能包括，選擇何時顯示更多元數據。當屏幕空間嚴重不足時，最好的辦法是盡量減少顯示的元數據數量，而筆記本電腦或臺式電腦卻允許顯示很多元數據。如何處理顯示或隱藏元數據的一些示例包括： * 電子郵件應用：顯示用戶的頭像 * 音樂應用：顯示有關專輯或藝術家的更多信息 * 視頻應用：顯示有關電影或放映的更多信息，如演員表和職員表的詳細信息 * 任何應用：中斷列并顯示更多信息 * 任何應用： 選取垂直堆疊的項目，并將其沿水平方向放置；在較大的設備上，堆疊列表項目可以改為顯示列表項目的行和元數據的列 最后兩個響應式 UI 技術是替換和重構。替換技術使您可以切換 UI，使其滿足特定的設備尺寸類或方向。例如，一個緊湊的設備可能會顯示堆疊按鈕系列，而在較大屏幕上，那些控件將被替換為運行在屏幕頂部的選項卡。 最終，您可以折疊或拆分應用的架構，以便更好地針對特定的設備。在圖 3?的示例中，從左邊的設備到右邊的設備，演示了頁面間的聯接。該圖像描述了一個智能家庭應用，在較大的屏幕上將家庭控件和設置窗格組合在單個的屏幕上。在較小的設備上，控件和設置顯示在不同的屏幕上。 ? 圖 3 為不同的屏幕尺寸重構應用顯示 ## 設計斷點 Windows 10 生態系統中的設備目標和屏幕尺寸繁多，您無需為逐一優化您的 UI 而有所顧慮。相反地，建議您設計三個關鍵值寬度（也稱為斷點）： 320、720 和 1024 個有效像素。圖 4?描述斷點。 圖 4 設計響應式 UI 的斷點 | 尺寸類 | 小型 | 中型 | 大型 | |--------|--------|--------| | 有效像素寬度 | 320 | 720 | 1024 | | 典型屏幕尺寸（對角線） | 4 英寸到 6 英寸 | 6 英寸以上到 12 英寸 | 13 英寸或更寬 | | 典型設備 | 手機 | 平板電腦、具有較大屏幕的手機 | 電腦、便攜式計算機、Surface Hub | 當設計特定的斷點時，要考慮您的應用（或應用窗口）可用的屏幕空間。當應用全屏運行時，應用窗口與屏幕大小相同，但在其他情況下，應用窗口更小。 當設計小型 UI 時，每一個像素都是很寶貴的，因此可以隱藏主場景的非必需功能，可以將這樣的功能放在菜單或工具欄中。一次顯示一列內容或一個內容區域，并用一個圖標來表示搜索，而不是顯示一個搜索框，這樣做也是一個很好的主意。 上移至中型尺寸的 UI，您可以利用額外的空間顯示搜索框（如果有的話），并將主內容置于兩列或兩個區域中。如果上升至大型 UI，將能夠顯示更多的功能和內容，并可以減少獲取內容或執行操作所需的單擊和 UI 交互數量。 請記住，320 個有效像素的寬度可能意味著您的應用正運行在手機上或運行在大屏幕電腦上的一個小窗口中，所以務必要考慮設備的主要輸入方式 - 鼠標或觸摸。在觸摸設備上，將導航和命令元素放在屏幕底部拇指容易碰觸的地方，可以更輕松在手持設備上進行導航和交互。但是，當使用鼠標時，用戶希望導航元素出現在屏幕的頂部。您的應用可以使用 Windows.UI.ViewManagement.UIViewSettings.UserInteractionMode 屬性來找到主要的輸入設備，并相應地調整其 UI。 通用 Windows 平臺可以讓您的應用在以下范圍的設備中打開：從使用小屏幕的便攜式設備到巨大的 Surface Hub。通過實施響應式設計技術和利用該平臺的內置功能和構建基塊（控件和樣式），可以創建一個在所有尺寸和形狀的設備上看起來都很棒的 UI。 * * * Mike Jacobs?*是 Microsoft 的一名高級內容開發人員。多年來，他一直在記錄 Microsoft 技術（從 Direct2D 到 Windows Presentation Foundation 和 Silverlight）的圖形和呈現方面的內容。*