Microsoft交互設計規(guī)范

1、Windows用戶體驗交互設計規(guī)范此官方Windows用戶體驗交互設計規(guī)范(簡稱“UX規(guī)范”)的目標在于:為所有基于Windows的應用程序劃定高品質與一致性的基準。回答關于用戶體驗的問題。使你的工作更為輕松！設計原則Windows用戶體驗設計原貝V最容易犯的錯誤如何設計優(yōu)秀的用戶體驗簡約而又強大(20.3%)使用WPF進行設計(29.4%)控件控件列表氣球狀提示復選框命令按鈕命令按鈕v鏈接命令鏈接下拉列表框與組合框分組框鏈接歹列表框歹歹表視圖進度條漸進展開控件選項按鈕搜索框滑塊微調控件狀態(tài)欄選項卡文本框工具提示與信息提示樹形視圖命令菜單ooooooooooooo設計理念(34%)工具欄設計理

2、念使用模式設計規(guī)范推薦尺寸與間距標簽文檔編寫功能區(qū)(Ribbon)設計理念(35.7%)設計規(guī)范(8.7%)標簽(25.1%)文檔編寫文本用戶界面文本風格與語氣消息ooooooooooooooo錯誤信息設計理念使用模式設計規(guī)范(31.3%)文本(11.7%)文檔編寫警告信息設計理念(25.9%)使用模式設計規(guī)范文本文檔編寫確認信息設計理念(50.3%)使用模式設計規(guī)范(40.8%)文本文檔編寫通知功能區(qū)設計流程(15.2%)程序命令模式(42.9%)交互鍵盤鍵盤快捷鍵(0%)鼠標與指針觸摸(11.6%)手寫筆(19.3%)無障礙訪問(輔助特性)(3.5%)窗口ooo窗口管理對話框(51.8%)

3、對話框設計理念(19.5%)對話框使用模式(27.1%)通用對話框向導屬性窗口(5.3%)屬性窗口設計理念(13.4%)屬性窗口使用模式(35.3%)控制面板(10.0%)控制面板使用模式(49.8%)視覺oooo布局布局度量單位窗口邊框字體(SegoeUI)顏色圖標標準圖標(26.5%)動畫與過渡NEW設計理念(11.2%)使用模式(33.5%)設計規(guī)范(13.1%)文檔編寫(0%)圖形元素(18.7%)聲音(13.2%)體驗軟件品牌宣傳安裝NEW(0%)首次體驗(47.3%)打印(31.4%)Windows環(huán)境桌面(72.3%)開始菜單(16.7%)任務欄(49.5%)通知區(qū)域(33.5%

4、)Windows桌面小工具(10.5%)幫助(8.4%)用戶帳戶控制(11.5%)其他文檔特點及翻譯風格指南WindowsUserExperienceInteractionGuidelines原文注釋與引用1.這里“官方”是原文的直接翻譯，并不表示此中文譯本經過微軟官方任何形式的授權或認證。布局Layout目錄隱藏1設計理念o11視覺層次o1.2閱讀設計模型o13為掃視進行設計o1.4有效利用屏幕空間o1.5控件尺寸o16間距o1.7可縮放窗口o18焦點o1.9流程o1.10分組o1.11對齊o1.12水平對齊1121左對齊1122右對齊1123居中對齊o1.13垂直居中1131元素頂端113

5、2文本基線o114標簽對齊1.14.1標簽在控件上方左對齊1142標簽在控件左側左對齊1143標簽在控件左側左對齊1144標簽在控件左側右對齊o1.15平衡o1.16網格o1.17視覺簡潔2設計規(guī)范o21屏墓分辨率及DPIo22窗口尺寸o23控件尺寸o24控件間距o2.5位置o26隹占o2.7對齊o2.8無障礙訪問特性3推薦尺寸與間距，控件的左側錯開排列“布局”是指窗口或頁面內各內容的尺寸、間距及位置。有效的布局對于幫助用戶快速找到他們想要的東西至關重要，并可產生具有吸引力的視覺外觀。有效的布局可以使有的設計用戶立即就可以理解，而有的設計卻使用戶覺得困惑而不知所措。注：與窗口管理相關的設計規(guī)范

6、請參考各自相應的章節(jié)。特定控件的推薦尺寸與間距則請參考相應的設計規(guī)范章節(jié)。設計理念視覺層次當窗口或頁面的外觀能夠表明各個元素之間的關系和重要性時，即可認為是具有清晰的視覺層次。如果缺少視覺層次，用戶就得靠他們自己來分辨它們之間的關系與重要性。視覺層次是通過巧妙結合下列屬性來實現的：焦點。該布局指出用戶首先要看的位置。流。當目光順暢自然地沿著清晰的路徑在界面上移動時，看到的用戶界面（UI）元素即是適合其使用的順序排列的。分組。在邏輯上相關的UI元素之間具有清晰的視覺關系。相關的項被組合在一起，不相關的項則被分開。強調。根據UI元素的相對重要程度進行強調。對齊。UI元素并列排放，使其便于掃視并依次

