界面組件級交互設(shè)計規(guī)范

精選精選精選精選界面交互設(shè)計規(guī)范IT應(yīng)用服務(wù)產(chǎn)品界面組件級交互規(guī)范V1.0目錄TOC\o"1-5"\h\z\o"CurrentDocument"概述 5\o"CurrentDocument"規(guī)范的目的 5\o"CurrentDocument"規(guī)范適用的范圍 5\o"CurrentDocument"規(guī)范適用的人群 5\o"CurrentDocument"基本原則 6\o"CurrentDocument"一致性 6\o"CurrentDocument"簡潔性 6\o"CurrentDocument"避免干擾和打斷 6\o"CurrentDocument"減輕用戶記憶負擔(dān) 6\o"CurrentDocument"及時有效的反饋 6\o"CurrentDocument"讓用戶放松心態(tài)，不怕犯錯 7\o"CurrentDocument"產(chǎn)品交互通用規(guī)范 8\o"CurrentDocument"受范性指示 8\o"CurrentDocument"操作不可用狀態(tài) 8\o"CurrentDocument"組件規(guī)范 10\o"CurrentDocument"表格 10\o"CurrentDocument"單元格數(shù)據(jù) 15單元格數(shù)據(jù)展示 15通訊錄 16信息列表 18編號和序號 20\o"CurrentDocument"編號 20序號 21\o"CurrentDocument"注冊表單 23\o"CurrentDocument"聯(lián)系方式 28圖片裁切 32固定尺寸圖片裁切 32\o"CurrentDocument"自定義尺寸圖片裁切 34\o"CurrentDocument"翻頁 35日期輸入 39通過日歷選擇日期 39\o"CurrentDocument"年份跨度較大時的日期選擇 42分隔 45\o"CurrentDocument"等量條目分隔線 45\o"CurrentDocument"高級加密 47\o"CurrentDocument"進度條 50面包屑 52星級評分 53保留圖標(biāo) 56彈出層 58非獨占焦點層 58獨占焦點層 58局部獨占焦點層 60搜索 61模糊搜索 61精確搜索 63數(shù)據(jù)添加 66添加單個文件 66添加多個文件 68添加行 71排序 71

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

1圜像?圖層?選擇?濾情?還原RGB顏色前進一步(W)后退f(K)CtrkZShift-+Ctrl+ZAlt4CtrkZ件漸制口)…Shift+Ctrl+F「切(T)CtrltXRJH(C)CtrkC合并拷貝(Y)sm+arh-c祜限P)Ctrl+V貼入⑴&hift+Ctrl+V清除任)圖3-1菜單操作不可用工具欄按鈕不可用時不能隱藏，應(yīng)該顯示為不可用狀態(tài)，如下圖所示:圖3-2工具按鈕不可用當(dāng)一個操作在用戶進行了某行為(如填寫或選擇了某選項時)就變?yōu)榭刹僮?，則該操作不可用時不能隱藏，應(yīng)該顯示為不可用狀態(tài)，如下圖所示：圖3-3操作命令不可用注：具體不可用狀態(tài)效果見視覺規(guī)范。精選精選精選精選4組件規(guī)范4.1表格主要應(yīng)用于大批量數(shù)據(jù)的展示、查看、維護等方面?；A(chǔ)表格是表格本身最原始的一些屬性集合，針對表格在不同場景下的狀況，在擴展設(shè)計中會一一羅列出來?！驹O(shè)計意圖】?合理有效的組織數(shù)據(jù)信息；?幫助用戶快速、有效的查看表格數(shù)據(jù)；?幫助用戶快速、準(zhǔn)確的完成對表格的操作；【應(yīng)用條件】適用于批量數(shù)據(jù)的展示和維護；【模式描述】組成：表格標(biāo)題+表格表頭+表格行間隔線+表格行如下圖所示：蔻格標(biāo)題表格表頭表格行間隔線蔻格標(biāo)題表格表頭表格行間隔線表格行訂單號2口07口422-口口口-口。2訂單時間2007-06-05商品總價100.00訂單總價1DQ.00貨物狀高未發(fā)賃款項狀態(tài)已付歙2口口了口佇-0口口-口012007-06-05100.00100.00未接貸已付款2口07口42：3-口口1＞口。22007-0&-05100,00未發(fā)貨已付款之口口424-口口口-口012007-06-05100.00100.00耒發(fā)貨已付敬2口口兀424-口口口-口口22007-06-05100.00100.00未發(fā)貨已付款?口口7口42，-口口口-口。120D7-Q6-05100.00ICO.00未發(fā)茸已付款2口口了口425-口口口-口皿2Q07-05-05100.001DO.OO未發(fā)貨已付款2口口7口。2白-0口口-口口12007-05-05100.00100.00未發(fā)貨已付款2口口了口426-口口□-口口22007-06-05100.00100.00未發(fā)貨已付歌2007042706-05100.001DO.DO未發(fā)貨己付款耨訂單列看圖4-1 基礎(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)之間間隔一定的距離，如：一個半角空格；具體視覺效果參見《界面視覺規(guī)范》。表格的表頭與表格主體在外觀上要有區(qū)分；表格行間隔線：表格的主體內(nèi)容用表格線區(qū)分； 表格線的粗細要適中，如1px?！緮U展描述】根據(jù)應(yīng)用場景的不向，可以對基礎(chǔ)表格進行擴展；可以為表格增加數(shù)據(jù)篩選區(qū)、命令按鈕區(qū)、操作按鈕區(qū)、表格主體區(qū)、翻頁區(qū)、操作按鈕區(qū)。整體效果如下圖所示：數(shù)據(jù)晞選區(qū) 排序未處理 處理中處理完成曳無效訂隼gg未處理訂單冽表□訂單號?20070422-00D-D0；20070423-000-001L訂單時間 商品總階 訂單總價 黃物供態(tài)2007-0&-05 100,00 100,00 未發(fā)貨皿丁-0日把 100.00 iaa.oo 來發(fā)貨操作刪除刪除整皿口44口口口-口英口丁口424-0口口-口口2瞿口口7口4空4-口口口一口口32007-06-05 lOOLOO LCID.00 未發(fā)貨2007-05-05 10OLOO 1□□□□ 未發(fā)貨2ao7-o&-05 loo.oio iaa.no 未發(fā)貨刪除冊蹤刪除W口口7口4W5?□□□?□□!Z□口加4252Q07-0&^05WOLOO 未發(fā)貨2007-0&-05 100.00 100.口口 去發(fā)貨刪除刪除2an7-0&-0Flooi.ooiao.oa未發(fā)貨閽除2口17口426上口口了口4E6-2007-0&-05lOOLOO 100.00 未發(fā)貨2007-0&-05100.00 100.D0 未發(fā)貨刪除制除翻向區(qū) 1 234567810▼條/頁操作按朝區(qū) 口用正 應(yīng)用 取消圖4-2表格操作區(qū)分布京設(shè)置區(qū)1）標(biāo)題列排序：表格列標(biāo)題可以排序時，表格的列標(biāo)題要體現(xiàn)出當(dāng)前排序狀態(tài)，并要區(qū)分于其他列標(biāo)題顯示，如：背景和圖標(biāo)高亮顯示；如下圖所示：

