界面組件級(jí)交互設(shè)計(jì)規(guī)范方案

WORD格式.整理版PAGE優(yōu)質(zhì).參考.資料界面交互設(shè)計(jì)規(guī)范——IT應(yīng)用服務(wù)產(chǎn)品界面組件級(jí)交互規(guī)范V1.0

目錄1 概述 51.1 規(guī)范的目的 51.2 規(guī)范適用的范圍 51.3 規(guī)范適用的人群 52 基本原則 62.1 一致性 62.2 簡(jiǎn)潔性 62.3 避免干擾和打斷 62.4 減輕用戶記憶負(fù)擔(dān) 62.5 及時(shí)有效的反饋 62.6 讓用戶放松心態(tài)，不怕犯錯(cuò) 73 產(chǎn)品交互通用規(guī)范 83.1 受范性指示 83.2 操作不可用狀態(tài) 84 組件規(guī)范 104.1 表格 104.2 單元格數(shù)據(jù) 154.2.1 單元格數(shù)據(jù)展示 154.2.2 通訊錄 174.3 信息列表 204.4 編號(hào)和序號(hào) 234.4.1 編號(hào) 234.4.2 序號(hào) 254.5 注冊(cè)表單 274.6 聯(lián)系方式 334.7 圖片裁切 374.7.1 固定尺寸圖片裁切 374.7.2 自定義尺寸圖片裁切 394.8 翻頁(yè) 424.9日期輸入 454.9.1 通過(guò)日歷選擇日期 454.9.2 年份跨度較大時(shí)的日期選擇 494.10 分隔 524.10.1等量條目分隔線 524.11 高級(jí)加密 554.12 進(jìn)度條 584.13 面包屑 604.14 星級(jí)評(píng)分 624.15 保留圖標(biāo) 654.16 彈出層 674.16.1非獨(dú)占焦點(diǎn)層 674.16.2獨(dú)占焦點(diǎn)層 684.16.3局部獨(dú)占焦點(diǎn)層 704.17 搜索 724.17.1模糊搜索 724.17.2精確搜索 744.18 數(shù)據(jù)添加 784.18.1添加單個(gè)文件 784.18.2添加多個(gè)文件 804.18.3添加行 834.19 排序 85修訂記錄修訂人日期版本修訂內(nèi)容概述《界面交互設(shè)計(jì)規(guī)范》對(duì)用戶與產(chǎn)品交互的各個(gè)方面做了相關(guān)的描述。該規(guī)范由“組件級(jí)”、“流程級(jí)”和“系統(tǒng)級(jí)”三個(gè)部分構(gòu)成，分別從不同的層面，為IT應(yīng)用服務(wù)產(chǎn)品的用戶界面提供規(guī)范與指導(dǎo)。規(guī)范的制定采用UCD（以用戶為中心的設(shè)計(jì)）方法，遵循ISO9241-11部分標(biāo)準(zhǔn)的要求。設(shè)計(jì)過(guò)程以用戶的使用習(xí)慣和心理需求作為出發(fā)點(diǎn)，在認(rèn)真研究并參考了國(guó)內(nèi)外各種優(yōu)秀設(shè)計(jì)的基礎(chǔ)上，制定出了適合我集團(tuán)應(yīng)用服務(wù)產(chǎn)品的設(shè)計(jì)規(guī)范。此外，為保證規(guī)范具有良好的可用性和廣泛的適用性，UE研究室對(duì)設(shè)計(jì)出的每個(gè)模式都進(jìn)行了嚴(yán)格的用戶測(cè)試，并對(duì)各組件采取了不同應(yīng)用場(chǎng)景的測(cè)試。本規(guī)范是界面交互設(shè)計(jì)規(guī)范三個(gè)部分中的基礎(chǔ)層面：組件級(jí)規(guī)范。該規(guī)范從產(chǎn)品交互的通用規(guī)則和具體組件的交互模式兩個(gè)方面進(jìn)行了規(guī)定。在每個(gè)組件規(guī)范中，給出了模式描述和擴(kuò)展描述的規(guī)范描述，供不同的應(yīng)用類型和使用場(chǎng)景選擇、組合使用。規(guī)范的目的在產(chǎn)品開(kāi)發(fā)過(guò)程中，給不同部門的相關(guān)人員提供統(tǒng)一的規(guī)范與指導(dǎo)，使溝通與合作順利有效地進(jìn)行，以保證產(chǎn)品界面的最終規(guī)范化實(shí)現(xiàn)；從一點(diǎn)一滴入手解決公司產(chǎn)品的可用性問(wèn)題：使操作更人性化，減輕用戶的認(rèn)知負(fù)擔(dān)，改善產(chǎn)品的用戶體驗(yàn)，提升產(chǎn)品的市場(chǎng)競(jìng)爭(zhēng)力；使產(chǎn)品在界面外觀和操作行為上形成一致，加強(qiáng)公司產(chǎn)品的品牌化特征。規(guī)范適用的范圍集團(tuán)內(nèi)的所有產(chǎn)品。規(guī)范適用的人群參與產(chǎn)品設(shè)計(jì)的所有人員以及測(cè)試人員等。注：從正式發(fā)文之日起屬于新項(xiàng)目范疇的必須遵循此規(guī)范，對(duì)于已有項(xiàng)目進(jìn)行重大版本升級(jí)的項(xiàng)目要遵循此規(guī)范。

規(guī)范演示網(wǎng)址：http://105:7102基本原則以下原則主要用來(lái)說(shuō)明此規(guī)范的指導(dǎo)思想與設(shè)計(jì)依據(jù)。簡(jiǎn)單描述如下，以供該文檔的閱讀者參考和使用。具體的原則描述請(qǐng)參見(jiàn)《界面設(shè)計(jì)指南》。一致性視覺(jué)一致：在同一產(chǎn)品內(nèi)，所有的同類界面元素在相同的應(yīng)用環(huán)境下，界面外觀在視覺(jué)上應(yīng)該保持一致；否則，界面外觀要予以區(qū)分；操作行為一致：類似場(chǎng)景的界面設(shè)計(jì)，其操作方式必須保持一致；當(dāng)操作行為相同時(shí)要保持視覺(jué)上的一致；當(dāng)操作行為不同時(shí)，在視覺(jué)上就一定要有所區(qū)別；外觀與使用者的預(yù)期一致：保持對(duì)象與其行為相符，保持不同作用的對(duì)象外觀的不同；視覺(jué)元素的外觀及其操作結(jié)果，必須與用戶的心理認(rèn)知相符。簡(jiǎn)潔性減輕視覺(jué)負(fù)擔(dān)：使用盡可能少的元素，不提供與當(dāng)前任務(wù)無(wú)關(guān)的信息；簡(jiǎn)明的文字表述：文字表述必須簡(jiǎn)明扼要、清晰易懂，內(nèi)涵豐富，并易于理解和記憶；操作簡(jiǎn)單：減少冗余的操作步驟。避免干擾和打斷避免干擾：明確用戶在特定界面中的首要任務(wù)和目標(biāo)，盡可能避免該界面上的視覺(jué)噪聲和其它干擾。避免打斷：讓用戶的操作連貫順暢，避免使用模態(tài)對(duì)話框（彈出的獨(dú)占焦點(diǎn)的對(duì)話框）打斷用戶的工作。減輕用戶記憶負(fù)擔(dān)認(rèn)知明確：產(chǎn)品中界面元素外觀要明晰，易于辨別；產(chǎn)品的邏輯意義要合理，導(dǎo)航要及時(shí)準(zhǔn)確；系統(tǒng)智能化：提供默認(rèn)值；幫助用戶記住盡可能多的信息，最低限度地從用戶那里索取信息；合理的隱喻和習(xí)慣用法：使用用戶熟悉的，符合使用習(xí)慣的隱喻，及通用的習(xí)慣用法，為用戶的任務(wù)提供直觀易用的界面；有效的啟示：提供具有明確引導(dǎo)性的啟示來(lái)指導(dǎo)用戶正確操作（啟示：某對(duì)象用來(lái)說(shuō)明自身可以如何使用的外觀屬性）。及時(shí)有效的反饋操作反饋：對(duì)用戶的每一步操作給出及時(shí)的反饋，告知用戶成功做了某事；受范性反饋：界面對(duì)象的設(shè)計(jì)要在視覺(jué)上能提供即時(shí)響應(yīng)鼠標(biāo)操作行為的效果；系統(tǒng)狀態(tài)反饋：系統(tǒng)需要用戶等待或系統(tǒng)出現(xiàn)錯(cuò)誤時(shí)，要及時(shí)讓用戶明白現(xiàn)狀；選擇合適的反饋形式：根據(jù)不同的情況，使用不同的反饋（如聲音、觸覺(jué)、語(yǔ)言、視覺(jué)反饋或是它們的組合）。讓用戶放松心態(tài)，不怕犯錯(cuò)允許輕松的反向操作：在適當(dāng)?shù)臅r(shí)候，盡量提供撤銷功能，使用戶可以返回到上一步操作并重新進(jìn)行選擇；讓用戶可以重新開(kāi)始：提供“恢復(fù)初始設(shè)置”選項(xiàng)，讓用戶敢于嘗試；避免輸入錯(cuò)誤：使用合適的選擇控件（單選/多選/下拉列表/列表框等），提供最有代表性的默認(rèn)選項(xiàng)，以及相應(yīng)的輸入幫助，來(lái)方便用戶準(zhǔn)確輸入信息；提供校驗(yàn)等功能：對(duì)用戶的輸入和選擇等操作進(jìn)行實(shí)時(shí)的判斷，幫助用戶及時(shí)更正錯(cuò)誤；避免埋怨：當(dāng)用戶犯錯(cuò)時(shí)，避免責(zé)怪和魯莽地打斷與關(guān)閉，要禮貌地指出錯(cuò)誤所在，并提供有用的恢復(fù)建議。產(chǎn)品交互通用規(guī)范以下為IT應(yīng)用服務(wù)產(chǎn)品的交互設(shè)計(jì)通則，是所有的交互模式必須遵守的普遍規(guī)范，用以統(tǒng)一產(chǎn)品的交互行為。（此部分規(guī)范將隨著組件模式的不斷擴(kuò)充，進(jìn)行逐步添加和完善。）受范性指示受范性是指鼠標(biāo)指針移過(guò)可點(diǎn)擊區(qū)域時(shí)可點(diǎn)擊區(qū)域的視覺(jué)變化，用以說(shuō)明該對(duì)象是可操作的以及何時(shí)可以進(jìn)行操作。對(duì)象對(duì)鼠標(biāo)指針移動(dòng)的響應(yīng)必須即時(shí)有效；響應(yīng)形式必須明確清晰（如：鼠標(biāo)移過(guò)按鈕，按鈕有被按下的效果）；受范性表現(xiàn)必須保持高度的一致：同等功能和操作的元素受范性必須相同（如：鼠標(biāo)指向鏈接文字時(shí)都做同樣的變化）；在鼠標(biāo)指針移開(kāi)時(shí)對(duì)象必須即時(shí)恢復(fù)原來(lái)狀態(tài)；命令按鈕也經(jīng)常被顯示為鏈接樣式（文本+下劃線），此時(shí)為了與普通的鏈接相區(qū)分，必須提供非常明顯的不同于鏈接的受范性指示。注：具體受范性指示的效果參見(jiàn)視覺(jué)規(guī)范。操作不可用狀態(tài)當(dāng)用戶在某些時(shí)候不能進(jìn)行某些操作時(shí)，該命令按鈕或命令文本（或其它的形式）在外觀上應(yīng)顯示為不可用狀態(tài)（如置灰），用來(lái)使界面穩(wěn)定，使用戶保持恒定和完整的思維模式，減少用戶的認(rèn)知負(fù)擔(dān)。顯示為不可用狀態(tài)的按鈕或文本必須保持與可用狀態(tài)的位置、大小、形態(tài)保持一致，僅色彩、灰度和立體效果等發(fā)生變化。操作不可用的情況主要包括：菜單性質(zhì)和導(dǎo)航性質(zhì)的操作不可用時(shí)不能隱藏，應(yīng)該顯示為不可用狀態(tài)，如下圖所示：圖STYLEREF1\s3SEQ圖\*ARABIC\s11菜單操作不可用