7、呈現。另外，有效的布局還具有下列特性：設備無關性。布局的呈現應當與字型、字體大小、分辨率（DPI）、顯示器或顯卡無關。易于掃視。用戶可以只掃一眼就找到他們要的內容。高效性。那些尺寸較大的UI元素就應該這么大，而小的元素也能照樣很好地使用。尺寸可縮放性。如果有用的話，窗口尺寸可以縮放，而無論界面的尺寸多大或者多小，其內容的布局都能夠保持有效。平衡。內容勻稱地分布在界面上。視覺簡潔性。這是說布局不要比它所應有的更復雜。用戶不會覺得布局的外觀復雜得讓人頭暈。一致性。類似的窗口或頁面應當使用類似的布局，這樣用戶總能熟悉自己所處的環(huán)境。雖然尺寸、間距和位置等概念非常簡單，但在布局中正確混合使用這些屬性卻

8、不是一件容易的事情。在Microsoft?Windows?中，布局是用對話框單位（DLU）這樣的設備無關度量單位和相對像素來描述的。關于布局度量單位、測量及換算的更多信息，請參考布局度量單位。閱讀設計模型用戶是通過內容的外觀和組織形式來選擇要閱讀的內容的。要創(chuàng)建有效的布局，你需要理解什么是用戶經常閱讀的以及為什么如此。你可以在決定如何布局時參考閱讀設計模型：人們以從左向右、自上而下的順序閱讀的（在西方文化中）。閱讀分為兩種模式：沉浸式閱讀（immersivereading）和瀏覽（scanning）。沉浸式閱讀的目的在于理解。該圖所示的是沉浸式閱讀模式。相反，瀏覽的目標則是定位。一般的瀏覽路徑

9、看起來像是：該圖所示的是瀏覽模式。如果文本排列在頁面的左側，則用戶會先瀏覽左側。使用軟件時，用戶不會沉浸于UI本身，而是沉浸于他們的工作中。因此，用戶不會真正閱讀界面上的文本他們只會瀏覽。他們只會在確信必要的時候才會仔細閱讀大量文本。用戶通常會跳過頁面左側或右側的導航部分。用戶能夠認出它們在那里，但僅當他們想進行導航時才去看導航部分。用戶通常會跳過大塊無格式的文本而完全不去閱讀。用戶在瀏覽時通常會跳過大塊文本及導航部分。一切都等價時，用戶首先從窗口的左上角看起，掃過整個頁面，到右下角結束。他們通常會忽略左下角。一切都等價時，用戶會以1、2、4、3的順序閱讀這些數字。但在交互式UI中，并非所有的

10、一切都是等價的，因此不同的UI元素所受到的關注程度也是不同的。用戶通常會首先看交互式控件尤其是出現在窗口左上角和中間的控件以及顯著的文本。用戶關注于主要的交互式控件及顯著的主標題說明，其他東西只有在他們需要的時候才會去看。用戶傾向于閱讀交互式控件標簽，尤其是那些看起來和完成手頭任務相關的。相反，用戶僅在他們認為需要的時候才有可能去閱讀靜態(tài)文本?？瓷先ゲ煌膬热萑菀孜⒁饬Α４煮w文本和大號文本能夠從普通文本中突顯出來。彩色的或者是位于彩色背景上的用戶界面元素較為突出。有圖標比沒有圖標更加突出。除非確實需要，否則用戶不會進行滾動。如果沒有理由來滾動倒金字塔結構的內容，用戶則不會。一旦用戶決定要做

11、什么，他們會立即停止掃視文本轉而做事。由于用戶會在他們認為結束的時候停止掃視，因此他們可能會忽略所有在完成點之后出現的東西。用戶會在他們認為結束的時候停止掃視。當然，常規(guī)模式也存在例外。眼動儀實驗指出，真實用戶的行為很沒有規(guī)律。此模式的目的在于幫助你做出好的決定，而不是精確地描述用戶的行為。但既然你已經閱讀了該列表，希望你也能辯別出許多你自己的閱讀模式。為掃視進行設計用戶并不閱讀，他們只是掃視因此你應當為視掃來設計用戶界面。不要假設用戶會像書寫那樣從左至右、從上到下地閱讀文本，事實上他們會看那些吸引他們注意的UI元素。要為掃視進行設計：假設用戶先是會快速地掃一眼整個窗口，然后大致會按下面的順序

