信息化系統(tǒng)UI設(shè)計(jì)規(guī)范

信息化系統(tǒng)建設(shè)UI設(shè)計(jì)規(guī)范目錄1 范圍 52 基本設(shè)計(jì)原則 52.1 簡(jiǎn)約明確 52.2 一致性 52.3 操作性 53 布局 63.1.1 設(shè)計(jì)原則 63.1.2 設(shè)計(jì)規(guī)范 93.2 字體 133.2.1 中文字體使用理念 133.2.2 中文字體設(shè)計(jì)規(guī)范以及使用模式 143.3 顏色 163.3.1 設(shè)計(jì)理念 163.3.2 系統(tǒng)界面色彩使用規(guī)范 203.4 圖標(biāo) 233.4.1 設(shè)計(jì)理念 233.4.2 設(shè)計(jì)規(guī)范 253.5 換膚 293.5.1 設(shè)計(jì)理念 293.5.2 設(shè)計(jì)規(guī)范 294 控件標(biāo)準(zhǔn) 354.1 容器控件 354.1.1 分組框 354.1.2 選項(xiàng)卡 374.1.3 手風(fēng)琴容器 394.1.4 彈出窗口 424.1.5 ?？咳萜?444.2 選擇器控件 464.2.1 折疊式菜單 464.2.2 復(fù)選框 484.2.3 單選框 504.2.4 下拉列表 534.2.5 列表框 554.2.6 按鈕 584.2.7 時(shí)間選擇器 634.2.8 列表視圖 644.2.9 樹(shù)形視圖 664.2.10 拖拽上傳控件 694.2.11 表格控件 714.3 單值控件 734.3.1 滑塊 734.3.2 量表 764.3.3 進(jìn)度條 774.3.4 微調(diào)框 814.4 地圖控件 834.4.1 地圖控件 834.5 文本控件 844.5.1 輸入文本區(qū)域 844.5.2 標(biāo)簽 854.5.3 輸入文本 864.5.4 氣球狀提示 894.5.5 工具提示與信息提示 944.6 統(tǒng)計(jì)圖形控件 974.6.1 曲線圖 974.6.2 餅圖 974.6.3 柱形圖 974.6.4 條形圖 984.6.5 組合圖 984.6.6 氣泡圖 984.6.7 散點(diǎn)圖 984.6.8 面積圖 984.6.9 雷達(dá)圖 984.6.10 刻度盤(pán) 984.6.11 甘特圖 984.7 新穎控件 994.7.1 放大鏡控件 994.7.2 圖片展示控件 1004.7.3 首次體驗(yàn)向?qū)Э丶?1014.7.4 拖拽布局控件 1024.7.5 關(guān)鍵字聯(lián)想控件 1044.7.6 標(biāo)簽云 1054.7.7 文本式選擇控件 1064.7.8 ?？坎藛慰丶?1074.7.9 虛擬鍵盤(pán) 1085 交互規(guī)范 1095.1 界面架構(gòu) 1095.1.1 靜態(tài)架構(gòu) 1095.1.2 動(dòng)態(tài)架構(gòu) 1145.2 鍵盤(pán)交互標(biāo)準(zhǔn) 1185.2.1 交互原則 1185.2.2 使用場(chǎng)景 1185.2.3 使用模式 1195.3 消息 1195.3.1 錯(cuò)誤信息 1195.3.2 警告消息 1215.3.3 確認(rèn)消息 1225.4 通知 1245.4.1 交互原則 1245.4.2 使用場(chǎng)景 1255.4.3 使用模式 1255.5 首次體驗(yàn) 1255.5.1 使用原則 1265.5.2 使用場(chǎng)景 1265.6 提示音 1265.6.1 使用原則 1265.6.2 使用模式 1266 控件標(biāo)準(zhǔn)（補(bǔ)充） 1286.1 輸入控件 1286.1.1 文本框的使用 1286.1.2 多行文本輸入框(textarea) 1286.1.3 列表框（ListBox） 1286.1.4 單選框（RadioButton） 1286.1.5 復(fù)選框（CheckBox） 1286.1.6 選擇控件的選用標(biāo)準(zhǔn) 1286.2 顯示控件 1296.2.1 標(biāo)簽 1296.2.2 輸入幫助 1296.2.3 消息 1296.2.4 錯(cuò)誤畫(huà)面的使用原則 129