□亦單號） 仃單時間 肉品總價 訂單總檢 貨物狀態(tài)圖4-3標(biāo)題列排序表格列標(biāo)題進行切換時，原列標(biāo)題恢復(fù)初始狀態(tài)，切換到的列標(biāo)題顯示為排序狀態(tài)；2）表格行選中操作：表格中的第一列，既可表示對行的選擇如復(fù)選框；同時還可以用圖標(biāo)標(biāo)示數(shù)據(jù)狀態(tài)；當(dāng)兩者都有時，顯示復(fù)選框在上，圖標(biāo)被覆蓋；在對表格行進行選中（點選行的任意位置即可選中）時，此行要高亮顯示，同時此行前復(fù)選框為選中狀態(tài)，同時還可以進行多行選擇；需要全選時，只需勾選列標(biāo)題中的復(fù)選框即可選中當(dāng)前列表的全部行數(shù)據(jù)。3）數(shù)據(jù)篩選區(qū)：當(dāng)數(shù)據(jù)內(nèi)容可以明確的按其狀態(tài)、類別進行劃分時，可以應(yīng)用頁簽的形式來進行設(shè)計；頁簽總寬度在表格寬度的75%之內(nèi)為佳，超出此范圍時，需應(yīng)用其他設(shè)計形式如下拉框顯示的形式等；如下圖所示：一條處理 處理中 處理完成 無效訂單］ 未處理訂單列表 一圖4-4數(shù)據(jù)篩選區(qū)當(dāng)前分類狀態(tài)的的頁簽要高亮顯示，要明顯區(qū)別于其他頁簽；頁簽內(nèi)的文字，需要簡單明了，相同內(nèi)容的文字省略；如上圖中未處理（訂單）處理中（訂單）、處理完成（訂單）；應(yīng)用頁簽設(shè)計時，頁簽類別要劃分明確合理；如按照數(shù)據(jù)狀態(tài)或分類進行劃分。4）命令按鈕區(qū)：針對整體頁面進行操作或者對表格整體進行操作的按鈕放置在此區(qū)域內(nèi)；如：導(dǎo)入、導(dǎo)出、新增等；按鈕的其它細則參見《界面視覺規(guī)范》 。5）操作按鈕區(qū)：對表格主體的數(shù)據(jù)進行操作的按鈕放置在此區(qū)域。 如：刪除、發(fā)布、下架、上架、審核等；當(dāng)列表的數(shù)據(jù)超過一屏顯示時，在列表上方也要顯現(xiàn)操作按鈕區(qū)，方便用戶對列表進行操作；如下圖所示：□a訂單號4訂單時間2007-06-05商品總價1DO.OO訂單總價100.00貨物狀態(tài)未發(fā)貨單條數(shù)據(jù)2皿CI422田口口-口口］2口□了iMaa-noci-gi2007-06-05100.00100,00未鞋貨操作區(qū)回2口口了口4打?口口□■QQ22007-06-0510000100.00耒發(fā)貨■0□斗24-口口口-口口工2007-06-05100.00100.00未發(fā)貨2口口加424-口口口-0口22007-06-05100.00100.00耒愛貨2QQ『口425-02007-06-05100.00100,□□未發(fā)貨20D70425-0D0-0022007-06-05100.00100.00未發(fā)貨未處理處理中處理完成未處理處理中處理完成無效訂單$$未處理訂單列表確定應(yīng)用取消訂單錄入操作按鈕區(qū)圖4-5操作按鈕區(qū)按鈕的其它細則參見《界面視覺規(guī)范》 。6）翻頁區(qū)：當(dāng)列表中的數(shù)據(jù)量超過默認的數(shù)據(jù)顯示條數(shù)時，應(yīng)用翻頁模式來處理多條數(shù)據(jù)的顯示；翻頁在列表下方居中顯示；翻頁的詳細功能和模式參見“翻頁模式組件規(guī)范” 。7）單條數(shù)據(jù)操作區(qū)：對行數(shù)據(jù)進行操作的按鈕要與操作按鈕區(qū)的按鈕視覺上要有所區(qū)分；具體參見《界面視覺規(guī)范》；盡量不要在此處安排太多的操作，太多的操作給使用者過多的判斷負擔(dān)。應(yīng)考慮其他的界面布局方式。8）表格列標(biāo)題區(qū)：當(dāng)表格的數(shù)據(jù)列較多，屏幕顯示已經(jīng)達到最大限度，而這些數(shù)據(jù)列又必不可少時,允許通過鼠標(biāo)拖動的方式來對數(shù)據(jù)列的寬度進行改變；同時可以使用橫向滾動條；調(diào)整列寬度時，要在整體表格邊線內(nèi)進行，以免整體頁面變形；數(shù)據(jù)項內(nèi)容顯示部分太長時，省略多余部分并加省略號；鼠標(biāo)指針?？繒r，全部詳細內(nèi)容顯示；9）數(shù)據(jù)條目設(shè)置區(qū)：默認顯示當(dāng)前頁面所能顯示的最大數(shù)據(jù)條目數(shù)；如： 10條/頁；精選精選精選精選精選還要提供幾個數(shù)值選項，供用戶選擇；如:20、30、50;精選精選.2通訊錄精選精選4.2單元格數(shù)據(jù)4.2.1單元格數(shù)據(jù)展以單元格為單位的數(shù)據(jù)展示是指應(yīng)用表格的單元格來描述每個數(shù)據(jù)對象的展示形【設(shè)計意圖】?讓用戶更加清晰的瀏覽信息;?方便查看選中單元格的信息。【應(yīng)用條件】適用于多數(shù)據(jù)的查看、瀏覽和操作；例如：如短信中的收信人、郵件中的收件人等。組成：如下圖所示:圖4-6單元格數(shù)據(jù)展示應(yīng)用規(guī)范：鼠標(biāo)經(jīng)過或選中此類表格的單元格時，行或列的背景色高亮顯示。此類單元格請支持按“Shift”鍵進行連續(xù)選定，整行整列選定時要有箭頭圖標(biāo)反饋給用戶。此類單元格請支持按“Ctrl”鍵進行間斷選定。注意事項：數(shù)據(jù)類表格是指表格所描述內(nèi)容是由多個數(shù)據(jù)或一組對象（每個對象至少包含兩個數(shù)據(jù)項）組成，對于展示某些信息的表格不屬于數(shù)據(jù)類表格。通訊錄是以單元格數(shù)據(jù)展示形式為基礎(chǔ)的，集添加刪除修改等功能于一體的組件。【設(shè)計意圖】?用戶不會再輸入通訊錄信息之間分隔符，更不會出現(xiàn)由于分隔符輸入不正確而導(dǎo)致的錯誤操作；?為用戶顯示人名，而不顯示地址，方便了查看，同時增加了自動匹配，查找，將新信息增加到通訊錄和導(dǎo)出通訊錄的功能?！緫?yīng)用條件】?適用于需要用戶多次填寫同類信息的地方。如：競價通中的“關(guān)鍵詞管理”；日期格式中年份的展現(xiàn)方式；郵件、短信產(chǎn)品的收信人列表?！灸Ｊ矫枋觥拷M成：如下圖所示：點擊展開菜單畋信人：，/廉 |司蟀|李潁穎|李燕|李欣忤曜圉| |H0查找添加號碼到通訊錄導(dǎo)出圖4-7通訊錄應(yīng)用規(guī)范:a）通訊錄中無此信息的高亮反饋通訊錄中存在姓名時表格內(nèi)只顯示姓名；通訊錄中沒有姓名只有手機號碼（或 email地址）時則顯示號碼（或email地址）；姓名、手機號碼（或email地址）兩者都無的單元格自動高亮反饋給用戶。b）默認顯示默認顯示表格的一個空行；如下圖所示:

