界面組件級交互設計規(guī)范方案

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

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

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

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

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

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

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

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

用戶在輸入錯誤時，要針對不同的輸入內(nèi)容給出相應明確的錯誤提示，必要的時候要提出簡要的解決方法提示。

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

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

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

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

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

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

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

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

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

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

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

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

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