范圍本標(biāo)準(zhǔn)規(guī)定了UI設(shè)計(jì)過(guò)程中需要遵循的設(shè)計(jì)原則、視覺(jué)、控件、交互等標(biāo)準(zhǔn)規(guī)范。基本設(shè)計(jì)原則簡(jiǎn)約明確依據(jù)用戶的角色和使用場(chǎng)景，隱藏或刪除不常用或不重要的功能或信息，使用戶能專(zhuān)注于主要信息；使用用戶熟悉的詞匯、慣用語(yǔ)和概念，減少新概念，即減少用戶的學(xué)習(xí)成本和記憶負(fù)擔(dān)，方便用戶使用。一致性系統(tǒng)中的各主界面及子界面的布局應(yīng)保持統(tǒng)一，各類(lèi)控件的位置，顏色，風(fēng)格保持一定原則，字體大小，顏色，風(fēng)格也應(yīng)按照統(tǒng)一原則設(shè)計(jì)，使系統(tǒng)整體風(fēng)格保持一致。操作性高效靈活，針對(duì)用戶的具體使用場(chǎng)景，通過(guò)頁(yè)面元素的合理布局和快捷鍵等方式來(lái)提高用戶的操作效率；在某些時(shí)候系統(tǒng)可以合理地限制用戶的操作，或通過(guò)增加確認(rèn)操作等來(lái)防止用戶的錯(cuò)誤操作；類(lèi)似的功能應(yīng)能通過(guò)相似的步驟完成操作。布局設(shè)計(jì)原則通過(guò)適當(dāng)使用下列原則來(lái)體現(xiàn)視覺(jué)層次：焦點(diǎn)原則：指用戶首先關(guān)注的區(qū)域。形式上被賦予焦點(diǎn)屬性的UI元素一定要表達(dá)重要的內(nèi)容。以下是反例：毫無(wú)規(guī)律，擁擠的排版，導(dǎo)致頁(yè)面很難聚焦于某一處。以下為正例：簡(jiǎn)單的排版，通過(guò)文字大小的區(qū)別，自然的將焦點(diǎn)聚集在標(biāo)題。視覺(jué)流原則：指用戶注視區(qū)域的順序?？梢愿鶕?jù)任務(wù)邏輯和用戶的瀏覽習(xí)慣來(lái)設(shè)計(jì)恰當(dāng)?shù)囊曈X(jué)流。好的視覺(jué)流應(yīng)該清晰、合理、順暢、自然。因此，在邏輯上相關(guān)的UI元素應(yīng)具有清晰的視覺(jué)關(guān)系；反之，邏輯上相關(guān)的UI元素在空間上被分隔，視覺(jué)關(guān)聯(lián)效果將會(huì)減弱。如下圖所示：對(duì)齊原則：界面中的各類(lèi)元素應(yīng)按照計(jì)劃進(jìn)行組織，而不是隨意排列。保證頁(yè)面工整，信息呈現(xiàn)有序，便于用戶掃視。違背對(duì)齊原則將會(huì)影響頁(yè)面效果且不便于用戶掃視。不要因?yàn)楣δ苄枰吞厥馇闆r的顧慮而輕易犧牲掉頁(yè)面的視覺(jué)展現(xiàn)。如下圖所示反例：強(qiáng)調(diào)原則：可以根據(jù)UI元素間的相對(duì)重要程度進(jìn)行強(qiáng)調(diào)。下圖為正例：在這個(gè)待辦模塊中，第一條待辦，通過(guò)對(duì)文字色彩的強(qiáng)調(diào)，區(qū)分于其他6條信息，使讀者很容易的辨別出，7條信息中最重要的待辦，提高了工作效率。掃視布局原則：大部分人的閱讀習(xí)慣是從左向右，自上而下。閱讀分為：沉浸式閱讀和掃視，前者的目的在于理解，后者在于定位。如下圖所示：瀏覽系統(tǒng)時(shí)，用戶始終會(huì)沉浸在他們的目標(biāo)任務(wù)中，因此掃視是最常使用的閱讀模式。用戶只在確信必要時(shí)才仔細(xì)閱讀大量文本。針對(duì)掃視的布局設(shè)計(jì)可以適當(dāng)強(qiáng)調(diào)主要的UI元素，弱化次要的。包括：將主UI元素放在掃視路徑上。避免將重要信息放在左下角或者頁(yè)面底端或者需要滾動(dòng)很多的控件上?？紤]使用漸進(jìn)展開(kāi)方式來(lái)隱藏次要的UI元素。將任務(wù)相關(guān)的重要信息直接表現(xiàn)在控件上。用戶更傾向于關(guān)注交互控件上的標(biāo)簽，而不是輔助型的靜態(tài)文本。如下圖反例：用戶必須閱讀輔助型文本后才能明確“確定”按鈕的作用。如下圖正例：直接將按鈕的作用描述作為控件標(biāo)簽，便于用戶理解。簡(jiǎn)潔原則：減少內(nèi)容和展現(xiàn)上的嵌套層級(jí)。減少同一控件不同尺寸的數(shù)量，不要讓布局本身成為突出的UI元素。例如，在界面上只使用一兩種按鈕寬度。采用輕量級(jí)的分組和分割方式，可以用布局本身和分隔符代替分組框，使用盡量少的對(duì)齊線。版式匹配原則：在設(shè)計(jì)之初，應(yīng)充分考慮頁(yè)面承載的內(nèi)容，進(jìn)行版式布局。不合適的版式會(huì)降低用戶的工作效率。30%原則通常，一個(gè)頁(yè)面中，主顯示區(qū)域約占70%的面積，剩余30%面積規(guī)范劃分為“吊頂”、“頭部”、“導(dǎo)航”、“底部”四個(gè)部分。對(duì)于這個(gè)四個(gè)部分的劃分稱(chēng)之為：30%原則?！暗蹴敗眳^(qū)域占5%，主要顯示“用戶信息”、“登錄”、“退出”等常規(guī)操作按鈕；“頭部”區(qū)域占10%，主要顯示系統(tǒng)的名稱(chēng)標(biāo)志及動(dòng)畫(huà)等內(nèi)容信息；“導(dǎo)航”區(qū)域占10%，主要顯示系統(tǒng)的一級(jí)菜單等功能按鈕；“底部”區(qū)域占5%，,主要顯示系統(tǒng)的版權(quán)信息等公共信息。設(shè)計(jì)規(guī)范視覺(jué)流規(guī)范：禁止邏輯上相關(guān)的UI元素在空間上被分隔，導(dǎo)致視覺(jué)關(guān)聯(lián)效果混亂。如下圖所示：對(duì)齊規(guī)范：不要因?yàn)楣δ苄枨蠛蛯?duì)特俗情況的顧慮而輕易犧牲掉頁(yè)面的視覺(jué)展現(xiàn)。如下圖所示反例：邏輯上相關(guān)的UI元素在空間上被分隔，且沒(méi)有明顯的視覺(jué)關(guān)聯(lián)。而正例中則很好的解決了這一問(wèn)題，如下圖所示：柵格布局?！皷鸥裣到y(tǒng)”英文為“gridsystems”，亦稱(chēng)為“網(wǎng)格系統(tǒng)”，是一種平面設(shè)計(jì)的方法與風(fēng)格。如今，柵格系統(tǒng)也已經(jīng)被運(yùn)用到網(wǎng)頁(yè)中，它以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。如下圖所示：通用柵格尺寸：通用柵格被分為61pxx16px的垂直單元格。用于對(duì)齊窗口尺寸、圖像比例以及動(dòng)畫(huà)。如下圖所示?；凇巴ㄓ脰鸥瘛钡臄U(kuò)展:基于“通用柵格”規(guī)范，設(shè)計(jì)人員可以據(jù)此將欄目進(jìn)一步劃分。應(yīng)用柵格后，頁(yè)面可有多種布局和模板。如下圖示意：基線規(guī)范:采用8px基線柵格，確保頁(yè)面組件在垂直方向上對(duì)齊。排版不必一味地遵循基線，但基線可營(yíng)造頁(yè)面水平方向上的韻律感。如下圖所示：以8px為橫向柵格單位，頁(yè)面所有元素寬度都可以是2的倍數(shù)，包括圖片和版面寬度，這樣可以在一定程度上加快頁(yè)面（特別是對(duì)于J-PEG圖片）的渲染速度（基于計(jì)算機(jī)內(nèi)部二進(jìn)制的運(yùn)算機(jī)制）。其在擴(kuò)展和兼容性上也有一定優(yōu)勢(shì)。在常見(jiàn)的大型系統(tǒng)中，布局間距的最小單位為8px，布局區(qū)塊采用32px（8px*4）和24（8px*3）兩種粒度單位，分別組成以下兩種可實(shí)現(xiàn)的柵格系統(tǒng)：32px：適用門(mén)戶、社區(qū)、論壇等相關(guān)頁(yè)面，如下圖所示：24px：適用于專(zhuān)題頁(yè)面（如下圖）不要展示大段文本，去除不必要的信息。多文本時(shí)格式化展示。合理利用頁(yè)面空間：避免擁擠和對(duì)空間的浪費(fèi)。確保關(guān)鍵數(shù)據(jù)沒(méi)有被截?cái)?，除非?shù)據(jù)特別長(zhǎng)。如下圖所示反例:字體中文字體使用理念字體選取原則：勿使用生僻字體，一般選擇宋體等比較常用的字體，防止用戶因沒(méi)安裝對(duì)應(yīng)字體造成顯示錯(cuò)誤。字體數(shù)量原則：不宜同時(shí)選用過(guò)多字體，以2至3種為宜。字號(hào)數(shù)量原則：字體大小不要亂設(shè)置，最好以系統(tǒng)默認(rèn)為宜，采用12px、14px、16px大小。特殊字體使用原則：特殊字體或藝術(shù)字體最好以圖片的方式置入網(wǎng)頁(yè)。文字的大小需要根據(jù)需求合理運(yùn)用，在一些特殊情況下，最好提供用戶可以選擇頁(yè)面字體的功能，比如將字號(hào)放大為14px、16px。字型選取原則：西方國(guó)家字母體系字體按類(lèi)型分為“襯線”與“非襯線”兩種?！耙r線”是指字體中在字母筆劃的末端的小轉(zhuǎn)角。“非襯線”字型則沒(méi)有襯線。用戶通常喜歡在文檔中將“襯線字體”用作正文。“襯線字體”可以使文檔看起來(lái)更加正式和典雅。對(duì)于UI文本來(lái)說(shuō)，對(duì)清晰外觀的需求以及計(jì)算機(jī)顯示器的低分辨率則使“非襯線”字體是更好的選擇。中文字體中的宋體就是一種最標(biāo)準(zhǔn)的serif字體，襯線的特征非常明顯。對(duì)比原則：當(dāng)文本與背景的亮度差非常大時(shí)，文本最易于閱讀。白色背景上的黑色文本對(duì)比度最高，反之很淺的背景上的深色文本同樣也具有高對(duì)比度。這種組合最適合于主要的系統(tǒng)界面。深色背景上的淺色文本具有很好的對(duì)比度。這種組合適用于次要的系統(tǒng)界面。如果你希望確保用戶能夠閱讀你的文本，則應(yīng)在淺色背景上使用深色文本。視覺(jué)可見(jiàn)原則：可編輯：顯示在框內(nèi)，帶有文本選擇鼠標(biāo)指針、插入符（具有輸入焦點(diǎn)時(shí)）以及通常位于白色背景上的文本。只讀、可選擇：帶有選擇鼠標(biāo)指針和插入符（具有輸入焦點(diǎn)時(shí)）的文本。只讀、不可選擇：帶有箭頭鼠標(biāo)指針的文本。被禁用：帶有箭頭鼠標(biāo)指針、有時(shí)位于灰色背景上的淺灰色文本。中文字體設(shè)計(jì)規(guī)范以及使用模式網(wǎng)頁(yè)字體通常由瀏覽器設(shè)定的，而沒(méi)有經(jīng)過(guò)設(shè)置的瀏覽器通常使用系統(tǒng)默認(rèn)字體，所以網(wǎng)頁(yè)字體和瀏覽器息息相關(guān)。Windows下IE瀏覽器默認(rèn)設(shè)置為“宋體”，F(xiàn)irefox下默認(rèn)為“微軟雅黑”，根據(jù)這些情況，可以制定一個(gè)標(biāo)準(zhǔn)來(lái)實(shí)現(xiàn)Web的統(tǒng)一性。由于“宋體”基本上是目前顯示中文唯一的通用Web字體，所以中文采用“宋體”，默認(rèn)字體大小為12px，顏色為黑色；輔助正文說(shuō)明信息必須使用12px字體字號(hào)（比如：大標(biāo)題下面的發(fā)表時(shí)間）；版權(quán)信息必須使用12px字體大??；標(biāo)題和正文必須區(qū)別開(kāi)來(lái)，使用不同大小的字號(hào)；名稱(chēng)字號(hào)標(biāo)題欄文本在標(biāo)題欄上用于標(biāo)識(shí)窗口的文本。字號(hào)：14px，加粗主標(biāo)題說(shuō)明在頁(yè)面、窗口或?qū)υ捒蛏辖忉屢鍪裁吹奈谋?。字?hào)：9px輔助說(shuō)明在頁(yè)面、窗口或?qū)υ捒蛏辖忉屢鍪裁吹母郊游谋?。字?hào)：9px元數(shù)據(jù)大標(biāo)簽當(dāng)對(duì)象被選中時(shí)顯示在元數(shù)據(jù)面板內(nèi)的文本。字號(hào)：13px未選中標(biāo)題當(dāng)沒(méi)有任何選中對(duì)象時(shí)顯示在元數(shù)據(jù)面板內(nèi)的文本。字號(hào)：14px，加粗普通文本顯示在用戶界面上的普通（只讀）文本。字號(hào)：12px強(qiáng)調(diào)文本粗體文本用于用戶必須閱讀的文本，使其更易于分析及受到關(guān)注。斜體文本則用于文本的字面引用（代替引號(hào)）及強(qiáng)調(diào)特定的字詞。字號(hào)：12px，加粗可編輯文本用戶可以編輯的文本會(huì)顯示在文本框內(nèi)。要減少呈現(xiàn)的復(fù)雜度，該邊框可以僅在可編輯文本選中時(shí)顯示。字號(hào)：12px被禁用的文本不適用當(dāng)前上下文的文本，如用于被禁用控件的標(biāo)簽等。被禁用文本表示用戶（通常）無(wú)須閱讀該文本。字號(hào)：12px注：上述表格內(nèi)容，請(qǐng)根據(jù)實(shí)際情況酌情使用。顏色設(shè)計(jì)理念基本原則功能性原則：根據(jù)界面中所體現(xiàn)的功能不同，在進(jìn)行界面設(shè)計(jì)中，需要考慮到不同的功能相配的顏色。以人為本原則：在界面設(shè)計(jì)之前，應(yīng)先做好適度的用戶調(diào)研，系統(tǒng)投入使用后，也應(yīng)該根據(jù)用戶的反饋來(lái)及時(shí)調(diào)整界面的配色。在條件允許的情況下，應(yīng)根據(jù)界面瀏覽者的大致年齡、性別、地域等來(lái)選用與之相匹配的顏色。在設(shè)計(jì)界面前，考察目標(biāo)用戶的審美喜好，進(jìn)行目標(biāo)用戶色彩偏愛(ài)研究，才可能運(yùn)用恰當(dāng)?shù)纳?，滿足不同用戶的需求。顏色的情感特征是一個(gè)必須特別重視的問(wèn)題，必須充分的考慮行業(yè)特點(diǎn)進(jìn)行選擇。如下圖所示。色彩適度使用原則：界面色彩的鮮亮對(duì)視覺(jué)刺激的強(qiáng)度較大，因此一般界面色調(diào)的配色往往以較灰暗的混合色作為背景色。為適當(dāng)降低鮮亮色彩對(duì)人視覺(jué)的過(guò)渡刺激，在整體布局中，往往加入無(wú)彩色系顏色進(jìn)行過(guò)渡，以此來(lái)減少視覺(jué)疲勞。同時(shí)，不同的操作系統(tǒng)和不同瀏覽器，或是不同的監(jiān)視器以及監(jiān)視器的設(shè)置，同樣定義的顏色可能會(huì)有不同顯示效果。雖然現(xiàn)在絕大多數(shù)顯卡和顯示器都已經(jīng)使用２４位真彩色，但如果設(shè)計(jì)師希望能在ＰＣ以外的設(shè)備和手機(jī)上保持足夠出色的顯示品質(zhì)，還是應(yīng)該從這２１６種顏色組成的調(diào)色板中尋找配色方案。如下圖所示。再如下圖所示正例：通過(guò)降低色彩的飽和度，使界面整體色調(diào)呈深紅色，在保留界面的色彩風(fēng)格及主題的同時(shí)，保證用戶閱讀的舒適性。如下圖所示。色彩暗示原則：不同色彩會(huì)產(chǎn)生不同的暗示，如藍(lán)色想到天空，白色想到純潔等。如下圖所示。色彩構(gòu)成原則界面顏色搭配的是否合理直接影響到訪問(wèn)者的情緒。好的色彩搭配會(huì)給訪問(wèn)者帶來(lái)很強(qiáng)的視覺(jué)沖擊力，不恰當(dāng)?shù)纳蚀钆鋭t會(huì)讓訪問(wèn)者浮躁不安。同種色彩搭配原則：首先選定一種色彩，然后調(diào)整其透明度和飽和度，將色彩變淡或加深，而產(chǎn)生新的色彩，這樣的界面看起來(lái)色彩統(tǒng)一，具有層次感。鄰近色彩搭配原則：在色環(huán)上相鄰的顏色，如綠色和藍(lán)色、紅色和黃色即互為鄰近色。采用鄰近色搭配可以使網(wǎng)頁(yè)避免色彩雜亂，易于達(dá)到頁(yè)面和諧統(tǒng)一的效果。如下圖所示。對(duì)比色彩搭配原則：色彩的三原色（紅、黃、藍(lán)）最能體現(xiàn)色彩間的差異。色彩的強(qiáng)烈對(duì)比具有視覺(jué)誘惑力，能夠起到幾種實(shí)現(xiàn)的作用。對(duì)比色可以突出重點(diǎn)，產(chǎn)生強(qiáng)烈的視覺(jué)效果。通過(guò)合理使用對(duì)比色，能夠使門(mén)戶系統(tǒng)特色鮮明、重點(diǎn)突出。如下圖所示案例，做為一個(gè)工作室的網(wǎng)站，設(shè)計(jì)的目的在于有效的吸引用戶來(lái)閱讀，通過(guò)適度的對(duì)比色彩搭配，使用戶能夠加深對(duì)內(nèi)容的了解，及時(shí)找到自己想看到的案例。暖色色彩搭配原則：這種色調(diào)的運(yùn)用可為界面營(yíng)造出穩(wěn)性、和諧和熱情的氛圍。如下圖所示界面，暖色的界面給人熱情，溫暖的感覺(jué)，增加用戶的友好感、突出界面展示的主題。冷色色彩搭配原則：使用綠色、藍(lán)色及紫色等色彩的搭配，這種色彩搭配可為網(wǎng)頁(yè)營(yíng)造出寧?kù)o、清涼和高雅的氛圍。冷色與白色搭配一般會(huì)獲得較好的視覺(jué)效果。如下圖所舉案例，通過(guò)使用一些冷色調(diào)的色彩進(jìn)行搭配，突出化妝品的清爽，舒適的感覺(jué)，從而很好的體現(xiàn)了產(chǎn)品的特點(diǎn)特性。文字與背景色對(duì)比原則：文字內(nèi)容的顏色與界面背景色對(duì)比要突出，底色深，文字淺，以深色的背景襯托淺色的內(nèi)容；反之，底色淡，文字深，以淺色的背景襯托深色的內(nèi)容。如下圖所示，背景色和文字通過(guò)對(duì)比顯示能在保證用戶的閱讀的同時(shí)，又能突出展現(xiàn)的主題和風(fēng)格。即滿足了用戶體驗(yàn)的需求，也很好的展示了視覺(jué)效果。系統(tǒng)界面色彩使用規(guī)范系統(tǒng)背景色調(diào)需統(tǒng)一：版面中設(shè)置了多種顏色的底色，顯得十分凌亂，將其統(tǒng)一成淺色，頁(yè)面顯得整齊、干凈，體現(xiàn)出簡(jiǎn)約、自然的效果。如下在同一個(gè)系統(tǒng)中，出現(xiàn)了兩種表單的背景風(fēng)格，從用戶使用習(xí)慣來(lái)說(shuō)，需要用戶進(jìn)行重新適應(yīng)，增加了用戶的操作時(shí)間。如下圖所示。多種顏色配色時(shí)色調(diào)需統(tǒng)一：色調(diào)是指色彩的濃淡、強(qiáng)弱程度，是通過(guò)色彩的明度和純度綜合表現(xiàn)色彩狀態(tài)。同一色調(diào)或者相近色調(diào)的色彩配色，集中了純度相近的色彩，呈現(xiàn)自然、和諧的效果。如下圖所示：過(guò)多使用鮮艷色調(diào)的原色，形成嘈雜的印象，出現(xiàn)較多原色的情況，應(yīng)注意其面積的比例。色彩的色調(diào)沒(méi)有統(tǒng)一，畫(huà)面整體陷入凌亂的印象中。出現(xiàn)多種色彩時(shí)，盡可能避免運(yùn)用原色，避免造成過(guò)于強(qiáng)烈的視覺(jué)沖擊效果。同時(shí)將色彩統(tǒng)一于一種或者彼此類(lèi)似的色調(diào)中。如此一來(lái)，畫(huà)面整體效果增加，讓人看起來(lái)覺(jué)得十分整齊、舒服，整體統(tǒng)一于典雅的色調(diào)中。如下圖所示。背景色純度不宜太高：濃重的背景色使得版面顯得難以識(shí)別，原來(lái)要表現(xiàn)的是前景，但淹沒(méi)在背景的濃重色彩之中。尤其是文字，在純度很高的背景色的襯托下，幾乎無(wú)法分辨。如下圖所示案例，高純度色調(diào)下兩個(gè)色相相近的色彩使用戶很難分辨上面的文字。如下圖所示。背景色明度不宜太亮：明亮的底色容易引發(fā)人的視覺(jué)疲勞，長(zhǎng)時(shí)間面對(duì)這樣的版面，會(huì)引發(fā)人的焦燥、不安的情緒。具體案例請(qǐng)看“色彩適度原則”中的舉例。色彩種類(lèi)不宜太多：畫(huà)面中出現(xiàn)的色彩種類(lèi)過(guò)多，在視覺(jué)上無(wú)法有效進(jìn)行層次劃分。由于頁(yè)面中的圖片本身就有不同顏色，因此色彩過(guò)多，畫(huà)面就顯得更加雜亂無(wú)章。如下圖所示反例，一個(gè)界面中出現(xiàn)了10種顏色，視覺(jué)效果很鮮明，但交互感受上不易被用戶所接受。圖標(biāo)設(shè)計(jì)理念相對(duì)于單純的文本，圖像以及符號(hào)化的圖標(biāo)更加符合用戶的認(rèn)知習(xí)慣。往往表述一種信息，一張圖片或者一個(gè)標(biāo)識(shí)能讓用戶更容易理解與接受。適當(dāng)?shù)氖褂脠D標(biāo)，會(huì)讓用戶很自然的建立起認(rèn)知習(xí)慣。清晰、明確，有高度的概括性與指向性，讓用戶能夠快速的聯(lián)想到對(duì)應(yīng)的功能和操作。具體設(shè)計(jì)理念如下：圖標(biāo)圖形的設(shè)計(jì)應(yīng)該盡可能的直接簡(jiǎn)單；正例：下列圖標(biāo)結(jié)構(gòu)簡(jiǎn)單明了。如下圖所示。反例：圖標(biāo)結(jié)構(gòu)過(guò)于復(fù)雜,用戶難以快速識(shí)別判斷，如下圖所示。圖標(biāo)展現(xiàn)的內(nèi)容應(yīng)該能讓用戶容易讀懂；正例：下列圖標(biāo)內(nèi)容比較簡(jiǎn)單直觀，一眼就能看出所表達(dá)的意思。如下圖所示。反例：下列圖標(biāo)的內(nèi)容豐富，但讓人難以理解，需要仔細(xì)思考或許能大概了解它的意思。如下圖所示。當(dāng)加上文字之后，效果明顯好很多。圖標(biāo)的樣式尺寸設(shè)計(jì)風(fēng)格應(yīng)該統(tǒng)一；正例：同一個(gè)界面內(nèi)的圖標(biāo)，樣式風(fēng)格保持統(tǒng)一和一致性。如下圖所示。反例：同一個(gè)界面內(nèi)的圖標(biāo)，有個(gè)別圖標(biāo)沒(méi)有和其他保持一致，使用戶感到生疏。如下圖所示。復(fù)雜的圖標(biāo)要適當(dāng)?shù)募尤胛淖诌M(jìn)行輔助說(shuō)明正例：界面中圖標(biāo)內(nèi)容比較復(fù)雜，所以加入了描述文字來(lái)說(shuō)明。如下圖所示。反例:下列圖標(biāo)內(nèi)容比較復(fù)雜，但并未加入說(shuō)明文字，使用戶難以理解。（其實(shí)跟上列圖標(biāo)意思相同）如下圖所示。文字不易過(guò)長(zhǎng)，一般為1-12個(gè)字符寬度。正例：界面中圖標(biāo)內(nèi)容比較復(fù)雜，適當(dāng)加入簡(jiǎn)明扼要的描述輔助用戶理解和記憶。如下圖所示。反例：下列圖標(biāo)加了文字描述，但所加文字過(guò)多，導(dǎo)致所占空間大，也顯的過(guò)于繁瑣。設(shè)計(jì)規(guī)范圖標(biāo)格式：系統(tǒng)中圖標(biāo)制作的輸出格式標(biāo)準(zhǔn)為JPEG、PNG、GIF、ICON等格式，可根據(jù)圖標(biāo)所在所屬系統(tǒng)需要輸出不同格式的圖標(biāo)。GIF：唯一支持動(dòng)畫(huà)的常用圖片格式，支持256種顏色和單一透明色,但對(duì)透明色的支持不很好，它適合對(duì)顏色要求不高的圖形（比如說(shuō)圖標(biāo)，圖表等），圖像質(zhì)量相對(duì)較低，文件容量小(遇見(jiàn)有簡(jiǎn)單動(dòng)畫(huà)需求的圖標(biāo)推薦使用GIF)。JPEG：有背景色的圖標(biāo)一般都用這個(gè)格式，有損壓縮，不支持透明色。圖像質(zhì)量和文件大小根據(jù)壓縮級(jí)數(shù)而成正比，壓縮越大文件越小圖像質(zhì)量就很低，相反則文件大質(zhì)量高。PNG-8和PNG-24：兩種格式均支持透明色，不支持動(dòng)畫(huà)。PNG-24采用無(wú)損壓縮，圖像質(zhì)量高文件容量大，適用于對(duì)畫(huà)面細(xì)節(jié)要求非常高的情況下。（如果沒(méi)有動(dòng)畫(huà)和網(wǎng)速限制的情況下，推薦使用PNG-24格式作為圖標(biāo)的保存格式）。PNG-8是一種有損壓縮格式，壓縮方式類(lèi)似gif。在使用較少顏色變化的畫(huà)面中，可使用此種格式。Icon：一般用于系統(tǒng)圖標(biāo)、軟件圖標(biāo)等，這種圖標(biāo)擴(kuò)展名為*.icon、*.ico。常見(jiàn)用于CS架構(gòu)程序圖標(biāo)。無(wú)論何種圖標(biāo)都須是支持32位的，且邊緣平滑。正例：下列圖標(biāo)均為32位邊緣平滑的效果。如下圖所示。反例：下列圖標(biāo)效果沒(méi)有達(dá)到32位邊緣平滑的效果，導(dǎo)致視覺(jué)效果不清晰顏色不飽滿，使圖標(biāo)失去原有質(zhì)感。如下圖所示。尺寸大?。合到y(tǒng)中圖標(biāo)的尺寸大小方面，可根據(jù)當(dāng)時(shí)所在不同的界面欄目來(lái)調(diào)整不同的大小尺寸，完整一套包括16x16、32x32、64x64和128x128px等尺寸，需要嚴(yán)格遵守寬高等比的方式來(lái)進(jìn)行縮放。如下圖所示。結(jié)構(gòu)形狀：明確圖標(biāo)的結(jié)構(gòu)、形狀和細(xì)節(jié)，統(tǒng)一視角、倒角、材質(zhì),使一套圖標(biāo)能在外形結(jié)構(gòu)上保持一致。正例：下列圖標(biāo)在視角、倒角和材質(zhì)上都保持了一致性。如下圖所示。反例：下列紅框中的圖標(biāo)，雖然顏色和風(fēng)格是一個(gè)系列的，但沒(méi)有滿足上述的條件，沒(méi)有保持一致性。如下圖所示。視覺(jué)效果：系統(tǒng)中的圖標(biāo)可以使用燈光、特效、陰影和立體等效果，但需要明確效果的展現(xiàn)方式，使一套圖標(biāo)在視覺(jué)效果上能夠統(tǒng)一；正例：這組圖標(biāo)充分展現(xiàn)了立體感和光感陰影上的特效，5個(gè)圖標(biāo)完全一致。如下圖所示。反例：這組圖在設(shè)計(jì)風(fēng)格上和顏色上都是一致的，同樣具有光感和立體效果，但紅框內(nèi)的圖標(biāo)陰影方向不一致。如下圖所示。圖標(biāo)色彩：系統(tǒng)中圖標(biāo)的色值在規(guī)范中明確規(guī)定，可根據(jù)頁(yè)面展現(xiàn)需要調(diào)配其他顏色，顏色數(shù)量避免超過(guò)三種。正例：下列圖標(biāo)主色調(diào)為綠色，黃色為輔助色，整體不超過(guò)三種顏色。如下圖所示。顏色參數(shù)(更多請(qǐng)看.1色值規(guī)范)反例：這組圖標(biāo)本身來(lái)說(shuō)并沒(méi)有太多的問(wèn)題，但顏色過(guò)多，過(guò)于花哨，不適合在同一系統(tǒng)中使用。如下圖所示。換膚設(shè)計(jì)理念不同的用戶可以通過(guò)“換膚”的方式來(lái)滿足個(gè)人喜好，提高用戶體驗(yàn)。在進(jìn)行“界面皮膚”的設(shè)計(jì)時(shí)，應(yīng)遵循以下理念：換膚功能應(yīng)簡(jiǎn)單易用：系統(tǒng)提供多個(gè)外部樣式表文件，用戶選擇不同的網(wǎng)頁(yè)樣式時(shí)通過(guò)程序修改網(wǎng)頁(yè)依賴(lài)的樣式文件，從而達(dá)到為網(wǎng)頁(yè)換膚的目的。換膚只針對(duì)于頁(yè)面顯示風(fēng)格的調(diào)整：頁(yè)面結(jié)構(gòu)不變，內(nèi)容不變，變的是頁(yè)面背景顏色，字體顏色，Icon等，為了保持頁(yè)面風(fēng)格一致，設(shè)計(jì)皮膚時(shí)必須遵循這個(gè)規(guī)則，可以設(shè)計(jì)多種風(fēng)格的皮膚，但是不能在同一皮膚里出現(xiàn)多種風(fēng)格。設(shè)計(jì)規(guī)范換膚只是對(duì)背景顏色的調(diào)整，其頁(yè)面內(nèi)容和頁(yè)面結(jié)構(gòu)不變：頁(yè)面換膚主要涉及到的頁(yè)面元素包括Logo，TitleBg，banner，button，WebBg，Icon等。不管皮膚怎么設(shè)計(jì)，頁(yè)面的內(nèi)容和框架始終是不會(huì)改變的，可以改變Logo，TitleBg，banner，button，WebBg，Icon的顏色，但是不能改變頁(yè)面的內(nèi)容和布局。皮膚風(fēng)格要統(tǒng)一：換膚是對(duì)信息系統(tǒng)色彩的改變，在同一種皮膚內(nèi)避免出現(xiàn)多種色調(diào)，在設(shè)計(jì)皮膚時(shí)要統(tǒng)一風(fēng)格，一個(gè)色系顏色不能相差太大，同一種風(fēng)格里不能出現(xiàn)多個(gè)色系。如下圖所示：顏色風(fēng)格要統(tǒng)一，單色都是單色，漸變都是漸變。下圖所示正例。（標(biāo)題欄背景顏色統(tǒng)一）下圖所示反例。（標(biāo)題欄背景顏色不統(tǒng)一）ICON更換必須謹(jǐn)慎：涉及到圖標(biāo)更換的時(shí)候，風(fēng)格必須要保持一致。圖標(biāo)的更換要符合實(shí)際內(nèi)容，否則可能會(huì)影響用戶的實(shí)際操作，圖標(biāo)的設(shè)計(jì)風(fēng)格必須一致，要遵循頁(yè)面色調(diào)風(fēng)格。比如：圖標(biāo)設(shè)計(jì)風(fēng)格不統(tǒng)一，如下圖所示。比如：圖標(biāo)表達(dá)不合理，如下圖所示。所設(shè)計(jì)的換膚元素必須滿足現(xiàn)有系統(tǒng)的布局尺寸：換膚需要根據(jù)頁(yè)面元素尺寸自適應(yīng)，換膚必須保證頁(yè)面元素的完整性。所設(shè)計(jì)的換膚元素必須使用戶能夠順利閱讀：盡量不要使用色彩反差太大的顏色。不合理的色彩搭配，會(huì)讓用戶反感并產(chǎn)生抵觸心理。換膚元素要承托出頁(yè)面內(nèi)容，同時(shí)也要使整個(gè)頁(yè)面表現(xiàn)的整潔干凈。下圖所示正例。下圖所示反例。建議如下的控件類(lèi)型可以進(jìn)行換膚：頁(yè)面頭部（Head）：對(duì)頭部的背景色調(diào)進(jìn)行修改調(diào)整，系統(tǒng)名稱(chēng)內(nèi)容和LOGO色彩、比例不發(fā)生改變。如下圖所示：窗口背景：界面外框主體背景。比如：背景換膚。通用按鈕：最小化按鈕（三種狀態(tài)）、最大化按鈕（三種狀態(tài)）、恢復(fù)按鈕（三種狀態(tài)）、通用按鈕背景（三種狀態(tài)）、主界面菜單按鈕（三種狀態(tài)）。彈出框：彈出框通常會(huì)出現(xiàn)在屏幕的正中央位置，框體顏色邊框、標(biāo)題欄均需要進(jìn)行顏色更換。表格：用來(lái)顯示數(shù)據(jù)，通常用顏色來(lái)劃分?jǐn)?shù)據(jù)的類(lèi)型和功能，表格的顏色可以改變，可以設(shè)置表格的單行、多行、標(biāo)題欄的背景顏色。導(dǎo)航菜單：對(duì)導(dǎo)航菜單顏色換膚不要用黑白灰，盡量使用能突出導(dǎo)航文字的顏色。標(biāo)簽欄：標(biāo)簽欄顏色對(duì)比層次要鮮明，可以清晰區(qū)分激活欄和非激活欄?？丶?biāo)準(zhǔn)容器控件指能容納其它控件的控件。當(dāng)文字、圖片和視頻等控件想要在窗體中展現(xiàn)時(shí)，就需要先設(shè)置一個(gè)容器控件來(lái)設(shè)定“場(chǎng)地”區(qū)域,來(lái)容納這些控件。分組框分組框（GroupBox）是圍繞在一組相關(guān)控件周?chē)膸?biāo)簽的矩形邊框。它提供了一種通過(guò)視覺(jué)展示控件關(guān)系的方法。除了可能為一組控件提供訪問(wèn)鍵（accesskey）外，沒(méi)有其他的功能。如下圖所示為典型的分組框：使用場(chǎng)景分組中有多個(gè)控件的情況：如果不是，則應(yīng)改用普通的文本標(biāo)簽?？丶g的聯(lián)系邏輯應(yīng)清晰。通過(guò)分隔符來(lái)有效地表達(dá)這種關(guān)系應(yīng)該使用分隔符。分隔符是一條水平直線，用于歸攏其下方的控件。分隔符可使外觀更加簡(jiǎn)單、干凈。與分組框不同的是，分隔符最適用于鋪滿整個(gè)寬度的情況。如下圖所示：使用規(guī)范不要嵌套分組框：在分組框內(nèi)，應(yīng)通過(guò)布局來(lái)展現(xiàn)控件之間的關(guān)系。如下圖所示反例：在這個(gè)示例中，嵌套的分組框造成了視覺(jué)上的混亂。正確示例如下圖所示：在這個(gè)示例中，同樣的控件關(guān)系換用布局方式來(lái)展現(xiàn)。不要將控件用作分組框的標(biāo)簽：如果分組框內(nèi)所有控件的可用和禁用都由一個(gè)復(fù)選框控制的話，那么可以使用這個(gè)復(fù)選框作為分組框的標(biāo)簽。如下圖所示標(biāo)紅處錯(cuò)誤反例：在這個(gè)示例中，下拉列表被錯(cuò)誤的用于分組框。這種情況下應(yīng)當(dāng)換用選項(xiàng)卡。如下圖所示正確的示例：在這個(gè)示例中，所有的控件就是一個(gè)復(fù)選框所以不需要再添加一個(gè)分組框。不要禁用分組框：若要表明一組控件當(dāng)前均不適用，應(yīng)禁用分組框內(nèi)的所有控件，而不要禁用分組框本身。應(yīng)當(dāng)為所有的分組框添加標(biāo)簽。分組框標(biāo)簽措辭應(yīng)當(dāng)準(zhǔn)確，不要在標(biāo)簽中使用說(shuō)明性文本。如果需要的話，可以將說(shuō)明性文本放在分組框內(nèi)。不要在用戶界面文本中標(biāo)明下面使用的是分組框，用戶不需要關(guān)心使用的是哪種控件。選項(xiàng)卡選項(xiàng)卡是用多個(gè)標(biāo)簽頁(yè)區(qū)分不同選項(xiàng)功能的窗口。使用場(chǎng)景能將控件放置于單一一個(gè)整體的頁(yè)面中，則應(yīng)使用單頁(yè)。只有一個(gè)選項(xiàng)卡的情況下，使用單頁(yè)。各選項(xiàng)卡之間沒(méi)有直接明顯的聯(lián)系，將相關(guān)信息放置在單頁(yè)中。選項(xiàng)卡相互之間地位平等，使用漸進(jìn)展開(kāi)或子對(duì)話框來(lái)顯示相關(guān)信息。使用模式動(dòng)態(tài)窗口界面：與滾動(dòng)條類(lèi)似，選項(xiàng)卡可以用于增大窗口界面尺寸以顯示相關(guān)的信息。多視圖：與分割按鈕或下拉列表類(lèi)似，選項(xiàng)卡可以用于為相同或相關(guān)信息顯示不同的視圖。交互規(guī)范在用戶不縮小瀏覽器的前提下，不要在橫向選項(xiàng)卡上出現(xiàn)水平滾動(dòng)條。水平滾動(dòng)不容易被發(fā)現(xiàn)。如下圖正確示例：該選項(xiàng)卡沒(méi)有出現(xiàn)滾動(dòng)條。如下圖錯(cuò)誤反例：下圖中的選項(xiàng)卡出現(xiàn)了滾動(dòng)條。所有選項(xiàng)卡可以排列在一行中。確保選項(xiàng)卡易于區(qū)分與其他控件。不要為切換選項(xiàng)卡添加效果。選項(xiàng)卡可以以任何順序進(jìn)行訪問(wèn)。更改當(dāng)前選項(xiàng)卡不應(yīng)該帶有任何副作用（等待，消息提示，警告）。不要為最后選中的選項(xiàng)卡賦予特殊含義。選項(xiàng)卡的選擇功能只用于導(dǎo)航，用戶最后的選項(xiàng)卡選擇并非一項(xiàng)設(shè)置。不要使一個(gè)頁(yè)面上的聯(lián)動(dòng)效果依賴(lài)于其他頁(yè)面。相互依賴(lài)的效果應(yīng)當(dāng)放置在相同的頁(yè)面上。應(yīng)當(dāng)維持并默認(rèn)用戶的操作習(xí)慣。如果沒(méi)有特殊需求，系統(tǒng)默認(rèn)選擇第一頁(yè)。動(dòng)態(tài)窗口界面模式：不要在選項(xiàng)卡頁(yè)上使用橫向滾動(dòng)條。選項(xiàng)卡的功能與滾動(dòng)條類(lèi)似——都是增加窗口的有效面積。使用一種機(jī)制足矣。如果一個(gè)選項(xiàng)卡在當(dāng)前上下文中不適用且用戶也并不期望它可用的話，應(yīng)當(dāng)將其移除。這么做能夠簡(jiǎn)化用戶界面。多視圖模式：在選項(xiàng)卡標(biāo)簽上出現(xiàn)所要描述的視圖或文檔。避免過(guò)長(zhǎng)的選項(xiàng)卡名稱(chēng)。如果必要，可以通過(guò)限制最大名稱(chēng)長(zhǎng)度，或使用省略號(hào)截?cái)囡@示選項(xiàng)卡標(biāo)簽這兩種方法。如果一個(gè)選項(xiàng)卡在當(dāng)前不可用，則將其移除。標(biāo)簽基于選項(xiàng)卡的模式來(lái)書(shū)寫(xiě)標(biāo)簽。使用名詞而非動(dòng)詞，不帶句末標(biāo)點(diǎn)。（中英文的的使用根據(jù)實(shí)際的業(yè)務(wù)需求來(lái)決定）。使用簡(jiǎn)明的選項(xiàng)卡標(biāo)簽。使用一兩個(gè)能夠清晰描述頁(yè)面內(nèi)容的詞（根據(jù)實(shí)際業(yè)務(wù)情況，中英文均可以）。使用明確、有意義的選項(xiàng)卡標(biāo)簽。避免一般性的選項(xiàng)卡標(biāo)簽，比如“常規(guī)”、“高級(jí)”或“設(shè)置”。應(yīng)盡可能為標(biāo)簽文本應(yīng)用粗體樣式。手風(fēng)琴容器手風(fēng)琴容器是一個(gè)用來(lái)展示多個(gè)面板的控件，這些面板同時(shí)只能展開(kāi)一項(xiàng)（也可以一項(xiàng)都不展開(kāi)），如下圖所示：使用場(chǎng)景用戶不必在所有的情況下，同時(shí)看到這些信息。則應(yīng)使用“手風(fēng)琴容器控件”漸進(jìn)展開(kāi)來(lái)顯示信息，并使用戶可以方便地訪問(wèn)詳細(xì)信息。如果頁(yè)面信息默認(rèn)是可見(jiàn)的，用戶需要將其隱藏時(shí)，使用手風(fēng)琴控件。增加窗口界面的有效使用率，以顯示更多相關(guān)的信息使用模式原位展開(kāi)用戶界面；如下圖所示：點(diǎn)擊標(biāo)題內(nèi)容切換效果，只展示一個(gè)內(nèi)容區(qū)域。帶有功能菜單的手風(fēng)琴容器。視覺(jué)規(guī)范不要水平滾動(dòng)菜單選項(xiàng)，水平滾動(dòng)不容易被注意?？梢蕴砑哟怪睗L動(dòng)條。如下圖所示：橫向手風(fēng)琴控件的標(biāo)簽名稱(chēng)以居中顯示為佳，也可根據(jù)文字長(zhǎng)度情況，以居中對(duì)齊為原則，做出調(diào)整。如下圖所示：縱向手風(fēng)琴控件的標(biāo)簽名稱(chēng)以頂部對(duì)齊顯示為佳，也可根據(jù)文字長(zhǎng)度情況，以頂部對(duì)齊為原則，做出調(diào)整，若有其他如數(shù)字、備注等信息需要在菜單項(xiàng)上顯示以底部居中對(duì)齊。如下圖所示：交互規(guī)范根據(jù)其用途選擇手風(fēng)琴漸進(jìn)展開(kāi)模式。不要出現(xiàn)過(guò)多的選項(xiàng)，過(guò)多的容器影響整體的布局，也不方便用戶操作。菜單項(xiàng)相互之間處于平等地位，可以以任何順序進(jìn)行訪問(wèn)。鼠標(biāo)移動(dòng)到菜單項(xiàng)上或者點(diǎn)擊時(shí)，菜單才會(huì)滑動(dòng)展開(kāi)，否則菜單內(nèi)容將折疊。標(biāo)簽使用簡(jiǎn)明的選項(xiàng)標(biāo)簽。使用能夠清晰描述頁(yè)面內(nèi)容的名詞，不帶句末標(biāo)點(diǎn)（中英文根據(jù)實(shí)際業(yè)務(wù)需求來(lái)判斷）。彈出窗口窗口是把顯示屏幕劃分成許多的框，每個(gè)窗口負(fù)責(zé)顯示和處理某一類(lèi)信息。用戶可隨意在任何窗口上工作，并在各窗口間瀏覽信息。使用場(chǎng)景當(dāng)用戶操作錯(cuò)誤或者提示步驟等信息，系統(tǒng)需要彈出窗口時(shí)。頁(yè)面根據(jù)需要可展示多個(gè)信息窗口。該頁(yè)面需要更多的顯示信息，并通過(guò)彈出框的形式顯示信息。使用模式提示用戶進(jìn)一步完成操作提示窗口。刪除操作中需要給出操作警告或者提醒。如下圖所示：確認(rèn)刪除操作需要給出操作結(jié)果提示。如下圖所示：需要更多的操作。屏幕顯示的范圍是有限的，許多功能通過(guò)折疊，或者彈出方式展現(xiàn)窗口內(nèi)容。如下圖所示：隱藏式窗口。通過(guò)鼠標(biāo)事件進(jìn)行顯示窗口。如下圖所示：視覺(jué)規(guī)范圖標(biāo)：錯(cuò)誤操作或者警告提示應(yīng)使用圖標(biāo)，便于識(shí)別。布局：沒(méi)有特殊要求推薦顯示在頁(yè)面的中間。交互規(guī)范同時(shí)出現(xiàn)關(guān)聯(lián)的二次操作或者多次操作，當(dāng)前激活窗口應(yīng)該鎖定在最前端。如下圖所示：如果內(nèi)容是限制的，請(qǐng)避免使用最大化操作，避免窗口浪費(fèi)。存在與當(dāng)前頁(yè)面關(guān)聯(lián)的窗口，使用除窗口以外的屏蔽功能并給出置灰效果，避免用戶誤操作。?？咳萜髦缚梢栽谌萜鲀?nèi)部、緊靠組件的上邊緣、下邊緣、左邊緣或右邊緣放置一個(gè)組件的容器。使用場(chǎng)景當(dāng)需要某個(gè)容器顯示在畫(huà)面中時(shí)，可以采用?？咳萜?，比如工具欄，狀態(tài)欄等，可以設(shè)置自動(dòng)隱藏，固定顯示等。使用模式底部停靠：懸浮于底部位置，可以設(shè)置自動(dòng)隱藏或是固定顯示。如下圖所示：側(cè)邊?？浚簯腋∮趦蓚?cè)，可以設(shè)置自動(dòng)隱藏或固定顯示。如下圖所示：視覺(jué)規(guī)范畫(huà)面不可有過(guò)多的?？咳萜?，過(guò)多容易造成視覺(jué)混亂。一般來(lái)說(shuō)，?？咳萜髦胁灰偾短走^(guò)于復(fù)雜的容器，避免在?？咳萜髦性谇短淄？咳萜?。?？咳萜饕话阃？吭诮缑孢吘?，大小要適中，風(fēng)格與畫(huà)面固有風(fēng)格盡量保持一致。交互規(guī)范當(dāng)點(diǎn)擊某一組件彈出?？咳萜鲿r(shí)，?？康娜萜鞅M量靠近所點(diǎn)擊的組件。?？咳萜骺梢噪S著畫(huà)面尺寸的變化同步變化。?？咳萜魃系目丶袷叵鄳?yīng)的控件規(guī)范，操作要方便。?？咳萜鞯墓δ苕I要有說(shuō)明，比如關(guān)閉，固定，自動(dòng)隱藏等。用“click（單擊）”描述用戶的交互行為。選擇器控件指提供選擇操作的控件。例如：?jiǎn)芜x，復(fù)選；“確定”和“取消”按鈕。折疊式菜單默認(rèn)情況為折疊狀態(tài)，當(dāng)瀏覽者將鼠標(biāo)移動(dòng)或者點(diǎn)擊時(shí)，菜單才會(huì)滾動(dòng)展開(kāi)子菜單。使用場(chǎng)景在網(wǎng)頁(yè)展示平面有限的情況下，可以使用折疊菜單。在頁(yè)面最上方，可用于導(dǎo)航菜單使用?？梢噪[藏導(dǎo)航菜單的子菜單，方便用戶布局。使用模式用于導(dǎo)航菜單使用。以功能化或者模塊化，用戶一目了然，方便用戶直接找到需要的功能或者其他頁(yè)面。如下圖所示：工具欄折疊菜單。將同一類(lèi)別的功能統(tǒng)一在同一個(gè)父節(jié)點(diǎn)下。如下圖所示：功能化折疊菜單（百葉窗式菜單）。將展示擁擠的功能或者模塊統(tǒng)一到大的功能菜單下。如下圖所示：視覺(jué)規(guī)范折疊式菜單完全展開(kāi)時(shí)，進(jìn)行寬度的適當(dāng)調(diào)整，避免出現(xiàn)水平滾動(dòng)條。右向應(yīng)當(dāng)預(yù)留適當(dāng)長(zhǎng)度以便于子菜單顯示。需要設(shè)計(jì)選中或者劃過(guò)的效果。若選中樹(shù)形菜單中的一項(xiàng)，須提供一個(gè)選中的狀態(tài)（背景色變換、下劃線或打鉤圖標(biāo)識(shí)別），突出用戶所在的位置。折疊式菜單中使用的圖標(biāo)尺寸為：16*16px。調(diào)整折疊式菜單的高度避免出現(xiàn)垂直滾動(dòng)。為了消除縱向滾動(dòng)條，可以考慮調(diào)整列表框的高度。交互規(guī)范考慮提供鼠標(biāo)懸停的功能。鼠標(biāo)懸停后可以預(yù)覽該菜單下的內(nèi)容。禁止雙擊操作。應(yīng)當(dāng)始終有一個(gè)命令按鈕或快捷菜單命令具有相同的效果。如果列表項(xiàng)需要進(jìn)一步解釋說(shuō)明其含義，應(yīng)當(dāng)通過(guò)信息提示來(lái)提供解釋說(shuō)明。標(biāo)簽應(yīng)當(dāng)為所有視圖添加標(biāo)簽。標(biāo)簽文本應(yīng)當(dāng)為單詞或短語(yǔ)，而不是句子。應(yīng)當(dāng)使用靜態(tài)文本。根據(jù)實(shí)際業(yè)務(wù)需求來(lái)設(shè)置分配唯一的訪問(wèn)鍵。將標(biāo)簽放置于控件的左側(cè)或上方，并將其與控件的左邊對(duì)齊。對(duì)于多選樹(shù)形視圖，應(yīng)明確指明該控件可以多選。復(fù)選框復(fù)選框，也叫做CheckBox，它可以通過(guò)其屬性和方法完成復(fù)選的操作。使用場(chǎng)景復(fù)選框是用于切換選項(xiàng)的選擇狀態(tài)，或者是選擇/取消選擇一個(gè)項(xiàng)目。選項(xiàng)展示的是靜態(tài)的文本選項(xiàng)，而非數(shù)據(jù)。對(duì)于數(shù)據(jù)，應(yīng)當(dāng)使用列表框，或是多選列表框。使用模式單個(gè)選項(xiàng)；用于選擇單個(gè)選項(xiàng)的單個(gè)復(fù)選框。如下圖所示:獨(dú)立選項(xiàng)（不選或多選）；用于選擇零個(gè)或多個(gè)選項(xiàng)的一組復(fù)選框。如下圖所示:關(guān)聯(lián)選項(xiàng)（一項(xiàng)或多項(xiàng)）；也可用于選擇一個(gè)或多個(gè)選項(xiàng)的一組復(fù)選框，可以呈現(xiàn)一組相關(guān)聯(lián)的選項(xiàng)。如下圖所示:混合選項(xiàng)；除了選中和未選中狀態(tài)外，復(fù)選框還有用于多選的混合狀態(tài)。如下圖所示：交互規(guī)范組合使用時(shí)，用戶必須至少選擇其中一個(gè)。應(yīng)使用一組復(fù)選框，并當(dāng)一個(gè)選項(xiàng)也沒(méi)有選中時(shí)彈出提示信息框，提示用戶進(jìn)行選擇。為所有復(fù)選框添加標(biāo)簽，標(biāo)簽的文本內(nèi)容要與實(shí)際意義相符合。正確的示例：復(fù)選框具有實(shí)際意義的標(biāo)簽。錯(cuò)誤的示例：復(fù)選框不具備實(shí)際意義。將相關(guān)的復(fù)選框合并成組。將相關(guān)的選項(xiàng)合并，不相關(guān)的選項(xiàng)分開(kāi)，必要時(shí)使用多個(gè)組合。一組復(fù)選框中出現(xiàn)多個(gè)選項(xiàng)容易干擾用戶進(jìn)行選擇，同時(shí)不利于布局，建議10個(gè)以上進(jìn)行重新的組合。如圖正確的示例：一組相關(guān)但互相獨(dú)立的選項(xiàng)示例：若復(fù)選框選項(xiàng)過(guò)多，且能進(jìn)行分類(lèi)的話，必須對(duì)復(fù)選框進(jìn)行分組，避免出現(xiàn)信息閱讀混亂。以邏輯順序排列復(fù)選框，比如將高度相關(guān)的選項(xiàng)放在一起，或?qū)⒆畛Ｓ玫倪x項(xiàng)放在前面，或者遵循其他自然過(guò)程。將多個(gè)復(fù)選框垂直排列，不要水平排列。水平排列難以操作。正確示例：在這個(gè)示例中，復(fù)選框正確地進(jìn)行了對(duì)齊。如下圖所示：錯(cuò)誤示例：在這個(gè)示例中，水平對(duì)齊難以操作。如下圖所示：不要使用第三種狀態(tài)。對(duì)于每個(gè)單獨(dú)的對(duì)象來(lái)說(shuō)，要么是選中狀態(tài)，要么是未選中狀態(tài)。顯示禁用的復(fù)選框時(shí)應(yīng)使用正確的顯示狀態(tài)。即使用戶無(wú)法更改，禁用的復(fù)選框仍然傳達(dá)了一定的信息。不要將選中復(fù)選框用于執(zhí)行命令。視覺(jué)規(guī)范推薦尺寸與間距標(biāo)簽對(duì)于一組復(fù)選框來(lái)說(shuō)，應(yīng)當(dāng)使用語(yǔ)氣相同的措辭并盡量保持所有標(biāo)簽的長(zhǎng)度大致相同。標(biāo)簽文本應(yīng)當(dāng)專(zhuān)注于各選項(xiàng)的差異上。如果所有的選項(xiàng)都有相同的說(shuō)明文本，則應(yīng)將此文本移至分組標(biāo)簽中。使用肯定的表述方式。不要將標(biāo)簽表述為選中某個(gè)復(fù)選框就意味著不要執(zhí)行某操作。單選框單選框（RadioButton）用于在一組相關(guān)但互斥的選項(xiàng)中進(jìn)行選擇。選項(xiàng)應(yīng)設(shè)置一個(gè)默認(rèn)值，用戶能且只能選擇一個(gè)選項(xiàng)。一組選項(xiàng)按鈕的行為如同一個(gè)單獨(dú)的控件。效果圖如下：使用場(chǎng)景該控件是用一組相關(guān)且互斥的選項(xiàng)進(jìn)行選擇的。如果不是，則改用其他控件。只有兩個(gè)選項(xiàng)的情況下，如果兩個(gè)選項(xiàng)是對(duì)立存在的，則可以使用單選框。正確示例：在這個(gè)正確的示例中，選項(xiàng)是對(duì)立的，因此單選框更加合適。選項(xiàng)內(nèi)容不是數(shù)據(jù)或者跟上下文相關(guān)的內(nèi)容，使用單選框。對(duì)于數(shù)據(jù)應(yīng)該使用表單或者下拉列表。視覺(jué)規(guī)范交互規(guī)范為所有單選按鈕添加標(biāo)簽。以邏輯順序排列選項(xiàng)，比如從被選到的可能性從高到低、操作從簡(jiǎn)單到復(fù)雜、或者風(fēng)險(xiǎn)從低到高等等。如果沒(méi)有一個(gè)選項(xiàng)是有效的選擇，應(yīng)當(dāng)添加一個(gè)選項(xiàng)以反映該選擇，例如“無(wú)”或“不適用”。如下圖所示：最好將多個(gè)選項(xiàng)按鈕垂直排列，而非水平排列。水平排列會(huì)使得難以操作。如下圖所示：在這個(gè)示例中，單選按鈕是垂直對(duì)齊的。不要將選項(xiàng)按鈕用于分組框標(biāo)簽。盡量通過(guò)分組框?qū)芜x選項(xiàng)進(jìn)行分組，這樣可以避免屏幕出現(xiàn)混亂。不要將選中單選按鈕用于：執(zhí)行命令。顯示其他窗口，比如用于收集更多輸入的對(duì)話框。選項(xiàng)的數(shù)量在2到7個(gè)之間為最好。過(guò)多的選項(xiàng)不便于用戶使用，同時(shí)不方便布局。標(biāo)簽為所有單選按鈕添加標(biāo)簽。使用準(zhǔn)確的標(biāo)簽內(nèi)容來(lái)表述（使用中英文根據(jù)實(shí)際的業(yè)務(wù)需求來(lái)決定）。標(biāo)簽文本應(yīng)當(dāng)為短語(yǔ)，而非句子，句尾不添加標(biāo)點(diǎn)。應(yīng)當(dāng)使用語(yǔ)氣相同的措辭并盡量保持所有標(biāo)簽的長(zhǎng)度大致相同。如果所有的選項(xiàng)都有相同的說(shuō)明文本，則應(yīng)將此文本移至分組標(biāo)簽中。使用肯定的表述方式。在標(biāo)簽中僅描述選項(xiàng)。保持標(biāo)簽描述的簡(jiǎn)潔保證在提示信息和文檔中易于引用。如果需要對(duì)選項(xiàng)給出進(jìn)一步的解釋?zhuān)瑧?yīng)當(dāng)在靜態(tài)文本控件中使用完整的句子進(jìn)行解釋。在這個(gè)示例中，各選項(xiàng)通過(guò)獨(dú)立的靜態(tài)文本控件進(jìn)行了解釋。如下圖所示：如果一個(gè)選項(xiàng)是強(qiáng)烈推薦的，應(yīng)當(dāng)在標(biāo)簽中添加“(recommended)”/“（推薦）”字樣。確保添加至控件標(biāo)簽，而不是附加說(shuō)明。下拉列表下拉列表（Drop-downList）和組合框（ComboBox）用于從一組互斥值列表中進(jìn)行選擇。在標(biāo)準(zhǔn)下拉列表中，用戶只能選擇列表中列出的選項(xiàng)。使用場(chǎng)景該控件適用于從一組互斥值列表中進(jìn)行選擇的情況。要進(jìn)行多項(xiàng)選擇，應(yīng)改用多選列表。提供模糊查詢功能的下拉列表，可以使用可編輯模式的下拉列表。屏幕空間很緊張的情況下，則使用下拉列表，因?yàn)槠鋵?duì)屏幕空間的占用是固定的，而且與其包含的選項(xiàng)數(shù)量無(wú)關(guān)。對(duì)于下拉列表來(lái)說(shuō)，列表項(xiàng)的數(shù)量不會(huì)影響下拉列表的布局和使用。使用模式可編輯列表框，提供帶有模糊查詢效果的下拉列表。不可編輯的列表框。帶有“全選”或“無(wú)”的選項(xiàng)列表框。應(yīng)將表示“全選”或“無(wú)”的選項(xiàng)放在列表的開(kāi)頭，而無(wú)需考慮它與其他項(xiàng)目的順序關(guān)系。如下圖所示：帶有空白選項(xiàng)的列表框。如下圖所示：視覺(jué)規(guī)范推薦尺寸與間距用于下拉列表推薦尺寸與間距應(yīng)當(dāng)為最長(zhǎng)的有效數(shù)據(jù)選擇合適的寬度。下拉列表無(wú)法橫向滾動(dòng)，因此用戶只能看到控件中可見(jiàn)的部分。調(diào)整列表的高度以消除不必要的垂直滾動(dòng)。交互規(guī)范不要將下拉列表的更改用于：執(zhí)行命令。顯示其他窗口，比如用于收集更多輸入的對(duì)話框。動(dòng)態(tài)顯示與選中控件相關(guān)的其他控件。以邏輯順序排列列表項(xiàng)，比如將相同寬度的選項(xiàng)放在一起，或?qū)⒆畛Ｓ玫倪x項(xiàng)放在前面，或者以字母順序排列（名稱(chēng)以字母順序排列，數(shù)值則以數(shù)字大小排序，日期則以時(shí)間順序排列）。正確示例，如下圖所示：在這個(gè)示例中，列表項(xiàng)是以其空間關(guān)系排序的。錯(cuò)誤示例，如下圖所示：在這個(gè)示例中，列表項(xiàng)數(shù)量太多，因此應(yīng)當(dāng)以字母順序排列。將無(wú)選項(xiàng)置于括號(hào)內(nèi)。在這個(gè)示例中，“(無(wú))”是一個(gè)無(wú)選項(xiàng)，它只是表示該選項(xiàng)本身未被使用。正確示例，如下圖所示：錯(cuò)誤示例，如下圖所示：應(yīng)當(dāng)限制輸入文本的長(zhǎng)度。不要超過(guò)下拉列表最大選項(xiàng)的長(zhǎng)度。標(biāo)簽標(biāo)簽文本應(yīng)當(dāng)為單詞或短語(yǔ)，而不是句子，并以冒號(hào)結(jié)尾（使用中英文根據(jù)實(shí)際的業(yè)務(wù)需求來(lái)決定）。當(dāng)空間緊張時(shí)使用帶提示文本的可編輯下拉列表。如果下拉列表或組合框是附屬于選項(xiàng)按鈕或復(fù)選框的，且冒號(hào)結(jié)尾的標(biāo)簽引導(dǎo)的話，不要為該控件再使用額外的標(biāo)簽?？梢栽跇?biāo)簽之后的括號(hào)中指定單位（如“秒”或“連接”）。不要將下拉列表的內(nèi)容（或其單位標(biāo)簽）作為一個(gè)句子的一部分。列表框列表框（ListBox）控件表示一個(gè)選項(xiàng)清單，用戶可以用鼠標(biāo)選擇其中一個(gè)或者幾個(gè)選項(xiàng)。使用場(chǎng)景應(yīng)用于一個(gè)包含多個(gè)項(xiàng)目列表并且可同時(shí)顯示多個(gè)選項(xiàng)的情況。提供多項(xiàng)選擇的列表模式。使用模式單選列表用戶一次可選擇一項(xiàng)。如下圖所示:標(biāo)準(zhǔn)多選列表；用戶可選擇任意項(xiàng)，包括不選。如下圖所示：帶復(fù)選框的列表；與標(biāo)準(zhǔn)多選列表框相同的是，帶復(fù)選框的列表使得用戶能夠選擇任何數(shù)量的項(xiàng)，包括不選。如下圖所示：預(yù)覽列表；可以單選，但除了文本之外，還顯示選項(xiàng)效果的預(yù)覽。如下圖所示：添加/刪除列表；用戶可以一次添加一個(gè)或多個(gè)項(xiàng)來(lái)創(chuàng)建選項(xiàng)列表，也可以設(shè)置列表的順序（如同列表構(gòu)造器）。交互規(guī)范列表中所表示的是數(shù)據(jù)，而非程序選項(xiàng)。禁止用戶使用剪粘板復(fù)制或粘貼列表項(xiàng)。以邏輯順序排列列表項(xiàng)，比如將高度相同的選項(xiàng)放在一起，或?qū)⒆畛Ｓ玫倪x項(xiàng)放在前面，或者以字母順序排列（名稱(chēng)以字母順序排列，數(shù)值則以數(shù)字大小排序，日期則以時(shí)間順序排列）。將表示“全部”或“無(wú)”的選項(xiàng)放在列表的開(kāi)頭，而無(wú)需考慮它與其他項(xiàng)目的順序關(guān)系。不要使用空白列表項(xiàng)，應(yīng)當(dāng)用“無(wú)”選項(xiàng)來(lái)代替。用戶不知道如何解釋空白項(xiàng)，而無(wú)選項(xiàng)的含義則非常明確。正確示例：在這個(gè)示例中，改用了元選項(xiàng)“(無(wú))”。如下圖所示：錯(cuò)誤示例：在這個(gè)示例中，空白項(xiàng)的含義不明確。如下圖所示：雙擊操作應(yīng)當(dāng)是冗余的。如果用戶無(wú)法對(duì)選中項(xiàng)進(jìn)行任何后續(xù)相關(guān)操作，則不要允許選擇。當(dāng)禁用列表框時(shí)，應(yīng)當(dāng)同時(shí)禁用所有相關(guān)聯(lián)的標(biāo)簽和命令按鈕。不允許更改視圖、分組、按列排序或是改變列的寬度與順序。按鈕按鈕是用于啟動(dòng)一個(gè)即時(shí)操作的控件。典型的命令按鈕,當(dāng)按下Enter鍵時(shí)會(huì)執(zhí)行“默認(rèn)命令按鈕”。默認(rèn)按鈕是由開(kāi)發(fā)人員指定的，但對(duì)于任何一個(gè)按鈕，只需用戶將焦點(diǎn)切換到其上即可。使用場(chǎng)景該命令按鈕是用來(lái)啟動(dòng)一個(gè)即時(shí)操作。使用選項(xiàng)按鈕與常規(guī)命令按鈕的組合的情況。當(dāng)下列條件符合時(shí)，往往會(huì)用選項(xiàng)按鈕與常規(guī)命令按鈕（確定、取消）的組合來(lái)代替一組獨(dú)立的命令按鈕：存在五個(gè)或更多可能的操作。需要在決定前與選項(xiàng)進(jìn)行交互（查看附加信息）。如下圖所示:將其視為選項(xiàng)，而非不同的命令。使用模式標(biāo)準(zhǔn)命令按鈕：可以使用標(biāo)準(zhǔn)命令按鈕來(lái)啟動(dòng)一個(gè)立即操作。如下圖所示：默認(rèn)命令按鈕：窗口中的默認(rèn)命令按鈕表示當(dāng)按下Enter鍵時(shí)會(huì)被激活。每個(gè)窗口中只能有一個(gè)按鈕成為默認(rèn)按鈕。輕量級(jí)命令按鈕：輕量級(jí)命令按鈕和標(biāo)準(zhǔn)命令按鈕類(lèi)似，唯一的不同在于其邊框僅當(dāng)鼠標(biāo)懸停的時(shí)候才會(huì)顯示。如下圖所示：在這個(gè)示例中，只有將鼠標(biāo)懸停在命令上方時(shí)，呈現(xiàn)出劃過(guò)狀態(tài)，顯示出按鈕的邊框。菜單按鈕：當(dāng)需要為一組少量相關(guān)的命令使用菜單時(shí)，可使用菜單按鈕：包含一組少量相關(guān)的命令的菜單按鈕。當(dāng)菜單欄不適合出現(xiàn)在某些場(chǎng)合時(shí)應(yīng)使用菜單按鈕，如對(duì)話框、工具欄或其他不包含菜單欄的窗口等。一個(gè)倒三角形表明，單擊該按鈕將會(huì)展開(kāi)下拉菜單。如下圖所示：分割按鈕：可使用分割按鈕（SplitButton）來(lái)組合一個(gè)命令的一組變化，尤其當(dāng)其中一個(gè)命令特別常用時(shí)。已收起的分割按鈕，如下圖所示：瀏覽按鈕：可使用瀏覽按鈕來(lái)顯示對(duì)話框以便選擇有效值。如下圖所示：帶有瀏覽按鈕的文本框。對(duì)于包含多個(gè)瀏覽按鈕的窗口，可以使用它的簡(jiǎn)化版本，簡(jiǎn)化的瀏覽按鈕。如下圖所示：漸進(jìn)展開(kāi)按鈕：可使用漸進(jìn)展開(kāi)按鈕顯示或隱藏不常使用的選項(xiàng)。將不常使用的選項(xiàng)隱藏，直到需要時(shí)才顯示的做法稱(chēng)為“漸進(jìn)展開(kāi)（ProgressiveDisclosure）”。雙V形（雙箭頭形）表明了漸進(jìn)展開(kāi)方式的使用，其箭頭即指向信息顯示或隱藏的位置：?jiǎn)螕粼摪粹o后，其標(biāo)簽會(huì)發(fā)生改變，以表明下次單擊會(huì)產(chǎn)生相反的效果：視覺(jué)規(guī)范對(duì)于有文本標(biāo)簽的命令按鈕來(lái)說(shuō)，應(yīng)依據(jù)場(chǎng)景來(lái)確定寬度和高度。更多信息請(qǐng)見(jiàn)視覺(jué)規(guī)范。在每個(gè)窗口中保持按鈕寬度高度相等。如有特殊需要，應(yīng)當(dāng)按照實(shí)際情況設(shè)定。交互規(guī)范單擊命令按鈕不會(huì)立即產(chǎn)生結(jié)果時(shí)，應(yīng)當(dāng)顯示忙碌鼠標(biāo)指針。避免出現(xiàn)沒(méi)有反饋的情況，否則可能會(huì)認(rèn)為沒(méi)有操作成功而再次單擊。如果同樣的命令按鈕出現(xiàn)在多個(gè)窗口中，必須使用相同的標(biāo)簽文本、訪問(wèn)鍵及窗口位置。當(dāng)其他控件和一個(gè)命令按鈕存在互操作時(shí)，如帶有“瀏覽”按鈕的文本框，應(yīng)當(dāng)將該命令按鈕以下列四種方式中的一種進(jìn)行擺放以表示它們之間的關(guān)系：位于其他控件右側(cè)，頂端對(duì)齊。位于其他控件下側(cè)，右對(duì)齊。在互操作的控件之間垂直居中（如兩個(gè)相關(guān)的列表框中間的“添加”和“刪除”按鈕）。如果多個(gè)命令按鈕與同一個(gè)控件存在互操作時(shí)，在其他控件右側(cè)縱向排列并頂端對(duì)齊，或在控件下方橫向排列并左對(duì)齊。當(dāng)命令按鈕附屬于其他控件時(shí)，應(yīng)當(dāng)使用上述位置，并在上級(jí)控件被選中之前禁用附屬的命令按鈕。正確示例：錯(cuò)誤示例：不要使用過(guò)窄、過(guò)短或過(guò)高的帶有文本標(biāo)簽的命令按鈕，盡量使用默認(rèn)的寬度和高度。正確示例：在這個(gè)示例中，按鈕使用了55×20標(biāo)準(zhǔn)尺寸之一。錯(cuò)誤示例：在這個(gè)示例中，較標(biāo)準(zhǔn)按鈕太小。錯(cuò)誤示例：在這個(gè)示例中，按鈕上標(biāo)簽四周的空間太多。避免在命令按鈕上同時(shí)使用文本標(biāo)簽和圖形。同時(shí)使用文本和圖標(biāo)往往會(huì)增加不必要的視覺(jué)混亂，且無(wú)法更好地理解。僅當(dāng)圖形用于增進(jìn)理解的時(shí)候才考慮使用圖標(biāo)，例如當(dāng)用于命令的是標(biāo)準(zhǔn)符號(hào)或有助于形象的了解該命令的結(jié)果等等。否則，首先考慮文本，或者單獨(dú)使用公認(rèn)或標(biāo)準(zhǔn)的圖形。正確示例：在這個(gè)示例中，箭頭圖形有助于形象地了解該命令的結(jié)果。錯(cuò)誤示例：在這個(gè)示例中，“取消”圖形在文本的基礎(chǔ)上毫無(wú)用處。不要將命令按鈕用于設(shè)置狀態(tài)。應(yīng)當(dāng)改用選項(xiàng)按鈕或復(fù)選框。命令按鈕僅用于啟動(dòng)操作。分割按鈕（splitbutton）將最常用的命令作為默認(rèn)行為。如果存在多個(gè)可能的命令，不需要顯示額外信息。如果最常用的命令是上次選擇的命令，則應(yīng)將按鈕標(biāo)簽改為上次的選擇。在菜單中將默認(rèn)命令以粗體方式顯示。尤其當(dāng)默認(rèn)命令是動(dòng)態(tài)的，或分割按鈕是使用圖形來(lái)代替文本標(biāo)簽時(shí)，能夠更容易的找到默認(rèn)命令。默認(rèn)值在每個(gè)對(duì)話框上都包含一個(gè)默認(rèn)命令按鈕。將最可靠（防止數(shù)據(jù)丟失或系統(tǒng)訪問(wèn)）且最安全的命令作為默認(rèn)值。如果可靠性或安全性不是需要考慮的因素，則選擇最常用或最方便的命令。不要將破壞性操作作為默認(rèn)命令按鈕，除非有撤銷(xiāo)按鈕存在。標(biāo)簽為所有命令按鈕添加標(biāo)簽。標(biāo)簽內(nèi)容可以用一些形象化的圖形來(lái)表示。如下圖所示：（這些按鈕表示上一個(gè)，下一個(gè)，復(fù)制）對(duì)于簡(jiǎn)化的瀏覽按鈕（標(biāo)簽為“...”），其內(nèi)部標(biāo)簽應(yīng)當(dāng)為“瀏覽”。雖然傾向于使用簡(jiǎn)短的標(biāo)簽，但仍應(yīng)當(dāng)使用足夠的文本來(lái)對(duì)命令進(jìn)行充分解釋。當(dāng)對(duì)象在上下文中不太明顯時(shí)，應(yīng)當(dāng)使用直接賓語(yǔ)來(lái)描述該對(duì)象。理想情況下，應(yīng)當(dāng)不需要閱讀其他任何東西就可以理解標(biāo)簽。如下圖所示：在這個(gè)示例中，如果它的意思在上下文中顯而易見(jiàn)的話，簡(jiǎn)短的標(biāo)簽是可以接受的。在這個(gè)示例中，給動(dòng)詞加上一個(gè)名詞便于理解。正確示例：在這個(gè)示例中，該標(biāo)簽是自說(shuō)明性的。如下圖所示：標(biāo)簽應(yīng)當(dāng)以動(dòng)詞起頭，清晰描述按鈕完成的操作。不要使用句末標(biāo)點(diǎn)。下列標(biāo)準(zhǔn)標(biāo)簽在沒(méi)有動(dòng)詞的情況下使用是可以接受的：Advanced（高級(jí)）、Back（后退）、Details（詳細(xì)信息）、Forward（前進(jìn)）、Less（更少）、More（更多）、New（新建）、Next（下一步/個(gè)）、No（否）、OK（確定）、Opxions（選項(xiàng)）、Previous（上一步/個(gè)）、Properties（屬性）、Settings（設(shè)置）和Yes（是）。使用明確的標(biāo)簽。正確：在這個(gè)示例中，“打印”比確定更加明確。錯(cuò)誤：在這個(gè)示例中，應(yīng)當(dāng)使用“取消”，而非“不要打印”。如果取消后退回之前的狀態(tài)（沒(méi)有任何副作用），則將按鈕命名為“取消”；否則，應(yīng)當(dāng)命名為“關(guān)閉”（如果操作已經(jīng)完成）或“停止”（如果操作還在進(jìn)行中）來(lái)表示會(huì)完整保留當(dāng)前更改過(guò)的狀態(tài)。不要在命令按鈕的標(biāo)簽中使用“now（立即）”，因?yàn)槊町?dāng)然是立即進(jìn)行的。如下圖所示：在這個(gè)示例中，單擊該命令按鈕將打開(kāi)新窗口或頁(yè)面進(jìn)行下載。對(duì)于瀏覽按鈕來(lái)說(shuō)，當(dāng)一個(gè)窗口中有兩個(gè)以上的瀏覽按鈕時(shí)，應(yīng)當(dāng)使用簡(jiǎn)化的瀏覽按鈕（標(biāo)簽為“...”）。當(dāng)你想在網(wǎng)格表中顯示瀏覽按鈕時(shí)，應(yīng)當(dāng)始終使用簡(jiǎn)化版。時(shí)間選擇器支持年月日的日歷組件，如果需要支持年月日時(shí)分秒可以在此基礎(chǔ)上擴(kuò)展，但是顯示風(fēng)格樣式應(yīng)完全一致。如圖所示:使用場(chǎng)景控件可以用于在瀏覽器中顯示日歷。經(jīng)常需要輸入時(shí)間，特別是在進(jìn)行查詢、統(tǒng)計(jì)的時(shí)候，時(shí)間限定更為重要。交互規(guī)范控件中不要出現(xiàn)橫向及縱向滾動(dòng)條。如下圖所示：文本框中默認(rèn)顯示當(dāng)前系統(tǒng)日期,為可編輯項(xiàng)。日期格式為：YYYY-MM-DD。下拉選項(xiàng)中默認(rèn)顯示系統(tǒng)日期和時(shí)間。如下圖所示：該屬性窗口一行包含7天。本月的日期為亮顯，前后月日期置灰?？丶刑砑游⒄{(diào)框來(lái)調(diào)整年月和時(shí)間。如上圖中的紅框所示。當(dāng)點(diǎn)擊文本框時(shí)展開(kāi)下拉選項(xiàng)，顯示相關(guān)信息。文本框中顯示所選日期時(shí)間。標(biāo)簽文本框標(biāo)簽：標(biāo)簽文本應(yīng)當(dāng)為單詞或短語(yǔ)，而不是句子，以冒號(hào)結(jié)尾，并使用靜態(tài)文本。列表視圖列表視圖用于通過(guò)單選或多選的方式，查看并操作一個(gè)數(shù)據(jù)對(duì)象集合。使用場(chǎng)景當(dāng)以表格形式分頁(yè)展示數(shù)據(jù)集時(shí)，可以使用列表視圖。使用模式提供多列的展示效果，方便布局。視覺(jué)規(guī)范調(diào)整列表視圖的高度，顯示整數(shù)個(gè)列表項(xiàng)。避免縱向截?cái)嗔斜眄?xiàng)。調(diào)整列表視圖的尺寸，消除不必要的垂直與水平滾動(dòng)。如果把列表視圖稍稍加大可以消除垂直滾動(dòng)條的話，可以考慮調(diào)整列表視圖的尺寸。在窗口模式下，如果增大列表視圖，應(yīng)當(dāng)使列表視圖及其父窗口可以縮放。交互規(guī)范避免呈現(xiàn)空的列表視圖。應(yīng)當(dāng)用說(shuō)明文本或示例項(xiàng)來(lái)初始化該列表。以邏輯順序排列列表項(xiàng)。名稱(chēng)以字母順序排列，數(shù)值則以數(shù)字大小排序，日期則以時(shí)間順序排列。正例示圖：按字母順序排序，如下圖所示：按時(shí)間排序，如下圖所示：可以更改排列順序。如果列表項(xiàng)很多或者使用非默認(rèn)的排序方法時(shí)更容易找到需要的項(xiàng)目，排序則非常重要。正例：按照一定的需求來(lái)排序標(biāo)簽保持列標(biāo)題標(biāo)簽簡(jiǎn)潔，使用不帶句末標(biāo)點(diǎn)的單個(gè)名詞或名詞短語(yǔ)。分別將列標(biāo)題和其數(shù)據(jù)以相同的方式對(duì)齊。樹(shù)形視圖樹(shù)形視圖（TreeView）用于顯示具有層次關(guān)系的數(shù)據(jù)，數(shù)據(jù)項(xiàng)不能帶有附加信息。使用場(chǎng)景樹(shù)形視圖用于顯示具有層次關(guān)系的數(shù)據(jù)；在樹(shù)形結(jié)構(gòu)中，包含數(shù)據(jù)的對(duì)象稱(chēng)為“葉子結(jié)點(diǎn)”，而包含其他對(duì)象的則稱(chēng)為“容器結(jié)點(diǎn)”。位于最頂端的單個(gè)容器結(jié)點(diǎn)稱(chēng)為“根結(jié)點(diǎn)”?？梢酝ㄟ^(guò)單擊“擴(kuò)展器按鈕”來(lái)展開(kāi)或折疊容器結(jié)點(diǎn)。如下圖所示：需要顯示層次級(jí)別多于兩級(jí)的數(shù)據(jù)（不包括根結(jié)點(diǎn)），可以使用樹(shù)形視圖。條目為熟悉的、單獨(dú)的、自然的層次結(jié)構(gòu)分類(lèi)。不必同時(shí)看到所有的層次數(shù)據(jù)，可以使用樹(shù)形視圖使用模式僅包含容器結(jié)點(diǎn)的樹(shù)形視圖；一次可以查看并操作一個(gè)容器。如下圖所示：帶有容器及葉子結(jié)點(diǎn)的樹(shù)形視圖；能夠查看和操作容器及葉子。如下圖所示：帶復(fù)選框的樹(shù)形視圖；可任意選擇多項(xiàng)，包括不選。如下圖所示：視覺(jué)規(guī)范樹(shù)完全展開(kāi)時(shí)，應(yīng)當(dāng)調(diào)整樹(shù)形視圖的寬度以避免出現(xiàn)水平滾動(dòng)條。調(diào)整樹(shù)形視圖的高度以消除不必要的垂直滾動(dòng)。如果高級(jí)別的容器內(nèi)容較為相似的話，考慮通過(guò)視覺(jué)元素加以區(qū)別。交互規(guī)范使用最簡(jiǎn)單可行的層次結(jié)構(gòu)。在一個(gè)容器中，以邏輯順序排列各項(xiàng)。名稱(chēng)以習(xí)慣或者字母順序排列，數(shù)值則以數(shù)字大小排序，日期則以時(shí)間順序排列。如果樹(shù)是用作目錄的話，應(yīng)當(dāng)使用單個(gè)展開(kāi)屬性以簡(jiǎn)化樹(shù)的管理。這樣以來(lái)，只有樹(shù)的相關(guān)部分才會(huì)展開(kāi)。避免呈現(xiàn)空的樹(shù)形視圖。應(yīng)當(dāng)用說(shuō)明文本或可能需要的示例項(xiàng)，來(lái)初始化該樹(shù)。如果完全不需要折疊某容器結(jié)點(diǎn)的話，切勿折疊容器結(jié)點(diǎn)。這么做會(huì)增加不必要的操作性。如果加載需要的時(shí)間過(guò)長(zhǎng)，則默認(rèn)只顯示樹(shù)的第一及第二級(jí)容器。以根據(jù)需要在展開(kāi)樹(shù)的分支時(shí)加載額外的數(shù)據(jù)。如果列表項(xiàng)需要進(jìn)一步解釋?zhuān)瑧?yīng)當(dāng)通過(guò)信息提示來(lái)提供解釋說(shuō)明。標(biāo)簽應(yīng)當(dāng)為所有樹(shù)形視圖添加標(biāo)簽。標(biāo)簽文本應(yīng)當(dāng)為短語(yǔ)，而不是句子。應(yīng)當(dāng)使用靜態(tài)文本。將標(biāo)簽放置于控件的左側(cè)或上方，保持對(duì)齊。對(duì)于多選樹(shù)形視圖，應(yīng)當(dāng)使用復(fù)選框進(jìn)行提示。拖拽上傳控件支持將文件拖拽到上傳的控件中。使用場(chǎng)景選中一個(gè)或者多個(gè)文件，拖拽到指定工作區(qū)域后，該區(qū)域出現(xiàn)選中的文件列表。通常出現(xiàn)在文件上傳功能中，豐富了上傳文件選擇的操作方式。如下圖所示：文件拖入前：文件拖入后：使用模式用戶上傳附件。交互規(guī)范文件列表出現(xiàn)相關(guān)關(guān)鍵屬性。如：文件名稱(chēng)、文件大小、上傳狀態(tài)、上傳進(jìn)度等。以邏輯順序排列文件，比如從被選到的可能性從高到低、操作從簡(jiǎn)單到復(fù)雜、或者風(fēng)險(xiǎn)從低到高等等。兼容傳統(tǒng)的上傳控件的操作方式。標(biāo)簽控件界面中，如沒(méi)有上傳控件，居中位置給出具有說(shuō)明性的圖片和標(biāo)簽，要求圖片和標(biāo)簽描述清晰。通常的標(biāo)簽文本是：“將文件或文件夾拖動(dòng)到框內(nèi)”。表格控件表格在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)展現(xiàn)功能。一個(gè)表格有三個(gè)基本組成部分：表單標(biāo)簽，表單域，表單按鈕。如下圖所示：使用場(chǎng)景多表頭表格。如下圖所示：列固定表格。如下圖所示：行分組表格。如下圖所示：視覺(jué)規(guī)范多列的表單標(biāo)簽采用右對(duì)齊的方式顯示，行與行之間要對(duì)齊顯示。表單中的的分割線與外邊框尺寸：推薦為1至2px。行間距：推薦最小2px。文字尺寸為：推薦12px。文字與邊框的間距：推薦為5px。正確的示例：表單標(biāo)簽右對(duì)齊。錯(cuò)誤的示例：表單標(biāo)簽左對(duì)齊和居中對(duì)齊顯示。表單域中數(shù)字和日期部分采用右對(duì)齊的顯示方式。文本部分采用左對(duì)齊的顯示方式，如果具有特殊要求可以居中顯示。正確的示例：根據(jù)實(shí)際要求全部采用居中對(duì)齊的方式。表單域部分提供分頁(yè)功能，分頁(yè)功能在表單域緊鄰的左下方顯示。正確的示例：表單域分頁(yè)功能在左下方。如下圖所示：表單域部分提供分頁(yè)功能，每頁(yè)條數(shù)最多不要超過(guò)20條；太多的內(nèi)容不方便用戶查看。表單域中刪除數(shù)據(jù)時(shí)，要給予提示信息。防止用戶誤操作。表單標(biāo)簽部分不要出現(xiàn)水平滾動(dòng)條。不方便用戶操作。正確的示例：表單標(biāo)簽部分沒(méi)有出現(xiàn)滾動(dòng)條。如下圖所示：錯(cuò)誤的示例：表單標(biāo)簽部分有滾動(dòng)條。如下圖所示：表單標(biāo)簽可以單列、也可以多列，在“多列”顯示的時(shí)候，如果最后一行字段不夠排列整齊的話，可以補(bǔ)充空白列使區(qū)域完整。如下圖所示：表單標(biāo)簽控件可以包含多種類(lèi)型的控件如：文本框，下拉列表，復(fù)選框，單選框等。單值控件指控件中的每個(gè)位置都對(duì)應(yīng)一個(gè)確定的數(shù)值。例如進(jìn)度條和滑塊等。滑塊使用自然方向，具有滑動(dòng)效果提供數(shù)值或者進(jìn)度顯示的控件。使用場(chǎng)景對(duì)已定義的連續(xù)值（如音量或亮度）或某范圍內(nèi)的離散值（如屏幕分辨率設(shè)置）進(jìn)行設(shè)定應(yīng)當(dāng)使用滑塊。設(shè)置像一個(gè)相對(duì)量則應(yīng)使用選項(xiàng)按鈕或者是下拉或單選列表。設(shè)置是精確可知的數(shù)值則應(yīng)使用數(shù)字文本框。當(dāng)用戶在更改設(shè)置時(shí)，須立即出現(xiàn)反饋，此時(shí)應(yīng)改變滑塊的信息或狀態(tài)，也可以與文本框一起使用。例如，在進(jìn)行背景換膚設(shè)置時(shí)，用戶使用滑塊可以很方便地選擇顏色、色相、飽和度、亮度的時(shí)候可以立即看到效果。使用模式有標(biāo)簽描述的滑塊，如下圖所示：使用刻度值。如下圖紅框所示：視覺(jué)規(guī)范使用自然的方向：例如，滑塊所表現(xiàn)的真實(shí)世界中的值通常是垂直顯示的（比如溫度），建議使用垂直方向。如下圖所示。用于滑塊的推薦尺寸與間距：如下圖所示。交互規(guī)范調(diào)整滑塊的方向以符合用戶的使用習(xí)慣。例如，一般來(lái)說(shuō)，閱讀習(xí)慣是從左至右，因此對(duì)于水平滑塊來(lái)說(shuō)，應(yīng)當(dāng)把最低值放在左側(cè)，而最高值放在右側(cè)。調(diào)整控件尺寸以便于用戶選擇想要的值。取值范圍很大且用戶很可能選擇范圍某端的值的話，考慮使用非線性比例。例如，時(shí)間值可能是1分鐘、1小時(shí)、1天、1個(gè)月。使用標(biāo)簽顯示值范圍。例外：滑塊是垂直方向的，且頂端的標(biāo)簽為“最大”、“高”、“更多”或其他等情況的話，可以省略其他標(biāo)簽，因?yàn)槠浜x已經(jīng)明確。當(dāng)用戶需知所選的具體信息時(shí)，應(yīng)當(dāng)使用刻度標(biāo)記以及值標(biāo)簽。需要知道單位以明確設(shè)置的話，應(yīng)當(dāng)始終顯示值標(biāo)簽。標(biāo)簽用于明確指示所選值。如下圖所示：對(duì)于水平方向的滑塊，應(yīng)當(dāng)將刻度標(biāo)記放在滑塊下方。將值標(biāo)簽全部放在滑塊控件的下方以明確關(guān)系。正例：值標(biāo)簽全部在滑塊下方對(duì)齊。反例：值標(biāo)簽沒(méi)有在滑塊下對(duì)齊。在這個(gè)示例中，值標(biāo)簽沒(méi)有在滑塊下對(duì)齊。不要隨意更改滑塊指示器的默認(rèn)大小，要保證滑塊的美觀。正例：在這個(gè)示例中，使用的是默認(rèn)尺寸。如下圖所示：反例：在這個(gè)示例中，其尺寸比默認(rèn)的要小。如下圖所示：無(wú)須為每個(gè)刻度標(biāo)記都添加標(biāo)簽。不要將滑塊用作進(jìn)度條。當(dāng)禁用滑塊時(shí)，應(yīng)當(dāng)同時(shí)禁用所有關(guān)聯(lián)的標(biāo)簽。當(dāng)用戶需要知道大致的設(shè)置值時(shí)，應(yīng)當(dāng)使用刻度標(biāo)記。當(dāng)鼠標(biāo)選中滑塊移動(dòng)時(shí)，應(yīng)當(dāng)出現(xiàn)提示框以顯示當(dāng)前的數(shù)據(jù)值。標(biāo)簽應(yīng)當(dāng)使用以冒號(hào)結(jié)尾的靜態(tài)文本，或者是不帶句末標(biāo)點(diǎn)的分組框標(biāo)簽。對(duì)于靜態(tài)文本標(biāo)簽，應(yīng)將標(biāo)簽放置于滑塊的左側(cè)或上方。應(yīng)當(dāng)為滑塊范圍的兩端添加標(biāo)簽，除非垂直方向。確保這些標(biāo)簽是描述性且并列的。例如：最大/最小、較多/較少、低/高、弱/強(qiáng)。需要值標(biāo)簽，則顯示在滑塊上方。將文本與控件居中對(duì)齊，并包括其單位（如像素）。如下圖所示：量表量表是一個(gè)量度的靜態(tài)反應(yīng)。使用場(chǎng)景指示與進(jìn)度無(wú)關(guān)的百分比值。該模式并不是進(jìn)度條，但它是通過(guò)進(jìn)度條控件來(lái)實(shí)現(xiàn)的。量表具有特別的外觀極易與進(jìn)度條進(jìn)行區(qū)別。僅將進(jìn)度條用于表示進(jìn)度。與進(jìn)度無(wú)關(guān)時(shí)，應(yīng)當(dāng)使用量表來(lái)表示百分比。使用模式通過(guò)精確的值顯示狀態(tài)。使用的進(jìn)度條控件，量值是準(zhǔn)確的值。通過(guò)百分比值顯示狀態(tài)。使用百分比準(zhǔn)確的值。如下圖所示：用戶對(duì)精確的值不關(guān)注，可以使用百分比的方式進(jìn)行描述。視覺(jué)規(guī)范文字、圖標(biāo)等描述信息都避免與進(jìn)度條重合，或者有交集。正例：圖例中刻度、圖標(biāo)沒(méi)有與進(jìn)度條重合。如下圖所示：反例：圖例中刻度、圖標(biāo)與進(jìn)度條重合并有交集。如下圖所示：標(biāo)簽描述性標(biāo)簽。在量表的上方，靠左顯示，字體突出顯示（加粗）。數(shù)據(jù)信息標(biāo)簽。在量表的下方，靠左顯示，輔助信息（顏色稍淺）。進(jìn)度條進(jìn)度條用于查看長(zhǎng)時(shí)間操作的進(jìn)度。進(jìn)度條不僅可以顯示大致的完成百分比，也可以用于表示操作正在進(jìn)行中。使用場(chǎng)景非確定性進(jìn)度條不能確定等待時(shí)間，不能用于等待用戶去完成任務(wù)。操作非常耗時(shí)的后臺(tái)任務(wù)，用戶所關(guān)注的是它是否完成，而不是其進(jìn)度。不用進(jìn)度條，改用通知；在這種情況下，用戶可以用這段時(shí)間去做其他事情而不必盯著進(jìn)度。使用通知可以讓用戶在完成其他任務(wù)時(shí)不受打擾。像這樣耗時(shí)的操作有：打印、備份、批量數(shù)據(jù)傳輸或轉(zhuǎn)換等等。當(dāng)操作完成后，用戶能夠回放的情況下不使用進(jìn)度條；應(yīng)該使用滑塊。如下圖所示：使用模式確定性進(jìn)度條；通過(guò)從左至右進(jìn)行動(dòng)態(tài)填充表示操作的進(jìn)度。操作完成時(shí)也填充完成。如下圖所示:帶有取消或停止按鈕及動(dòng)畫(huà)模式的確定性進(jìn)度條；允許用戶中止該操作，同時(shí)包含一個(gè)動(dòng)畫(huà)，以幫助用戶將操作的效果形象化。如下圖所示：模式確定性雙進(jìn)度條；通過(guò)在第一個(gè)進(jìn)度條中顯示當(dāng)前步驟的進(jìn)度，及在第二個(gè)進(jìn)度條中顯示整體進(jìn)度，來(lái)顯示多步驟操作的進(jìn)度。如下圖所示：非確定性進(jìn)度條；通過(guò)顯示持續(xù)不斷從左至右貫穿進(jìn)度條的動(dòng)畫(huà)來(lái)指示操作正在進(jìn)行中。如下圖所示：視覺(jué)規(guī)范不要使用垂直進(jìn)度條。水平進(jìn)度條更加自然。正確的示例：水平的進(jìn)度條，如下圖所示。錯(cuò)誤的示例：垂直的進(jìn)度條，如下圖所示。明確指明結(jié)束；如果操作沒(méi)有完成，則不要讓進(jìn)度條前進(jìn)到100%。進(jìn)度條上的文字與進(jìn)度條的對(duì)齊方式：居中對(duì)齊。進(jìn)度條上的文字和當(dāng)前進(jìn)度及背景的色值色差明顯。進(jìn)度條上文字的大小不要超過(guò)進(jìn)度條的高度。始終使用系統(tǒng)推薦的進(jìn)度條高度。希望進(jìn)度條不那么顯眼的時(shí)候，可以使用最小寬度。不要使用寬度超過(guò)最大推薦寬度值的進(jìn)度條。進(jìn)度條無(wú)須填充所有可用的空間。如果窗口比進(jìn)度條的最大推薦寬度值大得多的話，則將進(jìn)度條居中。如下圖所示：推薦的最小和最大尺寸。交互規(guī)范應(yīng)當(dāng)在執(zhí)行耗時(shí)操作時(shí)提供進(jìn)度反饋。用戶應(yīng)當(dāng)不需要猜測(cè)是否操作仍在進(jìn)行。明確指示真實(shí)進(jìn)度。如果操作有進(jìn)展，進(jìn)度條則必須前進(jìn)。明確指示沒(méi)有進(jìn)度的情況。如果操作沒(méi)有進(jìn)展的話，進(jìn)度條不能前進(jìn)。不要讓用戶為了一個(gè)根本不會(huì)完成的操作而無(wú)限制地等待。提供有用的進(jìn)度細(xì)節(jié)。當(dāng)用戶需要查看時(shí)候，才有必要提供額外的進(jìn)度信息。將動(dòng)畫(huà)在進(jìn)度條上方居中顯示。如果進(jìn)度條有標(biāo)簽的話，應(yīng)將動(dòng)畫(huà)放在標(biāo)簽上方。如果進(jìn)度條右則有取消或停止按鈕的話，在居中時(shí)應(yīng)當(dāng)將這些按鈕考慮在內(nèi)。確定性進(jìn)度條交互規(guī)范：應(yīng)當(dāng)將確定模式的進(jìn)度條用于那些有確定時(shí)間界限的操作。即使其中大部分時(shí)間都無(wú)法進(jìn)行精確預(yù)測(cè)時(shí)也同樣如此。不確定模式的進(jìn)度條雖然表示正在進(jìn)行中，但無(wú)法提供任何其他信息。不要僅僅因?yàn)椴粔蚓_，就選用不確定模式的進(jìn)度條。如果能夠準(zhǔn)確計(jì)算的話，應(yīng)當(dāng)提供估計(jì)剩余時(shí)間。準(zhǔn)確的估計(jì)剩余時(shí)間是有用的，而那些差得離譜或者劇烈變化的估計(jì)值是沒(méi)用的。在給出準(zhǔn)確估計(jì)值之前先進(jìn)行一些操作，不要在初始階段顯示可能不準(zhǔn)確的估計(jì)值。不要重新啟動(dòng)進(jìn)度。如果它重新啟動(dòng)，進(jìn)度條就喪失了它的意義，因?yàn)橛脩魺o(wú)法了解整個(gè)操作什么時(shí)候會(huì)完成。相反，該操作中的各個(gè)步驟應(yīng)當(dāng)分別只占整個(gè)進(jìn)程的一部分，整個(gè)進(jìn)度條只完成一次。非確定進(jìn)度條交互規(guī)范：如果在操作進(jìn)行過(guò)程中，用戶需要的話，則應(yīng)當(dāng)提供無(wú)模式反饋。標(biāo)簽通過(guò)靜態(tài)文本控件，使用簡(jiǎn)明的標(biāo)簽，以說(shuō)明正在進(jìn)行的操作。在靜態(tài)文本中提供細(xì)節(jié)信息，數(shù)據(jù)前使用以冒號(hào)結(jié)尾的標(biāo)簽。在細(xì)節(jié)信息文本后指明單位（秒、KB等等）。操作不是由用戶直接引發(fā)，要額外使用一個(gè)標(biāo)簽來(lái)提供上下文信息并為打斷用戶的操作而致歉。微調(diào)框微調(diào)框是指用戶可以通過(guò)單擊箭頭按鈕來(lái)增量改變與其相伴的數(shù)值文本框（NumericTextBox）里的值。如下圖所示：使用場(chǎng)景控件輸入數(shù)值。例如：年齡微調(diào)框允許用戶可以手動(dòng)輸入年齡。用戶會(huì)將該值視為相對(duì)量，而非數(shù)值。精確的、已知的數(shù)值使用微調(diào)框。例如，用戶考慮將音量調(diào)節(jié)為低或中等，而不是把值設(shè)為2或者5。屏幕空間緊張。當(dāng)可以使用的空間較小時(shí)，可以選擇微調(diào)控件。提供鍵盤(pán)操作。用戶更愿意使用鍵盤(pán)。當(dāng)用戶想通過(guò)鍵盤(pán)上下鍵修改值，可以選擇微調(diào)控件。使用模式輸入較小的數(shù)值，通常在100以內(nèi)，將最小變化值設(shè)為已知或默認(rèn)值。交互規(guī)范只要微調(diào)控件符合業(yè)務(wù)邏輯性及場(chǎng)景實(shí)用性，就應(yīng)該使用。將向上的按鈕定義為：將值增大一個(gè)單位，向下的按鈕則將值減少一個(gè)單位。通常這個(gè)單位是“1”，但應(yīng)當(dāng)將其設(shè)為常見(jiàn)的最小更改值。理想情況下，微調(diào)控件應(yīng)當(dāng)涵蓋所有有效值，且應(yīng)當(dāng)比鍵入文本更加方便。在這個(gè)示例中，單擊微調(diào)控件會(huì)以0.1為單位更改值，這是最小的常見(jiàn)變化。使用更小的單位能夠涵蓋有效值選項(xiàng)范圍，但控件會(huì)變得難以使用。當(dāng)?shù)竭_(dá)有效值范圍的盡頭時(shí)，數(shù)值保持不變正例：為避免產(chǎn)生錯(cuò)誤值，不能從起始值開(kāi)始重新設(shè)置。如下圖所示：最大數(shù)值是25如果值包含分隔符，則相應(yīng)的文本框應(yīng)當(dāng)具有多個(gè)輸入焦點(diǎn)。這么做使數(shù)值段能夠分別進(jìn)行處理。如下圖所示：在這個(gè)示例中，微調(diào)控件可以控制小時(shí)、分鐘、秒的值，它們都可以獲得焦點(diǎn)。如果值包含單位，則應(yīng)當(dāng)也能夠使用微調(diào)控件來(lái)進(jìn)行更改。如下圖所示：在這個(gè)示例中，微調(diào)控件可以用于更改單位。標(biāo)簽將文本框標(biāo)簽設(shè)計(jì)規(guī)范用于對(duì)應(yīng)文本框的標(biāo)簽。不要直接為微調(diào)控件添加標(biāo)簽。地圖控件地圖控件指能提供地圖信息內(nèi)容的控件。地圖控件主要用于展示熱點(diǎn)信息和部署分布情況。如下圖所示：使用場(chǎng)景需要展示地理區(qū)域信息；需要展示熱點(diǎn)分布等內(nèi)容。交互規(guī)范縮放功能。需要能夠等比例放大縮小顯示，且定位要準(zhǔn)確。地圖標(biāo)注要清晰。地圖上的標(biāo)注要清晰，與業(yè)務(wù)需求相關(guān)的標(biāo)注要統(tǒng)一清晰。如果是通過(guò)顏色區(qū)分信息。顏色易于區(qū)分。地圖控件中必須出現(xiàn)“中華人民共和國(guó)南海區(qū)域”圖示。若業(yè)務(wù)系統(tǒng)需要在地圖上提供其他功能，則推薦圖標(biāo)的尺寸是18*18px；圖標(biāo)的排列方式:橫向或縱向，位于顯示區(qū)域的左上方；圖標(biāo)應(yīng)該提供的狀態(tài)：可用、不可用、劃過(guò)、正常四種狀態(tài)。標(biāo)簽地圖的標(biāo)注要清晰。放大、縮小地圖情況下無(wú)失真現(xiàn)象。顏色和圖標(biāo)的說(shuō)明要清晰。文字描述要簡(jiǎn)明，避免過(guò)多。文本控件指提供輸入、編輯和顯示文字或其他字符的控件。輸入文本區(qū)域輸入文本域具有顯示、輸入和編輯文本內(nèi)容的功能。使用場(chǎng)景提供用戶輸入和編輯多行各種格式的文本的功能。即有滾動(dòng)條的多行文本輸入控件，在網(wǎng)頁(yè)的提交表單中經(jīng)常用到。控件具有顯示水平和垂直滾動(dòng)條。以便能夠?qū)ξ谋具M(jìn)行滾動(dòng)，并支持使用鼠標(biāo)滾輪垂直滾動(dòng)?？梢詫?duì)文本域中文字進(jìn)行分段、段落、范圍、超鏈接和圖像等文本布局元素操作。通過(guò)對(duì)文字進(jìn)行顏色、加粗等突出顯示等，添加圖片，添加超鏈接，支持HTML標(biāo)簽輸入等。字?jǐn)?shù)限制提示和操作提示。針對(duì)數(shù)據(jù)的可維護(hù)性，對(duì)用戶輸入的字?jǐn)?shù)進(jìn)行字?jǐn)?shù)限制，超出部分需要提示用戶無(wú)法輸入并給出超出范圍提示。使用模式HTML標(biāo)簽輸入。通過(guò)使用HTML標(biāo)簽形式輸入。純文本輸入。輸入字體后，可以通過(guò)工具欄中的工具進(jìn)行修改字體的樣式，添加圖片和鏈接等操作。瀏覽模式。進(jìn)行只讀操作，只能查看里面的內(nèi)容，無(wú)法進(jìn)行編輯操作。交互規(guī)范使用字?jǐn)?shù)限制。對(duì)于多出限制的個(gè)數(shù)的字體或無(wú)法輸入時(shí)給出彈出提示。滾動(dòng)條默認(rèn)顯示。保證用戶能夠直觀的看出可供輸入和編輯多行各種格式的文本的空間范圍。避免預(yù)覽與輸入操作為同一個(gè)界面。應(yīng)當(dāng)把預(yù)覽的效果圖在彈出框中顯示。這樣的兩個(gè)界面分離避免誤操作。避免在只讀模式下提供任何的功能提示。將此提示等彈出信息屏蔽或者干脆去掉。不需要對(duì)鼠標(biāo)往目標(biāo)對(duì)象身上移動(dòng)時(shí)顯示提示。必須輸入項(xiàng)在文本框后添加紅色星號(hào)（*）標(biāo)志。標(biāo)簽提供文本展示功能，用來(lái)表示當(dāng)前控件的功能描述或者對(duì)控件進(jìn)行說(shuō)明。使用場(chǎng)景靜態(tài)文本控件，使用簡(jiǎn)明的標(biāo)簽，以說(shuō)明正在進(jìn)行的操作。該標(biāo)簽以動(dòng)詞起頭并以省略號(hào)結(jié)尾。如果該操作具有多個(gè)步驟或需要處理多個(gè)對(duì)象的話，該標(biāo)簽可以動(dòng)態(tài)改變。靜態(tài)文本進(jìn)度標(biāo)簽控件，使用數(shù)字及單位，以說(shuō)明現(xiàn)在的進(jìn)度。該標(biāo)簽一般以數(shù)字開(kāi)頭，該標(biāo)簽