收信收信人；.圖4-8通訊錄2整行單元格數(shù)據(jù)被填滿時，表格自動增加一行；如下圖所示:馬洪軍李穎穎李鼎季欣郭福恩胡平圖4-9通訊錄3收信人：增加至3行時，出現(xiàn)滾動條；如下圖:石焉馬洪軍季穎穎季欣郭福恩蔡成強;馬洪海孫＜1渤李林攣藩郭林思孫小林海郭灌林竇成強石誨馬林軍孫小惠林曦唳信人：,增加至三行.自動現(xiàn)漆劭條圖4-10通訊錄4C）自動匹配支持手動輸入，可以輸入人名或地址；輸入地址時自動匹配通訊錄中對應(yīng)的人名;d）快捷操作為高級用戶提供快捷操作，輸入新人名或新地址時，可以將其添加到通訊錄。如卜圖:石蕊馬拱軍李穎穎李燕季欣郭福忠蔡成強;|馬洪海孫恤李林李海郭林恩利小林海I郭福林黎成強1354..馬林軍如小惠林娓鰥i收信人：,添加號碼到通訊錄人增加至三行，自動出現(xiàn)淳前條圖4-11通訊錄5注意事項:使用時遇到兩個人同名時可以采用“姓名（號碼）”的方式顯示。使用時遇到兩個人同名時可以采用“姓名（號碼）”的方式顯示。精選精選精選精選4.34.3信息列表精選精選信息列表是顯示單列信息集合的一種視圖展示?！驹O(shè)計意圖】?利于信息的展示，方便使用者檢索信息；?快速定位信息條目?！緫?yīng)用條件】?單列信息集合；?索引類的信息列表；例如：信息列表多應(yīng)用于索引類的信息列表，如：新聞列表、目錄等。【模式描述】組成：項目符號、列表行，如下圖所示：動力新聞項目符號列表行守信用創(chuàng)和諧促發(fā)展項目符號列表行量悻獻表教育先行傾情電子商務(wù)萬里行中企動力將IT,服務(wù)迸行到底胭簍制新科技氯先一深圳市科技局領(lǐng)導(dǎo)以音位組對中企動力一中企韻力榮衰,最佳域名湮明服務(wù)機構(gòu)；化秀網(wǎng)站承建商二.檄情開拓智惹麥革一熱黑祝賀2。。了中企動力豌理人年會加速企業(yè)信息生健康發(fā)展」中企動力再獲政府首皆一國務(wù)院信…致力于企業(yè)信息化建遢中企動力聚聯(lián)信息化突出貢獻企業(yè)…171Obi域名熱潮襲來JAqF網(wǎng)站誰先行圖4-12信息列表應(yīng)用規(guī)范：項目符號可以是固定的符號，也可以是具有意義的圖標(biāo)；項目符號如果是圖標(biāo)， 圖標(biāo)必須與應(yīng)用場景相符， 盡量不使用無意義的僅為裝飾作用的視覺效果顯著的圖標(biāo)作為項目符號；列表行的內(nèi)容，可以為文字和圖標(biāo)，文字一般為簡單的標(biāo)題；列表行的文字內(nèi)容應(yīng)該簡單易懂，能夠明確的反應(yīng)所要說明的信息。列表行內(nèi)容如果折行，行距必須小于兩個記錄行之間的段距；由于信息列表多為展示信息的條目，因此信息列表的行間距要有一點留白，不要給使用者造成視覺上的負擔(dān)。【擴展描述】組成：列表標(biāo)題、單選按鈕、多選按鈕、分隔線、翻頁，如下圖所示: 列裝標(biāo)黑動力新聞守信用創(chuàng)和諧促發(fā)展量體制衣教背先行傾情電子商務(wù)萬里行中企動力怖IT服務(wù)進行到底服務(wù)創(chuàng)新科技領(lǐng)先一深il而科技局領(lǐng)導(dǎo)及專家組對中企動力..，中企動力親茯?最佳域名注冊服務(wù)機構(gòu)、-優(yōu)秀網(wǎng)站承建商二.檄惜開拓智慧芟革一熱烈祝賀2007中企動力經(jīng)理人年會...懂速企業(yè)信息化健康發(fā)展，中企動力再驍政府苜肯一國基隕僖…致力于企業(yè)信息化建般中企動力索交-信息化突出貢獻企業(yè)二噂名熱^,vjap同站i唯先方?俞凡:深入企業(yè)電子向翁研究入選深加店家 1 分隔線中企勃力/耨起?中國企業(yè)?舞第一國俾大業(yè)中企動力榮徵財富中國功勵榜獲十大成長型企業(yè)獎中企動力再受CNH心嘉獎?wù)@兩金?推進移前信息化發(fā)展中企動力義不容辭源信推動企業(yè)信息化中企動力再獲.誠信企業(yè)獎’一高在幼0%隼度評選全面揭鎏?中企動力再拔頭籌領(lǐng)先科技「先進技術(shù)企業(yè)‘名至實歸俞凡先生當(dāng)選中國電子南多物含高微專家領(lǐng)軍中國電子南筠友…■中企動力再傳喜訊獲中國電子商務(wù)協(xié)會雙口證?中企動力榮獲之?？?西南信息產(chǎn)業(yè)年會’兩項大獎翻頁 J翻頁圖4-13信息列表2應(yīng)用規(guī)范：列表標(biāo)題是對列表中的信息內(nèi)容的概括性標(biāo)題（標(biāo)題的寫法請參見“標(biāo)題”控件的描述）；單選按鈕，多選按鈕在需要時替換項目符號的位置；分隔線：在記錄行太多時需要提供分隔線（請參見“分隔線”控件中的相關(guān)描述）；翻頁（請參見“翻頁”組件中的相關(guān)描述） 。.2序號精選精選.2序號精選精選4.44.4編號和序號精選精選4.4.1編號用來標(biāo)識某一個對象的唯一號碼。一個編號就代表著一個對象。 使用編號能夠更好的幫助用戶記憶和或管理對象。如下圖所示：□仃單號訂單時間，?訂單來源□2007-Q4-06前臺訂購□ZOCITQTIODS2007-04-(36后臺錄入□州07071口042007-04-36后臺錄入□￡0三口門口口32007-04-06后臺錄入□20三口71口里2007-04-06后臺錄入1口沈07口71001.2007-04-06后臺錄入圖4-14編號不'例【設(shè)計意圖】?更好的方便用戶記憶和管理對象；?合理的使用編號，能方便用戶更好的進行溝通；【應(yīng)用條件】?需要用唯一號碼來標(biāo)識對象時；?具有真實、合理、有效的意義；例如：訂單列表中訂單的編號、酒店客房管理中客房的實際編一號等等;【模式描述】應(yīng)用規(guī)范：編號必需代表一個對象，不要讓編號無意義的存在；如果用戶更關(guān)注編號，也就是說編號對于用戶是第一位的，則必須提供編號。比如，酒店系統(tǒng)中對房號的關(guān)注就比人名要重要，所以編號的視覺層次應(yīng)該突出。如果用戶不常使用編號而通常更關(guān)注別的屬性；比如人名、物品名等，可以默認不顯示編號，當(dāng)用戶需要時能夠查到編號。序號是用來標(biāo)識一組有序?qū)ο蟮臄?shù)字，它具有先后順序的含義。如下圖所示:I叩Song* mm：dt?TU SqpQi HMqh!L 2 ■ MiBWdlnf MfWEMgeX 4 ■ KkidWrniBn 帆?S*cr?cX 1 S (AnTau]Wl hMeMow?SocwPflBtadeTOC\o"1-5"\h\zJL ^ ^uH-vfJhwCrw TlwDu#-.,byQuwn ?|￡ 345 ■Why 融LM班VteiMl Q?ibi，YWhgtwihouvYH%9 yi；Q7n156■FvfcBottomtdSlrUbySuev -?Qi* 7 ?/naQlCh?SwMDySec懈mt”A.1M.00411*1StopB4lbvirln"'Jourrv^ ?,：".lfl.XA.AnywayTbJWinlflbvJecptuv O序號，有先后順存的含義C歌曲前1。位腓名3圖4-15序號示例【設(shè)計意圖】?使用戶更好了解對象的先后順序或按一定的順序去了解對象；?更好的展示有先后順序的數(shù)據(jù)；【應(yīng)用條件】?需要標(biāo)識一組有序?qū)ο髸r；例如：如歌曲排行旁、熱銷商品排行、點擊率排行等設(shè)計中；【模式描述】應(yīng)用規(guī)范：序號必需代表一個對象在集體中的序列，不要讓序號沒有意義。如果用戶關(guān)注對象的排列順序，則必須提供序號。如果用戶根本不關(guān)注對象的順序，請不要使用序號，這樣會混淆用戶的注意。精選精選精選精選序號沒有意義」應(yīng)該格其刪除翟素姑用到兼序號r 信息標(biāo)題 內(nèi)容摘要1 款企動力數(shù)南土氐&版 中企動力數(shù)商3,口改版卬企動力數(shù)商3口改版2 中企動力班商1曲版 中企動力邀商工口改做中企動力漱商3.0改旗3 中企勵力數(shù)南安口改版 中企動力數(shù)商工口改版卬企動力數(shù)商3口改版4 中企動力亂商3.畋版 中企動力數(shù)高3一口改版卬全動力數(shù)商3一口改版E 中企動力數(shù)商立嗽版 中企動力數(shù)商工口改版中企動力題商分口改版6 中企動力數(shù)商3.網(wǎng)技 中企動力數(shù)商工口改版中全動力數(shù)商3.口改版圖4-16錯誤示例注冊表單注冊表單應(yīng)用于對用戶的輸入格式有一定的要求的設(shè)計中，幫助用戶更好的完成填寫表單的操作。【設(shè)計意圖】?快速高效的幫助用戶完成注冊；?盡量減少用戶犯錯；?在用戶出錯后，友好的有效的告知錯誤，并提供解決方案；?給用戶提供及時有效的反饋信息?！緫?yīng)用條件】?超過5項表單信息填寫修改時；?用戶出錯的頻率較高時；?系統(tǒng)對數(shù)據(jù)的要求比較嚴格時；例如：應(yīng)用于填寫注冊信息、修改密碼等設(shè)計中?！灸Ｊ矫枋觥拷M成：各輸入控件+必填項指示+格式要求提示+對錯判斷反饋+提交按鈕如下圖所示：

圖4-17注冊表單應(yīng)用規(guī)范:表單的設(shè)計應(yīng)該遵循簡潔的設(shè)計原則。在注冊填寫時，盡可能的只提供必須填寫的選項給用戶，其他非必填項，可以通過選填或者在日后需要時再進行完善的方式來完成。a）信息輸入對錯判斷：信息輸入正確時，要給與填寫正確的反饋；信息輸入錯誤的時候，要給出錯誤的反饋,并給出具體的錯誤原因要高亮反饋，同時注釋語位置整體給出反饋提示。如下圖所示：圖4-18圖4-18信息輸入對錯判斷用戶在輸入錯誤時，要針對不同的輸入內(nèi)容給出相應(yīng)明確的錯誤提示，必要的時候要提出簡要的解決方法提示。例如：在用戶名填寫時，可能出現(xiàn)的錯誤提示；您輸入的用戶名過短！您輸入的用戶名中不能包含字符“ &（等等）”！你輸入的用戶名“xxx”已經(jīng)被占用，請重新輸入！b）輸入格式約定（注釋文本）：當(dāng)用戶需要輸入某一項時，相應(yīng)注釋文本才顯示出來；對于表單中的某些內(nèi)容除了需要給予用戶正確填寫格式的提示外還需要簡要說明填寫的必要性，如下圖所示：只包含字母、數(shù)字，句點連字符O下劃線L_「0 且體數(shù)據(jù)的約束內(nèi)容請輸入有效d同牛j它將成為您找回密螞的重要儂據(jù)- 內(nèi)落斌寫的必要性說明圖4-193）驗證碼:驗證碼中的圖示字母是隨機產(chǎn)生的，但要注意盡可能避免顯示一些不易區(qū)分的字母和數(shù)字，讓用戶難以辨別（如： “0和0”），如下圖所示：HhRY4位為最佳;圖4-204位為最佳;驗證碼圖示，要求相對清晰容易辨別，驗證碼的位數(shù)控制在驗證碼由系統(tǒng)隨機產(chǎn)生，在個別情況下字母和數(shù)字可能會難以辨別，此時用戶可以點擊鏈接文字（看不清，換一張）來更換驗證碼，如下圖所示:點擊刷新，更颼證強圖4-21驗證碼示例用戶在輸入框內(nèi)輸入驗證碼后，要及時給出反饋提示（不要到提交時才給出提示）如下圖所示：圖4-22驗證碼錯誤判斷4）提交按鈕：存在驗證或提交按鈕時，只有所驗證或提交的部分輸入完畢并且正確后，按鈕才能由置灰狀態(tài)變?yōu)榭捎脿顟B(tài)，如下圖所示： 不可用注制 可用圖4-23注冊按鈕5）成功告知表單最終填寫提交完成后，要給出“提交成功或注冊成功”的相關(guān)提示，明確告知用戶此操作正確完成；6）協(xié)議