12、來閱讀UI文本：1.中間的交互控件2.提交按鈕3.其他地方的交互控件4.主標題說明5.補充解釋6.帶有警告圖標的文本7.窗口標題正文區(qū)域的其他靜態(tài)文本腳注將用于觸發(fā)任務的UI元素放在左上角或上方中間。將用于完成任務的UI元素放在右下角。盡可能將重要的文本放在交互性控件上，而非使用靜態(tài)文本。避免將重要信息放在左下角或是需要滾動很多的控件或頁面底端。不要展示大段文本。去除不必要的文本。使用倒金字塔的呈現方式。如果想吸引用戶的注意，確保其理由充分。盡可能使用這個模式而不要進行改變，但有時你可能需要強調或弱化某些UI元素。要強調主要的UI元素：將主UI元素放在掃視路徑上。將任何觸發(fā)任務的UI放在左上角

13、或上方中間。將提交按鈕放在右下角。將其他主要的UI放在中間。使用控件來引起注意，比如命令按鈕、命令鏈接和圖標。使用顯著的文本，包括大字體和粗體。將用戶必須閱讀的文本放在交互式控件上，或者附加圖標，或者放在橫幅上。使用位于淺色背景上的深色文本。在元素周圍留有足夠的空白。不需要任何操作就應當可以看到你要強調的元素，比如指向或懸停。該示例顯示了強調主要UI元素的多種方式。要弱化次要的UI元素：將次要的UI元素放在掃視路徑之外。將任何用戶并不經常需要看到的內容放在窗口左下角或底部。使用不會吸引注意力的控件，比如用任務鏈接代替命令按鈕。使用正常或灰色的文本。使用位于深色背景上的淺色文本。深灰或藍色背景上

14、的白色文本也可以在元素周圍使用最小間距?？紤]使用漸講展開方式來隱藏次要的UI元素。該示例顯示了多種弱化次要UI元素的方式。有效利用屏幕空間要有效利用屏幕空間，需要對多種因素進行平衡：占用太多空間使窗口顯得臃腫且浪費，以及基于費茨法則來說甚至會難以使用。錯誤：在這個示例中，窗口相對于其內容來說太大了。另一方面，使用太少空間會使窗口顯得狹小、不適、有壓迫感，而且難以使用如果需要滾動或其他操作才能使用的話。錯誤：在這個示例中，窗口相對于其內容來說太小了。雖然關鍵UI必須適合最小支持的屏幕分辨率，但不要認為有效利用屏幕空間就意味著窗口應該越小越好事實上不是這樣。高效的布局也顧及空白，并不是說把所有東西

15、都塞到盡可能小的空間中去?，F代顯示器擁有足夠的屏幕空間，應當盡可能有效地加以利用。因此，寧可占用過多屏幕空間，也不要使用太少。這么做可以使你的窗口感到更加輕便好用。下列情況可以表明某布局確實有效地利用了屏幕空間：不必調整窗口、面板及控件的尺寸即可使用。如果用戶首先做的事就是調整窗口、面板及控件的尺寸的話，該尺寸則是錯誤的。數據沒有被截斷。列表視圖和樹形視圖中的大部分數據應當沒有省略號，且其他控件中的數據不會被截斷，除非數據特別的長。完成任務所必須閱讀的數據則不應當被截斷。窗口和控件的尺寸恰當，沒有不必要的滾動。僅有很少的水平滾動條，沒有不必要的垂直滾動條。控件基本使用其標準尺寸。盡可能減少控件

16、不同尺寸的數量，比如，在某個界面上只使用一兩種按鈕寬度。該用戶界面平衡良好，沒有大量未使用的屏幕空間。選擇恰好能夠很好地適合其用途的窗口尺寸。（如果窗口是可縮放的，該條則應用于其默認尺寸。）被截斷的數據或滾動條與大量可用屏幕空間的情況同時存在則是布局不當的明顯標志?？丶叽绯浞掷闷聊豢臻g的第一步往往是決定各種UI元素的合適尺寸。參見控件尺寸表及各控件設計規(guī)范中的推薦尺寸部分。費茨法則指出，目標越小，鼠標指向其所需的時間就越長。因此，對于那些使用WindowsTablet及觸摸技術的計算機來說，這里所謂的“鼠標”事實上可能是手寫筆或是用戶的手指，因此你在為小控件確定尺寸的時候需要考慮其他輸入設

17、備。16x16像素對于任何輸入設備來說都是合適的最小控件尺寸。相反，15x9像素的標準微調控件按鈕對于手寫筆來說則太小了一些。間距留出充足（但不過分）的間距會使布局看起來更加舒服并易于理解。有效的空間并不只是未被使用的空間它扮演了非常重要的角色，使用戶更容易進行掃視、且給你的設計增添了視覺吸引力。關于設計規(guī)范，參見間距表再次說明，對于使用WindowsTablet和觸摸技術的計算機來說，“鼠標”事實上可能是手寫筆或是用戶的手指。當使用手寫筆或手指作為定點設備時，定位會較為困難，以導致用戶會點觸到目標位置之外。當交互控件彼此靠得很近但并沒有直接接觸的話，用戶可能會點擊在控件之間的非交互區(qū)域。由于

