Microsoft 交互設(shè)計(jì)規(guī)范

用戶在瀏覽時(shí)通常會(huì)跳過(guò)大塊文本及導(dǎo)航部分。?一切都等價(jià)時(shí)，用戶首先從窗口的左上角看起，掃過(guò)整個(gè)頁(yè)面，到右下角結(jié)束。他們通常會(huì)忽略左下角。Ill1Ill1廠》Q(chēng)r(AHUJZfcMI-口MTjBJhd也卜-AftkT/J-|23一切都等價(jià)時(shí)，用戶會(huì)以1、2、4、3的順序閱讀這些數(shù)字。?但在交互式UI中，并非所有的一切都是等價(jià)的，因此不同的UI元素所受到的關(guān)注程度也是不同的用戶通常會(huì)首先看交互式控件——尤其是出現(xiàn)在窗口左上角和中間的控件——以及顯著的文本。Us&th已computerwithoutadisplay|TurnonNarrator巫TurnonAudioDe^eripticvnTurnoffallunnecess-aryanimatians.(whenpossible]HoTAflangWinHobvmnuti和dialogboxesstayopen?7,0&econd&+SaveCancelApply1用戶關(guān)注于主要的交互式控件及顯著的主標(biāo)題說(shuō)明，其他東西只有在他們需要的時(shí)候才會(huì)去看。用戶傾向于閱讀交互式控件標(biāo)簽，尤其是那些看起來(lái)和完成手頭任務(wù)相關(guān)的。相反，用戶僅在他們認(rèn)為需要的時(shí)候才有可能去閱讀靜態(tài)文本?？瓷先ゲ煌膬?nèi)容容易吸引注意力。粗體文本和大號(hào)文本能夠從普通文本中突顯出來(lái)。彩色的或者是位于彩色背景上的用戶界面元素較為突出。有圖標(biāo)比沒(méi)有圖標(biāo)更加突出。除非確實(shí)需要，否則用戶不會(huì)進(jìn)行滾動(dòng)。如果沒(méi)有理由來(lái)滾動(dòng)倒金字塔結(jié)構(gòu)的內(nèi)容，用戶則不會(huì)。一旦用戶決定要做什么，他們會(huì)立即停止掃視文本轉(zhuǎn)而做事。由于用戶會(huì)在他們認(rèn)為結(jié)束的時(shí)候停止掃視，因此他們可能會(huì)忽略所有在完成點(diǎn)之后出現(xiàn)的東西?；亍?啞■?Makethekeyboardeas-i皂「tous皂S-earchfl|Makethekeyboardeasie『touseWhenyouselectthe&esettingstheywiIIIautomaticaIlystarteactitimeyoulogon.ControlthemousewiththekeybcardTurnonMouseKeysUsethenumerickeypadtomovethemousearcundthescreen.SetupMeuseKeysMakeit亡日,i亡「totype団TurnonStickyKeysPresskeyboardshortedts(5uchasCTRL+AL7+DEL)onekeyatatime.SetupStickyKeyt:—--用戶會(huì)在他們認(rèn)為結(jié)束的時(shí)候停止掃視。當(dāng)然，常規(guī)模式也存在例外。眼動(dòng)儀實(shí)驗(yàn)指出，真實(shí)用戶的行為很沒(méi)有規(guī)律。此模式的目的在于幫助你做出好的決定，而不是精確地描述用戶的行為。但既然你已經(jīng)閱讀了該列表，希望你也能辯別出許多你自己的閱讀模式。為掃視進(jìn)行設(shè)計(jì)用戶并不閱讀，他們只是掃視——因此你應(yīng)當(dāng)為視掃來(lái)設(shè)計(jì)用戶界面。不要假設(shè)用戶會(huì)像書(shū)寫(xiě)那樣從左至右、從上到下地閱讀文本，事實(shí)上他們會(huì)看那些吸引他們注意的UI元素。要為掃視進(jìn)行設(shè)計(jì)：?假設(shè)用戶先是會(huì)快速地掃一眼整個(gè)窗口，然后大致會(huì)按下面的順序來(lái)閱讀UI文本：1.中間的交互控件2.提交按鈕3.其他地方的交互控件4.主標(biāo)題說(shuō)明5.補(bǔ)充解釋6.帶有警告圖標(biāo)的文本7.窗口標(biāo)題8.正文區(qū)域的其他靜態(tài)文本9.腳注?將用于觸發(fā)任務(wù)的UI元素放在左上角或上方中間。?將用于完成任務(wù)的UI元素放在右下角。?盡可能將重要的文本放在交互性控件上，而非使用靜態(tài)文本。?避免將重要信息放在左下角或是需要滾動(dòng)很多的控件或頁(yè)面底端。不要展示大段文本。去除不必要的文本。使用倒金字塔的呈現(xiàn)方式。如果想吸引用戶的注意，確保其理由充分。盡可能使用這個(gè)模式而不要進(jìn)行改變，但有時(shí)你可能需要強(qiáng)調(diào)或弱化某些UI元素。要強(qiáng)調(diào)主要的UI元素：將主UI元素放在掃視路徑上。將任何觸發(fā)任務(wù)的UI放在左上角或上方中間。將提交按鈕放在右下角。將其他主要的UI放在中間。使用控件來(lái)引起注意，比如命令按鈕、命令鏈接和圖標(biāo)。使用顯著的文本，包括大字體和粗體。將用戶必須閱讀的文本放在交互式控件上，或者附加圖標(biāo)，或者放在橫幅上。使用位于淺色背景上的深色文本。在元素周?chē)粲凶銐虻目瞻?。不需要任何操作就?yīng)當(dāng)可以看到你要強(qiáng)調(diào)的元素，比如指向或懸停。WirdowsActivatiori該示例顯示了強(qiáng)調(diào)主要UI元素的多種方式。要弱化次要的UI元素：?將次要的UI元素放在掃視路徑之外。?將任何用戶并不經(jīng)常需要看到的內(nèi)容放在窗口左下角或底部。?使用不會(huì)吸引注意力的控件，比如用任務(wù)鏈接代替命令按鈕。?使用正?；蚧疑奈谋尽?使用位于深色背景上的淺色文本。深灰或藍(lán)色背景上的白色文本也可以?在元素周?chē)褂米钚￠g距。?考慮使用漸進(jìn)展開(kāi)方式來(lái)隱藏次要的UI元素。Custcmi2AccessLocall^nd[ntErnetViewcomputersanddevicesConnecttoanetworkSetupaicominectionorriietworkManagenetworkcomin皂ctio門(mén)牙Diagnoseandlrepairwcorp.microsoft■匸口rm(Dcunainnetwork)」onathan

fThiscomput亡r)ConnsctionLocaIAr亡日Conn亡itioriVie^stateSeeInternetOptionsWindowsFiirewall忍SharingandDiscoveryNetworkdiscoveryFilesharingPublicfoldersharingPrintersharingMediiasharingoOffOOffQOff該示例顯示了多種弱化次要UI元素的方式。有效利用屏幕空間要有效利用屏幕空間，需要對(duì)多種因素進(jìn)行平衡：占用太多空間使窗口顯得臃腫且浪費(fèi)，以及基于費(fèi)茨法則來(lái)說(shuō)甚至?xí)y以使用。錯(cuò)誤：