單擊我接受”意味著：您同意并接受服務(wù)協(xié)議和隱私聲明?！緮U展描述】應(yīng)用規(guī)范：1）密碼強弱提示當(dāng)用戶賬號的保密性相對較高時，可以應(yīng)用密碼的強弱提示來保證密碼的復(fù)雜度。如下圖所示：圖4-24密碼強弱在輸入密碼時，旁邊顯示注釋文本：明確注明密碼強弱的規(guī)則和提示，如下圖所示:密碼：********密翹強度二次弱密碼：********密翹強度二次弱強度高的雷屑包含7-16個字符J不包含一常見詞語更名稱，并且包含三種類型的字符，大寫字符，小與字符.數(shù)字期符號.鎏碼招弱規(guī)則和提示圖4-25密碼強弱提示當(dāng)用戶輸入的內(nèi)容錯誤或不完全正確時，要求提示的反饋信息必須提示明確，同時給出正確的解決方法，如下圖所示：場量 表現(xiàn) 要求沫輸入密螞盤度:* 耒輸入時無任何反饋，置灰顯示密碼強度：*弱 "）盥輸入的密碼強度較弱，存在安全隈患士整體寬度的前1/班強度高的密碼不包含常見詞語式名稱 表示密碼強度為弱密碼強度：” 中 整體寬度的“3至E&區(qū)域表干 系密眄強度為中口密螞強度；率r 強 整體寬度的后14區(qū)域表強 示密碼強度為強口圖4-26密碼強弱提示對照表2）注冊進度提示根據(jù)產(chǎn)品的特性，要求用戶填寫的注冊表單較長、步數(shù)較多時，需要給出注冊的進度精選精選精選精選條提示，明確的告知當(dāng)前注冊的進度。3）分組線注冊內(nèi)容較長時，要用分組線，對要求用戶輸入的選項進行分類分隔顯示（具體使用參見“分組線規(guī)則”）?！咀⒁馐马棥坷缁榻榻挥训葓鼍爱?dāng)對用戶信息要求嚴格時，可以應(yīng)用注冊向?qū)б龑?dǎo)注冊過程。如果表單中需要填寫的數(shù)據(jù)項較多，頁面較長，必填項又比較分散且數(shù)量較少時，必聯(lián)系方式聯(lián)系方式是對表單中提供給用戶填寫詳細聯(lián)系方式一種組件規(guī)定?！驹O(shè)計意圖】幫助用戶有效、快速的填寫聯(lián)系方式;減少用戶輸入錯誤的幾率?！緫?yīng)用條件】需要用戶填寫詳細聯(lián)系方式時。例如：網(wǎng)上注冊，網(wǎng)上購物填寫發(fā)貨地址?！灸Ｊ矫枋觥縏OC\o"1-5"\h\z組成：各輸入控件，包括：“國家地區(qū)”、“省份”、“城市”、“聯(lián)系電話”、“傳真號碼”、