18、在非交互區(qū)域內點擊不會產生任何結果或視覺反饋，用戶往往無法確定哪里出了問題。如果小控件靠得過近，用戶則需要非常精確地點觸以避免誤按其他對象。要解決這類問題，交互控件的目標區(qū)域要么彼此相接，要么之間留有至少3DLU（5像素）。具有良好間距的布局是指：整體上來說，用戶界面看起來舒適，沒有束縛感。間距均勻且平衡。相關元素彼此靠近，無關元素則分開。對于如何可以稱為靠近是沒有固定的值的，比如工具欄按鈕。可縮放窗口可縮放窗口也是有效使用屏幕空間的一個因素。雖然這對于那些由固定內容組成的窗口來說沒有什么幫助，但包含可縮放內容的窗口應當也是可縮放的。顯然，用戶縮放窗口的原因是可以利用額外的屏幕空間，因此窗口內

19、容也應當相應地擴展，為需要的UI元素提供更多空間?？煽s放窗口最適用于那些包含動態(tài)內容、文檔、圖像、列表及樹的窗口。在這個示例中，縮放窗口的同時會縮放列表視圖控件。這也意味著窗口可能被拉得太寬。例如，許多控制面板頁在寬度超過600相對像素時會顯得笨拙。在這種情況下，最好不要將內容區(qū)域縮放到超過最大寬度，或者是隨著窗口的擴大而改變內容的原點位置。相反，應當保持寬度的最大值并固定左上角的原點位置。當行寬不斷增加時，文本會變得難以閱讀。對于文本文檔來說，考慮每行不超過80個字符以易于閱讀。（字符包括字母、標點和空格。）錯誤：在這個示例中，文本太寬難以閱讀。最后，可縮放窗口在縮小時也需要有效使用屏幕空間

20、，比如通過縮小可縮放的內容或是移除那些即使不存在也可以有效使用的UI元素。有時，窗口或其UI元素可能會太小而無法使用，則應指定最小尺寸或者有些元素應當完全移去。在這個示例中，該面板具有最小尺寸。對于有些程序來說，更好的方法是使用完全不同的呈現方式以使其內容在較小尺寸下仍保持可用。在這個示例中，WindowsMediaPlayer在其窗口太小，無法使用其標準模式時，進行了改變。焦點八、八、當某種布局中存在一個明顯會被最先看到的地方時即稱為具有焦點（focus）。焦點非常重要，它告訴用戶從何處開始掃視你的窗口或頁面。如果沒有清晰的焦點，用戶的目光則會漫無目的地游蕩。焦點應當位于那些用戶需要快速找到

21、并理解的重要內容處，且應當在視覺上予以強調。左上角是大多數窗口的自然焦點。應當只存在一個焦點。在真實生活中，人眼一次只能聚焦在一件物體上，用戶無法同時聚焦至多個位置。要使某個UI元素成為焦點，可通過下列方式進行視覺加強：置于界面上部的左側或居中位置。使用重要且易于理解的交互控件。使用顯著的文本，如主標題說明。默認選中該控件并賦予輸入焦點。將控件置于不同的背景顏色上?？紤]一下Windows搜索。Windows搜索的焦點應當在搜索框上，因為這是任務的起點。然而，為了與標準搜索框的位置保持一致，它被放在了右上角。雖然搜索框具有輸入焦點，但是鑒于其在掃視路徑上的位置，單單這樣線索是不夠的。為了解決這個

22、問題，窗口上方中部用一個顯著的說明文字將用戶引導至正確的位置?？梢越邮埽涸谶@個示例中，窗口上方中部的顯著說明文字將用戶引導至搜索框。如果沒有說明文字，該窗口將沒有明顯的焦點。錯誤：這個示例沒有明顯的焦點。用戶不知道應當從何處開始。如果你對某個UI元素進行了視覺加強，應當確保這種注意力是合適的。在之前那則錯誤的Windows搜索示示例中，高亮的All按鈕位于左上角且是最為醒目的，然而它卻并不是所期望的焦點。用戶可能會停在這個按鈕處，試圖弄清應該怎么做。錯誤：失去了顯著的說明作為焦點，高亮的All按鈕意外地成了焦點。流程當用戶能夠順著界面上清晰的路徑而流暢自然地按合適的順序找到他們想要的UI元素時