WindowsDefender粘良應(yīng),^can卜劣HistoryQloo\s(?)卜fWlHClOVProtectionagainstmslicifiuEandunwantedsoftwareDefenderProtectionagainstmslicifiuEandunwantedsoftware在這個(gè)示例中，窗口相對(duì)于其內(nèi)容來(lái)說(shuō)太大了。另一方面，使用太少空間會(huì)使窗口顯得狹小、不適、有壓迫感，而且難以使用——如果需要滾動(dòng)或其他操作才能使用的話。錯(cuò)誤：

在這個(gè)示例中，窗口相對(duì)于其內(nèi)容來(lái)說(shuō)太小了。雖然關(guān)鍵UI必須適合最小支持的屏幕分辨率，但不要認(rèn)為有效利用屏幕空間就意味著窗口應(yīng)該越小越好——事實(shí)上不是這樣。高效的布局也顧及空白，并不是說(shuō)把所有東西都塞到盡可能小的空間中去?，F(xiàn)代顯示器擁有足夠的屏幕空間，應(yīng)當(dāng)盡可能有效地加以利用。因此，寧可占用過(guò)多屏幕空間，也不要使用太少。這么做可以使你的窗口感到更加輕便好用。下列情況可以表明某布局確實(shí)有效地利用了屏幕空間：?不必調(diào)整窗口、面板及控件的尺寸即可使用。如果用戶首先做的事就是調(diào)整窗口、面板及控件的尺寸的話，該尺寸則是錯(cuò)誤的。?數(shù)據(jù)沒(méi)有被截?cái)?。列表視圖和樹(shù)形視圖中的大部分?jǐn)?shù)據(jù)應(yīng)當(dāng)沒(méi)有省略號(hào)，且其他控件中的數(shù)據(jù)不會(huì)被截?cái)?，除非?shù)據(jù)特別的長(zhǎng)。完成任務(wù)所必須閱讀的數(shù)據(jù)則不應(yīng)當(dāng)被截?cái)唷?窗口和控件的尺寸恰當(dāng)，沒(méi)有不必要的滾動(dòng)。僅有很少的水平滾動(dòng)條，沒(méi)有不必要的垂直滾動(dòng)條。?控件基本使用其標(biāo)準(zhǔn)尺寸。盡可能減少控件不同尺寸的數(shù)量，比如，在某個(gè)界面上只使用一兩種按鈕寬度。?該用戶界面平衡良好，沒(méi)有大量未使用的屏幕空間。選擇恰好能夠很好地適合其用途的窗口尺寸。（如果窗口是可縮放的，該條則應(yīng)用于其默認(rèn)尺寸。）被截?cái)嗟臄?shù)據(jù)或滾動(dòng)條與大量可用屏幕空間的情況同時(shí)存在則是布局不當(dāng)?shù)拿黠@標(biāo)志。控件尺寸充分利用屏幕空間的第一步往往是決定各種UI元素的合適尺寸。參見(jiàn)控件尺寸表及各控件設(shè)計(jì)規(guī)范中的推薦尺寸部分。費(fèi)茨法則指出，目標(biāo)越小，鼠標(biāo)指向其所需的時(shí)間就越長(zhǎng)。因此，對(duì)于那些使用WindowsTablet及觸摸技術(shù)的計(jì)算機(jī)來(lái)說(shuō)，這里所謂的“鼠標(biāo)”事實(shí)上可能是手寫(xiě)筆或是用戶的手指，因此你在為小控件確定尺寸的時(shí)候需要考慮其他輸入設(shè)備°16xl6像素對(duì)于任何輸入設(shè)備來(lái)說(shuō)都是合適的最小控件尺寸。相反，15x9像素的標(biāo)準(zhǔn)微調(diào)控件按鈕對(duì)于手寫(xiě)筆來(lái)說(shuō)則太小了一些。間距留出充足（但不過(guò)分）的間距會(huì)使布局看起來(lái)更加舒服并易于理解。有效的空間并不只是未被使用的空間——它扮演了非常重要的角色，使用戶更容易進(jìn)行掃視、且給你的設(shè)計(jì)增添了視覺(jué)吸引力。關(guān)于設(shè)計(jì)規(guī)范，參見(jiàn)間距表再次說(shuō)明，對(duì)于使用WindowsTablet和觸摸技術(shù)的計(jì)算機(jī)來(lái)說(shuō)，“鼠標(biāo)”事實(shí)上可能是手寫(xiě)筆或是用戶的手指。當(dāng)使用手寫(xiě)筆或手指作為定點(diǎn)設(shè)備時(shí)，定位會(huì)較為困難，以導(dǎo)致用戶會(huì)點(diǎn)觸到目標(biāo)位置之外。當(dāng)交互控件彼此靠得很近但并沒(méi)有直接接觸的話，用戶可能會(huì)點(diǎn)擊在控件之間的非交互區(qū)域。由于在非交互區(qū)域內(nèi)點(diǎn)擊不會(huì)產(chǎn)生任何結(jié)果或視覺(jué)反饋，用戶往往無(wú)法確定哪里出了問(wèn)題。如果小控件靠得過(guò)近，用戶則需要非常精確地點(diǎn)觸以避免誤按其他對(duì)象。要解決這類(lèi)問(wèn)題，交互控件的目標(biāo)區(qū)域要么彼此相接，要么之間留有至少3DLU（5像素）。具有良好間距的布局是指：整體上來(lái)說(shuō)，用戶界面看起來(lái)舒適，沒(méi)有束縛感。間距均勻且平衡。相關(guān)元素彼此靠近，無(wú)關(guān)元素則分開(kāi)。對(duì)于如何可以稱(chēng)為靠近是沒(méi)有固定的值的，比如工具欄按鈕?？煽s放窗口可縮放窗口也是有效使用屏幕空間的一個(gè)因素。雖然這對(duì)于那些由固定內(nèi)容組成的窗口來(lái)說(shuō)沒(méi)有什么幫助，但包含可縮放內(nèi)容的窗口應(yīng)當(dāng)也是可縮放的。顯然，用戶縮放窗口的原因是可以利用額外的屏幕空間，因此窗口內(nèi)容也應(yīng)當(dāng)相應(yīng)地?cái)U(kuò)展，為需要的UI元素提供更多空間。可縮放窗口最適用于那些包含動(dòng)態(tài)內(nèi)容、文檔、圖像、列表及樹(shù)的窗口。也?Personalization卜DesktopBaclcground兮SearchChoosesdesktopbackgroundClickspictur亡tormalceityourdesktopbackground.ToU5亡日picturethat'snotlisted,,browsetothepictureanddoubleclickit.Picturelocation:WindowsWallpapersBr&wte...OKPicturelocation:WindowsWallpapersBr&wte...OKCancel在這個(gè)示例中，縮放窗口的同時(shí)會(huì)縮放列表視圖控件。這也意味著窗口可能被拉得太寬。例如，許多控制面板頁(yè)在寬度超過(guò)600相對(duì)像素時(shí)會(huì)顯得笨拙。在這種情況下，最好不要將內(nèi)容區(qū)域縮放到超過(guò)最大寬度，或者是隨著窗口的擴(kuò)大而改變內(nèi)容的原點(diǎn)位置。相反，應(yīng)當(dāng)保持寬度的最大值并固定左上角的原點(diǎn)位置。當(dāng)行寬不斷增加時(shí)，文本會(huì)變得難以閱讀。對(duì)于文本文檔來(lái)說(shuō)，考慮每行不超過(guò)80個(gè)字符以易于閱讀。（字符包括字母、標(biāo)點(diǎn)和空格。）錯(cuò)誤：