“手機號碼”、“聯(lián)系地址”、“郵政編碼”等（根據(jù)具體需要再增加） 。I招屐系方式 〕國涼地區(qū)：中國 “省樁：口晾7城市：北京E聯(lián)系電語：066 -傳其尋螞二DS6-0L0-59022266手機號碼二086-136252S2142聯(lián)系地址：郵政編M:looiio圖4-27聯(lián)系方式應(yīng)用規(guī)范:國家地區(qū)”、“省份”和“城市”要有連動關(guān)系；“國家地區(qū)”：下拉列表選框；“省份”：下拉列表選框，與選擇的國家連動（選擇“國家地區(qū)” ，“省份”下

拉框中選項相應(yīng)變化）；如果在“省份”中已經(jīng)選擇了直轄市，如“北京”則后面的“城市”不用再選，自動置灰；“城市”：下拉列表選框，與選擇的城市連動（選擇“省份”，“城市”下拉框中選項相應(yīng)變化）。城市下拉列表選項的最后一項為“其他地區(qū)”，如下圖所示：舐聯(lián)系方式區(qū)地陽安雞中木南陽林地成西寶涉神渭咸.區(qū)地陽安雞中木南陽林地成西寶涉神渭咸.南H要百耳地地區(qū)的透項庶系電話：0S6-010-580222ES一傳真號嶼：-010-53O222G6手機號碼：08S-136252S2M2隙地址：山題:編母二icon0圖4-28其他地區(qū)“聯(lián)系電話”、“傳真號碼”和“手機號碼”必須拆分成幾個字段；“聯(lián)系電話”：四個輸入框字段，分別為：國家代碼（可選）一區(qū)號一電話號碼一分機號；“傳真號碼”：三個輸入框字段，分別為：國家代碼（可選）一區(qū)號一傳真電話；“手機號碼”：兩個輸入框字段，分別為：國家代碼（可選）一手機號；“國家代碼”此項可根據(jù)具體產(chǎn)品的銷售人群不同自行選擇是否保留；如下圖所示：能聯(lián)系方式郵政編眄二100119圖4-29正確示例圖舐聯(lián)系方式園褰地區(qū):聯(lián)系電話二傳真號螞:手機號碼:聯(lián)系地址:園褰地區(qū):聯(lián)系電話二傳真號螞:手機號碼:聯(lián)系地址:咸陽郵政編碼：wcna圖4-30錯誤示例圖各字段分別與上面的“國家地區(qū)”、“省份”、“城市”連動：“國家地區(qū)”和“省份”、“城市”選擇后，國家代碼和區(qū)號自動顯示，如下圖所示：國家選定后相頤園加代媽聯(lián)的顯示在相關(guān)數(shù)據(jù)框中 省林地市選定后相應(yīng)的區(qū)]一號聯(lián)動顯示求聯(lián)系方式國冢地區(qū)二

