【正文】 當(dāng)定義文本框的尺寸時(shí)： l 應(yīng)當(dāng)為最長(zhǎng)的有效數(shù)據(jù)選擇合適的寬度。l 當(dāng)使用提示時(shí)：l 以灰色斜體方式顯示提示文本，而以黑色正體方式顯示實(shí)際輸入的文本。 提示提示是位于文本框內(nèi)部作為其默認(rèn)值顯示的文本標(biāo)簽或簡(jiǎn)短說(shuō)明。這會(huì)使用戶無(wú)法將選擇文本并復(fù)制到剪貼板。 最佳： 或： 密碼及憑據(jù)（PIN）輸入 始終使用密碼通用控件，而不要自己創(chuàng)造。文本框是垂直排列的。 l 當(dāng)文本框被用于文件或路徑時(shí)，應(yīng)當(dāng)始終提供“瀏覽”按鈕。 較好： 在這個(gè)示例中，格式化數(shù)據(jù)輸入模式被用于要求以特定的格式進(jìn)行輸入。 可編輯文本框 l 如果可能，應(yīng)當(dāng)限制輸入文本的長(zhǎng)度。 l 不要用戶進(jìn)行不必要的滾動(dòng)。 無(wú)約束的多行文本框 密碼和憑據(jù)輸入 用于安全輸入密碼和憑據(jù)的無(wú)約束單行文本框。 一條普遍的規(guī)則是，你應(yīng)當(dāng)使用你能夠使用的最嚴(yán)格的約束。 l 用戶是否更需要在更改設(shè)置的同時(shí)立即得到反饋？如果是，應(yīng)使用滑塊，也可以與文本框一起使用。 提示 如果進(jìn)度條顯示在模式對(duì)話框內(nèi)，則應(yīng)當(dāng)對(duì)此標(biāo)題為任務(wù)欄顯示而優(yōu)化，將具有辨別性的簡(jiǎn)要信息放在前面。 進(jìn)度條細(xì)節(jié)信息 l 在靜態(tài)文本中提供細(xì)節(jié)信息，數(shù)據(jù)前使用以冒號(hào)結(jié)尾的標(biāo)簽。 如果窗口比進(jìn)度條的最大推薦寬度值大得多的話，則將進(jìn)度條居中。 關(guān)注剩余時(shí)間，因?yàn)檫@是用戶最關(guān)心的信息。 正確： 在這個(gè)示例中，中止網(wǎng)絡(luò)連接不會(huì)留下任何副作用，因此使用“取消”。非確定性進(jìn)度條本身就是有效的常規(guī)動(dòng)畫，你可以使用其中一種，但不要兩種同時(shí)使用。 非確定性進(jìn)度條僅為那些整體進(jìn)度無(wú)法確定的操作使用非確定性進(jìn)度條。這樣的話，不要在初始階段顯示可能不準(zhǔn)確的估計(jì)值。進(jìn)度條必須能夠指明操作是位于開始、中間還是結(jié)束階段。 l 不要同時(shí)使用進(jìn)度條和忙碌鼠標(biāo)指針。后臺(tái)任務(wù)必須待在后臺(tái)。 l 將動(dòng)畫在進(jìn)度條上方居中顯示。僅當(dāng)用戶能夠依此做些什么的時(shí)候，才有必要提供額外的進(jìn)度信息。 l 明確指示真實(shí)進(jìn)度。這類進(jìn)度條可以在上下文相關(guān)位置或狀態(tài)欄中顯示。 在這個(gè)示例中，進(jìn)度條用于在配置過(guò)程中提供反饋。 應(yīng)當(dāng)將確定性進(jìn)度條用于那些有確定時(shí)間界限的操作，即使其中大部分時(shí)間都無(wú)法進(jìn)行精確預(yù)測(cè)時(shí)也同樣如此。在這個(gè)示例中，滑塊用于指示播放的進(jìn)度。l 是否將非確定性進(jìn)度條用于等待用戶去完成任務(wù)？如果是，請(qǐng)不要使用進(jìn)度條。 設(shè)計(jì)規(guī)范 o 常規(guī)o 非確定性進(jìn)度條o 無(wú)模式進(jìn)度條o 模式進(jìn)度條o 剩余時(shí)間 正確： 在這個(gè)示例中，重新改寫了選項(xiàng)標(biāo)簽，使第一個(gè)選項(xiàng)成為默認(rèn)選項(xiàng)。單選框可能會(huì)錯(cuò)誤地暗示用戶無(wú)需再進(jìn)行選擇。 如果要在單選框中嵌套其他單選框或復(fù)選框，則在高層次的選項(xiàng)被選中之前，禁用這些附屬控件。 動(dòng)態(tài)顯示與選中控件相關(guān)的其他控件（屏幕閱讀器無(wú)法檢測(cè)到這類事件）。 l 最好將多個(gè)單選框垂直排列，而非水平排列。 在這個(gè)示例中，下拉列表致力于當(dāng)前選中的項(xiàng)，且不鼓勵(lì)用戶進(jìn)行更改。如果屏幕空間足夠，且這些選項(xiàng)之重要值得占用那么多屏幕空間的話，就可以使用單選框。 它用在這里合適嗎？ 考慮下列問(wèn)題以進(jìn)行判斷： l 該控件是用于在一組相關(guān)但互斥的選項(xiàng)中進(jìn)行選擇的嗎？如果不是，則改用其他控件。對(duì)于英文來(lái)說(shuō)，僅當(dāng)需要避免歧義時(shí)才在其兩側(cè)添加引號(hào)；中文來(lái)說(shuō)，則應(yīng)使用引號(hào)。 錯(cuò)誤：在這個(gè)示例中，文本框錯(cuò)誤地被放置在復(fù)選框的標(biāo)簽內(nèi)部。如果可以的話，在標(biāo)簽中提供相關(guān)信息，并僅在必要時(shí)才使用說(shuō)明。 使用肯定的表述方式。即使用戶無(wú)法更改，禁用的復(fù)選框仍然傳達(dá)了一定的信息，應(yīng)當(dāng)與結(jié)果相一致?；旌蠣顟B(tài)不應(yīng)被用于單個(gè)項(xiàng)目的第三種狀態(tài)。 l 以邏輯順序排列復(fù)選框，比如將高度相關(guān)的選項(xiàng)放在一起，或?qū)⒆畛Ｓ玫倪x項(xiàng)放在前面，或者遵循其他自然過(guò)程。 與單選按鈕這樣的單選控件不同，用戶可以從一組復(fù)選框中選擇任意的組合。 如果屏幕空間足夠，且這些選項(xiàng)之重要值得占用那么多屏幕空間的話，就可以使用單選框。 l 當(dāng)組合使用時(shí)，它們是否是相互獨(dú)立的，且用戶必須至少選擇其中一個(gè)？如果是，應(yīng)使用一組復(fù)選框，并當(dāng)一個(gè)選項(xiàng)也沒(méi)有選中時(shí)進(jìn)行錯(cuò)誤處理。 推薦尺寸與間距不要包含“（按鈕）”字樣。僅當(dāng)圖形用于增進(jìn)理解的時(shí)候才考慮同時(shí)使用文本和圖形，例如當(dāng)用于命令的是標(biāo)準(zhǔn)符號(hào)或它能夠幫助用戶形象地了解該命令的結(jié)果等等。 l 當(dāng)命令按鈕附屬于其他控件時(shí)，應(yīng)當(dāng)使用上述位置，并在上級(jí)控件被選中之前禁用附屬的命令按鈕。如果這么做不切實(shí)際的話，應(yīng)當(dāng)將有文本標(biāo)簽的命令按鈕不同寬度的數(shù)量限制為兩種。其標(biāo)簽通常為“瀏覽”、“其他”或“更多”，且總是帶有省略號(hào)以表示需要更多的信息。每個(gè)窗口中只能有一個(gè)按鈕成為默認(rèn)按鈕。 用戶需要在決定前與選項(xiàng)進(jìn)行交互（也許是要查看附加信息）。 該命令屬于相關(guān)鏈接菜單或組。例外：向?qū)е惺褂谩昂笸恕迸c“下一步”按鈕進(jìn)行導(dǎo)航。 設(shè)計(jì)規(guī)范 正確： 開始 停止 錯(cuò)誤： 刪除文件 在錯(cuò)誤的示例中，該命令具有破壞性。 l 只在相關(guān)文本第一次出現(xiàn)時(shí)提供鏈接。用戶在鏈接識(shí)別上會(huì)感到困難，且圖形中的任何文字（用于在單擊后表明其操作）會(huì)造成本地化問(wèn)題。打印出來(lái)的鏈接沒(méi)有任何價(jià)值，還可能會(huì)引起混淆。 下劃線l 對(duì)于完成主要任務(wù)必不可少的那些鏈接來(lái)說(shuō)，應(yīng)當(dāng)提供視覺(jué)線索使用戶能夠僅通過(guò)視覺(jué)觀察即可識(shí)別鏈接。 l 對(duì)于其他類型的鏈接，不要使用已訪問(wèn)過(guò)的鏈接顏色。 播放在這個(gè)示例中，標(biāo)準(zhǔn)的三角形播放符號(hào)表明該文本是一個(gè)命令 設(shè)計(jì)規(guī)范 交互l 如果單擊鏈接不會(huì)立即產(chǎn)生結(jié)果的話，應(yīng)當(dāng)顯示忙碌鼠標(biāo)指針。 圖形為鏈接提供了額外的視覺(jué)象征，這使得鏈接比不帶下劃線的純文本鏈接更易于識(shí)別。 與常規(guī)文字鏈接不同，該鏈接會(huì)更改其文字內(nèi)容以反映當(dāng)前選定的選項(xiàng)，且總是用未訪問(wèn)鏈接顏色顯示。 登錄 在這個(gè)示例中，單擊該鏈接將啟動(dòng)登錄命令。與任務(wù)鏈接不同，導(dǎo)航鏈接并不啟動(dòng)任務(wù)，只是簡(jiǎn)單地導(dǎo)航至其他地方或是處理正在進(jìn)行的任務(wù)。 l 確保鏈接的作用是能夠被預(yù)知的。 文本鏈接是最輕量級(jí)的可單擊控件，往往用于降低設(shè)計(jì)的視覺(jué)復(fù)雜度。 列表鏈接目錄但是，可縮放的列表視圖應(yīng)當(dāng)是至少出現(xiàn)三次的。 推薦尺寸與間距列表、信息提示（尺寸單位為像素，字體單位為像素）：l 調(diào)整列表視圖的高度以能夠顯示整數(shù)個(gè)列表項(xiàng)。 在列表模式下，該視圖按列排列各項(xiàng)，并使用翻頁(yè)。 l 用戶需要更改視圖、分組、按列排序、以及改變列的寬度與順序嗎？如果不需要，則應(yīng)改用列表框。 文檔編寫列表視圖（List View）用于通過(guò)單選或多選的方式，查看并操作一個(gè)數(shù)據(jù)對(duì)象集合。 簡(jiǎn)約簡(jiǎn)約設(shè)計(jì)的技巧：A. 使任務(wù)顯現(xiàn)并可視。E. 靈活。 簡(jiǎn)約而又強(qiáng)大 強(qiáng)大強(qiáng)大意味著具體以下一些特性：A. 可用。否則，應(yīng)當(dāng)移去不適用的控件或者保持其可用并提供有幫助的反饋信息。 l 簡(jiǎn)要比羅嗦要好。確保所有的錯(cuò)誤信息對(duì)問(wèn)題進(jìn)行了清晰地解釋并給出可行的解決方案。記住用戶對(duì)于速度的感知和實(shí)際速度一樣重要，而且速度的感知主要決定于程序多快能夠響應(yīng)。注意細(xì)節(jié)。不要假設(shè)用戶會(huì)把不好的初始體驗(yàn)配置成自己希望的方式，他們不會(huì)這么做。 做出艱難的決定這些功能、命令或選項(xiàng)確實(shí)有必要嗎？如果有，就將其做好。需要做的有： 以灰色斜體方式顯示提示文本，而以黑色正體方式顯示實(shí)際輸入的文本。相反，該操作中的各個(gè)步驟應(yīng)當(dāng)分別只占整個(gè)進(jìn)程的一部分，整個(gè)進(jìn)度條只完成一次。不確定模式的進(jìn)度條雖然表示正在進(jìn)行中，但無(wú)法提供任何其他信息。用于選項(xiàng)或是選項(xiàng)、命令與細(xì)節(jié)內(nèi)容的混合。用于選項(xiàng)或是選項(xiàng)、命令與細(xì)節(jié)內(nèi)容的混合。以它與第一個(gè)選擇有什么不同的角度來(lái)描述這個(gè)命令鏈接，而不僅僅是“取消”或類似的變體。從邏輯上來(lái)說(shuō)，沒(méi)必要問(wèn)只有一種答案的問(wèn)題。用戶更愿意閱讀命令按鈕標(biāo)簽，而不是靜態(tài)文本。 對(duì)于所有控件，應(yīng)當(dāng)將最可靠的（避免丟失數(shù)據(jù)或無(wú)法訪問(wèn)系統(tǒng)）、最安全的值作為單選框。使用主標(biāo)題說(shuō)明來(lái)簡(jiǎn)要地解釋一個(gè)頁(yè)面或?qū)υ捒蛴脕?lái)做什么。有禮貌、給予支持與鼓勵(lì)。列寬。以后顯示的時(shí)候，如果更為方便，應(yīng)考慮將其顯示在最后一次出現(xiàn)的位置（相對(duì)于父窗口）。 避免使用按鈕來(lái)顯示彈出菜單或者將按鈕用作標(biāo)簽。窗口的布局和用戶接口元素的設(shè)計(jì)應(yīng)該反映用戶的心智模型。[4]《WindowsPhone7UI設(shè)計(jì)及人機(jī)交互指南》，pdf版。 參考資料[1]《Windows 用戶體驗(yàn)交互設(shè)計(jì)規(guī)范》。在長(zhǎng)時(shí)間使用的情況下，您的產(chǎn)品應(yīng)該仍然令人愉快。 界面元素的行為應(yīng)該和用戶期望的一致，不要試圖更改標(biāo)準(zhǔn)控件的行為。檢查布局問(wèn)題、控件和窗口裁剪、以及圖標(biāo)和位圖拉伸情況?？丶叽鐟?yīng)當(dāng)適合于其典型內(nèi)容，將控件變得更寬、更高、必要時(shí)使用多行編輯。如果覺(jué)得布局左側(cè)偏重，應(yīng)當(dāng)考慮增加控件的寬度，并將一些控件移到右側(cè)。 不要為不是鏈接的文本使用藍(lán)色，因?yàn)橛脩魰?huì)把它當(dāng)成鏈接。而不是兩個(gè)。禁用的控件可能很難使用，因?yàn)橛脩粜枰茢嗥浔唤玫脑?。例如，為那些?否的問(wèn)題提供“是”和“否”的選擇。使用明確的“取消”按鈕可以讓用戶非?？焖俚厝∠蝿?wù)。不要隱藏常用的內(nèi)容，因?yàn)橛脩艨赡苷也坏剿鼈儭?更多/更少 對(duì)象名稱。 顯示/隱藏 對(duì)象名稱。這樣的話，不要在初始階段顯示可能不準(zhǔn)確的估計(jì)值。提示文字主要用于以緊湊的方式標(biāo)識(shí)文本框的目的。牢牢抓住基本的東西！ 把某方面做出色想想“真實(shí)”用戶（而不是市場(chǎng)部或公關(guān)部的人）會(huì)如何描述你的程序。這就是你的 UI 應(yīng)該的樣子——好像朋友之間的對(duì)話一樣——而不是什么用戶難以理解的高深莫測(cè)的東西。提供用戶能夠理解的（再次強(qiáng)調(diào)，基于用戶的目標(biāo)和任務(wù)來(lái)措辭，而不是技術(shù)）、相互區(qū)別清晰的選項(xiàng)。 使其響應(yīng)及時(shí)你程序的響應(yīng)對(duì)于整體用戶體驗(yàn)來(lái)說(shuō)至關(guān)重要——用戶會(huì)發(fā)現(xiàn)不必要的遲緩以及沒(méi)有響應(yīng)的程序不可用。 為常見問(wèn)題設(shè)計(jì)你的設(shè)計(jì)是不是很棒——除非用戶犯了錯(cuò)誤或網(wǎng)絡(luò)連接中斷？預(yù)測(cè)那些常見問(wèn)題、用戶失誤及其他錯(cuò)誤并為基進(jìn)行設(shè)計(jì)。 減少精力、知識(shí)和思考要想減少使用你的程序所需的精力、知識(shí)和思考： l 顯式比隱式要好。當(dāng)選擇控件時(shí)，能夠約束有效輸入的控件通常是最好的選擇。你很可能會(huì)（沮喪地）對(duì)結(jié)果表示驚訝。該產(chǎn)品或者設(shè)計(jì)能夠使用戶在多變的環(huán)境下高效地完成較大范圍內(nèi)的任務(wù)。該產(chǎn)品或者設(shè)計(jì)具有非常特別的、創(chuàng)新性的、在其競(jìng)爭(zhēng)產(chǎn)品中沒(méi)有的功能。 它用在這里合適嗎？也可用作拖放源或目標(biāo)。 大圖標(biāo) 各條目顯示為下方帶有標(biāo)簽的超大、大或中等尺寸的圖標(biāo)。 此外，各列可以添加或刪除，也可以重新排序或改變列寬?？赡馨罅織l目的列表應(yīng)當(dāng)至少顯示3項(xiàng)，使其同時(shí)能夠顯示更多條目以使滑動(dòng)更加容易，也可以使得左右滑動(dòng)更易于定位。 l 當(dāng)描述用戶的交互行為時(shí)，對(duì)于數(shù)據(jù)應(yīng)使用“（選擇）”，而對(duì)于列標(biāo)題則應(yīng)使用“（單擊）”。鏈接可能是文本或圖像，通常用已訪問(wèn)或未訪問(wèn)的系統(tǒng)鏈接顏色來(lái)顯示，以表明它是可以被單擊的。去掉不必要的文字和細(xì)節(jié)。通過(guò)鏈接文本和可選的信息提示，用戶應(yīng)當(dāng)能夠準(zhǔn)確地預(yù)知鏈接會(huì)產(chǎn)生的結(jié)果。與導(dǎo)航鏈接不同，任務(wù)鏈接啟動(dòng)一個(gè)新任務(wù)，而不是繼續(xù)進(jìn)行已有的任務(wù)。 因?yàn)椴藛嗡幍那闆r通常使用一組鏈接，其文本通常不加下劃線（除非懸停）而且可能沒(méi)有使用系統(tǒng)鏈接顏色。 如：電視交友與芒果衛(wèi)視我們約會(huì)吧在12月15日于中興廣場(chǎng)舉行大型交友聯(lián)誼。 公交信息 l 對(duì)于導(dǎo)航鏈接來(lái)說(shuō)，為已訪問(wèn)的和未訪問(wèn)的鏈接使用不同的顏色。 l 使用與鏈接顏色形成明顯對(duì)比的背景色。在你想使用帶下劃線的文本地方使用斜體。l 單擊圖標(biāo)與單擊文本的效果應(yīng)當(dāng)相同。 l 僅當(dāng)鏈接的資料相關(guān)、有用、不是冗余重復(fù)的時(shí)候才使用鏈接。 任務(wù)鏈接l 應(yīng)將任務(wù)鏈接用于那些沒(méi)有破壞性或能夠輕易恢復(fù)的命令。 按鈕目錄它是由開發(fā)人員指定的，但對(duì)于任何一個(gè)按鈕，只要用戶將焦點(diǎn)切換到其上，它都會(huì)變成默認(rèn)按鈕。也就是說(shuō)，它與該窗口的主要目的沒(méi)有關(guān)系。 178。 標(biāo)準(zhǔn)命令按鈕 默認(rèn)命令按鈕 窗口中的默認(rèn)命令按鈕表示當(dāng)用戶按下 Enter 鍵時(shí)會(huì)被激活。 瀏覽按鈕 可使用瀏覽按鈕來(lái)顯示對(duì)話框以幫助用戶選擇有效值。 l 如果同樣的命令按鈕出現(xiàn)在多個(gè)窗口中，試著使用相同的標(biāo)簽文本、訪問(wèn)鍵及窗口位置。 178。錯(cuò)誤：在這個(gè)示例中，按鈕上標(biāo)簽四周的空間太多。 推薦尺寸與間距用于命令按鈕的推薦尺寸與間距。 它用在這里合適嗎？ 典型的復(fù)選框 它用在這里合適嗎？ 考慮下列問(wèn)題以進(jìn)行判斷： l 該復(fù)選框是用于切換選項(xiàng)的開關(guān)狀態(tài)，或者是選擇/取消選擇一個(gè)項(xiàng)目嗎？如果不是，則改用其他控件。 例如：錯(cuò)誤： 在這個(gè)示例中，紙張橫向（Landscape）選項(xiàng)的對(duì)立面并不明確，因此復(fù)選框在這里并不是好的選擇。 該選項(xiàng)展示的是程序選項(xiàng)，而非數(shù)據(jù)嗎？選項(xiàng)值不應(yīng)當(dāng)基于上下文或其它數(shù)據(jù)。 混合狀態(tài)的復(fù)選框 設(shè)計(jì)規(guī)范 將相關(guān)的復(fù)選框合并成組。 錯(cuò)誤： 在這個(gè)示例中，水平對(duì)齊會(huì)使得難以閱讀。應(yīng)當(dāng)改用進(jìn)度條控件。對(duì)于一組復(fù)選框來(lái)說(shuō)，應(yīng)當(dāng)使用并列的措辭并盡量保持所有標(biāo)簽的長(zhǎng)度大致相同。保持標(biāo)簽的簡(jiǎn)潔使得在提示信息和文檔中易于引用。 如果你必須使用多行標(biāo)簽，應(yīng)當(dāng)將標(biāo)簽的頂部與復(fù)選框?qū)R。 提及復(fù)選框時(shí)，應(yīng)稱其為“復(fù)選框（check box）”，而非“選項(xiàng)（option）” 。 文檔編寫單選框（Radio Button）用于在一組相關(guān)但互斥的選項(xiàng)中進(jìn)行選擇。但是，復(fù)選項(xiàng)只適合用于打開或關(guān)閉一個(gè)選項(xiàng)，而單選框則可用于完全不同的選項(xiàng)。 l 下拉列表會(huì)不會(huì)更合適？如果在大多數(shù)情況下，默認(rèn)選項(xiàng)對(duì)大多數(shù)用戶來(lái)說(shuō)都是推薦的，那么單選框可能會(huì)過(guò)分占據(jù)用戶的注意力。 設(shè)計(jì)規(guī)范 l 以邏輯順序排列選項(xiàng)，比如從被選到的可能性從高到低、操作從簡(jiǎn)單到復(fù)雜、或者風(fēng)險(xiǎn)從低到高等等。 不要將單選框用于分組框標(biāo)簽。此時(shí)，方向鍵用于將焦點(diǎn)從單選框移動(dòng)到其附屬文本框。 例外：下列情況下無(wú)需默認(rèn)選中： 由于可靠性、安全性或法律原因，不存在