23、，該布局即稱為具有好的“流程（flow）。一旦用戶認出了焦點，他們就需要確定如何完成任務。UI元素的位置傳達了它們之間的關系，且應當反映出完成任務的步驟。通常來說，這意味著任務的各個步驟應當自然地從左至右、從上至下（在西方文化中）排列。具有好的流程的布局應滿足下列條件：UI元素的位置反映出用戶完成該任務需要的步驟。觸發(fā)任務的UI元素位于左上角或上方中部。完成任務的UI元素位于右下角。相關的UI元素相互靠近，無關的元素則分離。必須步驟應在主流程中?？蛇x步驟應在主流程之外，可以使用合適的背景或漸進展開的方式進行弱化。經常使用的元素比不常使用的元素出現在掃視路徑上的位置更靠前。用戶始終知道下一步要做

24、什么。任務流程中不存在出人意料的跳轉或停止。錯誤：在這個示例中，用戶不知道下一步該做什么。任務流程中存在出人意料的跳轉和停止。正確：在這個示例中，UI元素的呈現方式反映了完成任務所需的步驟。分組當那些在邏輯上相關的UI元素具有清晰地視覺聯(lián)系時，該布局即可稱為具有好的分組（grouping）”。分組非常重要，因為這使得用戶能夠更加容易地理解并專注于一組相關而非單獨的條目。分組可使布局顯得更加簡潔、易于理解。你可以以下列方式進行分組（按分組程度由低到高排列）：布局。你可以將相關的控件相互靠攏，并在無關的控件之間保留較大的間距。在這個示例中，僅僅使用布局顯示控件之間的關系。分隔符。分隔符是用于劃分控

25、件分組的水平或垂直線條。分隔符提供了更加簡潔的外觀。不過，與分組框不同，它們在橫跨整個界面時最為合適。在這個示例中，帶標簽的分隔符用于顯示控件之間的關系。聚合器。聚合器是在強烈相關的控件間建立視覺聯(lián)系的圖形。在這個示例中，邊界聚合器用于強調控件之間的關系，使其看起來像是單個控件，而不是八個。分組框。分組框是環(huán)繞在一組相關控件外的帶標簽的矩形框。在這個示例中，分組框用于圈出并標注一組相關的控件。背景。你可以使用背景來強調或弱化不同的內容。在這個示例中，控制面板任務窗格用于對相關的任務和控制面板項進行分組。要避免視覺混亂，能夠達到效果的最輕量級的分組方式即是最好的選擇。更多信息，參見分組框、選項卡

26、、分隔符及背景無論使用何種分組方式，你都可以用縮進的方式在分組內部展示控件的關系?；ハ嗥叫械目丶敶怪睂R，相互依賴的控件則應當縮進12DLU或18像素。有依賴關系的控件縮進了12DLU或18像素，在設計上，這是復選框及單選按鈕到其標簽之間的距離。分組良好的布局滿足以下條件：窗口或頁面中最多包含7個分組。每個分組的用途很明顯。各組控件之間的關系顯而易見，尤其是控件間的依賴關系。分組是對內容的簡化，而不是使其更為復雜。對齊對齊是UI元素按照基準而排列的方式。對齊非常重要，因為這使內容更加易于掃視，并會降低用戶所感受到的視覺復雜度。當決定如何對齊時應當考慮下列目標：易于水平掃視。用戶能夠水平閱讀

27、并依次找到相關的條目，沒有任何不適當的間隙。易于垂直掃視。用戶可以掃視成列的相關條目并立即找到需要的內容，且只需最小的水平目光移動。最小的視覺復雜度。如果某個布局在垂直方向上存在不必要的對齊網格線的話，用戶會覺得它在視覺上較為復雜。水平對齊左對齊由于從左至右的閱讀順序，使得左對齊適用于絕大部分內容。左對齊使得列數據易于垂直掃視。右對齊右對齊最適用于數值數據，尤其是成列的數值數據。右對齊也適用于提交按鈕以及與窗口右邊緣對齊的控件。在這個示例中，高級搜索漸進展開控件是向右對齊的，因為它是對著窗口右邊側而放置的。居中對齊居中對齊最適用于那些左對齊和右對齊都不合適或顯得不平衡的情況。在這個示例中，媒體

28、播放器控件是居中的，以保持外觀平衡。不要僅僅為了填充空間而將窗口內容居中。錯誤：在這個示例中，內容為了填充空間而錯誤地在可縮放窗口中居中。垂直居中元素頂端由于自上而下的閱讀順序，使得頂端對齊適用于絕大部分內容。頂端對齊使得UI元素易于水平掃視。文本基線當控件與文本垂直對齊時，應當按照文本基線對齊以保持水平閱讀流暢。正確：錯誤：在正確的示例中，控件和其標簽是按照各自的文本基線垂直對齊的。對齊良好的布局應當滿足下列條件：水平和垂直方向都易于掃視。簡潔的視覺外觀。標簽對齊常規(guī)對齊規(guī)則適用于控件標簽，但這也是值得特別注意的常見問題。標簽對齊包含以下目的：易于垂直掃視以找到相應控件。易于水平掃視以將標簽