工具欄按鈕不可用時(shí)不能隱藏，應(yīng)該顯示為不可用狀態(tài)，如下圖所示：圖STYLEREF1\s3SEQ圖\*ARABIC\s12工具按鈕不可用當(dāng)一個(gè)操作在用戶進(jìn)行了某行為（如填寫或選擇了某選項(xiàng)時(shí)）就變?yōu)榭刹僮鳎瑒t該操作不可用時(shí)不能隱藏，應(yīng)該顯示為不可用狀態(tài)，如下圖所示：圖STYLEREF1\s3SEQ圖\*ARABIC\s13操作命令不可用注：具體不可用狀態(tài)效果見(jiàn)視覺(jué)規(guī)范。組件規(guī)范表格主要應(yīng)用于大批量數(shù)據(jù)的展示、查看、維護(hù)等方面?；A(chǔ)表格是表格本身最原始的一些屬性集合，針對(duì)表格在不同場(chǎng)景下的狀況，在擴(kuò)展設(shè)計(jì)中會(huì)一一羅列出來(lái)?！驹O(shè)計(jì)意圖】合理有效的組織數(shù)據(jù)信息；幫助用戶快速、有效的查看表格數(shù)據(jù)；幫助用戶快速、準(zhǔn)確的完成對(duì)表格的操作；【應(yīng)用條件】適用于批量數(shù)據(jù)的展示和維護(hù)；【模式描述】組成：表格標(biāo)題+表格表頭+表格行間隔線+表格行如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s11基礎(chǔ)表格應(yīng)用規(guī)范：表格的標(biāo)題：標(biāo)題文字要與其它文字有所區(qū)別，如：加粗顯示；標(biāo)題文字內(nèi)容以“內(nèi)容+操作”的形式描述，標(biāo)題文字前需要有相應(yīng)的標(biāo)題圖標(biāo)，文字與圖標(biāo)之間間隔一定的距離，如：一個(gè)半角空格；具體視覺(jué)效果參見(jiàn)《界面視覺(jué)規(guī)范》。表格的表頭與表格主體在外觀上要有區(qū)分；表格行間隔線：表格的主體內(nèi)容用表格線區(qū)分；表格線的粗細(xì)要適中，如1px?！緮U(kuò)展描述】根據(jù)應(yīng)用場(chǎng)景的不同，可以對(duì)基礎(chǔ)表格進(jìn)行擴(kuò)展；可以為表格增加數(shù)據(jù)篩選區(qū)、命令按鈕區(qū)、操作按鈕區(qū)、表格主體區(qū)、翻頁(yè)區(qū)、操作按鈕區(qū)。整體效果如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s12表格操作區(qū)分布1）標(biāo)題列排序：表格列標(biāo)題可以排序時(shí)，表格的列標(biāo)題要體現(xiàn)出當(dāng)前排序狀態(tài)，并要區(qū)分于其他列標(biāo)題顯示，如：背景和圖標(biāo)高亮顯示；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s13標(biāo)題列排序表格列標(biāo)題進(jìn)行切換時(shí)，原列標(biāo)題恢復(fù)初始狀態(tài)，切換到的列標(biāo)題顯示為排序狀態(tài)；2）表格行選中操作：表格中的第一列，既可表示對(duì)行的選擇如復(fù)選框；同時(shí)還可以用圖標(biāo)標(biāo)示數(shù)據(jù)狀態(tài)；當(dāng)兩者都有時(shí)，顯示復(fù)選框在上，圖標(biāo)被覆蓋；在對(duì)表格行進(jìn)行選中（點(diǎn)選行的任意位置即可選中）時(shí)，此行要高亮顯示，同時(shí)此行前復(fù)選框?yàn)檫x中狀態(tài)，同時(shí)還可以進(jìn)行多行選擇；需要全選時(shí)，只需勾選列標(biāo)題中的復(fù)選框即可選中當(dāng)前列表的全部行數(shù)據(jù)。3）數(shù)據(jù)篩選區(qū)：當(dāng)數(shù)據(jù)內(nèi)容可以明確的按其狀態(tài)、類別進(jìn)行劃分時(shí)，可以應(yīng)用頁(yè)簽的形式來(lái)進(jìn)行設(shè)計(jì)；頁(yè)簽總寬度在表格寬度的75%之內(nèi)為佳，超出此范圍時(shí)，需應(yīng)用其他設(shè)計(jì)形式如下拉框顯示的形式等；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s14數(shù)據(jù)篩選區(qū)當(dāng)前分類狀態(tài)的的頁(yè)簽要高亮顯示，要明顯區(qū)別于其他頁(yè)簽；頁(yè)簽內(nèi)的文字，需要簡(jiǎn)單明了，相同內(nèi)容的文字省略；如上圖中未處理（訂單）、處理中（訂單）、處理完成（訂單）；應(yīng)用頁(yè)簽設(shè)計(jì)時(shí)，頁(yè)簽類別要?jiǎng)澐置鞔_合理；如按照數(shù)據(jù)狀態(tài)或分類進(jìn)行劃分。4）命令按鈕區(qū)：針對(duì)整體頁(yè)面進(jìn)行操作或者對(duì)表格整體進(jìn)行操作的按鈕放置在此區(qū)域內(nèi)；如：導(dǎo)入、導(dǎo)出、新增等；按鈕的其它細(xì)則參見(jiàn)《界面視覺(jué)規(guī)范》。5）操作按鈕區(qū)：對(duì)表格主體的數(shù)據(jù)進(jìn)行操作的按鈕放置在此區(qū)域。如：刪除、發(fā)布、下架、上架、審核等；當(dāng)列表的數(shù)據(jù)超過(guò)一屏顯示時(shí)，在列表上方也要顯現(xiàn)操作按鈕區(qū)，方便用戶對(duì)列表進(jìn)行操作；如下圖所示：

圖STYLEREF1\s4SEQ圖\*ARABIC\s15操作按鈕區(qū)按鈕的其它細(xì)則參見(jiàn)《界面視覺(jué)規(guī)范》。6）翻頁(yè)區(qū)：當(dāng)列表中的數(shù)據(jù)量超過(guò)默認(rèn)的數(shù)據(jù)顯示條數(shù)時(shí)，應(yīng)用翻頁(yè)模式來(lái)處理多條數(shù)據(jù)的顯示；翻頁(yè)在列表下方居中顯示；翻頁(yè)的詳細(xì)功能和模式參見(jiàn)“翻頁(yè)模式組件規(guī)范”。7）單條數(shù)據(jù)操作區(qū)：對(duì)行數(shù)據(jù)進(jìn)行操作的按鈕要與操作按鈕區(qū)的按鈕視覺(jué)上要有所區(qū)分；具體參見(jiàn)《界面視覺(jué)規(guī)范》；盡量不要在此處安排太多的操作，太多的操作給使用者過(guò)多的判斷負(fù)擔(dān)。應(yīng)考慮其他的界面布局方式。8）表格列標(biāo)題區(qū)：當(dāng)表格的數(shù)據(jù)列較多，屏幕顯示已經(jīng)達(dá)到最大限度，而這些數(shù)據(jù)列又必不可少時(shí)，允許通過(guò)鼠標(biāo)拖動(dòng)的方式來(lái)對(duì)數(shù)據(jù)列的寬度進(jìn)行改變；同時(shí)可以使用橫向滾動(dòng)條；調(diào)整列寬度時(shí)，要在整體表格邊線內(nèi)進(jìn)行，以免整體頁(yè)面變形；數(shù)據(jù)項(xiàng)內(nèi)容顯示部分太長(zhǎng)時(shí)，省略多余部分并加省略號(hào)；鼠標(biāo)指針?？繒r(shí)，全部詳細(xì)內(nèi)容顯示；9）數(shù)據(jù)條目設(shè)置區(qū)：默認(rèn)顯示當(dāng)前頁(yè)面所能顯示的最大數(shù)據(jù)條目數(shù)；如：10條/頁(yè)；還要提供幾個(gè)數(shù)值選項(xiàng)，供用戶選擇；如：20、30、50；單元格數(shù)據(jù)單元格數(shù)據(jù)展示以單元格為單位的數(shù)據(jù)展示是指應(yīng)用表格的單元格來(lái)描述每個(gè)數(shù)據(jù)對(duì)象的展示形式?！驹O(shè)計(jì)意圖】讓用戶更加清晰的瀏覽信息；方便查看選中單元格的信息?！緫?yīng)用條件】適用于多數(shù)據(jù)的查看、瀏覽和操作；例如：如短信中的收信人、郵件中的收件人等?！灸Ｊ矫枋觥拷M成：如下圖所示：

