Layout

注意

此設計指南是針對 Windows 7 所建立，尚未針對較新版本的 Windows 進行更新。 大部分的指導方針仍以原則方式套用，但簡報和範例不會反映 我們目前的設計指導方針。

版面配置是視窗或頁面內內容的調整大小、間距和位置。 有效版面配置在協助使用者快速尋找內容，以及讓外觀成為視覺上吸引人的重要。 有效的版面配置可讓使用者立即瞭解的設計，以及讓使用者感到困惑且感到困惑且不高的設計之間的差異。

注意： 與 視窗管理 相關的指導方針會在個別的文章中呈現。 建議的特定控制項調整大小和間距會顯示在其各自的指導方針文章中。

設計概念

視覺階層

當視窗或頁面的外觀指出其元素的關聯性和優先順序時，視窗或頁面會有清楚的視覺階層。 如果沒有視覺階層，使用者就必須自行找出這些關聯性和優先順序。

視覺化階層是透過下列屬性的技能結合來達成：

• 重點。 版面配置會指出使用者必須先查看的位置。
• 流。 眼睛會順暢且自然地透過表面的清楚路徑流動，尋找使用者介面 (UI) 元素，以適合其使用的順序。
• 群組。 邏輯相關的 UI 元素具有清楚的視覺關聯性。 相關專案會分組在一起;不相關的專案是分開的。
• 重點。 UI 元素會根據其相對重要性來強調。
• 對準。 UI 元素具有協調位置，因此很容易掃描並依序顯示。

此外，有效的版面配置具有下列屬性：

• 裝置獨立。 無論字型字型或大小為何，版面配置都會如預期般顯示，每英吋的點數 (DPI) 、顯示器或圖形配接器。
• 容易掃描。 使用者可以一目了然地找到他們尋找的內容。
• 效率。 大型的 UI 元素必須很大，而小型的元素則非常小。
• 可調整大小。 如果有説明，則視窗可調整大小，無論表面的大小或小，其內容配置都有效。
• 平衡。 內容會平均分散到表面。
• 視覺簡單性。 版面配置比配置更複雜。 使用者不會因為版面配置的外觀而感到不高。
• 一致性 (Consistency)。 類似的視窗或頁面會使用類似的版面配置，因此使用者一律會感到導向。

雖然調整大小、間距和放置是簡單的概念，但版面配置的挑戰是達到這些屬性的正確混合。

在 Windows 中，配置是使用裝置獨立計量進行通訊，例如對話方塊單位 (DLL) 和相對圖元。

用於讀取的設計模型

使用者會選擇內容的外觀和組織所閱讀的內容。 若要建立有效的版面配置，您必須瞭解使用者偏好閱讀的內容和原因。

您可以使用此設計模型進行配置決策，以便閱讀：

• 人員在西部文化 () 中，以由左至右、由上至下的順序讀取。

• 閱讀有兩種模式：沉浸式閱讀和掃描。 沈浸式閱讀的目標是理解。

  

  此圖表會建立沉浸式閱讀模型。

  相反地，掃描的目標是要找出事物。 整體掃描路徑看起來像這樣：

  

  此圖表會模型掃描。

  

  如果有文字沿著頁面的左邊緣執行，使用者會先掃描左邊緣。

• 使用軟體時，使用者不會沈浸于 UI 本身，而是在其工作中。 因此，使用者通常不會讀取其掃描的 UI 文字。 然後，只有在他們認為需要時，才會完整讀取文字。

• 使用者通常會略過頁面左側或右側的流覽窗格。 使用者知道他們位於該處，但只在想要流覽時查看流覽窗格。

• 使用者通常會略過大型的未格式化文字區塊，而不需完全讀取這些文字。

  

  使用者通常會在掃描時略過大型的文字和流覽窗格。

• 所有專案都相同，使用者會先在視窗的左上角查看、掃描頁面，並在右下角結束掃描。 它們通常會忽略左下角。

  

  所有專案都相等，使用者會依下列順序讀取這些數位：1、2、4 和 3。

• 但在互動式 UI 中，並非所有專案都相等，因此不同的 UI 元素會收到不同的注意力層級。 使用者通常會先查看互動式控制項，特別是視窗左上方和中央的控制項，以及醒目提示文字。

使用者將焦點放在主要互動式控制項和醒目的主要指示上，並只在需要時查看其他事項。

• 使用者通常會讀取互動式控制項標籤，特別是與手動完成工作相關的標籤。 相反地，使用者通常會在認為需要時讀取靜態文字。
• 顯示不同吸引注意力的專案。 粗體文字和大型文字會從一般文字中醒目提示。 具有色彩或色彩背景的 UI 專案已醒目提示。具有圖示的專案會從沒有圖示的專案中脫穎而出。
• 除非使用者有理由，否則不會捲動。 如果 折迭上方 的內容未提供捲動的原因，則不會。
• 一旦使用者決定要做什麼，他們就會立即停止掃描並執行。
• 因為使用者認為完成時停止掃描，所以通常會忽略似乎已完成點以外的任何專案。