29、及其控件聯(lián)系起來。易于本地化，處理在不同語言中長度不同的標簽。適用于不同標簽長度混合的情況。避免截斷文本的同時，盡可能有效利用可用空間?？傮w目標在于當尋找用戶可能需要的內容時減少必須的視線移動，但控件的特性以及用戶需要的內容則取決于上下文環(huán)境以下是四種常見的標簽擺放和對齊樣式，以及各自的特點：標簽在控件上方左對齊標簽在控件左側左對齊標簽在控件左側左對齊，控件的左側錯開排列標簽在控件左側右對齊標簽在控件上方左對齊該樣式最易于本地化，因為該布局不依賴于標簽的長度，但這是在垂直方向最占空間的樣式。該樣式在垂直方向最占空間但易于本地化。適用于標注絕大部分交互控件。適用情形：要標注的控件是可交互的（不僅

30、僅是文本）。該UI需要本地化。該樣式通常有足夠的空間來容納雙倍甚至三倍長度的標簽。該UI使用固定布局技術（比如Win32）?？丶盗坎怀^10個。當控件數量更多時，掃視標簽將變得困難。垂直方向上有足夠的空間放置標簽。布局需要是自由表單，而不僅僅是按列排列。標簽在控件左側左對齊該樣式是縱向掃視時最為方便的，且當標簽長度不一時也能夠適用，但在將標簽與控件關聯(lián)起來方面較為困難。如果需要該樣式也可使用多行標簽。該樣式很好用。不過，這里的兩列看上去像是四列數據看起來更加復雜。適用情形：用戶需要縱向掃視以尋找特定的標簽。用戶不太需要以從左至右、從上至下的方式閱讀標簽和控件。水平方向上有足夠的空間放置標簽。

31、標簽在長度上有巨大差別。控件很多，比如在表單中。列數較少。在視覺上，標簽和控件像是兩個獨立的列。標簽在控件左側左對齊，控件的左側錯開排列該樣式使得在縱向掃視標簽以及橫時同時掃視標簽和控件時較為方便，而且空間利用率很高，但縱向掃視控件較為困難?？丶覀葘R以充分利用空間。該樣式布局緊湊，易于閱讀，但對控件的縱向掃視較為困難。適用情形：該UI使用可變布局技術(比如WindowsPresentationFoundation)。用戶需要縱向掃視以尋找特定標簽。用戶需要以從左至右，從上至下的方式閱讀標簽和控件。用戶不太可能需要縱向掃視控件?？丶谋镜拈L度差別很大，如果使用其他樣式可能會被截斷?？丶侵蛔x

32、的，比如只讀文本框。對于其他控件，這種對齊方式看起來有些糟糕。不過，控件可以在單擊時變?yōu)榭删庉嫚顟B(tài)。列數較多，但每列中的控件較少。標簽在控件左側右對齊該樣式是最易于橫向閱讀并將標簽與其控件聯(lián)系在一起的，但是在縱向掃視標簽時較為困難且當標簽長度差距很大時不太適用。該樣式易于閱讀以及縱向掃視，但掃視標簽而較為困難。適用情形：用戶需要以從左至右、從上至下的方式閱讀標簽和控件。用戶不太會縱向掃視以尋找特定標簽，可能是因為：o控件數量較少。o標簽被人們熟知。o控件幾乎都是自描述的，且極少出現空白內容(也許具有默認值以防止出現內容為空的控件)。水平方向上有足夠的空間放置標簽。標簽的長度差別不大。列數很多。

33、在視覺上標簽和控件像是單獨的一列。然而，在決定使用上述任一樣式之前，還應當考慮下列兩個因素：最好使用能夠在你的程序各處一致使用的樣式。在控件上方或者左側的左對齊標簽是最常見的樣式，應當優(yōu)先考慮。平衡當窗口或頁面的內容在整個界面上分布均勻時，即可稱其為“平衡”。如果界面實際的復雜度與看起來相一致的話，平衡的布局則不會倒向一邊。最常見的問題是窗口或頁面的左側包含太多內容。你可以通過下列方法來取得平衡：在左側比右側留出更大的邊距。將用于完成任務的UI元素放在右側。將貫穿用于整個任務的UI元素居中放置。加長可縮放或多行控件。適當使用居中對齊。這個平衡良好的向導頁布局通過在左側比右側留有更多的邊距來取得