圖STYLEREF1\s4SEQ圖\*ARABIC\s16單元格數(shù)據(jù)展示應(yīng)用規(guī)范：鼠標(biāo)經(jīng)過(guò)或選中此類表格的單元格時(shí)，行或列的背景色高亮顯示。此類單元格請(qǐng)支持按“Shift”鍵進(jìn)行連續(xù)選定，整行整列選定時(shí)要有箭頭圖標(biāo)反饋給用戶。此類單元格請(qǐng)支持按“Ctrl”鍵進(jìn)行間斷選定。注意事項(xiàng)：數(shù)據(jù)類表格是指表格所描述內(nèi)容是由多個(gè)數(shù)據(jù)或一組對(duì)象（每個(gè)對(duì)象至少包含兩個(gè)數(shù)據(jù)項(xiàng)）組成，對(duì)于展示某些信息的表格不屬于數(shù)據(jù)類表格。通訊錄通訊錄是以單元格數(shù)據(jù)展示形式為基礎(chǔ)的，集添加刪除修改等功能于一體的組件?！驹O(shè)計(jì)意圖】用戶不會(huì)再輸入通訊錄信息之間分隔符，更不會(huì)出現(xiàn)由于分隔符輸入不正確而導(dǎo)致的錯(cuò)誤操作；為用戶顯示人名，而不顯示地址，方便了查看，同時(shí)增加了自動(dòng)匹配，查找，將新信息增加到通訊錄和導(dǎo)出通訊錄的功能?！緫?yīng)用條件】適用于需要用戶多次填寫同類信息的地方。如：競(jìng)價(jià)通中的“關(guān)鍵詞管理”；日期格式中年份的展現(xiàn)方式；郵件、短信產(chǎn)品的收信人列表?！灸Ｊ矫枋觥拷M成：如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s17通訊錄1應(yīng)用規(guī)范：a）通訊錄中無(wú)此信息的高亮反饋通訊錄中存在姓名時(shí)表格內(nèi)只顯示姓名；通訊錄中沒(méi)有姓名只有手機(jī)號(hào)碼（或email地址）時(shí)則顯示號(hào)碼（或email地址）；姓名、手機(jī)號(hào)碼（或email地址）兩者都無(wú)的單元格自動(dòng)高亮反饋給用戶。b）默認(rèn)顯示默認(rèn)顯示表格的一個(gè)空行；如下圖所示：

圖STYLEREF1\s4SEQ圖\*ARABIC\s18通訊錄2

整行單元格數(shù)據(jù)被填滿時(shí)，表格自動(dòng)增加一行；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s19通訊錄3增加至3行時(shí)，出現(xiàn)滾動(dòng)條；如下圖：圖STYLEREF1\s4SEQ圖\*ARABIC\s110通訊錄4c）自動(dòng)匹配支持手動(dòng)輸入，可以輸入人名或地址；輸入地址時(shí)自動(dòng)匹配通訊錄中對(duì)應(yīng)的人名；d）快捷操作為高級(jí)用戶提供快捷操作,輸入新人名或新地址時(shí)，可以將其添加到通訊錄。如下圖：圖STYLEREF1\s4SEQ圖\*ARABIC\s111通訊錄5注意事項(xiàng)：使用時(shí)遇到兩個(gè)人同名時(shí)可以采用“姓名（號(hào)碼）”的方式顯示。信息列表信息列表是顯示單列信息集合的一種視圖展示?！驹O(shè)計(jì)意圖】利于信息的展示，方便使用者檢索信息；快速定位信息條目?！緫?yīng)用條件】單列信息集合；索引類的信息列表；例如：信息列表多應(yīng)用于索引類的信息列表，如：新聞列表、目錄等?！灸Ｊ矫枋觥拷M成：項(xiàng)目符號(hào)、列表行，如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s112信息列表應(yīng)用規(guī)范：項(xiàng)目符號(hào)可以是固定的符號(hào)，也可以是具有意義的圖標(biāo)；項(xiàng)目符號(hào)如果是圖標(biāo)，圖標(biāo)必須與應(yīng)用場(chǎng)景相符，盡量不使用無(wú)意義的僅為裝飾作用的視覺(jué)效果顯著的圖標(biāo)作為項(xiàng)目符號(hào)；列表行的內(nèi)容，可以為文字和圖標(biāo)，文字一般為簡(jiǎn)單的標(biāo)題；列表行的文字內(nèi)容應(yīng)該簡(jiǎn)單易懂，能夠明確的反應(yīng)所要說(shuō)明的信息。列表行內(nèi)容如果折行，行距必須小于兩個(gè)記錄行之間的段距；由于信息列表多為展示信息的條目，因此信息列表的行間距要有一點(diǎn)留白，不要給使用者造成視覺(jué)上的負(fù)擔(dān)?！緮U(kuò)展描述】組成：列表標(biāo)題、單選按鈕、多選按鈕、分隔線、翻頁(yè)，如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s113信息列表2應(yīng)用規(guī)范：列表標(biāo)題是對(duì)列表中的信息內(nèi)容的概括性標(biāo)題（標(biāo)題的寫法請(qǐng)參見(jiàn)“標(biāo)題”控件的描述）；單選按鈕，多選按鈕在需要時(shí)替換項(xiàng)目符號(hào)的位置；分隔線：在記錄行太多時(shí)需要提供分隔線（請(qǐng)參見(jiàn)“分隔線”控件中的相關(guān)描述）；翻頁(yè)（請(qǐng)參見(jiàn)“翻頁(yè)”組件中的相關(guān)描述）。編號(hào)和序號(hào)編號(hào)用來(lái)標(biāo)識(shí)某一個(gè)對(duì)象的唯一號(hào)碼。一個(gè)編號(hào)就代表著一個(gè)對(duì)象。使用編號(hào)能夠更好的幫助用戶記憶和或管理對(duì)象。如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s114編號(hào)示例【設(shè)計(jì)意圖】更好的方便用戶記憶和管理對(duì)象；合理的使用編號(hào)，能方便用戶更好的進(jìn)行溝通；【應(yīng)用條件】需要用唯一號(hào)碼來(lái)標(biāo)識(shí)對(duì)象時(shí)；具有真實(shí)、合理、有效的意義；例如：訂單列表中訂單的編號(hào)、酒店客房管理中客房的實(shí)際編號(hào)等等；【模式描述】應(yīng)用規(guī)范：編號(hào)必需代表一個(gè)對(duì)象，不要讓編號(hào)無(wú)意義的存在；如果用戶更關(guān)注編號(hào)，也就是說(shuō)編號(hào)對(duì)于用戶是第一位的，則必須提供編號(hào)。比如，酒店系統(tǒng)中對(duì)房號(hào)的關(guān)注就比人名要重要，所以編號(hào)的視覺(jué)層次應(yīng)該突出。如果用戶不常使用編號(hào)而通常更關(guān)注別的屬性；比如人名、物品名等，可以默認(rèn)不顯示編號(hào)，當(dāng)用戶需要時(shí)能夠查到編號(hào)。序號(hào)序號(hào)是用來(lái)標(biāo)識(shí)一組有序?qū)ο蟮臄?shù)字，它具有先后順序的含義。如下圖所示： 圖STYLEREF1\s4SEQ圖\*ARABIC\s115序號(hào)示例【設(shè)計(jì)意圖】使用戶更好了解對(duì)象的先后順序或按一定的順序去了解對(duì)象；更好的展示有先后順序的數(shù)據(jù)；【應(yīng)用條件】需要標(biāo)識(shí)一組有序?qū)ο髸r(shí)；例如：如歌曲排行旁、熱銷商品排行、點(diǎn)擊率排行等設(shè)計(jì)中；【模式描述】應(yīng)用規(guī)范：序號(hào)必需代表一個(gè)對(duì)象在集體中的序列，不要讓序號(hào)沒(méi)有意義。如果用戶關(guān)注對(duì)象的排列順序，則必須提供序號(hào)。如果用戶根本不關(guān)注對(duì)象的順序，請(qǐng)不要使用序號(hào)，這樣會(huì)混淆用戶的注意。圖STYLEREF1\s4SEQ圖\*ARABIC\s116錯(cuò)誤示例注冊(cè)表單注冊(cè)表單應(yīng)用于對(duì)用戶的輸入格式有一定的要求的設(shè)計(jì)中，幫助用戶更好的完成填寫表單的操作?！驹O(shè)計(jì)意圖】快速高效的幫助用戶完成注冊(cè)；盡量減少用戶犯錯(cuò)；在用戶出錯(cuò)后，友好的有效的告知錯(cuò)誤，并提供解決方案；給用戶提供及時(shí)有效的反饋信息?！緫?yīng)用條件】超過(guò)5項(xiàng)表單信息填寫修改時(shí)；用戶出錯(cuò)的頻率較高時(shí)；系統(tǒng)對(duì)數(shù)據(jù)的要求比較嚴(yán)格時(shí)；例如：應(yīng)用于填寫注冊(cè)信息、修改密碼等設(shè)計(jì)中?！灸Ｊ矫枋觥拷M成：各輸入控件+必填項(xiàng)指示+格式要求提示+對(duì)錯(cuò)判斷反饋+提交按鈕如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s117注冊(cè)表單應(yīng)用規(guī)范：表單的設(shè)計(jì)應(yīng)該遵循簡(jiǎn)潔的設(shè)計(jì)原則。在注冊(cè)填寫時(shí)，盡可能的只提供必須填寫的選項(xiàng)給用戶，其他非必填項(xiàng)，可以通過(guò)選填或者在日后需要時(shí)再進(jìn)行完善的方式來(lái)完成。a)信息輸入對(duì)錯(cuò)判斷：信息輸入正確時(shí)，要給與填寫正確的反饋；信息輸入錯(cuò)誤的時(shí)候，要給出錯(cuò)誤的反饋，并給出具體的錯(cuò)誤原因要高亮反饋，同時(shí)注釋語(yǔ)位置整體給出反饋提示。如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s118信息輸入對(duì)錯(cuò)判斷

用戶在輸入錯(cuò)誤時(shí)，要針對(duì)不同的輸入內(nèi)容給出相應(yīng)明確的錯(cuò)誤提示，必要的時(shí)候要提出簡(jiǎn)要的解決方法提示。

例如：在用戶名填寫時(shí)，可能出現(xiàn)的錯(cuò)誤提示；您輸入的用戶名過(guò)短！您輸入的用戶名中不能包含字符“&（等等）”！你輸入的用戶名“xxx”已經(jīng)被占用,請(qǐng)重新輸入！b)輸入格式約定（注釋文本）：當(dāng)用戶需要輸入某一項(xiàng)時(shí)，相應(yīng)注釋文本才顯示出來(lái)；對(duì)于表單中的某些內(nèi)容除了需要給予用戶正確填寫格式的提示外還需要簡(jiǎn)要說(shuō)明填寫的必要性，如下圖所示：

圖STYLEREF1\s4SEQ圖\*ARABIC\s1193)驗(yàn)證碼：驗(yàn)證碼中的圖示字母是隨機(jī)產(chǎn)生的，但要注意盡可能避免顯示一些不易區(qū)分的字母和數(shù)字，讓用戶難以辨別（如：“0和o”），如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s120驗(yàn)證碼驗(yàn)證碼圖示，要求相對(duì)清晰容易辨別，驗(yàn)證碼的位數(shù)控制在4位為最佳；驗(yàn)證碼由系統(tǒng)隨機(jī)產(chǎn)生，在個(gè)別情況下字母和數(shù)字可能會(huì)難以辨別，此時(shí)用戶可以點(diǎn)擊鏈接文字（看不清，換一張）來(lái)更換驗(yàn)證碼，如下圖所示：