使用者在認為完成時停止掃描。

當然，此一般模型會有例外狀況。 眼球追蹤裝置表示真實使用者的行為相當不復雜。 此模型的目標是要協助您做出良好的決策和取捨，而不是精確地建立使用者行為模型。 但是，當您閱讀此清單時，希望您已辨識許多自己的閱讀模式。

設計掃描

使用者不會閱讀，他們會掃描，因此您應該設計 UI 介面以進行掃描。 請勿假設使用者會以由左至右、由上至下的順序讀取文字，而是查看吸引注意力的 UI 元素。

若要設計掃描：

• 假設使用者從快速掃描整個視窗開始，然後以大致下列順序讀取 UI 元素：
  • 中央的互動式控制項
  • 認可按鈕
  • 在其他位置找到的互動式控制項
  • 主要指示
  • 補充說明
  • 顯示警告圖示的文字
  • 視窗標題
  • 主本文中的其他靜態文字
  • 註腳
• 將起始工作的 UI 元素放在左上角或左上角。
• 將完成工作的 UI 元素放在右下角。
• 盡可能將重要文字放在互動式控制項上，而不是靜態文字。
• 避免將重要資訊放在左下角或長捲動控制項或頁面底部。
• 不要顯示大量文字區塊。 消除不必要的文字。 使用 反金字塔 圖呈現樣式。
• 如果您執行一些動作來吸引使用者的注意力，請確定需要注意。

盡可能使用此模型，而不是加以對抗;但有時候您需要強調或取消強調特定 UI 元素。

若要強調主要 UI 元素：

• 將主要 UI 元素放在 掃描路徑中。

• 放置任何 UI 以在左上角或左上角起始工作。

• 將認可按鈕放在右下角。

• 將其餘的主要 UI 放在中央。

• 使用吸引注意的控制項，例如命令按鈕、命令連結和圖示。

• 使用醒目文字，包括大型文字和粗體文字。

• 將文字使用者放在互動式控制項中，或是具有圖示，或在 橫幅上閱讀。

• 在淺色背景上使用深色文字。

• 以空間括住元素。

• 不需要任何互動，例如指向或暫留，以查看您強調的專案。

  

  此範例示範許多強調主要 UI 元素的方式。

若要取消強調次要 UI 元素：

• 將次要 UI 元素放在掃描路徑之外。

• 放置使用者通常不需要在視窗左下角或底部看到的任何專案。

• 使用不吸引注意的控制項，例如工作連結，而不是命令按鈕。

• 使用一般或灰色文字。

• 在深色背景上使用淺色文字。 深灰色或藍色背景上的白色文字效果良好。

• 以最少的空間括住元素。

• 請考慮使用 漸進式洩漏 來隱藏次要 UI 元素。

  

  此範例示範許多取消強調次要 UI 元素的方式。

有效使用螢幕空間

實際上使用螢幕空間需要您平衡數個因素：使用太多空間和視窗感覺很繁重且浪費，甚至難以根據 配適法使用。

不正確：

在此範例中，視窗對於其內容而言太大。

另一方面，若需要捲動和其他操作，請使用太少的空間，而且視窗感覺很麻煩、麻煩且難以使用。

不正確：

在此範例中，視窗對於其內容而言太小。

雖然關鍵 UI 必須符合最低支援 的有效解析度，但請勿假設有效使用螢幕空間表示視窗應該越小越小，就不應該使用。 有效版面配置具有開放空間的考慮，而且不會嘗試將所有專案都納入可能最小的空間中。 新式顯示器具有顯著的螢幕空間，而且當您可以的話，有效使用此空間會很合理。 因此，使用太多螢幕空間而不是太少的側邊錯誤。 這樣做可讓您的視窗感覺較輕，且更輕鬆。

當您知道版面配置有效使用螢幕空間時：

• Windows、視窗窗格和控制項不需要調整大小即可使用。 如果使用者所做的第一件事是調整視窗、窗格或控制項的大小，則其大小錯誤。
• 不會截斷資料。 清單檢視和樹狀檢視中的大部分資料沒有省略號，而且其他控制項中的資料不會裁剪，除非資料長度異常大。 必須讀取才能執行工作的資料不應該被截斷。
• 視窗和控制項的大小會適當地調整，以消除不必要的捲動。 有一些水準捲軸，而且沒有不必要的垂直捲動條。
• 控制項大部分會使用其標準大小。 例如，儘量減少控制項大小的數目，例如，在介面上只使用一或兩個命令按鈕寬度。
• UI 介面已平衡。 沒有大型未使用的螢幕區域。