在這個(gè)示例中，文本太寬難以閱讀。最后，可縮放窗口在縮小時(shí)也需要有效使用屏幕空間，比如通過(guò)縮小可縮放的內(nèi)容或是移除那些即使不存在也可以有效使用的UI元素。有時(shí)，窗口或其UI元素可能會(huì)太小而無(wú)法使用，則應(yīng)指定最小尺寸或者有些元素應(yīng)當(dāng)完全移去。ReferencesMailingsHomeInsertDocumentl-MicrosoftWordThemesMarginsArrangeWernes匕OrientationT_JWatermarkIJ沱廠ReferencesMailingsHomeInsertDocumentl-MicrosoftWordThemesMarginsArrangeWernes匕OrientationT_JWatermarkIJ沱廠5@TP眄eColorII匚olumn&TJ|PaqeBordersPageS^tupPageckgroundPageLayoutIndent^pacinig辜▲T+=0pt▲TO'▲T10pt▲TParagraphRevie-wVienwPagei：1of1Wordsi：0dm，卿厚?旨芻」oo%q?在這個(gè)示例中，該面板具有最小尺寸。對(duì)于有些程序來(lái)說(shuō)，更好的方法是使用完全不同的呈現(xiàn)方式以使其內(nèi)容在較小尺寸下仍保持可用。1|WindowsMediaPlayer回在這個(gè)示例中‘WindowsMediaPlayer?在其窗口太小，無(wú)法使用其標(biāo)準(zhǔn)模式時(shí)，進(jìn)行了改變。焦點(diǎn)八、、八、、當(dāng)某種布局中存在一個(gè)明顯會(huì)被最先看到的地方時(shí)即稱(chēng)為具有“焦點(diǎn)（focus）”。焦點(diǎn)非常重要，它告訴用戶從何處開(kāi)始掃視你的窗口或頁(yè)面。如果沒(méi)有清晰的焦點(diǎn)，用戶的目光則會(huì)漫無(wú)目的地游蕩。焦點(diǎn)應(yīng)當(dāng)位于那些用戶需要快速找到并理解的重要內(nèi)容處，且應(yīng)當(dāng)在視覺(jué)上予以強(qiáng)調(diào)。左上角是大多數(shù)窗口的自然焦點(diǎn)。應(yīng)當(dāng)只存在一個(gè)焦點(diǎn)。在真實(shí)生活中，人眼一次只能聚焦在一件物體上，用戶無(wú)法同時(shí)聚焦至多個(gè)位置。要使某個(gè)UI元素成為焦點(diǎn)，可通過(guò)下列方式進(jìn)行視覺(jué)加強(qiáng)：置于界面上部的左側(cè)或居中位置。?使用重要且易于理解的交互控件。?使用顯著的文本，如主標(biāo)題說(shuō)明。?默認(rèn)選中該控件并賦予輸入焦點(diǎn)。?將控件置于不同的背景顏色上?？紤]一下Windows搜索°Windows搜索的焦點(diǎn)應(yīng)當(dāng)在搜索框上，因?yàn)檫@是任務(wù)的起點(diǎn)。然而，為了與標(biāo)準(zhǔn)搜索框的位置保持一致，它被放在了右上角。雖然搜索框具有輸入焦點(diǎn)，但是鑒于其在掃視路徑上的位置，單單這樣線索是不夠的。為了解決這個(gè)問(wèn)題，窗口上方中部用一個(gè)顯著的說(shuō)明文字將用戶引導(dǎo)至正確的位置。可以接受：f回—f|卩卜SearchResults亍令P||Showonly:[AlljE-mailDocumentPictureMusiuOtherAdvancedsearch(v'Tob&gir^typeirthesearchboxTosearchmoreofyoureofYiputer^useAdvancedSearch.在這個(gè)示例中，窗口上方中部的顯著說(shuō)明文字將用戶引導(dǎo)至搜索框。如果沒(méi)有說(shuō)明文字，該窗口將沒(méi)有明顯的焦點(diǎn)。錯(cuò)誤：這個(gè)示例沒(méi)有明顯的焦點(diǎn)。用戶不知道應(yīng)當(dāng)從何處開(kāi)始。如果你對(duì)某個(gè)UI元素進(jìn)行了視覺(jué)加強(qiáng)，應(yīng)當(dāng)確保這種注意力是合適的。在之前那則錯(cuò)誤的Windows搜索示示例中，高亮的All按鈕位于左上角且是最為醒目的，然而它卻并不是所期望的焦點(diǎn)。用戶可能會(huì)停在這個(gè)按鈕處試圖弄清應(yīng)該怎么做。錯(cuò)誤：ShowonlyE-mail失去了顯著的說(shuō)明作為焦點(diǎn)，高亮的All按鈕意外地成了焦點(diǎn)。流程當(dāng)用戶能夠順著界面上清晰的路徑而流暢自然地按合適的順序找到他們想要的UI元素時(shí)，該布局即稱(chēng)為具有好的“流程（flow）”。一旦用戶認(rèn)出了焦點(diǎn)，他們就需要確定如何完成任務(wù)。UI元素的位置傳達(dá)了它們之間的關(guān)系，且應(yīng)當(dāng)反映出完成任務(wù)的步驟。通常來(lái)說(shuō)，這意味著任務(wù)的各個(gè)步驟應(yīng)當(dāng)自然地從左至右、從上至下（在西方文化中）排列。具有好的流程的布局應(yīng)滿足下列條件：UI元素的位置反映出用戶完成該任務(wù)需要的步驟。觸發(fā)任務(wù)的UI元素位于左上角或上方中部。