聯(lián)系電話：

住其號碼:

手機號碼;中國/ 北京國冢地區(qū)二

聯(lián)系電話：

住其號碼:

手機號碼;中國/ 北京“城市:036086ataaia580222665602226608C-13障5252142郵政編碼：10C110圖4-31聯(lián)系方式標(biāo)注“聯(lián)系地址”：一個輸入框，等待用戶輸入文本；“郵政編碼”：一個輸入框（6個字符），等待用戶輸入文本；除“國家地區(qū)”、“省份”和“城市”是只能讓用戶選擇外，其他的輸入框均可手動輸入和編輯，用戶可以根據(jù)自己的需要進行修改?！緮U展描述】組成：郵政編碼幫助 如下圖所示：

郵政編碼：10011Q通如區(qū)101100平谷縣101200膜文區(qū)郵政編碼：10011Q懷柔縣101400密云縣101500暹慶縣）02100昌平區(qū)102200系統(tǒng)根據(jù)',省份?”城市制給出一些不同地區(qū)自微編料的關(guān)糜提示,系統(tǒng)根據(jù)',省份?”城市制給出一些不同地區(qū)自微編料的關(guān)糜提示,供用戶叁考應(yīng)用規(guī)范：用戶手動輸入郵政編碼時，系統(tǒng)根據(jù)“省份” 、“城市”給出一些不同地區(qū)郵政編碼的關(guān)聯(lián)提示，供用戶參考，用戶選擇郵政編碼輸入框后面“查詢郵政編碼”鏈接（如下圖所示） ，可點擊打開新窗口查看本市的郵政編碼。圖4-33查詢郵政編碼【注意事項】?各輸入項的先后順序，根據(jù)各字段的邏輯順序和參照關(guān)系排列的同時，要綜合考慮用戶的輸入操作（盡量將數(shù)字輸入的放在一起，將漢字輸入的放在一起，以避免用戶在鍵盤上頻繁切換輸入位置）；?系統(tǒng)自動提供的電話區(qū)號和郵政編碼等，必須保證是與國家、省、市相對應(yīng)的最新的和準(zhǔn)確的數(shù)據(jù)；?用戶用tab鍵切換不同的輸入?yún)^(qū)域時，輸入?yún)^(qū)域中本來用的數(shù)據(jù)顯示為選中狀態(tài)（不清空）。圖片裁切固定尺寸主要應(yīng)用于需要用戶上傳固定圖片尺寸的設(shè)計中，在上傳時提供簡單裁切的功能。上傳后可以讓用戶得到比較理想的圖片效果。【設(shè)計意圖】?可以進行簡單圖片裁切處理，而不需要使用其它的圖片處理軟件?快捷方便的裁切出用戶想要的圖片；【應(yīng)用條件】?上傳的圖片限制固定尺寸時；?系統(tǒng)對圖片大小的約束嚴格，在 200k以內(nèi)時；例如：上傳用戶頭像、產(chǎn)品圖片、信息圖片等【模式描述】組成：預(yù)覽區(qū)+裁切框+放大縮小提示標(biāo)+滑桿+圖片上傳區(qū)域+清空按鈕+數(shù)據(jù)約束 如下圖所示：可用鼠標(biāo)隨意移動裁切區(qū)可用鼠標(biāo)隨意移動裁切區(qū)鼠標(biāo)施動滑熱，工以便圖片在預(yù)覽區(qū)內(nèi)成比例免放計圖片格式前F,JT0FMG(100k4內(nèi)。一數(shù)據(jù)約束，根據(jù)具體產(chǎn)品的需要迸行設(shè)定一［瀏覽..j□控2—捋所選圖片港除直擊圖綠國以相鹿放火縮小海莫內(nèi)的圉片圖4-34固定尺寸圖片裁切應(yīng)用規(guī)范：滑桿、縮放圖標(biāo)、清空按鈕默認處于不可用狀態(tài)；瀏覽上傳圖片后，滑桿、縮放圖標(biāo)、清空按鈕高亮顯示；瀏覽上傳一張圖片后，圖片全部顯示在預(yù)覽區(qū)內(nèi)；當(dāng)上傳的圖片尺寸小于裁切區(qū)尺寸時， 系統(tǒng)自動按照裁切區(qū)的尺寸成比例的放大圖片后顯示在裁切區(qū)內(nèi)；鼠標(biāo)向左拖動滑塊縮小圖片， 當(dāng)圖片縮小到即將小于裁切區(qū)尺寸時， 圖片將停止縮??；鼠標(biāo)向右拖動滑塊放大圖片，當(dāng)圖片縮放到原尺寸的 1.5倍時，停止放大，此時圖標(biāo)狀態(tài)要相應(yīng)轉(zhuǎn)變?yōu)椴豢捎脿顟B(tài)；點擊放大或縮小圖標(biāo)，預(yù)覽區(qū)中的圖片相應(yīng)放大縮小，直至無法縮小或放大，此時圖標(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)任意移動裁切區(qū)的位置， 但圖片必須填充整個裁切區(qū)，不能為空，或部分為空；鼠標(biāo)指針在裁切區(qū)內(nèi)時要變?yōu)橐苿又羔樞螤?；?dāng)上傳的圖片格式或大小不符合要求時， 系統(tǒng)給出提示如：您上傳的圖片格式錯誤！請重新上傳！或您上傳的圖片大小超過 200k!請重新上傳！。自定義尺寸應(yīng)用于用戶上傳一些日常的沒有特殊限制的圖片設(shè)計中，在上傳時提供簡單方便快捷裁切的功能，上傳后可以讓用戶很快地得到比較理想的圖片效果?！驹O(shè)計意圖】?減少用戶的工作量和學(xué)習(xí)時間，并充分考慮到使用者的電腦水平，通過簡單的圖片裁切處理，用戶將不需要打開其他的圖片處理軟件；?快捷方便的裁切處理出用戶想要的圖片；【應(yīng)用條件】?用戶可以自定義上傳或插入的圖片尺寸時；?系統(tǒng)對圖片大小的約束比較寬泛，在1M以內(nèi)時；例如：應(yīng)用于上傳照片、文檔中插入圖片等設(shè)計中；【模式描述】組成：圖片上傳區(qū)域+圖片裁切區(qū)域+操作按鈕如下圖所示：骷圖片上傳選擇量片；| |蒯覽二：會可以上傳一個JPG、GIFsBMP.或PNG文件0圖4-35圖片上傳