34、平衡。如果上述方法無法取得平衡，考慮減少窗口或頁面的寬度以更好地適應其內容。對于可縮放界面來說，不要僅僅為了取得平衡而將內容居中。相反，應當將其固定在左上角，定義最大界面區(qū)域，并在可用空間內對內容進行平衡。網格網格是不可見的底層對齊系統(tǒng)。網格可以是對稱的，但非對稱網格也同樣適用。當用于單個窗口或頁面時，網格有助于在界面上組織內容。當重用時，網格可以在各個界面之間建立統(tǒng)一的布局。網格線的數量會影響視覺復雜程度。網格線數量較少的布局比網格線數量較多的布局顯得簡單?？雌饋韽碗s：看起來簡單：不必要的網格線增加了視覺復雜度。一個有效使用網格的布局應當滿足下列情況：具有相似內容或功能的窗口或頁面具有相似的

35、布局。在各窗口或頁面上重復出現的設計元素位于類似的位置。沒有不必要的垂直或水平對齊網格線。視覺簡潔視覺簡潔(visualsimplicity)是指，在感覺上某種布局的復雜度不比它實際需要的更高。視覺簡潔的布局應當滿足下列情況：去除了不必要的窗口層次。展示內容時使用最多不超過七個分組，且應當易于識別。使用輕量級的分組方式，比如用布局或分隔符來代替分組框。使用輕量級的控件，比如將鏈接代替命令按鈕用于輔助命令，以及將下拉列表代替列表用于多個選項。減少垂直和水平的對齊網格線數量。減少控件不同尺寸的數量，例如，在界面上只使用一兩種按鈕寬度。使用漸進展開的方式隱藏UI元素，直至需要時再顯示。使用充足的空間

36、，以使窗口或頁面不會讓人感到擁擠。適當調整窗口和控件的尺寸以消除不必要的屏幕滾動。使用一種字體，以及少數不同的尺寸和文本顏色。作為一條通用法則，如果某個布局元素可以被去掉而不影響UI的有效性，則應當將其去除。設計規(guī)范屏幕分辨率及DPI支持800 x600像素的最小Windows屏幕分辨率。對于那些必須可以工作在安全模式下或用于Ultra-mobilePC(UMPC)及WindowsMediaCenterPC的關鍵用戶界面，應當支持640 x480像素的屏幕分辨率。確保在垂直方向上為任務欄預留了30個像素的空間，以便在任務欄的情況下顯示窗口。要支持這些環(huán)境，即使當前屏幕分辨率低于你程序最小支持的

37、分辨率，也仍然應當顯示部分用戶界面。該用戶界面的功能可能受到限制。為1024x768像素的屏幕分辨率優(yōu)化可調整大小的窗口布局。自動調整窗口尺寸以適應較低的屏幕分辨率。確保在96dpi和120dpi模式下測試你的窗口。檢查布局問題、控件和窗口裁剪、以及圖標和位圖拉伸情況。對于用于移動使用的程序，應為120dpi進行優(yōu)化。目前MobilePC上普遍采用高dpi屏幕。窗口尺寸選擇適合其內容的默認窗口尺寸。不要怕使用較大的初始窗口尺寸，只要你能夠有效地利用空間即可。使用平衡的長寬比。最好是3:5到5:3之間，盡管消息對話框可以使用1:3的長寬比（比如錯誤信息和警告等）。盡可能使用可縮放窗口以避免出現滾

38、動條或數據截斷?？煽s放窗口最適合于包含動態(tài)內容和列表的情況。對于文本文檔，考慮每行最多不超過65個字符以使文本易于閱讀。（字符包括字母、標點和空格。）對于固定大小的窗口：o必須完全可見，且其尺寸應當適合其工作區(qū)對于可縮放窗口：o可以為較高的分辨率進行優(yōu)化，但在顯示時應當根據需要按照實際屏幕分辨率進行調整。o當窗口逐漸增大時應當也逐漸顯示更多的信息。確保窗口中至少有一部分或一個控件具有可縮放的內容。o在縮放窗口時，內容左上角原點的位置應保持不變。不要在窗口尺寸改變時通過移動原點來保持內容的平衡。o如果內容可以被拉得很寬的話，應當設置最大內容尺寸。如果內容太寬而顯得笨拙，則不要將內容區(qū)域縮放到超過

39、最大寬度，或者隨著窗口放大而改變內容的原點位置。相反，應當保持最大寬度以及固定的左上角位置。o如果當窗口小于特定尺寸后內容不再可用，則應當設置最小窗口尺寸。對于可縮放控件，應當根據其最小的可用尺寸設計最小可縮放元素尺寸，例如列表視圖中的最小可用列寬?？蛇x的用戶界面元素應當完全移去。o考慮更改呈現方式以保存內容可以用于更小的尺寸。在這個示例中，WindowsMediaPlayer在因窗口太小而標準形式不再適用時，改變了它的形式。控件尺寸所有可交互控件應當至少有16x16像素大。這樣可以適用于所有輸入設備，包括WindowsTabletandTouchTechnology。調整控件尺寸以避免數據被