選擇剛好足以滿足其用途的視窗大小。 (如果視窗可調整大小，此目標會套用至其預設大小。) 截斷資料或捲軸的組合，而且有足夠的可用螢幕空間是一個清楚表示不正確配置。

控制調整大小

通常，有效使用螢幕空間的第一個步驟是判斷各種 UI 元素的正確大小。 請參閱 控制項大小調整資料表 ，以及特定控制項指導方針文章中建議的大小調整。

配適法表示目標越小，使用滑鼠取得目標所花費的時間越長。 此外，對於使用 Windows Tablet 及觸控技術 的電腦，「滑鼠」實際上可能是手寫筆或使用者的手指，因此在判斷小型控制項的大小時，您應該考慮替代的輸入裝置。 16x16 相對圖元的控制項大小是任何輸入裝置的良好最小大小。 相較之下，標準 15x9 相對圖元微調控制項按鈕太小，無法由手寫筆有效使用。

間距

提供 (，但不會過度) 空間，讓版面配置感覺更輕鬆且更容易剖析。 有效空間不是未使用的空間，它扮演著改善使用者掃描能力的重要角色，也會增加您設計的視覺吸引力。 如需指導方針，請參閱 間距表格。

對於使用 Windows Tablet 及觸控技術 的電腦，同樣地，「滑鼠」實際上可能是手寫筆或使用者的手指。 使用手寫筆或手指作為指向裝置時，目標比較困難，導致使用者點選預定的目標之外。 當互動式控制項非常接近，但實際上並未觸碰時，使用者可能會按一下控制項之間的非使用中空間。 由於按一下非作用中的空間沒有任何結果或視覺回饋，因此使用者通常不確定發生錯誤。 如果小控制項太接近間距，使用者必須以精確度點選，以避免點選錯誤的物件。 若要解決這些問題，互動式控制項的目的地區域應該觸碰或至少有 3 個 DLL (5 個相對圖元，) 兩者之間的空間。

當您知道版面配置有良好的間距時：

• 整體而言，UI 介面感覺很熟悉，而且感覺不很輕鬆。
• 空間看起來是統一且平衡的。
• 相關元素會緊密結合，且不相關的元素相較遠。
• 控制項之間沒有要一起使用的空白，例如工具列按鈕。

可調整大小的視窗

可調整大小的視窗也是有效使用螢幕空間的因素。 某些視窗是由固定內容所組成，而且無法受益于可調整大小，但具有可調整大小內容的視窗應該可調整大小。 當然，使用者調整視窗大小的原因是要進階額外的螢幕空間，因此內容應該藉由為需要視窗的 UI 元素提供更多空間來相應展開。 具有動態內容、檔、影像、清單和樹狀架構的 Windows，最能受益于可調整大小的視窗。

在此範例中，調整視窗的大小會調整清單檢視控制項的大小。

也就是說，視窗可以延伸太寬。 例如，當內容大於 600 個相對圖元時，許多控制台頁面會變得不穩定。 在此情況下，最好不要調整超過此最大寬度的內容區域大小，或變更內容的來源，因為視窗調整大小時。 相反地，請保留最大寬度和固定左上方原點。

當行長度增加時，文字會變得難以閱讀。 對於文字檔，請考慮長度上限為 80 個字元，讓文字更容易閱讀。 (字元包括字母、標點符號和空格。)

不正確：

在此範例中，長文字長度會讓閱讀變得困難。

最後，可調整大小的視窗也需要在變小時有效地使用螢幕空間，方法是讓可調整大小的內容變小，並從 UI 元素中移除空間，而不需要它就能有效運作。 此時，視窗或其 UI 元素變得太小而無法使用，因此應該指派最小大小或部分元素完全移除。

在此範例中，窗格的大小下限。

有些程式可受益于使用完全不同的簡報，讓內容以較小的大小使用。

在此範例中，當視窗變得太小而無法使用標準格式時，Windows 媒體播放機變更其格式。

焦點

當有一個明顯的外觀位置時，版面配置會有焦點。 重點在於向使用者顯示開始掃描視窗或頁面的位置。 沒有清楚的焦點，使用者的眼睛會無目的地漫遊。 焦點應該是使用者需要快速尋找和瞭解的重要專案，而且應該具有最大的視覺重點。 左上角是大部分視窗的自然焦點。

應該只有一個焦點。 就像真實生活一樣，眼球一次只能專注于一件事，使用者無法同時專注于多個位置。

若要讓 UI 元素成為焦點，您可以藉由下列方式提供視覺效果強調：