圖4-36自定義尺寸圖片裁切應(yīng)用規(guī)范：瀏覽上傳一張圖片后，圖片全部顯示在預(yù)覽區(qū)內(nèi)； 圖片較大時根據(jù)窗口尺寸自動成比例壓縮適應(yīng)窗口大??；默認裁切框最大化顯示在預(yù)覽區(qū)內(nèi)；同時鼠標(biāo)經(jīng)過裁切框有明確的指針反饋；裁切框的上下左右均可以隨意拖拽裁切；圖片裁切區(qū)的尺寸可以根據(jù)用戶的需要，隨意拖動裁切；圖片裁切區(qū)的尺寸大小就是最終圖片上傳后的實際尺寸大小；鼠標(biāo)可以在窗口內(nèi)任意拖拽裁切框的位置，但不能超出圖片自身顯示區(qū)；當(dāng)上傳的圖片格式或大小不符合要求時， 系統(tǒng)給出提示如：您上傳的圖片格式錯誤！請重新上傳！或您上傳的圖片大小超過 1M!請重新上傳！；圖片的最大尺寸，可以根據(jù)具體的產(chǎn)品需要來設(shè)定。翻頁翻頁模式應(yīng)用于列表數(shù)據(jù)條目較多，文章篇幅較長的設(shè)計中，來對數(shù)據(jù)和篇幅進行更好的展示。翻頁可以拆分為以下幾部分：基礎(chǔ)頁碼、上下頁、首末頁、跳轉(zhuǎn)、 Ajax拖動條、數(shù)據(jù)統(tǒng)計；根據(jù)不同的應(yīng)用場景，可以選擇某一部分或幾部分組合起來使用。如下圖所示：確定共K31S條H直頁/1234確定圖4-37翻頁【設(shè)計意圖】?滿足用戶在不同場景下的不同需要；?增加操作的易用性；【應(yīng)用條件】?列表數(shù)據(jù)條目較多時；?文章篇幅較長時；【模式描述】組成：頁碼如下圖所示：123456789圖4-38頁碼應(yīng)用規(guī)范：頁碼少于或等于10頁時，只顯示應(yīng)該出現(xiàn)的頁碼數(shù)；鼠標(biāo)指針經(jīng)過和按下某個頁碼區(qū)域（此區(qū)域高亮反饋） ，鼠標(biāo)彈起后頁面切換完成；當(dāng)前頁的頁碼在外觀上要明顯的區(qū)分于其它頁碼，且不再提供頁面鏈接；已訪問過的頁碼和未訪問過的頁碼要有所區(qū)分；顯示當(dāng)前頁碼的前4頁和后4頁；前9頁和最后9頁除外，默認全部顯示；設(shè)計時，頁碼的可點區(qū)域要相對較大，方便點擊；如下圖所示鼠標(biāo)?？?捋下時已訪問過的頁碼當(dāng)前頁碼圖4-39狀態(tài)標(biāo)注【擴展描述】1）上下頁組成：三角符號，作為上一頁，以“?”作為下一頁；如下圖所示:上1頁 下一頁圖4-40上下頁狀態(tài)應(yīng)用規(guī)范：列表的頁數(shù)在11頁以上時，要提供“■”和“勤”的鏈接，“上一頁”和“下一頁”在不可點擊時變?yōu)椴豢捎脿顟B(tài)；具體不可用狀態(tài)參見《界面設(shè)計規(guī)范》與其他元素保持適當(dāng)?shù)拈g隔距離；參見《界面視覺規(guī)范》2）首末頁組成：三角截止符號（“履”首頁截止圖標(biāo)，以“H末頁截止圖標(biāo)）+文字（首頁、末頁），如下圖所示：一首頁 頓口―圖4-41首末頁應(yīng)用規(guī)范：列表的頁數(shù)在50頁以上時，要提供“首頁”“末頁（326）”的鏈接；鼠標(biāo)指針?？康绞醉撴溄由?，有明確的反饋提示， 點擊鼠標(biāo)主鍵，頁面切換到首頁，首頁變?yōu)椴豢捎脿顟B(tài)；鼠標(biāo)指針?？康侥╉撴溄由?，有明確的反饋提示， 點擊鼠標(biāo)主鍵，頁面切換至最后一頁，末頁變?yōu)椴豢捎脿顟B(tài)；如下圖所示：K百頁圖4-42首末頁狀態(tài)標(biāo)注末頁的鏈接上要注明最后一頁的頁碼數(shù)；與其他元素保持適當(dāng)?shù)拈g隔距離；參見《界面視覺規(guī)范》3）跳轉(zhuǎn)組成：文字（轉(zhuǎn)到…頁）+輸入框+下拉圖標(biāo)+頁碼拖動條+確定按鈕如下圖所示:頁碼超過50頁時，顯示跳轉(zhuǎn)框；鼠標(biāo)指針移到跳轉(zhuǎn)輸入框上，輸入框給出反饋，點擊鼠標(biāo)主鍵，光標(biāo)被定位到輸入框中，此時進入可輸入狀態(tài)，輸入目標(biāo)頁數(shù)，鼠標(biāo)點擊“確定”按鈕或“回車鍵”，頁面刷新后顯示信息列表；鼠標(biāo)指針移到跳轉(zhuǎn)輸入框上， 輸入框給出反饋，點擊輸入框右側(cè)的“三角”小標(biāo),下拉出現(xiàn)浮動層，顯示出系統(tǒng)默認提供的部分頁碼， 移動鼠標(biāo)指針到某一頁碼上，被選定的頁碼給出高亮反饋，單擊后頁面刷新顯示信息列表；用戶在輸入框中輸入數(shù)字以外的其它字符時， 系統(tǒng)要給出錯誤提示；如：您輸入的字符錯誤，請輸入數(shù)字！ （具體提示內(nèi)容參見“提示語規(guī)范”）用戶拖拽滑塊移動時，輸入框中的頁碼數(shù)值同步變化；頁碼輸入后可以通過“確定”按鈕和“回車”鍵兩種方式。與其他元素保持適當(dāng)?shù)拈g隔距離；參見《界面視覺規(guī)范》3）數(shù)據(jù)統(tǒng)計組成：統(tǒng)計提示文字+統(tǒng)計數(shù)值+數(shù)量單位如：共7315條應(yīng)用規(guī)范：頁碼超過11頁時顯示；顯示在“首頁”位置之前，保持適當(dāng)?shù)拈g隔距離；參見《界面視覺規(guī)范》日期輸入通過日歷選擇日期日歷選擇是使用日歷選擇控件進行日期輸入?！驹O(shè)計意圖】?使用生活中最常見的日歷形式，使得日期輸入的形式更加直觀;? 日歷選擇形式能夠使日期輸入更加方便、快捷；?能夠減少用戶錯誤輸入日期的幾率；【應(yīng)用條件】?需要進行日期輸入時；?年份跨度較小，在10年以內(nèi)時；例如：2006年? 日期顯示的一種形式；?需要進行日期區(qū)間選擇時；例如：應(yīng)用于表單中時間的輸入、統(tǒng)計查詢等設(shè)計中；【模式描述】組成：輸入框+日歷的圖示+日歷顯示層 如下圖所示：上一月今天下一月日四五六123口667*g1C11I1920212Z23242S2白2723293031圖4-44日歷輸入應(yīng)用規(guī)范：1）日歷日歷中必須明確標(biāo)示出當(dāng)前系統(tǒng)日期；包括：年、月、日。如下圖所示：幫助 年份選擇月館選擇再防轉(zhuǎn)換上一月四*一月T日4一五六571B3刑口M346910111215161710國2。21及232431262S27%2930年一OTH向后轉(zhuǎn)換圖4-45日歷標(biāo)注年份和月份選擇如下圖所示;4U1B25OO28O20O20O20O4U1B25OO28O20O20O20OO2oOoO22310172431-UOO2，月月月月月nn^月>1_Z34567QO9HU12oooooooolll29162330圖圖4-46年份和月份選擇默認顯示近10年的年份，前10后1；從當(dāng)年往上，滑動滾動條，查看到 100個年份；往下，查看到10個年份;點擊日歷中的月份12個月份全部顯示在下拉層中；當(dāng)前年份、月份均要區(qū)分于其他高亮顯示；2）日期輸入通過鍵盤輸入日期；當(dāng)鼠標(biāo)移至輸入框內(nèi)時，輸入框中的內(nèi)容被全部選中并高亮顯示，鼠標(biāo)移開后恢復(fù)；開始鍵盤輸入時，默認內(nèi)容將被清空；