圖STYLEREF1\s4SEQ圖\*ARABIC\s121驗(yàn)證碼示例用戶在輸入框內(nèi)輸入驗(yàn)證碼后，要及時(shí)給出反饋提示（不要到提交時(shí)才給出提示），如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s122驗(yàn)證碼錯(cuò)誤判斷4)提交按鈕：存在驗(yàn)證或提交按鈕時(shí)，只有所驗(yàn)證或提交的部分輸入完畢并且正確后，按鈕才能由置灰狀態(tài)變?yōu)榭捎脿顟B(tài)，如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s123注冊(cè)按鈕5)成功告知表單最終填寫提交完成后，要給出“提交成功或注冊(cè)成功”的相關(guān)提示，明確告知用戶此操作正確完成；6)協(xié)議單擊“我接受”意味著：您同意并接受服務(wù)協(xié)議和隱私聲明?！緮U(kuò)展描述】應(yīng)用規(guī)范：密碼強(qiáng)弱提示當(dāng)用戶賬號(hào)的保密性相對(duì)較高時(shí)，可以應(yīng)用密碼的強(qiáng)弱提示來(lái)保證密碼的復(fù)雜度。

如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s124密碼強(qiáng)弱在輸入密碼時(shí)，旁邊顯示注釋文本：明確注明密碼強(qiáng)弱的規(guī)則和提示，如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s125密碼強(qiáng)弱提示當(dāng)用戶輸入的內(nèi)容錯(cuò)誤或不完全正確時(shí)，要求提示的反饋信息必須提示明確，同時(shí)給出正確的解決方法，如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s126密碼強(qiáng)弱提示對(duì)照表注冊(cè)進(jìn)度提示根據(jù)產(chǎn)品的特性，要求用戶填寫的注冊(cè)表單較長(zhǎng)、步數(shù)較多時(shí)，需要給出注冊(cè)的進(jìn)度條提示，明確的告知當(dāng)前注冊(cè)的進(jìn)度。分組線注冊(cè)內(nèi)容較長(zhǎng)時(shí)，要用分組線，對(duì)要求用戶輸入的選項(xiàng)進(jìn)行分類分隔顯示（具體使用參見(jiàn)“分組線規(guī)則”）?！咀⒁馐马?xiàng)】例如婚介交友等場(chǎng)景當(dāng)對(duì)用戶信息要求嚴(yán)格時(shí)，可以應(yīng)用注冊(cè)向?qū)б龑?dǎo)注冊(cè)過(guò)程。如果表單中需要填寫的數(shù)據(jù)項(xiàng)較多，頁(yè)面較長(zhǎng)，必填項(xiàng)又比較分散且數(shù)量較少時(shí)，必須使用行的背景顏色來(lái)區(qū)分必填項(xiàng)與非必填項(xiàng)。聯(lián)系方式聯(lián)系方式是對(duì)表單中提供給用戶填寫詳細(xì)聯(lián)系方式一種組件規(guī)定?！驹O(shè)計(jì)意圖】幫助用戶有效、快速的填寫聯(lián)系方式；減少用戶輸入錯(cuò)誤的幾率?！緫?yīng)用條件】需要用戶填寫詳細(xì)聯(lián)系方式時(shí)。例如：網(wǎng)上注冊(cè)，網(wǎng)上購(gòu)物填寫發(fā)貨地址?！灸Ｊ矫枋觥拷M成：各輸入控件，包括：“國(guó)家地區(qū)”、“省份”、“城市”、“聯(lián)系電話”、“傳真號(hào)碼”、“手機(jī)號(hào)碼”、“聯(lián)系地址”、“郵政編碼”等（根據(jù)具體需要再增加）。圖STYLEREF1\s4SEQ圖\*ARABIC\s127聯(lián)系方式應(yīng)用規(guī)范：“國(guó)家地區(qū)”、“省份”和“城市”要有連動(dòng)關(guān)系；“國(guó)家地區(qū)”：下拉列表選框；“省份”：下拉列表選框，與選擇的國(guó)家連動(dòng)（選擇“國(guó)家地區(qū)”，“省份”下拉框中選項(xiàng)相應(yīng)變化）；如果在“省份”中已經(jīng)選擇了直轄市，如“北京”，則后面的“城市”不用再選，自動(dòng)置灰；“城市”：下拉列表選框，與選擇的城市連動(dòng)（選擇“省份”，“城市”下拉框中選項(xiàng)相應(yīng)變化）。城市下拉列表選項(xiàng)的最后一項(xiàng)為“其他地區(qū)”，如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s128其他地區(qū)“聯(lián)系電話”、“傳真號(hào)碼”和“手機(jī)號(hào)碼”必須拆分成幾個(gè)字段；“聯(lián)系電話”：四個(gè)輸入框字段，分別為：國(guó)家代碼（可選）—區(qū)號(hào)—電話號(hào)碼—分機(jī)號(hào)；“傳真號(hào)碼”：三個(gè)輸入框字段，分別為：國(guó)家代碼（可選）—區(qū)號(hào)—傳真電話；“手機(jī)號(hào)碼”：兩個(gè)輸入框字段，分別為：國(guó)家代碼（可選）—手機(jī)號(hào)；“國(guó)家代碼”此項(xiàng)可根據(jù)具體產(chǎn)品的銷售人群不同自行選擇是否保留；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s129正確示例圖圖STYLEREF1\s4SEQ圖\*ARABIC\s130錯(cuò)誤示例圖各字段分別與上面的“國(guó)家地區(qū)”、“省份”、“城市”連動(dòng)：“國(guó)家地區(qū)”和“省份”、“城市”選擇后，國(guó)家代碼和區(qū)號(hào)自動(dòng)顯示，如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s131聯(lián)系方式標(biāo)注“聯(lián)系地址”：一個(gè)輸入框，等待用戶輸入文本；“郵政編碼”：一個(gè)輸入框（6個(gè)字符），等待用戶輸入文本；除“國(guó)家地區(qū)”、“省份”和“城市”是只能讓用戶選擇外，其他的輸入框均可手動(dòng)輸入和編輯，用戶可以根據(jù)自己的需要進(jìn)行修改?！緮U(kuò)展描述】組成：郵政編碼幫助如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s132郵政編碼應(yīng)用規(guī)范：用戶手動(dòng)輸入郵政編碼時(shí)，系統(tǒng)根據(jù)“省份”、“城市”給出一些不同地區(qū)郵政編碼的關(guān)聯(lián)提示，供用戶參考，用戶選擇郵政編碼輸入框后面“查詢郵政編碼”鏈接（如下圖所示），可點(diǎn)擊打開(kāi)新窗口查看本市的郵政編碼。圖STYLEREF1\s4SEQ圖\*ARABIC\s133查詢郵政編碼【注意事項(xiàng)】各輸入項(xiàng)的先后順序，根據(jù)各字段的邏輯順序和參照關(guān)系排列的同時(shí)，要綜合考慮用戶的輸入操作（盡量將數(shù)字輸入的放在一起，將漢字輸入的放在一起，以避免用戶在鍵盤上頻繁切換輸入位置）；系統(tǒng)自動(dòng)提供的電話區(qū)號(hào)和郵政編碼等，必須保證是與國(guó)家、省、市相對(duì)應(yīng)的最新的和準(zhǔn)確的數(shù)據(jù)；用戶用tab鍵切換不同的輸入?yún)^(qū)域時(shí)，輸入?yún)^(qū)域中本來(lái)用的數(shù)據(jù)顯示為選中狀態(tài)（不清空）。圖片裁切固定尺寸主要應(yīng)用于需要用戶上傳固定圖片尺寸的設(shè)計(jì)中，在上傳時(shí)提供簡(jiǎn)單裁切的功能。上傳后可以讓用戶得到比較理想的圖片效果。