• 將它放在表面的左上方或中央部分。
• 使用重要且容易理解的互動式控制項。
• 使用醒目文字，例如主要指令。
• 提供控制項預設選取專案和初始輸入焦點。
• 將控制項放在不同的彩色背景。

請考慮 Windows 搜尋。 Windows 搜尋的焦點應該是 [搜尋] 方塊，因為它是工作的起點。 不過，它位於右上角，與標準搜尋方塊位置一致。 [搜尋] 方塊具有輸入焦點，但在掃描路徑中指定其位置時，該線索本身就不夠。

若要解決此問題，視窗中央部分有醒目指示，可引導使用者前往正確的位置。

可以接受：

在此範例中，視窗中央部分的醒目指示會將使用者導向至 [搜尋] 方塊。

如果沒有指示，視窗就不會有明顯的焦點。

不正確：

此範例沒有明顯的焦點。 使用者不知道要在哪裡查看。

如果您提供 UI 元素視覺強調，請確定需要注意。 在先前不正確的 Windows 搜尋範例中，醒目提示的 [全部] 按鈕位於左上角，而且具有最視覺的強調，但它不是預期的焦點。 使用者可能會卡住查看此按鈕，嘗試找出該怎麼做。

不正確：

如果沒有醒目指示做為焦點，反白顯示的 [全部] 按鈕就是不小心的焦點。

Flow

當使用者透過其介面順暢且自然地透過清楚的路徑引導時，配置就會有流程，以適合其使用的順序尋找 UI 元素。 一旦使用者識別焦點，他們就必須決定如何完成工作。 UI 元素的位置會傳達其關聯性，而且應該鏡像執行工作的步驟。 一般而言，這表示工作的步驟應該以從左至右、由上至下的順序自然流動， (西部文化特性) 。

當您知道版面配置有良好的流程時：

• UI 元素的位置會反映使用者執行工作所需的步驟。
• 起始工作的 UI 元素位於左上角或左上角。
• 完成工作的 UI 元素位於右下角。
• 相關的 UI 元素是一起的;不相關的專案是分開的。
• 必要的步驟位於主要流程中。
• 選擇性步驟不在主要流程之外，可能會使用適當的背景或漸進式揭露來取消強調。
• 經常使用的元素會出現在掃描路徑中不常使用的元素之前。
• 使用者一律知道接下來要做什麼。 工作流程中沒有非預期的跳躍或中斷。

不正確：

在此範例中，使用者不知道接下來要做什麼。 工作流程中有非預期的跳躍和中斷。

正確：

在此範例中，UI 元素的呈現會鏡像執行工作的步驟。

分組

當邏輯相關的 UI 元素具有清楚的視覺關聯性時，配置就會進行群組。 群組很重要，因為使用者更容易瞭解並專注于一組相關的專案，而不是個別的專案。 群組可讓版面配置變得更簡單且更容易剖析。

您可以透過下列方式來顯示群組， (增加高度) ：

• 版面配置。 您可以將彼此旁邊的相關控制項分組，並在不相關的控制項之間放置額外的間距。

  

  在此範例中，單獨使用版面配置來顯示控制項關聯性。

• 分隔符號。 分隔符號是一條水準或垂直線，可統一一組控制項。 分隔符號提供更簡單、更簡潔的外觀。 不過，不同于群組方塊，它們會在跨越完整表面時效果最佳。

  

  在此範例中，標記的分隔符號是用來顯示控制項關聯性。

• 匯總工具。 匯總工具是一個圖形，可建立強式相關控制項之間的視覺關聯性。

  

  在此範例中，界限匯總工具是用來強調控制項之間的關聯性，並使其感覺就像是單一控制項，而不是八個控制項。

• 群組方塊。 群組框是一個加上標籤的矩形框架，圍繞一組相關的控制項。

  

  在此範例中，群組框會圍繞並標記一組相關的控制項。

• 背景。 您可以使用背景來強調或取消強調不同類型的內容。

  

  在此範例中，控制台工作窗格是用來群組相關的工作和控制台專案。

  若要避免視覺雜亂，最輕量權群組會妥善執行工作是最佳選擇。 如需詳細資訊，請參閱 群組方塊、 索引標籤、 分隔符號和背景。

不論群組樣式為何，您都可以使用縮排來顯示群組內控制項的關聯性。 彼此對等的控制項應該靠左對齊，而相依控制項會縮排 12 個 DLL 或 18 個相對圖元。

相依控制項縮排為 12 DLUS 或 18 個相對圖元，依設計是核取方塊與其標籤之間的選項按鈕之間的距離。

當您知道版面配置有良好的群組時：

• 視窗或頁面最多有 7 個群組。
• 每個群組的用途很明顯。
• 每個群組內的控制項關聯性很明顯，特別是控制項相依性。
• 群組可簡化內容，而不是讓內容變得更複雜。