通過日歷選擇輸入日期；點擊日歷圖標(biāo)后，輸入框、圖標(biāo)及文字均高亮顯示，給出用戶明確的反饋;選定日期要高亮顯示，同時區(qū)分于當(dāng)前系統(tǒng)日期；如下圖所示:IF上一月今天 下一月E―二三四五六1 2345 67gg10111213141516171019￡121 22232425262728293031圖4-47日歷選擇3）錯誤提示只允許輸入0-9這十個數(shù)字；只要用戶輸入數(shù)字，無論幾位系統(tǒng)自動按照“yyyy-mm-dd”的格式顯示給用戶；當(dāng)月份和日期超出正常值時，系統(tǒng)給出提示;如“很抱歉！您輸入的月份或日期過大，請重新輸入！ ”4）顯示某一時間點要求顯示當(dāng)前系統(tǒng)默認時間2007-05-16前不要求顯示當(dāng)前系統(tǒng)默認時間y/Y/-mm-dd回【擴展描述】組成：時間段的文本提示+兩個日期選擇如下圖所示:圖4-48一段時間選擇應(yīng)用規(guī)范：時間段的文本提示“從…至…”；選定起始時間后，起始時間被回顯到日期框內(nèi) ，同時截至日期日歷框自動被打開，不需要用戶再次點擊，即可選擇日期；4.9.2年份跨度較大時的日期選擇應(yīng)用于日期選擇時的年份會出現(xiàn)跨度較大的設(shè)計中,方便快速的幫助用戶正確完成時間格式的輸入。適用于出生日期等方面。使得信息反饋及時明確，提示明顯易懂，減少了誤操作和重復(fù)操作的次數(shù)?！驹O(shè)計意圖】方便用戶快速定位年份、月份、日期;減少用戶出錯的幾率;符合此類場景下用戶的心里預(yù)期；【應(yīng)用條件】年份的選擇跨度較大，在10-90年之間時;例如：適用于出生日期等設(shè)計中;【模式描述】組成：輸入框+下拉層+年月日的文本提示 整體效果如下圖:可通過鼠標(biāo)點擊茂揖年除出生日期:可通過髀魚直接輸入19201921 19231,224192519261S271專2&1929可通過髀魚直接輸入193DL931193216331^341905IMS193719301939194019411942194319443網(wǎng)51946194T1948194919百口L951195E1953135419S51a56135719531勺59I960L9S1196219631054196513661阪I9601則1970L9T113T21S731974呵51/6187713731號四19goige196219goige19621QS31g34190519361937196S1989isgoiggiigg219931^9419qeuseiggrrigq及igga20002001200220Q32004200521062007圖4-49年份選擇應(yīng)用規(guī)范:0-9十個數(shù)字之內(nèi);1）0-9十個數(shù)字之內(nèi);年月日的輸入均可以通過鍵盤操作的方式輸入，輸入內(nèi)容范圍在如下圖所示:未輸入

年月日的輸入均可以通過鼠標(biāo)點擊出現(xiàn)列表選擇的方式輸入;年的選擇方式；如下圖所示：[ ▼]年 ▼月▼I日1勺20192119ZZ19231924192519ZT1928192919301S311g32193319341^35193B1937193B19盟1940 1941 1942 1943 1944 1945 1白46 1947 194白194白1950 1951 1電52 1953 1954 195E 195? 1Q5G 19Gg1^60 1061 1562 1963 1964 1^65 156B 1QB7 1Q&81965196197019711^7219T319741975e761STT19位1貫？196\1田比19B319341?第1日J619B71936I蠲日19901991”居9219S3199419第199619971996199920002QQ1SACK2003如M￡005200&200T圖4-50選擇年份默認只提供顯示90個年份，當(dāng)前所在年份不足 10年時，未來年份默認置灰顯示。月的輸入方式；如下圖所示:1962h月月的輸入方式；如下圖所示:1962h月一月月月月月月月月月n-^_圖4-51選擇月份日的輸入方式；如下圖所示：%234567Qg101112131415161716192021222324252b27282930圖4-52選擇日期4.104.10分隔精選精選4.104.10分隔精選精選4.10.1等量條目分隔線等量條目分隔線是一種對包含大量記錄行的列表進行等量條目分隔的視覺指示符號?！驹O(shè)計意圖】?使頁面更加有條理，看起來更清晰；?讓用戶清楚自己當(dāng)前瀏覽的條目位置；?讓用戶感覺到一部分告一段落，減輕用戶的視覺疲勞和心理負擔(dān)?！緫?yīng)用條件】?同一頁（或同一框架）中顯示超過 70條記錄時；?列表條目之間無邏輯分組的關(guān)系。例如：論壇、評論、聊天室?！灸Ｊ矫枋觥拷M成：橫線+條目數(shù)指示如下圖所示：120 丁條目數(shù)指示 橫線圖4-53分割線應(yīng)用規(guī)范：分隔線只是起輔助