【設(shè)計(jì)意圖】可以進(jìn)行簡(jiǎn)單圖片裁切處理，而不需要使用其它的圖片處理軟件快捷方便的裁切出用戶想要的圖片；【應(yīng)用條件】上傳的圖片限制固定尺寸時(shí)；系統(tǒng)對(duì)圖片大小的約束嚴(yán)格，在200k以內(nèi)時(shí)；例如：上傳用戶頭像、產(chǎn)品圖片、信息圖片等【模式描述】組成：預(yù)覽區(qū)+裁切框+放大縮小提示標(biāo)+滑桿+圖片上傳區(qū)域+清空按鈕+數(shù)據(jù)約束如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s134固定尺寸圖片裁切應(yīng)用規(guī)范：滑桿、縮放圖標(biāo)、清空按鈕默認(rèn)處于不可用狀態(tài)；瀏覽上傳圖片后，滑桿、縮放圖標(biāo)、清空按鈕高亮顯示；瀏覽上傳一張圖片后，圖片全部顯示在預(yù)覽區(qū)內(nèi)；當(dāng)上傳的圖片尺寸小于裁切區(qū)尺寸時(shí)，系統(tǒng)自動(dòng)按照裁切區(qū)的尺寸成比例的放大圖片后顯示在裁切區(qū)內(nèi)；鼠標(biāo)向左拖動(dòng)滑塊縮小圖片，當(dāng)圖片縮小到即將小于裁切區(qū)尺寸時(shí)，圖片將停止縮??；鼠標(biāo)向右拖動(dòng)滑塊放大圖片，當(dāng)圖片縮放到原尺寸的1.5倍時(shí)，停止放大，此時(shí)圖標(biāo)狀態(tài)要相應(yīng)轉(zhuǎn)變?yōu)椴豢捎脿顟B(tài)；點(diǎn)擊放大或縮小圖標(biāo)，預(yù)覽區(qū)中的圖片相應(yīng)放大縮小，直至無(wú)法縮小或放大，此時(shí)圖標(biāo)狀態(tài)要相應(yīng)轉(zhuǎn)變?yōu)椴豢捎脿顟B(tài)；圖片裁切區(qū)的尺寸與上傳后的大小尺寸相一致；圖片裁切區(qū)的尺寸可以根據(jù)具體產(chǎn)品的需要，設(shè)定固定尺寸；鼠標(biāo)可以在預(yù)覽區(qū)內(nèi)任意移動(dòng)裁切區(qū)的位置，但圖片必須填充整個(gè)裁切區(qū)，不能為空，或部分為空；鼠標(biāo)指針在裁切區(qū)內(nèi)時(shí)要變?yōu)橐苿?dòng)指針形狀；當(dāng)上傳的圖片格式或大小不符合要求時(shí)，系統(tǒng)給出提示如：您上傳的圖片格式錯(cuò)誤！請(qǐng)重新上傳！或您上傳的圖片大小超過(guò)200k！請(qǐng)重新上傳！。自定義尺寸應(yīng)用于用戶上傳一些日常的沒(méi)有特殊限制的圖片設(shè)計(jì)中，在上傳時(shí)提供簡(jiǎn)單方便快捷裁切的功能，上傳后可以讓用戶很快地得到比較理想的圖片效果?！驹O(shè)計(jì)意圖】減少用戶的工作量和學(xué)習(xí)時(shí)間，并充分考慮到使用者的電腦水平，通過(guò)簡(jiǎn)單的圖片裁切處理，用戶將不需要打開(kāi)其他的圖片處理軟件；快捷方便的裁切處理出用戶想要的圖片；【應(yīng)用條件】用戶可以自定義上傳或插入的圖片尺寸時(shí)；系統(tǒng)對(duì)圖片大小的約束比較寬泛，在1M以內(nèi)時(shí)；例如：應(yīng)用于上傳照片、文檔中插入圖片等設(shè)計(jì)中；【模式描述】組成：圖片上傳區(qū)域+圖片裁切區(qū)域+操作按鈕如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s135圖片上傳圖STYLEREF1\s4SEQ圖\*ARABIC\s136自定義尺寸圖片裁切應(yīng)用規(guī)范：瀏覽上傳一張圖片后，圖片全部顯示在預(yù)覽區(qū)內(nèi)；圖片較大時(shí)根據(jù)窗口尺寸自動(dòng)成比例壓縮適應(yīng)窗口大??；默認(rèn)裁切框最大化顯示在預(yù)覽區(qū)內(nèi)；同時(shí)鼠標(biāo)經(jīng)過(guò)裁切框有明確的指針?lè)答?；裁切框的上下左右均可以隨意拖拽裁切；圖片裁切區(qū)的尺寸可以根據(jù)用戶的需要，隨意拖動(dòng)裁切；圖片裁切區(qū)的尺寸大小就是最終圖片上傳后的實(shí)際尺寸大??；鼠標(biāo)可以在窗口內(nèi)任意拖拽裁切框的位置，但不能超出圖片自身顯示區(qū)；當(dāng)上傳的圖片格式或大小不符合要求時(shí)，系統(tǒng)給出提示如：您上傳的圖片格式錯(cuò)誤！請(qǐng)重新上傳！或您上傳的圖片大小超過(guò)1M！請(qǐng)重新上傳??；圖片的最大尺寸，可以根據(jù)具體的產(chǎn)品需要來(lái)設(shè)定。翻頁(yè)翻頁(yè)模式應(yīng)用于列表數(shù)據(jù)條目較多，文章篇幅較長(zhǎng)的設(shè)計(jì)中，來(lái)對(duì)數(shù)據(jù)和篇幅進(jìn)行更好的展示。翻頁(yè)可以拆分為以下幾部分：基礎(chǔ)頁(yè)碼、上下頁(yè)、首末頁(yè)、跳轉(zhuǎn)、Ajax拖動(dòng)條、數(shù)據(jù)統(tǒng)計(jì)；根據(jù)不同的應(yīng)用場(chǎng)景，可以選擇某一部分或幾部分組合起來(lái)使用。如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s137翻頁(yè)【設(shè)計(jì)意圖】滿足用戶在不同場(chǎng)景下的不同需要；增加操作的易用性；【應(yīng)用條件】列表數(shù)據(jù)條目較多時(shí)；文章篇幅較長(zhǎng)時(shí)；【模式描述】組成：頁(yè)碼如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s138頁(yè)碼應(yīng)用規(guī)范：頁(yè)碼少于或等于10頁(yè)時(shí)，只顯示應(yīng)該出現(xiàn)的頁(yè)碼數(shù)；鼠標(biāo)指針經(jīng)過(guò)和按下某個(gè)頁(yè)碼區(qū)域（此區(qū)域高亮反饋），鼠標(biāo)彈起后頁(yè)面切換完成；當(dāng)前頁(yè)的頁(yè)碼在外觀上要明顯的區(qū)分于其它頁(yè)碼，且不再提供頁(yè)面鏈接；已訪問(wèn)過(guò)的頁(yè)碼和未訪問(wèn)過(guò)的頁(yè)碼要有所區(qū)分；顯示當(dāng)前頁(yè)碼的前4頁(yè)和后4頁(yè)；前９頁(yè)和最后９頁(yè)除外，默認(rèn)全部顯示；設(shè)計(jì)時(shí)，頁(yè)碼的可點(diǎn)區(qū)域要相對(duì)較大，方便點(diǎn)擊；如下圖所示圖STYLEREF1\s4SEQ圖\*ARABIC\s139狀態(tài)標(biāo)注【擴(kuò)展描述】1)上下頁(yè)組成：三角符號(hào)，“”作為上一頁(yè)，以“”作為下一頁(yè)；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s140上下頁(yè)狀態(tài)應(yīng)用規(guī)范：列表的頁(yè)數(shù)在11頁(yè)以上時(shí)，要提供“”和“”的鏈接，“上一頁(yè)”和“下一頁(yè)”在不可點(diǎn)擊時(shí)變?yōu)椴豢捎脿顟B(tài)；具體不可用狀態(tài)參見(jiàn)《界面設(shè)計(jì)規(guī)范》與其他元素保持適當(dāng)?shù)拈g隔距離；參見(jiàn)《界面視覺(jué)規(guī)范》2)首末頁(yè)組成：三角截止符號(hào)（“”首頁(yè)截止圖標(biāo)，以“”末頁(yè)截止圖標(biāo)）+文字（首頁(yè)、末頁(yè)），如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s141首末頁(yè)應(yīng)用規(guī)范：列表的頁(yè)數(shù)在50頁(yè)以上時(shí)，要提供“首頁(yè)”“末頁(yè)(326)”的鏈接；鼠標(biāo)指針?？康绞醉?yè)鏈接上，有明確的反饋提示，點(diǎn)擊鼠標(biāo)主鍵，頁(yè)面切換到首頁(yè)，首頁(yè)變?yōu)椴豢捎脿顟B(tài)；鼠標(biāo)指針?？康侥╉?yè)鏈接上，有明確的反饋提示，點(diǎn)擊鼠標(biāo)主鍵，頁(yè)面切換至最后一頁(yè)，末頁(yè)變?yōu)椴豢捎脿顟B(tài)；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s142首末頁(yè)狀態(tài)標(biāo)注

末頁(yè)的鏈接上要注明最后一頁(yè)的頁(yè)碼數(shù)；與其他元素保持適當(dāng)?shù)拈g隔距離；參見(jiàn)《界面視覺(jué)規(guī)范》3)跳轉(zhuǎn)組成：文字（轉(zhuǎn)到…頁(yè)）+輸入框+下拉圖標(biāo)+頁(yè)碼拖動(dòng)條+確定按鈕如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s143跳轉(zhuǎn)應(yīng)用規(guī)范：頁(yè)碼超過(guò)50頁(yè)時(shí)，顯示跳轉(zhuǎn)框；鼠標(biāo)指針移到跳轉(zhuǎn)輸入框上，輸入框給出反饋，點(diǎn)擊鼠標(biāo)主鍵，光標(biāo)被定位到輸入框中，此時(shí)進(jìn)入可輸入狀態(tài)，輸入目標(biāo)頁(yè)數(shù)，鼠標(biāo)點(diǎn)擊“確定”按鈕或“回車鍵”，頁(yè)面刷新后顯示信息列表；鼠標(biāo)指針移到跳轉(zhuǎn)輸入框上，輸入框給出反饋，點(diǎn)擊輸入框右側(cè)的“三角”小標(biāo)，下拉出現(xiàn)浮動(dòng)層，顯示出系統(tǒng)默認(rèn)提供的部分頁(yè)碼，移動(dòng)鼠標(biāo)指針到某一頁(yè)碼上，被選定的頁(yè)碼給出高亮反饋，單擊后頁(yè)面刷新顯示信息列表；用戶在輸入框中輸入數(shù)字以外的其它字符時(shí)，系統(tǒng)要給出錯(cuò)誤提示；如：您輸入的字符錯(cuò)誤，請(qǐng)輸入數(shù)字?。ň唧w提示內(nèi)容參見(jiàn)“提示語(yǔ)規(guī)范”）用戶拖拽滑塊移動(dòng)時(shí)，輸入框中的頁(yè)碼數(shù)值同步變化；頁(yè)碼輸入后可以通過(guò)“確定”按鈕和“回車”鍵兩種方式。與其他元素保持適當(dāng)?shù)拈g隔距離；參見(jiàn)《界面視覺(jué)規(guī)范》3)數(shù)據(jù)統(tǒng)計(jì)組成：統(tǒng)計(jì)提示文字+統(tǒng)計(jì)數(shù)值+數(shù)量單位如：共7315條應(yīng)用規(guī)范：頁(yè)碼超過(guò)11頁(yè)時(shí)顯示；顯示在“首頁(yè)”位置之前，保持適當(dāng)?shù)拈g隔距離；參見(jiàn)《界面視覺(jué)規(guī)范》日期輸入通過(guò)日歷選擇日期日歷選擇是使用日歷選擇控件進(jìn)行日期輸入?！驹O(shè)計(jì)意圖】使用生活中最常見(jiàn)的日歷形式，使得日期輸入的形式更加直觀；日歷選擇形式能夠使日期輸入更加方便、快捷；能夠減少用戶錯(cuò)誤輸入日期的幾率；【應(yīng)用條件】需要進(jìn)行日期輸入時(shí)；年份跨度較小，在10年以內(nèi)時(shí)；例如：2006年日期顯示的一種形式；需要進(jìn)行日期區(qū)間選擇時(shí)；例如：應(yīng)用于表單中時(shí)間的輸入、統(tǒng)計(jì)查詢等設(shè)計(jì)中；【模式描述】組成：輸入框+日歷的圖示+日歷顯示層如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s144日歷輸入應(yīng)用規(guī)范：日歷日歷中必須明確標(biāo)示出當(dāng)前系統(tǒng)日期；包括：年、月、日。如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s145日歷標(biāo)注年份和月份選擇如下圖所示；圖STYLEREF1\s4SEQ圖\*ARABIC\s146年份和月份選擇默認(rèn)顯示近10年的年份，前10后1；從當(dāng)年往上，滑動(dòng)滾動(dòng)條，查看到100個(gè)年份；往下，查看到10個(gè)年份；點(diǎn)擊日歷中的月份12個(gè)月份全部顯示在下拉層中；當(dāng)前年份、月份均要區(qū)分于其他高亮顯示；日期輸入通過(guò)鍵盤輸入日期；當(dāng)鼠標(biāo)移至輸入框內(nèi)時(shí)，輸入框中的內(nèi)容被全部選中并高亮顯示，鼠標(biāo)移開(kāi)后恢復(fù)；開(kāi)始鍵盤輸入時(shí)，默認(rèn)內(nèi)容將被清空；