Alignment

對齊是 UI 元素的協調位置。 對齊很重要，因為它可讓內容更容易掃描，並影響使用者對視覺複雜性的認知。

決定對齊時，有幾個目標需要考慮：

• 輕鬆進行水準掃描。 使用者可以水準讀取並尋找彼此旁的相關專案，而不需要任何不小心的間距。
• 輕鬆進行垂直掃描。 使用者可以掃描相關專案的資料行，並立即尋找他們正在尋找的專案，且水準眼球移動最少。
• 最少的視覺複雜度。 如果使用者認為版面配置具有不必要的垂直對齊格線，則會以視覺化方式呈現複雜。

水平對齊

靠左對齊

由於從左至右讀取順序，因此大部分內容都適用左對齊。 靠左對齊讓單欄資料更容易垂直掃描。

靠右對齊

正確對齊是數值資料的最佳選擇，特別是 數值資料的資料行。 右對齊也適用于 認可按鈕 ，以及對齊右視窗邊緣的控制項。

在此範例中，進階搜尋漸進式洩漏控制項靠右對齊，因為它會放置在右視窗邊緣。

置中對齊方式

置中對齊最適合用於靠左或右對齊不適當或顯示不對稱的情況。

在此範例中，媒體播放機控制項會置中以提供平衡的外觀。

不要將視窗內容置中，只是填滿空間。

不正確：

在此範例中，內容不正確地置中于可調整大小的視窗中以填滿空間。

垂直對齊

元素頂端

由於從上到下讀取順序，所以最上層對齊方式適用于大部分的內容。 最上層對齊可讓 UI 元素輕鬆地水準掃描。

文字基準

垂直對齊控制項與文字時，對齊文字基準以提供順暢的水準閱讀流程。

正確：

不正確：

在正確的範例中，控制項及其標籤會依其文字基準垂直對齊。

當您知道版面配置有良好的對齊方式時：

• 水準和垂直掃描很容易。
• 它具有簡單的視覺外觀。

標籤對齊方式

一般對齊規則適用于控制標籤，但它是值得特別注意的常見問題。 標籤對齊具有下列目標：

• 輕鬆進行垂直掃描，以尋找正確的控制項。
• 輕鬆進行水準掃描，使標籤與其控制項產生關聯。
• 輕鬆當地語系化，處理不同語言長度不同的標籤。
• 適用于不同標籤長度的混合。
• 讓可用空間有效率地使用，同時避免截斷的文字。

整體目標是減少尋找可能要尋找的使用者所需的眼球移動量，但控制項的本質和要尋找的使用者取決於內容。

有四個常見的標籤放置和對齊樣式，各有其優點：

• 控制項上方靠左對齊的標籤
• 控制項左邊的靠左對齊標籤
• 控制項左邊的靠左對齊標籤、左邊不完全的控制項
• 控制項左邊的靠右對齊標籤

控制項上方靠左對齊的標籤

此樣式是當地語系化最簡單的方式，因為版面配置不相依于標籤的長度，但需要最垂直的空間。

此樣式採用最垂直的空間，但最容易當地語系化。 這是標記大部分互動式控制項的較佳選擇。

最適合用於：

• 標示的控制項是互動式 (不只是文字) 。
• UI 將會當地語系化。 此樣式通常會提供標籤長度的倍數或甚至三倍的空間。
• UI 使用固定版面配置技術， (例如 Win32) 。
• 控制項有十個或更少。 使用更多控制項時，標籤很難掃描。
• 有足夠的垂直空間可容納標籤。
• 版面配置必須是自由格式，而不只是資料行。

控制項左邊的靠左對齊標籤

此樣式是垂直掃描的最簡單方式，而且當標籤的長度大幅不同時，它也會正常運作，但較難讓標籤與其控制項產生關聯。 如有必要，此樣式可以使用多行標籤。

此樣式正常運作。 不過，有兩個數據行，但看起來有四個數據讓資料變得更複雜。

最適合用於：

• 使用者可能會垂直掃描以尋找特定標籤。
• 使用者不太可能以由左至右、由上至下的方式讀取標籤和控制項。
• 有足夠的水準空間可容納標籤。
• 標籤的長度明顯不同。
• 有許多控制項，例如表單。
• 有幾個資料行。 在視覺上，標籤和控制項會顯示為兩個個別資料行。

控制項左邊的靠左對齊標籤、左邊不完全的控制項

此樣式可讓您輕鬆地垂直掃描標籤，以及水準掃描標籤和控制項，而且非常有空間效率;但垂直掃描控制項會比較困難。 控制項靠右對齊，以充分利用可用空間。

此樣式很精簡且容易閱讀，但很難垂直掃描控制項。