SystemPropertiesComputernameHardware/WJv曰need|Systemprotection「Remote■EndowsSystemPropertiesComputernameHardware/WJv曰need|Systemprotection「Remote■Endowsusee[hefollowinginfamnationtoiderhifyyourcomputer□nthenetwork\III1IComputerdescription:IFullcampirtBrname:I'Dornain:II”IForexample:"KitchenComputbr'1or，BMary's|Computer"_iJonathan.Fabrifcarn.co-rniiiiiiFabrikam.connITouseawiiandtcjoinsarworkgroup,clicklNetworkID-NetworkID...;Tanenamethiscamputer[)rGhangeitsdomainorIworkgraup,clickChange.IChange...QKCancelApply不必要的網(wǎng)格線增加了視覺(jué)復(fù)雜度。一個(gè)有效使用網(wǎng)格的布局應(yīng)當(dāng)滿足下列情況：?具有相似內(nèi)容或功能的窗口或頁(yè)面具有相似的布局。?在各窗口或頁(yè)面上重復(fù)出現(xiàn)的設(shè)計(jì)元素位于類(lèi)似的位置?沒(méi)有不必要的垂直或水平對(duì)齊網(wǎng)格線。視覺(jué)簡(jiǎn)潔視覺(jué)簡(jiǎn)潔(visualsimplicity)是指，在感覺(jué)上某種布局的復(fù)雜度不比它實(shí)際需要的更高。視覺(jué)簡(jiǎn)潔的布局應(yīng)當(dāng)滿足下列情況：去除了不必要的窗口層次。展示內(nèi)容時(shí)使用最多不超過(guò)七個(gè)分組，且應(yīng)當(dāng)易于識(shí)別。使用輕量級(jí)的分組方式，比如用布局或分隔符來(lái)代替分組框。使用輕量級(jí)的控件，比如將鏈接代替命令按鈕用于輔助命令，以及將下拉列表代替列表用于多個(gè)選項(xiàng)。o在縮放窗口時(shí)，內(nèi)容左上角原點(diǎn)的位置應(yīng)保持不變。不要在窗口尺寸改變時(shí)通過(guò)移動(dòng)原點(diǎn)來(lái)保持內(nèi)容的平衡。o如果內(nèi)容可以被拉得很寬的話，應(yīng)當(dāng)設(shè)置最大內(nèi)容尺寸。如果內(nèi)容太寬而顯得笨拙，則不要將內(nèi)容區(qū)域縮放到超過(guò)最大寬度，或者隨著窗口放大而改變內(nèi)容的原點(diǎn)位置。相反，應(yīng)當(dāng)保持最大寬度以及固定的左上角位置。o如果當(dāng)窗口小于特定尺寸后內(nèi)容不再可用，則應(yīng)當(dāng)設(shè)置最小窗口尺寸。對(duì)于可縮放控件，應(yīng)當(dāng)根據(jù)其最小的可用尺寸設(shè)計(jì)最小可縮放元素尺寸，例如列表視圖中的最小可用列寬?？蛇x的用戶界面元素應(yīng)當(dāng)完全移去。o考慮更改呈現(xiàn)方式以保存內(nèi)容可以用于更小的尺寸。在這個(gè)示例中，WindowsMediaPlayer?在因窗口太小而標(biāo)準(zhǔn)形式不再適用時(shí)，改變了它的形式?？丶叽缢锌山换タ丶?yīng)當(dāng)至少有16x16像素大。這樣可以適用于所有輸入設(shè)備，包括WindowsTabletandTouchTechnology。調(diào)整控件尺寸以避免數(shù)據(jù)被截?cái)?。不要截?cái)嗄切榱送瓿扇蝿?wù)必須閱讀的數(shù)據(jù)。調(diào)整列表視圖的列寬以避免數(shù)據(jù)被截?cái)唷Ｕ{(diào)整控件尺寸以消除不必要的屏幕滾動(dòng)。如果將控件稍稍調(diào)大即能消除滾動(dòng)條的話，則應(yīng)當(dāng)這么做。應(yīng)當(dāng)僅有個(gè)別的垂直滾動(dòng)條，沒(méi)有不必要的水平滾動(dòng)條。

*M-tusePropertiesButton呂PointerPointeroption*M-tusePropertiesButton呂PointerPointeroption呂|VtfheelHandwaneSchemeWindowsAena(syisternscheme)3D-Branze(systemsdnerre)3D-Whiteisysterrischeme}Conductor(systemscheme)CiDinosaur(systemscheme]Hands1(s/sterYischeme)Hands2(systemscheme)Magnified(syEtemschemejOldFashianed(systemscheme^IVariation呂(syHtemscheme)WindowsAero(extralar^e)(systemschemej,WindowsAen^arae):'systernscherneWindowsAnimated(systemscheme}IWindowsBlack(adralange)(syEtem証heme)WindowsBLckflange)^systemscheme)WindowsBlack(systemscheme)1WindowsInverted(extralarge)(systemscheme^WindowsInverted{large}(systemscheme]WindowsInverted(systemscheme)WindowsStandardparae)(systemscheme]在這個(gè)示例中，下拉列表的尺寸進(jìn)行了調(diào)整以消除滾動(dòng)條。Currenttoolbarbuttons:?減少單個(gè)界面上的控件尺寸數(shù)量。盡可能使用標(biāo)準(zhǔn)推薦控件尺寸,使用少數(shù)尺寸統(tǒng)一較大或較小的控件。盡量為所有的列表框和樹(shù)形視圖使用相同的寬度，命令按鈕和下拉列表不要使用超過(guò)三種寬度。不過(guò)，文本框和組合框的寬度應(yīng)當(dāng)暗示其輸入內(nèi)容的最大長(zhǎng)度或預(yù)期長(zhǎng)度。Currenttoolbarbuttons:在這個(gè)示例中,統(tǒng)一使用了一種列表框和命令按鈕尺寸。?應(yīng)當(dāng)額外空出30%的長(zhǎng)度（對(duì)于較短的文本來(lái)說(shuō),最多200%）用于需要被本地化的任何文本（但不包括數(shù)字）。此條準(zhǔn)則基于采用英文文本進(jìn)行布局設(shè)計(jì)的假設(shè)。還需注意的是,此條準(zhǔn)則所指的是被本地化的文本,而不是數(shù)字。

?將靜態(tài)文本控件、復(fù)選框及單選按鈕擴(kuò)展至貼合該布局的最大寬度。這將避免截?cái)嚅L(zhǎng)度未知的以及本地化的文本。錯(cuò)誤：在這個(gè)示例中，對(duì)控件文本進(jìn)行了不必要的截?cái)??？丶g距?如果控件之間并不直接相連的話，應(yīng)當(dāng)留出至少3DLU（5個(gè)像素）的間距。否則，用戶可能會(huì)點(diǎn)擊在控件之間的非交互區(qū)域。由于在非交互區(qū)域內(nèi)點(diǎn)擊不會(huì)產(chǎn)生任何結(jié)果或視覺(jué)反饋，用戶往往無(wú)法確定哪里出了問(wèn)題。位置?將UI元素在界面中按從左自右、從上自下的順序（在西方文化中）自然地排列。UI元素的位置將反映它們之間的關(guān)系，以及完成任務(wù)所需的步驟。?將用于觸發(fā)任務(wù)的UI元素放在左上角或上方中間。對(duì)于用戶應(yīng)當(dāng)先看的UI元素，應(yīng)當(dāng)給予最強(qiáng)的視覺(jué)強(qiáng)調(diào)。?????將用于完成任務(wù)的UI元素放在右下角。將相關(guān)的UI元素放在一起，將無(wú)關(guān)的元素分開(kāi)。將必須步驟放在主流程中。將可選步驟放在主流程之外，可以使用合適的背景或漸進(jìn)展開(kāi)的方式進(jìn)行弱化。經(jīng)常使用的元素比不常使用的元素出現(xiàn)在掃視路徑上的位置更靠前。焦點(diǎn)八、、八、、將用戶需要首先看到的一個(gè)UI元素設(shè)為焦點(diǎn)。焦點(diǎn)應(yīng)當(dāng)位于那些用戶需要快速找到并理解的重要內(nèi)容處。將焦點(diǎn)放在左上角或上部居中。給予焦點(diǎn)最強(qiáng)的視覺(jué)強(qiáng)調(diào)，比如顯著的文本、默認(rèn)選中以及初始輸入焦點(diǎn)等等。對(duì)齊?通常來(lái)說(shuō)，使用左對(duì)齊。?數(shù)值數(shù)據(jù)應(yīng)使用右對(duì)齊，尤其是成列的數(shù)值數(shù)據(jù)。?提交按鈕應(yīng)使用右對(duì)齊，以及與窗口右邊框靠齊的控件。?當(dāng)左對(duì)齊和右對(duì)齊都不合適或顯得不平衡時(shí)，可使用居中對(duì)齊。?當(dāng)控件與文本垂直對(duì)齊時(shí)，應(yīng)當(dāng)按照文本基線對(duì)齊以保持水平閱讀流暢?關(guān)于標(biāo)簽對(duì)齊，參考設(shè)計(jì)理念中的標(biāo)簽對(duì)齊部分。無(wú)障礙訪問(wèn)特性不要將布局用作傳達(dá)關(guān)于某UI上的重要信息的唯一手段。具有視覺(jué)障礙的用戶可能無(wú)法理解這種方式的呈現(xiàn)。例如，確?？丶?biāo)簽表達(dá)了它與其他項(xiàng)的關(guān)系。不要通過(guò)在控件標(biāo)簽中嵌入附屬控件來(lái)創(chuàng)建句子或短語(yǔ)。這種關(guān)聯(lián)純粹基于布局，而且不利于鍵盤(pán)導(dǎo)航和無(wú)障礙訪問(wèn)輔助技術(shù)。而且，這種做法無(wú)法進(jìn)行本地化，因?yàn)椴煌Z(yǔ)言中句子的結(jié)構(gòu)會(huì)發(fā)生變化。錯(cuò)誤：虧Createacc-mputeraccountinthedomain在這個(gè)示例中，文本框錯(cuò)誤地放置在復(fù)選框的標(biāo)簽中。使分組能夠被無(wú)障礙訪問(wèn)。無(wú)障礙訪問(wèn)輔助程序能夠自動(dòng)處理那些由窗口面板、分組框、分隔符、文本標(biāo)簽和聚合器定義的分組。但僅由布局和背景來(lái)定義的分組則不行，必須通過(guò)編程方式來(lái)對(duì)無(wú)障礙訪問(wèn)進(jìn)行定義。更多設(shè)計(jì)規(guī)范，參見(jiàn)無(wú)障礙訪問(wèn)（輔助特性）〈/a〉。推薦尺寸與間距控件尺寸

