【正文】 可以接受的默認(rèn)選項(xiàng)，且用戶因此必須做出明確選擇時(shí)。 將第一個(gè)選項(xiàng)作為默認(rèn)選項(xiàng)，因?yàn)橛脩敉ǔ?huì)這么認(rèn)為——除非這樣的順序不符合邏輯。 它用在這里合適嗎？因此，你得考慮為那些需要 2 秒甚至更長(zhǎng)時(shí)間的操作提供某種類型的進(jìn)度反饋信息。在這種情況下，用戶可以用這段時(shí)間去做其他事情而不必盯著進(jìn)度。 l 該操作已完成的大致百分比（以及剩余部分的百分比）。 使用模式 進(jìn)度條具有以下使用模式： 確定性進(jìn)度條 模式確定性進(jìn)度條 通過(guò)從左至右進(jìn)行填充來(lái)表示操作的進(jìn)度。 無(wú)模式確定性進(jìn)度條 通過(guò)從左至右進(jìn)行填充來(lái)表示操作的進(jìn)度。 在這個(gè)示例中，使用了一個(gè)模式非確定性進(jìn)度條來(lái)指示進(jìn)度。如果操作沒(méi)有進(jìn)展的話，進(jìn)度條則絕不能前進(jìn)。動(dòng)畫可能會(huì)產(chǎn)生誤導(dǎo)，因?yàn)樗鼈兺ǔＴ谂c實(shí)際任務(wù)分離的單獨(dú)線程中運(yùn)行，所以即使操作已經(jīng)鎖死仍然能夠表示進(jìn)度。其他情況下在完成時(shí)使用聲音效果則會(huì)讓用戶感到厭煩。 l 不要將完成的百分比或其他任何文本放在進(jìn)度條上。不確定模式的進(jìn)度條雖然表示正在進(jìn)行中，但無(wú)法提供任何其他信息。l 如果能夠準(zhǔn)確計(jì)算的話，應(yīng)當(dāng)提供估計(jì)剩余時(shí)間。與重新啟動(dòng)一樣，如果進(jìn)度條回退的話，就喪失了它的意義。 不要同時(shí)使用非確定性進(jìn)度條及完成百分比或估計(jì)剩余時(shí)間。如果取消后能夠回退到先前的狀態(tài)（沒(méi)有副作用）的話，則將按鈕的標(biāo)簽寫為“取消”，否則則寫為“停止”以表示會(huì)已經(jīng)完成的那部分操作的影響會(huì)持續(xù)存在。如果最大單位是小時(shí)，那么應(yīng)當(dāng)給出分鐘數(shù)（如果有意義的話）而不是秒數(shù)。 如果你希望進(jìn)度條不那么顯眼的時(shí)候，可以使用最小寬度。 l 使用句子大寫樣式。 l 如果在某一時(shí)刻，不再可能將環(huán)境退回到先前的狀態(tài)的話，你可以在操作進(jìn)行的中途將按鈕的標(biāo)簽從“取消”改為“停止”。 使用模式 l 值所代表的數(shù)據(jù)類型是否已經(jīng)存在專門的通用控件？例如日期、時(shí)間、或者是 IPv4 或 IPv6 地址。 除了其長(zhǎng)度以及可選的微調(diào)控件之外，文本框沒(méi)有其他能夠提示有效值或其格式的可視線索。 用于格式化數(shù)據(jù)輸入的文本框 注：自動(dòng)離開功能會(huì)自動(dòng)將輸入焦點(diǎn)從一個(gè)文本框移到下一個(gè)。 l 應(yīng)使用自動(dòng)完成來(lái)幫助用戶輸入那些可能會(huì)被重復(fù)使用的數(shù)據(jù)。 l 不要在單行文本框上使用任何滾動(dòng)條。例如，在輸入許多名稱、數(shù)字和標(biāo)識(shí)時(shí)，一些可選的空格、標(biāo)點(diǎn)及大小寫往往無(wú)關(guān)緊要。如果用戶更有可能進(jìn)行編輯，則應(yīng)將插入點(diǎn)放在文本末尾。 輸入的往往是較小的數(shù)值，通常小于 100。 l 不要為特定的數(shù)值指定特殊含義，即使這些特殊含義在你的應(yīng)用程序中是內(nèi)部使用的。 數(shù)據(jù)輸出l 不要為單行只讀的文本框添加邊框。 在這個(gè)示例中，氣球狀提示報(bào)告輸入了錯(cuò)誤的字符。 l 不要將提示僅僅用于引導(dǎo)用戶從列表中進(jìn)行選擇或單擊按鈕。 例外：如果文本框具有默認(rèn)的輸入焦點(diǎn)，則顯示提示文本，并當(dāng)用戶開始輸入時(shí)消失。l 如果對(duì)于輸入沒(méi)有特定預(yù)期。l 不要使用句末標(biāo)點(diǎn)或省略號(hào)。l 提示文字主要用于以緊湊的方式標(biāo)識(shí)文本框的目的。 輸入驗(yàn)證及錯(cuò)誤處理因?yàn)槲谋究蛲ǔ２皇芗s束，無(wú)法只接受有效輸入，因此你可能需要驗(yàn)證輸入并處理可能的問(wèn)題。白色背景使文本更易于閱讀。 錯(cuò)誤： 在這個(gè)示例中，數(shù)值文本錯(cuò)誤地使用了左對(duì)齊。 正確： 在這個(gè)示例中，單位已經(jīng)標(biāo)明，但它需要用戶輸入小數(shù)。例如，一個(gè)有效的信用卡號(hào)最多可達(dá) 19 個(gè)字符，如果將其限制得更短，則當(dāng)使用較長(zhǎng)的格式輸入數(shù)字時(shí)會(huì)產(chǎn)生困難。 l 靈活處理數(shù)據(jù)格式。 滾動(dòng)條： l 不要在多行文本框中使用水平滾動(dòng)條。 用于顯示數(shù)據(jù)的只讀單行文本框。 數(shù)據(jù)輸入 用戶輸入或編輯短字符串的無(wú)約束的單行文本框。能夠用于可編輯文本框的約束包括： l 可選的對(duì)總字符長(zhǎng)度的限制約束。 它用在這里合適嗎？ 考慮下列問(wèn)題以進(jìn)行判斷： l 把所有有效值都列出來(lái)是否切實(shí)有效？如果是，考慮換用單選列表框、列表視圖（List View）、下拉列表、可編輯下拉列表或滑塊。 它用在這里合適嗎？ l 不要提供完成或剩余百分比信息，因?yàn)檫M(jìn)度條自身已經(jīng)傳達(dá)了該信息。如果該操作具有多個(gè)步驟或需要處理多個(gè)對(duì)象的話，該標(biāo)簽可以動(dòng)態(tài)改變。 推薦尺寸與間距 高清用于進(jìn)度條的推薦尺寸與間距 始終使用推薦的進(jìn)度條高度。從下列格式中選擇一個(gè)最大時(shí)間單位不是零的，然后當(dāng)最大時(shí)間單位變成零時(shí)再更換為下一個(gè)格式。 模式進(jìn)度條 模式進(jìn)度條放在進(jìn)度頁(yè)面或進(jìn)度對(duì)話框中。一旦整體進(jìn)度能夠確定時(shí)，即轉(zhuǎn)換為確定性進(jìn)度條。相反，該操作中的各個(gè)步驟應(yīng)當(dāng)分別只占整個(gè)進(jìn)程的一部分，整個(gè)進(jìn)度條只完成一次。 l 明確指明結(jié)束。水平進(jìn)度條更加自然。因此，如果操作可能失敗，不要提供那些僅對(duì)技術(shù)支持有意義的額外進(jìn)度信息。 l 僅當(dāng)操作所花的時(shí)間非常長(zhǎng)（超過(guò)兩分鐘）、不頻繁且非常重要時(shí)，才在完成時(shí)播放聲音。如果做的好的話，動(dòng)畫能夠幫助用戶將操作形象化，從而提升用戶體驗(yàn)。你不會(huì)希望用戶誤認(rèn)為你的程序被鎖死了。如果能用確定性進(jìn)度條則更好，因?yàn)槟軌蛑甘驹摬僮鞔笾峦瓿傻陌俜直龋⒛軌驇椭脩舸_定該操作是否值得繼續(xù)等待。 帶有取消或停止按鈕及動(dòng)畫的模式確定性進(jìn)度條 允許用戶中止該操作，同時(shí)包含一個(gè)動(dòng)畫，以幫助用戶將操作的效果形象化。 最重要的一件事：確保為耗時(shí)操作提供了進(jìn)度反饋，且清晰地展現(xiàn)了上述信息。他們也需要知道： l 一個(gè)耗時(shí)操作已經(jīng)開始。非確定性進(jìn)度條本身即是一個(gè)有效的常規(guī)動(dòng)畫，對(duì)于已經(jīng)存在的動(dòng)畫來(lái)說(shuō)，沒(méi)有更多意義。進(jìn)度條不僅可以顯示大致的完成百分比（確定性，determinate），也可以顯示操作正在進(jìn)行中（非確定性，indeterminate）。 用“按（click）”一詞描述用戶的交互行為。 該組單選框表示的是處于混合狀態(tài)的屬性，這會(huì)在顯示多個(gè)設(shè)置不同的對(duì)象的屬性時(shí)發(fā)生。應(yīng)選擇最可靠（避免數(shù)據(jù)丟失或無(wú)法訪問(wèn)系統(tǒng)）和最安全的選項(xiàng)。單選框標(biāo)簽應(yīng)以冒號(hào)結(jié)尾。 錯(cuò)誤： 在這個(gè)示例中，水平對(duì)齊會(huì)使得難以閱讀。對(duì)于數(shù)據(jù)，應(yīng)當(dāng)使用下拉列表或單選列表框。 正確： 在這個(gè)示例中，復(fù)選框?qū)ζ聊豢臻g的占用對(duì)于這個(gè)并不重要的選項(xiàng)來(lái)說(shuō)非常精簡(jiǎn)。如果選項(xiàng)多于 7 個(gè)，應(yīng)使用下拉列表或單選列表框。 設(shè)計(jì)規(guī)范o 附屬控件o 單選框 文檔編寫當(dāng)提及復(fù)選框時(shí)： 原樣引用標(biāo)簽文本，但無(wú)須包含訪問(wèn)鍵下劃線和冒號(hào)。 如果一個(gè)選項(xiàng)是強(qiáng)烈推薦的，應(yīng)當(dāng)在標(biāo)簽中添加 “（推薦）”字樣。 錯(cuò)誤：在這個(gè)示例中，該選項(xiàng)沒(méi)有使用肯定的表述方式。 例外：如果復(fù)選框標(biāo)簽同時(shí)用于其后的附屬控件，則標(biāo)簽應(yīng)當(dāng)以冒號(hào)結(jié)尾。 正確： 在這個(gè)示例中，用戶能夠從包含三個(gè)明確的選項(xiàng)列表中進(jìn)行選擇。水平排列會(huì)使得難以閱讀。當(dāng)沒(méi)有直接支持這種輸入類型的控件，最好的辦法就是使用一組復(fù)選框，并當(dāng)沒(méi)有選擇任何選項(xiàng)時(shí)手工處理錯(cuò)誤。 正確： 在這個(gè)示例中，復(fù)選框?qū)ζ聊豢臻g的占用對(duì)于這個(gè)并不重要的選項(xiàng)來(lái)說(shuō)非常經(jīng)濟(jì)。 l 單選框會(huì)不會(huì)更合適？復(fù)選項(xiàng)只適合用于打開或關(guān)閉一個(gè)選項(xiàng)，而單選框則可用于完全不同的選項(xiàng)。復(fù)選框的標(biāo)簽是對(duì)選中狀態(tài)的描述，而清除狀態(tài)的含義必須與選中狀態(tài)明確相反。對(duì)于英文格式來(lái)說(shuō)，僅當(dāng)需要避免歧義時(shí)才在其兩側(cè)添加引號(hào)；對(duì)于中文來(lái)說(shuō)，則應(yīng)總是使用引號(hào)。應(yīng)當(dāng)改用選項(xiàng)按鈕或復(fù)選框。正確：在這個(gè)示例中，按鈕使用了標(biāo)準(zhǔn)尺寸，看起來(lái)很專業(yè)。 178。雙 V 形（雙箭頭形）表明了漸進(jìn)展開方式的使用，其箭頭即指向信息顯示或隱藏的位置： 設(shè)計(jì)規(guī)范l 如果單擊命令按鈕不會(huì)立即產(chǎn)生結(jié)果的話，應(yīng)當(dāng)顯示忙碌鼠標(biāo)指針。 當(dāng)你想使用標(biāo)準(zhǔn)命令按鈕，但又不希望總是顯示按鈕邊框時(shí)，則可以使用輕量級(jí)的命令按鈕。正確：在這個(gè)示例中，選項(xiàng)按鈕與確定、取消按鈕一起使用，為選項(xiàng)提供附加信息。l 使用選項(xiàng)按鈕與常規(guī)命令按鈕的組合是不是更合適？當(dāng)下列條件符合時(shí)，往往會(huì)用選項(xiàng)按鈕與常規(guī)命令按鈕（確定、取消）的組合來(lái)代替一組獨(dú)立的命令按鈕：178。 178。典型的命令按鈕。 應(yīng)盡可能為標(biāo)簽文本應(yīng)用粗體樣式。 l 如果相關(guān)文本在離首次出現(xiàn)很遠(yuǎn)的位置出現(xiàn)的話，也應(yīng)當(dāng)使用鏈接。 l 鏈接到特定的內(nèi)容，而不是一般性的內(nèi)容。圖標(biāo)應(yīng)當(dāng)在視覺(jué)上引出文本。如果鏈接在上下文中不那么明顯的話，應(yīng)當(dāng)使用帶下劃線的文本。在你想使用彩色文本的地方使用粗體或某種灰色。這些顏色的含義在所有程序中都是一致的。 玩在上海純文本鏈接 僅由文本組成。 什么是強(qiáng)密碼？ 在這個(gè)示例中，單擊該鏈接將顯示指定主題的幫助窗口。 任務(wù)鏈接 用于啟動(dòng)新命令的鏈接。用戶無(wú)須通過(guò)與你的程序交互來(lái)查找鏈接。不過(guò)，要確保你的鏈接文本不會(huì)過(guò)于特別，以至于產(chǎn)生誤導(dǎo)及妨礙正常的使用。 設(shè)計(jì)規(guī)范o 交互o 顏色o 下劃線o 純圖形連接o 導(dǎo)航鏈接o 任務(wù)鏈接 l 對(duì)于列表數(shù)據(jù)，應(yīng)原樣引用數(shù)據(jù)文本，包括其大小寫。列表視圖應(yīng)當(dāng)顯示 3 至 10個(gè)項(xiàng)。詳細(xì)信息 各條目顯示為表格格式中的一行。平鋪 各條目顯示為右側(cè)帶有標(biāo)簽和可選詳細(xì)信息的中等尺寸圖標(biāo)。 它用在這里合適嗎？列表視圖并非只是一個(gè)更加靈活而強(qiáng)大的列表框，其額外的功能已經(jīng)使其用途發(fā)生了改變。D. 使用約束條件。該產(chǎn)品或者設(shè)計(jì)能夠與其他應(yīng)用程序交換數(shù)據(jù)。該產(chǎn)品或者設(shè)計(jì)能夠使用戶以前所未有的工作效率和規(guī)模水平來(lái)完成任務(wù)。不要讓用戶猜測(cè)。為有幫助的、補(bǔ)充性質(zhì)的、但并非基本的信息使用幫助鏈接。應(yīng)當(dāng)非常謹(jǐn)慎使用聲音。如果一種方法可以把事情做好，就不要使用三種方法。 不要假設(shè)提供皮膚能夠?qū)δ切┮话慊耐庥^起到補(bǔ)償作用。 小心提問(wèn)避免使用模式對(duì)話框來(lái)問(wèn)那些并不是非問(wèn)不可的問(wèn)題——應(yīng)該使用無(wú)模式對(duì)話框。假設(shè)你就在用戶的身邊，然后他問(wèn)你說(shuō)“我現(xiàn)在應(yīng)該怎么做？”想想你會(huì)如何解釋：哪些步驟、怎樣的順序、你會(huì)怎么說(shuō)以及如何來(lái)解釋等等。 不要使用句末標(biāo)點(diǎn)或省略號(hào)。確保文本的顯示足夠長(zhǎng)以使用戶能夠閱讀。準(zhǔn)確的估計(jì)剩余時(shí)間是有用的，而那些差得離譜或者劇烈變化的估計(jì)值是沒(méi)用的。 顯示/隱藏細(xì)節(jié)。 更多/更少細(xì)節(jié)。這是不需要的，因?yàn)殒溄影凳玖藛螕魟?dòng)作。很可能用戶意識(shí)到他并不想進(jìn)行這項(xiàng)任務(wù)。但是，如果不清楚要取消的是哪個(gè)操作，例如有多個(gè)即將進(jìn)行操作時(shí)，可以重命名“取消”。盡可能使用像列表和滑塊這樣的帶約束的控件來(lái)減少文本輸入的需要，而不是像文本框這樣的無(wú)約束控件。 不要在控件標(biāo)簽或主標(biāo)題說(shuō)明末尾添加句點(diǎn)。在窗口標(biāo)題、主標(biāo)題說(shuō)明、補(bǔ)充說(shuō)明、內(nèi)容區(qū)域、命令鏈接及提交按鈕中尋找重復(fù)多余的文字。布局平衡。 布局將窗口中控件和面板的尺寸調(diào)整為適合典型內(nèi)容的大小。避免使用模式對(duì)話框來(lái)將用戶鎖定在某個(gè)操作中，以至于在當(dāng)前操作完成前用戶不能做別的事情。 一個(gè)窗口中字體的大小和類型應(yīng)該一致。提供如返回，后退等操作，從而讓用戶放心地使用各種業(yè)務(wù)。南京有線中間件平臺(tái)系統(tǒng)技術(shù)規(guī)范數(shù)字電視交互設(shè)計(jì)規(guī)范分冊(cè)(暫定)編號(hào)版本密級(jí)內(nèi)部公開發(fā)布日期2011214江蘇省廣播電視信息網(wǎng)絡(luò)股份有限公司南京分公司中間件工作小組目錄一、 引言 6 文檔目的 6 適用范圍 6 參考資料 6二、 設(shè)計(jì)原則 7 用戶體驗(yàn)設(shè)計(jì)原則 7 反饋和交互 7 一致性 7 容錯(cuò)性 7 整體美學(xué) 7 最容易犯的錯(cuò)誤 8 窗口 8 布局 8 文本 8 控件 9 如何設(shè)計(jì)優(yōu)秀的用戶體驗(yàn) 11 抓住基本功能 11 把某方面做出色 11 不必強(qiáng)求每個(gè)人都滿意 11 做出艱難的決定 11 給人的體驗(yàn)就像是在進(jìn)行友好的對(duì)話 11 默認(rèn)執(zhí)行正確的操作 12 讓它得以工作 12 小心提問(wèn) 12 使其用起來(lái)很棒 12 使其看起來(lái)很棒 12 使其響應(yīng)及時(shí) 12 使其保持簡(jiǎn)單 13 避免糟糕的體驗(yàn) 13 為常見問(wèn)題設(shè)計(jì) 13 不要使人厭煩 13 減少精力、知識(shí)和思考 13 測(cè)試你的用戶界面 14 簡(jiǎn)約而又強(qiáng)大 14 強(qiáng)大 14 簡(jiǎn)約 14三、 界面 16 高清 16 標(biāo)清 17四、 控件 18 列表視圖 18 它用在這里合適嗎？ 18 標(biāo)準(zhǔn)列表視圖展示 19 推薦尺寸與間距 21 文檔編寫 22 列表鏈接 22 使鏈接明確、相關(guān)且能夠被預(yù)知 23 使用模式 23 設(shè)計(jì)規(guī)范 25 文檔編寫 27 按鈕 28 它用在這里合適嗎？ 28 使用模式 29 設(shè)計(jì)規(guī)范 30 推薦尺寸與間距 31 文檔編寫 32 復(fù)選框 32 它用在這里合適嗎？ 32 使用模式 34 設(shè)計(jì)規(guī)范 35 推薦尺寸與間距 36 復(fù)選框標(biāo)簽 37 文檔編寫 38 單選框 38 它用在這里合適嗎？ 39 設(shè)計(jì)規(guī)范 40 推薦尺寸與間距 42 文檔編寫 42 進(jìn)度條 43 它用在這里合適嗎？ 43 設(shè)計(jì)理念 44 使用模式 44 設(shè)計(jì)規(guī)范 46 推薦尺寸與間距 50 標(biāo)簽 50 文本框 51 它用在這里合適嗎？ 52 設(shè)計(jì)理念 52 使用模式 52 設(shè)計(jì)規(guī)范 54 輸入驗(yàn)證及錯(cuò)誤處理 58 提示 58 推薦尺寸與間距 59 文檔編寫 59 對(duì)話框 60 它用在這里合適嗎？ 60 設(shè)計(jì)理念 61 對(duì)話框的特性 61 使用模式 62 設(shè)計(jì)規(guī)范 64 推薦尺寸與間距 66 文本 67 文檔編寫 72 信息提示 72 它用在這里合適嗎？ 73 設(shè)計(jì)理念 73 設(shè)計(jì)規(guī)范 74 文檔編寫 74五、 菜單 75 設(shè)計(jì)理念 75 使用模式 75 主頁(yè)菜單 75 分級(jí)頁(yè)面菜單 76 設(shè)計(jì)規(guī)范 77 菜單項(xiàng)的組織與順序 77 菜單的分類命名 77 視覺(jué)呈現(xiàn) 77六、 文本 79 用戶