最適合用於：

• UI 使用變數版面配置技術 (，例如Windows Presentation Foundation) 。
• 使用者可能會垂直掃描以尋找特定標籤。
• 使用者可能會以由左至右、由上至下的方式讀取標籤和控制項。
• 使用者不太可能垂直掃描控制項。
• 控制項文字會隨著長度而有所不同，而且如果使用另一個樣式，可能會遭到截斷。
• 控制項是唯讀的，例如唯讀文字方塊。 對於其他控制項，此對齊方式看起來會是 sloppy。 不過，按一下時，控制項可能會變成可編輯。
• 資料行有許多資料行，但資料行中有幾個控制項。

控制項左邊靠右對齊的標籤

此樣式是水準讀取以將標籤與其控制項產生關聯的最簡單，但很難垂直掃描標籤，而且當具有縮排標籤和控制項的 labelsList 在長度上有很大的差異時，很難正常運作。

此樣式允許輕鬆垂直掃描控制項，但很難垂直掃描標籤。

最適合用於：

• 使用者可能會以由左至右、由上至下的方式讀取標籤和控制項。
• 使用者不太可能垂直掃描以尋找特定標籤，可能是因為：
  • 有幾個控制項。
  • 標籤是已知的。
  • 控制項大部分都是自我說明的，而且很少空白 (可能具有預設值來防止空白控制項) 。
• 有足夠的水準空間容納標籤。
• 標籤的長度不會大幅改變。
• 有許多資料行。 在視覺上，標籤和控制項會顯示為單一資料行。

不過，在採用上述任一樣式之前，請考慮下列兩個因素：

• 偏好一致地在整個程式中使用的樣式。
• 在控制項左側的上方控制項上，靠左對齊的標籤是最常見的樣式，因此應該提供喜好設定。

餘額

當視窗或頁面的內容在其表面平均分佈時，視窗或頁面會有平衡。 如果表面實際上具有與視覺上相同的加權，則平衡的版面配置不會向一側傾斜。

最常見的平衡問題是在視窗或頁面左側有太多內容。 您可以透過下列方式建立餘額：

• 使用左邊比右邊更大的邊界。
• 放置用來在右側完成工作的 UI 元素。
• 將整個工作中使用的 UI 元素放在中央。
• 延長可調整大小或多行控制項。
• 策略性地使用置中對齊。

這個平衡良好的精靈頁面配置會顯示比右邊更大的左邊界，以改善平衡。

如果這些技術無法達到平衡，請考慮減少視窗或頁面的寬度，以更符合其內容。

對於可調整大小的表面，請勿將內容置中以達到平衡。 相反地，維護固定左上方原點、定義最大介面區，以及平衡使用空間內的內容。

方格

格線是不可見的基礎對齊系統。 格線可以是對稱的，但非對稱方格的運作方式也一樣。 單一視窗或頁面使用時，格線可協助組織介面內的內容。 重複使用時，格線會跨表面建立一致的版面配置。

格線數目會影響視覺複雜度感知。 具有較少格線的版面配置比具有更多格線的版面配置更簡單。

以視覺化方式複雜：

以視覺化方式簡單：

不必要的格線會建立視覺複雜度。

您知道配置在：

• 具有類似內容或函式的 Windows 或頁面具有類似的版面配置。
• 重複的設計項目會出現在視窗和頁面的類似位置。
• 沒有不必要的垂直和水準對齊格線。

視覺效果簡單

視覺簡單性是版面配置比所需的還要複雜。

您知道版面配置在視覺上簡單明瞭：

• 消除不必要的視窗 Chrome 層。
• 使用最多七個容易識別的群組來呈現內容。
• 使用輕量型群組，例如配置和分隔符號，而不是群組方塊。
• 使用輕量型控制項，例如連結，而不是次要命令的命令按鈕，以及下拉式清單，而不是用於選擇的清單。
• 減少垂直和水準對齊格線的數目。
• 例如，減少控制項大小的數目，例如，在介面上只使用一或兩個命令按鈕寬度。
• 使用漸進式洩漏來隱藏 UI 元素，直到需要它們為止。
• 使用足夠的空間，讓視窗或頁面不會感到很久。
• 適當地調整視窗和控制項的大小，以消除不必要的捲動。
• 使用具有少量大小和文字色彩的單一字型。

一般規則是，如果可以消除版面配置元素，而不會損害 UI 的有效性，則可能是 。

指導方針

螢幕解析度和 DPI