如下圖所示：默認(rèn)狀態(tài)鼠標(biāo)在輸入框內(nèi)點(diǎn)擊后輸入日期后通過(guò)日歷選擇輸入日期；點(diǎn)擊日歷圖標(biāo)后，輸入框、圖標(biāo)及文字均高亮顯示，給出用戶明確的反饋；選定日期要高亮顯示，同時(shí)區(qū)分于當(dāng)前系統(tǒng)日期；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s147日歷選擇錯(cuò)誤提示只允許輸入0-9這十個(gè)數(shù)字；只要用戶輸入數(shù)字，無(wú)論幾位系統(tǒng)自動(dòng)按照“yyyy-mm-dd”的格式顯示給用戶；當(dāng)月份和日期超出正常值時(shí)，系統(tǒng)給出提示；如“很抱歉！您輸入的月份或日期過(guò)大，請(qǐng)重新輸入！”顯示某一時(shí)間點(diǎn)要求顯示當(dāng)前系統(tǒng)默認(rèn)時(shí)間不要求顯示當(dāng)前系統(tǒng)默認(rèn)時(shí)間【擴(kuò)展描述】組成：時(shí)間段的文本提示+兩個(gè)日期選擇如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s148一段時(shí)間選擇應(yīng)用規(guī)范：時(shí)間段的文本提示“從…至…”；選定起始時(shí)間后，起始時(shí)間被回顯到日期框內(nèi)，同時(shí)截至日期日歷框自動(dòng)被打開(kāi)，不需要用戶再次點(diǎn)擊，即可選擇日期；

年份跨度較大時(shí)的日期選擇應(yīng)用于日期選擇時(shí)的年份會(huì)出現(xiàn)跨度較大的設(shè)計(jì)中，方便快速的幫助用戶正確完成時(shí)間格式的輸入。適用于出生日期等方面。使得信息反饋及時(shí)明確，提示明顯易懂，減少了誤操作和重復(fù)操作的次數(shù)?！驹O(shè)計(jì)意圖】方便用戶快速定位年份、月份、日期；減少用戶出錯(cuò)的幾率；符合此類場(chǎng)景下用戶的心里預(yù)期；【應(yīng)用條件】年份的選擇跨度較大，在10-90年之間時(shí)；例如：適用于出生日期等設(shè)計(jì)中；【模式描述】組成：輸入框+下拉層+年月日的文本提示整體效果如下圖：

圖STYLEREF1\s4SEQ圖\*ARABIC\s149年份選擇應(yīng)用規(guī)范：1）手動(dòng)輸入年月日的輸入均可以通過(guò)鍵盤操作的方式輸入，輸入內(nèi)容范圍在0-9十個(gè)數(shù)字之內(nèi)；如下圖所示：未輸入鼠標(biāo)聚焦到輸入框輸入后2）選擇輸入年月日的輸入均可以通過(guò)鼠標(biāo)點(diǎn)擊出現(xiàn)列表選擇的方式輸入；年的選擇方式；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s150選擇年份默認(rèn)只提供顯示90個(gè)年份，當(dāng)前所在年份不足10年時(shí)，未來(lái)年份默認(rèn)置灰顯示。