40、截斷。不要截斷那些為了完成任務必須閱讀的數據。調整列表視圖的列寬以避免數據被截斷。調整控件尺寸以消除不必要的屏幕滾動。如果將控件稍稍調大即能消除滾動條的話，則應當這么做。應當僅有個別的垂直滾動條，沒有不必要的水平滾動條。在這個示例中，下拉列表的尺寸進行了調整以消除滾動條。減少單個界面上的控件尺寸數量。盡可能使用標準推薦控件尺寸，使用少數尺寸統(tǒng)一較大或較小的控件。盡量為所有的列表框和樹形視圖使用相同的寬度，命令按鈕和下拉列表不要使用超過三種寬度。不過，文本框和組合框的寬度應當暗示其輸入內容的最大長度或預期長度。在這個示例中，統(tǒng)一使用了一種列表框和命令按鈕尺寸。應當額外空出30%的長度（對于較短的

41、文本來說，最多200%）用于需要被本地化的任何文本（但不包括數字）。此條準則基于采用英文文本進行布局設計的假設。還需注意的是，此條準則所指的是被本地化的文本，而不是數字。將靜態(tài)文本控件、復選框及單選按鈕擴展至貼合該布局的最大寬度。這將避免截斷長度未知的以及本地化的文本。錯誤：在這個示例中，對控件文本進行了不必要的截斷?？丶g距如果控件之間并不直接相連的話，應當留出至少3DLU（5個像素）的間距。否則，用戶可能會點擊在控件之間的非交互區(qū)域。由于在非交互區(qū)域內點擊不會產生任何結果或視覺反饋，用戶往往無法確定哪里出了問題。位置將UI元素在界面中按從左自右、從上自下的順序（在西方文化中）自然地排列。U

42、I元素的位置將反映它們之間的關系，以及完成任務所需的步驟。將用于觸發(fā)任務的UI元素放在左上角或上方中間。對于用戶應當先看的UI元素，應當給予最強的視覺強調。將用于完成任務的UI元素放在右下角。將相關的UI元素放在一起，將無關的元素分開。將必須步驟放在主流程中。將可選步驟放在主流程之外，可以使用合適的背景或漸進展開的方式進行弱化。經常使用的元素比不常使用的元素出現在掃視路徑上的位置更靠前。焦點八、八、將用戶需要首先看到的一個UI元素設為焦點。焦點應當位于那些用戶需要快速找到并理解的重要內容處。將焦點放在左上角或上部居中。給予焦點最強的視覺強調，比如顯著的文本、默認選中以及初始輸入焦點等等。對齊通

43、常來說，使用左對齊。數值數據應使用右對齊，尤其是成列的數值數據。提交按鈕應使用右對齊，以及與窗口右邊框靠齊的控件。當左對齊和右對齊都不合適或顯得不平衡時，可使用居中對齊。當控件與文本垂直對齊時，應當按照文本基線對齊以保持水平閱讀流暢。關于標簽對齊，參考設計理念中的標簽對齊部分。無障礙訪問特性不要將布局用作傳達關于某UI上的重要信息的唯一手段。具有視覺障礙的用戶可能無法理解這種方式的呈現。例如，確保控件標簽表達了它與其他項的關系。不要通過在控件標簽中嵌入附屬控件來創(chuàng)建句子或短語。這種關聯(lián)純粹基于布局，而且不利于鍵盤導航和無障礙訪問輔助技術。而且，這種做法無法進行本地化，因為不同語言中句子的結構會

44、發(fā)生變化。錯誤：在這個示例中，文本框錯誤地放置在復選框的標簽中。使分組能夠被無障礙訪問。無障礙訪問輔助程序能夠自動處理那些由窗口面板、分組框、分隔符、文本標簽和聚合器定義的分組。但僅由布局和背景來定義的分組則不行，必須通過編程方式來對無障礙訪問進行定義。更多設計規(guī)范，參見ahref=././interaction/accessibility.aspx無障礙訪問（輔助特性）/a。推薦尺寸與間距控件尺寸下表列出了對于常見UI元素（在96DPI下9pt的SegoeUI字體）的推薦尺寸（寬x高，如果只有一個值則為高）。對于要進行本地化的文本（不包括數字），其寬度應當在基于英語中最長項的寬度之上再加30%以用于本地化（對于較短的文本來說，最多200%）?？丶υ捒騿挝幌鄬ο袼貜瓦x框1017組合框最長項的寬度+30%x14最長項的寬度+30%x23命令按鈕50 x1475x23命令鏈接25（單行）或35（兩行）41（單行）或58（兩行）下拉列表最長有效數據寬度+30%x14最長項的寬度+30%