• 支援最小 Windows 有效解析度 800x600 圖元。 對於必須以安全模式運作的重要 UI，請支援 640x480 圖元的有效解析度。 請務必針對以工作列顯示的視窗保留 48 個垂直 相對圖元 ，以考慮工作列所使用的空間。
• 優化可調整大小的視窗配置，以有效解析度為 1024x768 圖元。 以仍在運作的方式自動調整這些視窗的大小，以降低螢幕解析度。
• 請務必在 800x600 圖元) ( () 、120 DPI (、120 DPI (1024x768 圖元) ，以及 144 DPI (1200x900 圖元) 模式測試您的視窗。 檢查配置問題，例如裁剪控制項、文字和視窗，以及圖示和點陣圖的延展。
• 針對觸控和行動裝置使用案例的程式，請針對 120 DPI 進行優化。 觸控和行動電腦上目前普遍使用高 DPI 螢幕。

視窗大小

• 選擇適合其內容的預設視窗大小。 如果您能夠有效地使用空間，請不要擔心使用較大的初始視窗大小。
• 使用平衡的高度與寬度外觀比例。 建議使用介於 3：5 和 5：3 之間的外觀比例，雖然 1：3 的外觀比例可用於訊息對話方塊， (例如錯誤和警告) 。
• 請盡可能使用可調整大小的視窗，以避免捲軸和截斷的資料。 具有動態內容、檔、影像、清單和樹狀架構的 Windows，最能受益于可調整大小的視窗。
• 對於文字檔，請考慮長度上限為 80 個字元 ，讓文字更容易閱讀。 (字元包括字母、標點符號和空格。)
• 固定大小的視窗：
  • 固定大小的視窗必須完全可見，且大小必須符合工作區域。
• 可調整大小的視窗：

  • 可調整大小的視窗可能會針對更高的解析度進行優化，但在顯示時間視需要縮小到實際的螢幕解析度。

  • 漸進式較大的視窗大小必須以漸進方式顯示更多資訊。 請確定至少有一個視窗部分或控制項具有可調整大小的內容。

  • 將內容的左上方原點保持在固定狀態，因為視窗已調整大小。 請勿移動原點以在視窗大小變更時平衡內容。

  • 如果內容可能太寬，請設定內容大小上限。 如果內容變得不穩定，請勿將內容區域調整大小超過其最大寬度，或變更內容的來源，因為視窗調整大小時。 相反地，請保留最大寬度和固定左上方原點。

  • 如果內容不再使用的大小，請設定視窗大小下限。 對於可調整大小的控制項，請將最小可調整大小的元素大小設定為其最小功能大小，例如清單檢視中的最小功能資料行寬度。 應該完全移除選擇性 UI 元素。

  • 請考慮改變簡報，讓內容以較小的大小使用。

    

    在此範例中，當視窗對標準格式而言太小時，Windows 媒體播放機變更其格式。

控制項大小

• 讓所有互動式控制項至少為相對 16x16 圖元。 這麼做適用于所有輸入裝置，包括Windows Tablet 及觸控技術。

• 調整控制項的大小，以避免截斷的資料。 請勿截斷必須讀取才能執行工作的資料。 調整清單檢視資料行的大小，以避免截斷的資料。

• 調整控制項的大小，以消除不必要的捲動。 如果這樣做會消除捲軸，請讓控制項稍微大一點。 應該有幾個垂直捲動條，而且沒有不必要的水準捲軸。

  

  在此範例中，下拉式清單會調整為消除捲軸的大小。

• 減少介面上的控制項大小數目。 偏好使用 標準建議的控制項大小 ，並視需要使用一些一致大小的較大或較小的控制項。 嘗試針對清單方塊和樹狀檢視使用單一寬度，而命令按鈕和下拉式清單的寬度不超過三個。 不過，文字方塊和下拉式方塊寬度應該建議其最長或預期的輸入長度。

  

  在此範例中，會一致地使用一個清單方塊和命令按鈕大小。

• 對於根據文字調整大小的控制項，請針對將當地語系化的任何文字，包含最多 30% (最多 200% 的簡短文字) 。 此指導方針假設版面配置是使用英文文字所設計。 另請注意，此指導方針是指當地語系化的文字，而非數位。

• 將靜態文字控制項、核取方塊和選項按鈕延伸至將符合版面配置的最大寬度。 這麼做可避免截斷可變長度文字和當地語系化。

  不正確：

  

  在此範例中，不必要地截斷控制項文字。

控制間距

• 如果控制項未觸碰，則至少有 3 個 DLL (5 個相對圖元) 兩者之間的空間。 否則，使用者可以按一下控制項之間的非使用中空間。 由於按一下非使用中空間沒有任何結果或視覺意見反應，因此使用者通常不確定發生錯誤。

放置

• 排列介面內的 UI 元素，以自然地以左至右、由上至下的順序 (在西部文化特性中) 。 UI 元素的位置會傳達其關聯性，並應該鏡像執行工作的步驟。
• 將起始工作的 UI 元素放在左上角或左上角。 提供使用者應該先查看最大視覺強調的 UI 元素。
• 將完成工作的 UI 元素放在右下角。
• 將相關的 UI 元素放在一起，並分隔不相關的專案。
• 在主要流程中放置必要的步驟。
• 將選擇性步驟放在主要流程之外， 可能使用適當的背景或漸進式洩漏來取消強調。
• 將常用元素放在掃描路徑中不常使用的元素之前 。

焦點

• 選擇使用者必須先查看成為焦點的單一 UI 元素。 焦點應該是使用者快速尋找和瞭解的重要事項。
• 將焦點放在左上角或左上角。
• 提供焦點最大的視覺強調， 例如醒目文字、預設選取範圍或初始輸入焦點。

Alignment

• 一般而言，請使用左對齊方式。
• 針對數值資料使用正確的對齊方式，特別是數值資料的資料行。
• 針對認可按鈕使用右對齊，以及與右視窗邊緣對齊的控制項。
• 當左對齊或靠右對齊不適當或顯示不對稱時，請使用中央對齊方式。
• 垂直對齊控制項與文字時，對齊文字基準以提供順暢的水準閱讀流程。
• 如需標籤對齊，請參閱設計概念中的卷 標對齊 一節。

協助工具選項

• 請勿使用版面配置作為傳達 UI 重要資訊的唯一方法。 具有視覺障礙的使用者可能無法解譯此簡報。 例如，請確定控制項標籤與其他專案之間的關聯性。

• 請勿在控制項標籤中內嵌次級控制項，以建立句子或片語。 這類關聯僅以版面配置為基礎，而且鍵盤流覽或協助工具輔助技術無法妥善處理。 此外，這項技術無法當地語系化，因為句子結構會隨著語言而有所不同。

  不正確：

  

  在此範例中，文字方塊不正確地放在核取方塊標籤內。

  正確：

  

  在這裡，文字方塊會放在核取方塊標籤之後。

• 讓群組可供存取。 視窗窗格、群組方塊、分隔符號、文字標籤和匯總工具所定義的群組會自動由協助工具輔助程式處理。 不過，只有放置和背景所定義的群組不是，而且必須以程式設計方式定義協助工具。

如需更多指導方針，請參閱 協助工具。

建議的大小和間距

控制項調整大小

下表列出建議的大小 (寬度 x 高度，如果一個數位) ，則為 9 pt (的通用 UI 元素) 高度。96 DPI) 的 Segoe UI。 根據英文中最長專案的寬度，會針對當地語系化 (最多 200% 新增 200% 的簡短文字，) 任何文字 (，但不會) 當地語系化的數位。

範例	控制	對話方塊單位	相對圖元
	核取方塊	10	17
	下拉式方塊	最長專案的寬度 + 30% x 14	最長專案的寬度 + 30% x 23
	命令按鈕	50 x 14	75 x 23
	命令連結	25 (一行) 或 35 (兩行)	41 (一行) 或 58 (兩行)
	下拉式清單	最長有效資料的寬度 + 30% x 14	最長專案的寬度 + 30% x 23
	清單方塊	最長專案的寬度 + 30% x 整數數， (3 個專案的最小)
	清單檢視	避免截斷資料的資料行寬度 x 整數專案數
	進度列	107 或 237 x 8	160 或 355 x 15
	選項按鈕	10	17
	滑桿	15	24
	文字 (靜態)	8	13
	文字方塊	最長或預期的輸入寬度 + 30% x 14 (每一行) + 10 行	最長有效資料的寬度 + 30% x 23 相對圖元 (每一行) + 16
	樹狀檢視	最長專案的寬度 + 30% x 整數數， (5 個專案下限)

間距

下表列出 9 pt (一般 UI 元素之間的建議間距。96 DPI) 的 Segoe UI。

	元素	對話方塊單位	相對圖元
	對話方塊邊界	所有邊 7	所有側邊 11
	例如，在文字標籤與其相關聯的控制項之間 (文字方塊和清單方塊)	3	5
	相關控制項之間	4	7
	在不相關的控制項之間	7	11
	群組框中的第一個控制項	從群組方塊頂端向下 11;垂直對齊群組方塊標題	從群組方塊頂端向下 16;垂直對齊群組方塊標題
	在群組方塊中的控制項之間	4	7
	水準或垂直排列的按鈕之間	4	7
	群組框中的最後一個控制項	群組方塊底部 7	群組方塊底部的 11
	從群組方塊的左邊緣	6	9
	控制項旁的文字標籤	從控制項頂端向下 3	從控制項頂端向下 5
	在文欄位落之間	7	11
	互動式控制項之間的最小空間	3 或無空格	5 或無空間
	非互動式控制項與任何其他控制項之間的最小空間	2	3