月的輸入方式；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s151選擇月份日的輸入方式；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s152選擇日期分隔等量條目分隔線等量條目分隔線是一種對(duì)包含大量記錄行的列表進(jìn)行等量條目分隔的視覺(jué)指示符號(hào)?！驹O(shè)計(jì)意圖】使頁(yè)面更加有條理，看起來(lái)更清晰；讓用戶清楚自己當(dāng)前瀏覽的條目位置；讓用戶感覺(jué)到一部分告一段落，減輕用戶的視覺(jué)疲勞和心理負(fù)擔(dān)?！緫?yīng)用條件】同一頁(yè)（或同一框架）中顯示超過(guò)70條記錄時(shí)；列表?xiàng)l目之間無(wú)邏輯分組的關(guān)系。例如：論壇、評(píng)論、聊天室?！灸Ｊ矫枋觥拷M成：橫線+條目數(shù)指示如下圖所示：12120條目數(shù)指示橫線圖STYLEREF1\s4SEQ圖\*ARABIC\s153分割線應(yīng)用規(guī)范：分隔線只是起輔助作用，不是用戶注意的重點(diǎn)，視覺(jué)上不能過(guò)于醒目，不能干擾用戶的視覺(jué)重心；每20條記錄出現(xiàn)一條分隔線；分隔線中間標(biāo)注該分隔線分隔截至的條目數(shù)或其他指示；條目數(shù)指示同樣不易過(guò)于醒目；分隔線的分隔效果需要有合適的留白來(lái)輔助完成。故在分隔線上方和下方必須留出合適的空間；分割線的寬度不能貫穿整個(gè)列表區(qū)域，兩邊需要留一些余地（否則無(wú)法起到分隔作用，還會(huì)將頁(yè)面割斷）。圖STYLEREF1\s圖STYLEREF1\s4SEQ圖\*ARABIC\s155分割線寬度120【擴(kuò)展描述】上/下條目跳轉(zhuǎn)組成：12120跳轉(zhuǎn)圖示跳轉(zhuǎn)圖示圖STYLEREF1\s4SEQ圖\*ARABIC\s155分割線的跳轉(zhuǎn)圖示應(yīng)用規(guī)范：在分隔線的兩端分別顯示向上和向下的圖示，用戶通過(guò)點(diǎn)擊它們分別可以轉(zhuǎn)到上一個(gè)或下一個(gè)分隔線處；兩個(gè)圖示的視覺(jué)感覺(jué)不能太強(qiáng)烈，在鼠標(biāo)移過(guò)時(shí)可以清晰一些以提供受范式反饋；圖示要提供提示信息，如下圖所示：12120圖STYLEREF1\s4SEQ圖\*ARABIC\s156提示信息適用條件：在一頁(yè)的數(shù)據(jù)量非常大，用戶的瀏覽行為是比較隨意和無(wú)目的性時(shí)可提供這樣的上下跳轉(zhuǎn)功能；返回頂部組成：12120返回頂部圖示圖STYLEREF1\s4SEQ圖\*ARABIC\s157返回頂部應(yīng)用規(guī)范：在分隔線右側(cè)顯示“回到頂部”的圖示；圖示的視覺(jué)感覺(jué)不能太強(qiáng)烈，在鼠標(biāo)移過(guò)時(shí)可以清晰一些以提供受范式反饋；可以加以文本說(shuō)明作為反饋形式，如下圖所示：12120圖STYLEREF1\s4SEQ圖\*ARABIC\s158反饋形式適用條件：一頁(yè)的數(shù)據(jù)量非常大，用戶需要回到頂部時(shí)；高級(jí)加密高級(jí)加密是用戶在設(shè)置比較重要的密碼時(shí)，提供給用戶的一種用軟鍵盤設(shè)置密碼的組件?！驹O(shè)計(jì)意圖】用戶通過(guò)鼠標(biāo)點(diǎn)擊進(jìn)行密碼輸入，可以避免系統(tǒng)自動(dòng)根據(jù)敲擊鍵盤的輸入獲取密碼，從而增加安全性，讓用戶放心，增加用戶對(duì)系統(tǒng)的信任；合理的軟鍵盤的外觀設(shè)計(jì)，讓用戶可以準(zhǔn)確和快捷的設(shè)置密碼?！緫?yīng)用條件】對(duì)密碼的安全級(jí)別要求較高的場(chǎng)景。例如：銀行帳號(hào)的密碼；容易被盜取的IM帳號(hào)密碼?！灸Ｊ矫枋觥拷M成：軟鍵盤打開(kāi)/關(guān)閉指示圖標(biāo)+軟鍵盤圖STYLEREF1\s4SEQ圖\*ARABIC\s159軟鍵盤應(yīng)用規(guī)范：在密碼輸入框附近，必須有一個(gè)可以指示打開(kāi)和關(guān)閉高級(jí)加密輸入軟鍵盤的圖示或按鈕：圖示在打開(kāi)和收起兩種外觀上切換；對(duì)于安全加密要給出相應(yīng)的提示。由于軟鍵盤點(diǎn)擊輸入的反饋遠(yuǎn)遠(yuǎn)不如鍵盤敲擊輸入的反饋強(qiáng)烈，再加上輸入的密碼以星號(hào)表示，故無(wú)法從這里給用戶提供輸入何字符的視覺(jué)反饋。為了保證用戶點(diǎn)擊的準(zhǔn)確性，必須：軟鍵盤各按鍵必須非常清楚，按鍵與按鍵之間的邊界也必須非常清楚；如果有大小寫指示或者shift切換，一定要明確地表明當(dāng)前的狀態(tài)，讓用戶能清楚地知道點(diǎn)擊這個(gè)鍵輸入的是什么字符；鼠標(biāo)在軟鍵盤上移動(dòng)，以及點(diǎn)擊和釋放某個(gè)鍵時(shí)，必須提供清晰的視覺(jué)反饋：如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s160軟鍵盤示例小寫小寫每次重新啟動(dòng)程序或打開(kāi)網(wǎng)絡(luò)應(yīng)用，軟鍵盤的布局都應(yīng)該是不一樣的；每次鍵盤的順序變化，都一定要有規(guī)律，讓用戶方便定位，可以較準(zhǔn)確地找到自己想要點(diǎn)擊的字符，避免出錯(cuò)，如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s161順序變化打開(kāi)軟鍵盤后，鼠標(biāo)也可定位在輸入框中用切換回鍵盤輸入方式；當(dāng)用戶用軟鍵盤輸入時(shí)，文本區(qū)無(wú)光標(biāo)指示；當(dāng)鼠標(biāo)點(diǎn)擊輸入?yún)^(qū)時(shí)，輸入?yún)^(qū)內(nèi)顯示光標(biāo)，指示可鍵盤輸入?！緮U(kuò)展描述】刷新數(shù)字區(qū)組成：“刷新數(shù)字區(qū)”提示+可變區(qū)域視覺(jué)提示，如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s162刷新數(shù)字區(qū)應(yīng)用規(guī)范：切換按鈕要明確，在位置上要與軟鍵盤區(qū)域離開(kāi)一點(diǎn)距離，以防止用戶在點(diǎn)擊設(shè)置密碼時(shí)誤點(diǎn)，沒(méi)有留意到鍵盤順序已經(jīng)變化，而記錯(cuò)自己的設(shè)置的密碼；刷新的數(shù)字應(yīng)該與允許用戶輸入的數(shù)字相匹配。例如：銀行帳號(hào)只能輸入數(shù)字；用戶點(diǎn)擊切換按鈕或圖標(biāo)，不能將軟鍵盤全部打亂。只能提供有限的區(qū)域（如：數(shù)字區(qū)）讓用戶選擇變換順序，這樣可以減少用戶的記憶負(fù)擔(dān)；可變換的區(qū)域在視覺(jué)上必須清楚地標(biāo)識(shí)?！咀⒁馐马?xiàng)】可以利用安裝ActiveX安全控件的方法來(lái)更好的解決安全性的問(wèn)題。進(jìn)度條應(yīng)用于用戶上網(wǎng)瀏覽頁(yè)面、執(zhí)行數(shù)據(jù)操作時(shí)進(jìn)行等待時(shí)的設(shè)計(jì)中；【設(shè)計(jì)意圖】避免因?yàn)榈却鹩脩舻膮挓┖驼`解；讓用戶了解應(yīng)用程序正在執(zhí)行并且實(shí)時(shí)了解執(zhí)行情況，并給出用戶有效的即時(shí)反饋；趣味性的進(jìn)度條，能增加用戶的愉悅性；【應(yīng)用條件】系統(tǒng)需要用戶長(zhǎng)時(shí)間等待時(shí)；上傳下載的文件較大時(shí)；等待時(shí)間超過(guò)5秒鐘時(shí)；例如：數(shù)據(jù)上傳下載、頁(yè)面瀏覽、文件打開(kāi)關(guān)閉、復(fù)制、打印文檔等?！灸Ｊ矫枋觥拷M成：進(jìn)度單位+進(jìn)度框如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s163進(jìn)度條應(yīng)用規(guī)范：根據(jù)進(jìn)度情況逐步顯示進(jìn)度單位，直到進(jìn)度完成；進(jìn)度條的形式參見(jiàn)《界面視覺(jué)規(guī)范》?！緮U(kuò)展描述】百分比數(shù)值組成：百分比數(shù)值如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s164百分比數(shù)值應(yīng)用規(guī)范：根據(jù)完成的進(jìn)度，實(shí)時(shí)的顯示出完成部分的百分?jǐn)?shù)。執(zhí)行數(shù)據(jù)的具體操作時(shí)，需要顯示百分比數(shù)值，為用戶顯示任務(wù)完成信息的實(shí)時(shí)對(duì)比，2)“取消”按鈕組成：“取消”按鈕如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s165“取消”按鈕應(yīng)用規(guī)范：針對(duì)某一數(shù)據(jù)的具體操作時(shí)，在等待的過(guò)程中，用戶可以對(duì)操作進(jìn)行終止操作。此時(shí)需要在進(jìn)度條的基礎(chǔ)添加“取消”按鈕，并且此按鈕要高亮顯示，提示用戶進(jìn)程中途可以取消。c)內(nèi)容提示組成：內(nèi)容提示如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s166內(nèi)容提示應(yīng)用規(guī)范：針對(duì)不同的內(nèi)容，可以添加提示文字，來(lái)對(duì)進(jìn)度條進(jìn)行說(shuō)明。進(jìn)度條說(shuō)明文字后必須添加“...”表示進(jìn)行中。如下圖所示：

【注意事項(xiàng)】設(shè)計(jì)有意思的趣味性的進(jìn)度條，不但不會(huì)讓用戶反感還會(huì)增加用戶的愉悅性。圖形化面包屑應(yīng)用于標(biāo)注當(dāng)前操作所在具體位置的設(shè)計(jì)中，讓用戶清晰的知道自己的位置，不至于“迷路”，同時(shí)提供便捷的通道，方便用戶切換到其他相關(guān)頁(yè)面，圖形化面包屑還提供一鍵回到較高層次的服務(wù)，幫助那些通過(guò)搜索或者深層次鏈接進(jìn)入到特殊但是不合適頁(yè)面的用戶?！驹O(shè)計(jì)意圖】防止用戶在瀏覽過(guò)程中迷失；同時(shí)提供多入口，方便用戶隨時(shí)到達(dá)目標(biāo)位置；方便用戶定位在頁(yè)面中的位置；合理的有效的利用空間，整合地址欄和面包屑的功能于一體；面包屑顯示用戶的當(dāng)前位置，幫助用戶理解所處位置與整個(gè)網(wǎng)站的關(guān)系。【應(yīng)用條件】系統(tǒng)級(jí)別較深，超過(guò)3（包含3）級(jí)以上時(shí)；用戶需要返回上一級(jí)頁(yè)面時(shí)；【模式描述】組成：如下圖；

圖STYLEREF1\s4SEQ圖\*ARABIC\s167圖形化面包屑應(yīng)用規(guī)范面包屑與地址欄合二為一；路徑關(guān)系要正確，路徑文本要與上下文相一致；路徑文本與分隔符保持一定的間距，如一個(gè)全角（具體參見(jiàn)《界面視覺(jué)規(guī)范》）；在層級(jí)之間必須使有一個(gè)含義簡(jiǎn)單明確的分隔符；分隔符必須使用“”表示，即體現(xiàn)路徑間的層級(jí)關(guān)系又表示可以點(diǎn)擊展開(kāi)下拉菜單；點(diǎn)擊分隔符展開(kāi)下拉菜單，里面包含了當(dāng)前文件夾下的所有文件夾和文件；其中當(dāng)前路徑文本區(qū)別與其他同級(jí)路徑文本；面包屑的最末級(jí)，不再提供分隔符；每個(gè)層次都是可點(diǎn)選的；當(dāng)你點(diǎn)擊它時(shí)，你就會(huì)替換當(dāng)前打開(kāi)文件或文件夾；星級(jí)評(píng)分星級(jí)評(píng)分是規(guī)定在用戶對(duì)某對(duì)象進(jìn)行等級(jí)評(píng)價(jià)時(shí)，用直接操作的等級(jí)圖標(biāo)來(lái)表現(xiàn)的一種形式?！驹O(shè)計(jì)意圖】所見(jiàn)即所得的操作方式，方便用戶評(píng)價(jià)，增加評(píng)分的使用幾率；用星狀的圖形化形式來(lái)描述等級(jí)，是當(dāng)前用戶比較熟知的流行元素，同時(shí)也符合用戶的心智模型?！緫?yīng)用條件】應(yīng)用在進(jìn)行等級(jí)評(píng)分時(shí)。例如：文章書評(píng)、出售物品評(píng)價(jià)?！灸Ｊ矫枋觥繂螕粜切沃苯釉u(píng)級(jí)組成：文本指示+星級(jí)圖標(biāo)單擊星形直接評(píng)級(jí)圖STYLEREF1\s4SEQ圖\*ARABIC\s168星級(jí)評(píng)分應(yīng)用規(guī)范：星級(jí)圖標(biāo)前給出文本提示，如：“單擊星形直接評(píng)級(jí)”；初始打分區(qū)靜態(tài)顯示五顆空白星星；當(dāng)鼠標(biāo)指針移過(guò)星級(jí)圖標(biāo)區(qū)時(shí)：用戶鼠標(biāo)指針變?yōu)槭中?；在星上移?dòng)時(shí)，即時(shí)置亮所選星星及之前的所有星星，如下圖所示：移至1顆星處：圖STYLEREF1\s4SEQ圖\*ARABIC\s169移至2顆星處：圖STYLEREF1\s4SEQ圖\*ARABIC\s170移至3顆星處：圖STYLEREF1\s4SEQ圖\*ARABIC\s171移至4顆星處：圖STYLEREF1\s4SEQ圖\*ARABIC\s172移至5顆星處：圖STYLEREF1\s4SEQ圖\*ARABIC\s173鼠標(biāo)經(jīng)過(guò)和選中星星時(shí)，星星外觀要及時(shí)變化；用戶鼠標(biāo)在某顆星星上按下時(shí)，該星星前面的所有星星外觀有所變化，視覺(jué)效果比在移過(guò)時(shí)置亮狀態(tài)的基礎(chǔ)上有所加強(qiáng)，表示用戶打分成功，如下圖所示：移過(guò)時(shí)：圖STYLEREF1\s4SEQ圖\*ARABIC\s174按下時(shí)：圖STYLEREF1\s4SEQ圖\*ARABIC\s175【擴(kuò)展描述】組成：文本指示+星級(jí)圖標(biāo)+發(fā)表評(píng)論提示單擊星形直接評(píng)級(jí)單擊星形直接評(píng)級(jí)發(fā)表評(píng)論圖STYLEREF1\s4SEQ圖\*ARABIC\s176發(fā)表評(píng)論應(yīng)用規(guī)范：當(dāng)鼠標(biāo)指針移過(guò)“發(fā)表評(píng)論”提示時(shí)，鼠標(biāo)變?yōu)槭中?，并展開(kāi)評(píng)論層，允許用戶填寫并提交評(píng)論，如下圖所示：?jiǎn)螕粜切沃苯釉u(píng)級(jí)單擊星形直接評(píng)級(jí)發(fā)表評(píng)論圖STYLEREF1\s4SEQ圖\*ARABIC\s177鼠標(biāo)指針移開(kāi)該評(píng)論層區(qū)域，評(píng)論層消失；用戶可以將鼠標(biāo)定位于文本域，輸入評(píng)論文本，點(diǎn)提交，評(píng)論層消失；頁(yè)面上出現(xiàn)文本框“謝謝您參與評(píng)論！”，片刻后消失，如下圖所示：?jiǎn)螕粜切沃苯釉u(píng)級(jí)單擊星形直接評(píng)級(jí)發(fā)表評(píng)論謝謝您參與評(píng)論！圖STYLEREF1\s4SEQ圖\*ARABIC\s178評(píng)論反饋保留圖標(biāo)用戶經(jīng)常使用的圖標(biāo)，作為專用圖標(biāo)，避免理解上的歧義和誤解?！驹O(shè)計(jì)意圖】用戶經(jīng)常使用的圖標(biāo)，作為專用圖標(biāo)，避免理解上的歧義和誤解；【應(yīng)用條件】具體應(yīng)用參見(jiàn)表格中各個(gè)圖標(biāo)的具體說(shuō)明；【模式描述】名稱圖示說(shuō)明三角一側(cè)出現(xiàn)浮動(dòng)層是應(yīng)用存在下拉層時(shí)應(yīng)用箭頭降序排序時(shí)應(yīng)用升序排序時(shí)應(yīng)用置頂置底手機(jī)手機(jī)通知信封郵件通知軟盤保存打印機(jī)打印方氣泡批注對(duì)勾√正確叉×錯(cuò)誤、關(guān)閉嘆號(hào)！警告提示問(wèn)號(hào)？幫助說(shuō)明鉗子設(shè)置豎等于號(hào)暫停圓氣泡留言回復(fù)等五星反饋打分圖STYLEREF1\s4SEQ圖\*ARABIC\s179保留圖標(biāo)應(yīng)用規(guī)范：保留圖示的應(yīng)用范圍只能確定在以上幾方面，要避免在其它設(shè)計(jì)中使用。以上提出了部分的保留圖示，在以后的設(shè)計(jì)中可以根據(jù)應(yīng)用的情況不斷完善和添加；國(guó)際通用的圖標(biāo)必須保持原有意義。彈出層非獨(dú)占焦點(diǎn)層應(yīng)用于彈出層的信息對(duì)產(chǎn)品主界面操作流程沒(méi)有必然影響的一些非持續(xù)性的任務(wù)中；如站內(nèi)消息、模塊設(shè)置等。如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s180非獨(dú)占焦點(diǎn)層【設(shè)計(jì)意圖】適時(shí)的友好的提醒告知用戶；【應(yīng)用條件】不影響用戶的操作流程；提示信息對(duì)用戶來(lái)說(shuō)只是參考和輔助作用；例如：站內(nèi)消息、模塊設(shè)置等設(shè)計(jì)中?！灸Ｊ矫枋觥繎?yīng)用規(guī)范：彈出層的位置需要根據(jù)具體操作的位置相應(yīng)調(diào)整；彈出層可以用鼠標(biāo)隨意拖拽它在屏幕中的顯示位置；主界面的操作不受彈出層的影響；獨(dú)占焦點(diǎn)層應(yīng)用于彈出層的信息對(duì)產(chǎn)品主界面操作流程有直接影響的設(shè)計(jì)中；適用于分權(quán)限查看操作、系統(tǒng)超時(shí)、信息發(fā)送、接收過(guò)程等，如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s181獨(dú)占焦點(diǎn)層【設(shè)計(jì)意圖】緊急有效的提醒用戶；保護(hù)并防止影響用戶之前的操作；【應(yīng)用條件】提示信息對(duì)用戶來(lái)說(shuō)緊急而且特殊；操作對(duì)系統(tǒng)整體后果影響巨大；例如：適用于分權(quán)限查看操作、系統(tǒng)超時(shí)、信息發(fā)送、接收過(guò)程等【模式描述】應(yīng)用規(guī)范：點(diǎn)擊彈出層后，直接影響主界面操作流程，此時(shí)主頁(yè)面處于不可用狀態(tài)；不可用狀態(tài)的視覺(jué)表現(xiàn)參見(jiàn)《界面視覺(jué)規(guī)范》主頁(yè)面處于不可用狀態(tài)時(shí)，不能進(jìn)行任何操作；必須對(duì)彈出層進(jìn)行處理操作后，主界面才可以恢復(fù)繼續(xù)進(jìn)行其它操作；彈出層要居中顯示；彈出層不可以用鼠標(biāo)拖拽，無(wú)法變換位置。

局部獨(dú)占焦點(diǎn)層應(yīng)用于彈出層的信息對(duì)產(chǎn)品主界面的局部操作流程有直接影響的設(shè)計(jì)中；適用于不同會(huì)員分權(quán)限查看、操作某部分信息等；如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s182局部獨(dú)占焦點(diǎn)層【設(shè)計(jì)意圖】提示信息對(duì)用戶來(lái)說(shuō)緊急而且特殊；保護(hù)并防止影響用戶的某些具體操作；【應(yīng)用條件】提示信息對(duì)用戶來(lái)說(shuō)緊急而且特殊；操作對(duì)系統(tǒng)局部的影響巨大；例如：適用于不同會(huì)員分權(quán)限查看、操作某部分信息等；【模式描述】應(yīng)用規(guī)范：彈出層要顯示在局部范圍之內(nèi)，且居中（局部之內(nèi)）顯示；彈出層不可以用鼠標(biāo)拖拽，無(wú)法變換位置；點(diǎn)擊彈出層后，直接影響主界面局部的操作流程，此時(shí)只需將頁(yè)面的相應(yīng)局部置為不可用狀態(tài)即可；局部處于不可用狀態(tài)的部分，不能進(jìn)行任何操作；頁(yè)面其他部分，可以進(jìn)行正常操作；必須對(duì)彈出層進(jìn)行處理操作后，局部頁(yè)面才可以繼續(xù)進(jìn)行操作；搜索模糊搜索模糊搜索是只要用戶知道要查找的大概內(nèi)容和范圍時(shí)，給用戶提供的按照輸入的關(guān)鍵字進(jìn)行查詢的方式?！驹O(shè)計(jì)意圖】幫助用戶正確使用模糊搜索；幫助用戶方便快捷地輸入關(guān)鍵詞信息；減少無(wú)效輸入的幾率，提高搜索的準(zhǔn)確性?！緫?yīng)用條件】用戶對(duì)于要查找的信息沒(méi)有具體明確的數(shù)據(jù)限定時(shí)；例如：查找包含某主題的圖書、文章等相關(guān)資源?！灸Ｊ矫枋觥拷M成：搜索輸入框+搜索按鈕如下圖所示：圖STYLEREF1\s4SEQ圖\*ARABIC\s183模糊搜索應(yīng)用規(guī)范：搜索輸入框中給出默認(rèn)的提示文本（如：請(qǐng)輸入商品名稱關(guān)鍵詞），以灰色字體顯示；提示文本的內(nèi)容要簡(jiǎn)潔并能夠指導(dǎo)用戶查詢；當(dāng)用戶鼠標(biāo)在輸入框內(nèi)定位（單擊）時(shí)，提示文本自動(dòng)清除，等待輸入；當(dāng)用戶鼠標(biāo)移到輸入框外單擊時(shí)，默認(rèn)的提示文本重新顯示；點(diǎn)擊“搜索”，系統(tǒng)根據(jù)輸入的關(guān)鍵詞搜索出相關(guān)內(nèi)容，要求對(duì)搜索結(jié)果有相應(yīng)文本統(tǒng)計(jì)或描述，如：“抱歉，沒(méi)有找到與“xxxx”相關(guān)的信息。請(qǐng)檢查輸入字詞有無(wú)錯(cuò)誤。請(qǐng)換用另外的查詢字詞。請(qǐng)改用較常見(jiàn)的字詞?！?；或“約有123條信息符合您的搜索條件，以下是1-15條?！?；搜索結(jié)果提示頁(yè)面規(guī)范參見(jiàn)《提示規(guī)范文檔》?！緮U(kuò)展描述】組成：類別選擇下拉框類類別選擇下拉框圖STYLEREF1\s4SEQ圖\*ARABIC\s184分類模糊搜索應(yīng)用規(guī)范：模糊搜索可以配合另外的精確搜索條件（如：?jiǎn)芜x、多選等）一起使用；下拉框中默認(rèn)顯示“全部××”選項(xiàng)，提示用戶可以進(jìn)行選擇（如：全部類別）。精確搜索精確搜索是在搜索的內(nèi)容可以設(shè)定多種組合條件時(shí)，提供給用戶的按照設(shè)定的限定條件進(jìn)行查詢的方式?！驹O(shè)計(jì)意圖】幫助用戶快速有效的完成精確搜索；默認(rèn)值幫助用戶方便快捷地設(shè)定各條件信息，減少無(wú)效輸入?！緫?yīng)用條件】信息量較大，用戶很難通過(guò)其它途徑獲知時(shí)；可以通過(guò)具體屬性縮小搜索范圍；對(duì)象包含多個(gè)屬性?！灸Ｊ矫枋觥拷M成：各種不同的搜索條件選框+搜索按鈕：圖STYLEREF1\s4SEQ圖\*ARABIC\s185精確搜索應(yīng)用規(guī)范：搜索條件要合理，容易理解。各控件的排列順序，主要依照該條件的關(guān)鍵程度以及用戶對(duì)該條件的熟知程度，其次依照控件的視覺(jué)布局效果；精確搜索根據(jù)搜索條件，提供輸入框、選擇下拉框或單選控件；在輸入框中默認(rèn)顯示文本“不限”；當(dāng)用戶鼠標(biāo)在輸入框內(nèi)定位（單擊）時(shí)，提示文本自動(dòng)清除，等待輸入；當(dāng)用戶鼠標(biāo)移到輸入框外單擊時(shí)，默認(rèn)的提示文本重新顯示；在選擇下拉列表框中默認(rèn)顯示選項(xiàng)文字“不限”；在單選組中默認(rèn)選中第一項(xiàng)；點(diǎn)擊“搜索”，系統(tǒng)根據(jù)輸入的關(guān)鍵詞搜索出相關(guān)內(nèi)容，要求對(duì)搜索結(jié)果有相應(yīng)文字統(tǒng)計(jì)或描述，如：“抱歉，沒(méi)有找到相關(guān)的信息。請(qǐng)檢查輸入字詞有無(wú)錯(cuò)誤。請(qǐng)換用另外的查詢字詞。請(qǐng)改用較常見(jiàn)的字詞。”或：“約有123條信息符合您的搜索條件，以下是1-15條?！?；搜索結(jié)果提示頁(yè)面規(guī)范參見(jiàn)《提示規(guī)范文檔》?！緮U(kuò)展描述】組成：標(biāo)簽如圖所示：頁(yè)簽頁(yè)簽圖STYLEREF1\s4SEQ圖\*ARABIC\s186分類精確搜索應(yīng)用規(guī)范：多類別搜索時(shí)，可以使用頁(yè)簽表示不同的類別。默認(rèn)是第一個(gè)頁(yè)簽的搜索條件。頁(yè)簽的順序遵循該條件的關(guān)鍵程度以及用戶對(duì)該條件的熟知程度，其次依照控件的視覺(jué)布局效果。圖STYLEREF1\s4SEQ圖\*ARABIC\s187錯(cuò)誤與正確示例當(dāng)前選中的類別必須足夠明顯，并能清晰的表明頁(yè)簽與各搜索項(xiàng)是一體的關(guān)系；不同頁(yè)簽里的搜索項(xiàng)，要與當(dāng)前頁(yè)簽相符。應(yīng)用規(guī)范：可提升為標(biāo)簽的項(xiàng)目包含的選項(xiàng)不應(yīng)該超過(guò)3項(xiàng)（三項(xiàng)以上考慮應(yīng)用其它的控件表現(xiàn)，比如下拉選框）；該選項(xiàng)可作為劃分類型，一般為用戶進(jìn)行篩選的第一項(xiàng)條件；【注意事項(xiàng)】不強(qiáng)制用戶填寫哪條或者幾條選項(xiàng)，故每一項(xiàng)搜索條件前面不添加任何單選或復(fù)選框；當(dāng)高級(jí)搜索點(diǎn)擊“搜索”后，頁(yè)面應(yīng)該在適當(dāng)位置顯示搜索結(jié)果，且保留用戶剛剛設(shè)置的搜索條件，并且提供“重置”按鈕，恢復(fù)為默認(rèn)：數(shù)據(jù)添加添加單個(gè)文件添加單個(gè)文件主要應(yīng)用于引用、下載、瀏覽單個(gè)文檔、圖片或壓縮文件的設(shè)計(jì)中?！灸Ｊ矫枋觥拷M成：添加文件框