下表列出了對(duì)于常見(jiàn)UI元素（在96DPI下9pt的SegoeUI字體）的推薦尺寸（寬x高，如果只有一個(gè)值則為高）。對(duì)于要進(jìn)行本地化的文本（不包括數(shù)字），其寬度應(yīng)當(dāng)在基于英語(yǔ)中最長(zhǎng)項(xiàng)的寬度之上再加30%以用于本地化（對(duì)于較短的文本來(lái)說(shuō)，最多200%）。間距下表列出了常見(jiàn)UI元素（在96DPI下9pt的SegoeUI字體）之間的推薦間距。35477114747K69Ea&elz711……CheclcboxfvCheckbox元素對(duì)話框單位相對(duì)像素對(duì)話框邊距各邊為7各邊為11相關(guān)控件之間無(wú)關(guān)控件之間Label:ListIte睥Checkbo?!分組框內(nèi)的第一個(gè)控件分組框內(nèi)的控件之間水平或垂直排列的按鈕之間分組框內(nèi)的最后一個(gè)控件距分組框底部7距分組框底部11距分組框的左邊控件旁邊的文本標(biāo)簽距離控件頂端3距離控件頂端5文本段落之間距分組框頂端11;與分組框標(biāo)題垂直對(duì)齊距分組框頂端16；與分組框標(biāo)題垂直對(duì)齊文本標(biāo)簽與相應(yīng)控件（例如,文本框及列表框）之間4Label+|I-Checkboxr"iIgjCheckb加j1■■莘■翊p畑聊+h-[proupBodc；I.Optionbutte:::1gr