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

精選精選精選精選界面交互設(shè)計(jì)規(guī)范IT應(yīng)用服務(wù)產(chǎn)品界面組件級(jí)交互規(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"簡(jiǎn)潔性 6\o"CurrentDocument"避免干擾和打斷 6\o"CurrentDocument"減輕用戶記憶負(fù)擔(dān) 6\o"CurrentDocument"及時(shí)有效的反饋 6\o"CurrentDocument"讓用戶放松心態(tài)，不怕犯錯(cuò) 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編號(hào)和序號(hào) 20\o"CurrentDocument"編號(hào) 20序號(hào) 21\o"CurrentDocument"注冊(cè)表單 23\o"CurrentDocument"聯(lián)系方式 28圖片裁切 32固定尺寸圖片裁切 32\o"CurrentDocument"自定義尺寸圖片裁切 34\o"CurrentDocument"翻頁(yè) 35日期輸入 39通過日歷選擇日期 39\o"CurrentDocument"年份跨度較大時(shí)的日期選擇 42分隔 45\o"CurrentDocument"等量條目分隔線 45\o"CurrentDocument"高級(jí)加密 47\o"CurrentDocument"進(jìn)度條 50面包屑 52星級(jí)評(píng)分 53保留圖標(biāo) 56彈出層 58非獨(dú)占焦點(diǎn)層 58獨(dú)占焦點(diǎn)層 58局部獨(dú)占焦點(diǎn)層 60搜索 61模糊搜索 61精確搜索 63數(shù)據(jù)添加 66添加單個(gè)文件 66添加多個(gè)文件 68添加行 71排序 71

修訂記錄修訂人日期版本修訂內(nèi)容修訂人日期版本修訂內(nèi)容1概述《界面交互設(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ì)過程以用戶的使用習(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)品開發(fā)過程中，給不同部門的相關(guān)人員提供統(tǒng)一的規(guī)范與指導(dǎo)，使溝通與合作順利有效地進(jìn)行，以保證產(chǎn)品界面的最終規(guī)范化實(shí)現(xiàn)；從一點(diǎn)一滴入手解決公司產(chǎ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:71022基本原則以下原則主要用來(lái)說明此規(guī)范的指導(dǎo)思想與設(shè)計(jì)依據(jù)。簡(jiǎn)單描述如下，以供該文檔的閱讀者參考和使用。具體的原則描述請(qǐng)參見《界面設(shè)計(jì)指南》 。一致性視覺一致：在同一產(chǎn)品內(nèi)，所有的同類界面元素在相同的應(yīng)用環(huán)境下，界面外觀在視覺上應(yīng)該保持一致；否則，界面外觀要予以區(qū)分；操作行為一致：類似場(chǎng)景的界面設(shè)計(jì)，其操作方式必須保持一致；當(dāng)操作行為相同時(shí)要保持視覺上的一致；當(dāng)操作行為不同時(shí)，在視覺上就一定要有所區(qū)別；外觀與使用者的預(yù)期一致：保持對(duì)象與其行為相符，保持不同作用的對(duì)象外觀的不同；視覺元素的外觀及其操作結(jié)果，必須與用戶的心理認(rèn)知相符。簡(jiǎn)潔性減輕視覺負(fù)擔(dān)：使用盡可能少的元素，不提供與當(dāng)前任務(wù)無(wú)關(guān)的信息；簡(jiǎn)明的文字表述：文字表述必須簡(jiǎn)明扼要、清晰易懂，內(nèi)涵豐富，并易于理解和記憶;操作簡(jiǎn)單：減少冗余的操作步驟。避免干擾和打斷避免干擾：明確用戶在特定界面中的首要任務(wù)和目標(biāo)，盡可能避免該界面上的視覺噪聲和其它干擾。避免打斷：讓用戶的操作連貫順暢，避免使用模態(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)說明自身可以如何使用的外觀屬性）。及時(shí)有效的反饋操作反饋：對(duì)用戶的每一步操作給出及時(shí)的反饋，告知用戶成功做了某事；受范性反饋：界面對(duì)象的設(shè)計(jì)要在視覺上能提供即時(shí)響應(yīng)鼠標(biāo)操作行為的效果；系統(tǒng)狀態(tài)反饋：系統(tǒng)需要用戶等待或系統(tǒng)出現(xiàn)錯(cuò)誤時(shí)，要及時(shí)讓用戶明白現(xiàn)狀；選擇合適的反饋形式：根據(jù)不同的情況，使用不同的反饋（如聲音、觸覺、語(yǔ)言、視覺反饋或是它們的組合）。讓用戶放松心態(tài)，不怕犯錯(cuò)允許輕松的反向操作：在適當(dāng)?shù)臅r(shí)候，盡量提供撤銷功能，使用戶可以返回到上一步操作并重新進(jìn)行選擇；讓用戶可以重新開始：提供“恢復(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ù)建議。3產(chǎn)品交互通用規(guī)范以下為IT應(yīng)用服務(wù)產(chǎn)品的交互設(shè)計(jì)通則，是所有的交互模式必須遵守的普遍規(guī)范，用以統(tǒng)一產(chǎn)品的交互行為。（此部分規(guī)范將隨著組件模式的不斷擴(kuò)充，進(jìn)行逐步添加和完善。 ）受范性指示受范性是指鼠標(biāo)指針移過可點(diǎn)擊區(qū)域時(shí)可點(diǎn)擊區(qū)域的視覺變化， 用以說明該對(duì)象是可操作的以及何時(shí)可以進(jìn)行操作。對(duì)象對(duì)鼠標(biāo)指針移動(dòng)的響應(yīng)必須即時(shí)有效；響應(yīng)形式必須明確清晰（如：鼠標(biāo)移過按鈕，按鈕有被按下的效果） ；受范性表現(xiàn)必須保持高度的一致：同等功能和操作的元素受范性必須相同（如：鼠標(biāo)指向鏈接文字時(shí)都做同樣的變化）；在鼠標(biāo)指針移開時(shí)對(duì)象必須即時(shí)恢復(fù)原來(lái)狀態(tài)；命令按鈕也經(jīng)常被顯示為鏈接樣式（文本 +下劃線），此時(shí)為了與普通的鏈接相區(qū)分，必須提供非常明顯的不同于鏈接的受范性指示。注：具體受范性指示的效果參見視覺規(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)，如下圖所示：

1圜像?圖層?選擇?濾情?還原RGB顏色前進(jìn)一步(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菜單操作不可用工具欄按鈕不可用時(shí)不能隱藏，應(yīng)該顯示為不可用狀態(tài)，如下圖所示:圖3-2工具按鈕不可用當(dāng)一個(gè)操作在用戶進(jìn)行了某行為(如填寫或選擇了某選項(xiàng)時(shí))就變?yōu)榭刹僮?，則該操作不可用時(shí)不能隱藏，應(yīng)該顯示為不可用狀態(tài)，如下圖所示：圖3-3操作命令不可用注：具體不可用狀態(tài)效果見視覺規(guī)范。精選精選精選精選4組件規(guī)范4.1表格主要應(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)題+表格表頭+表格行間隔線+表格行如下圖所示：蔻格標(biāo)題表格表頭表格行間隔線蔻格標(biāo)題表格表頭表格行間隔線表格行訂單號(hào)2口07口422-口口口-口。2訂單時(shí)間2007-06-05商品總價(jià)100.00訂單總價(jià)1DQ.00貨物狀高未發(fā)賃款項(xiàng)狀態(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)之間間隔一定的距離，如：一個(gè)半角空格；具體視覺效果參見《界面視覺規(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ū)。整體效果如下圖所示：數(shù)據(jù)晞選區(qū) 排序未處理 處理中處理完成曳無(wú)效訂隼gg未處理訂單冽表□訂單號(hào)?20070422-00D-D0；20070423-000-001L訂單時(shí)間 商品總階 訂單總價(jià) 黃物供態(tài)2007-0&-05 100,00 100,00 未發(fā)貨皿丁-0日把 100.00 iaa.oo 來(lái)發(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ā)貨刪除冊(cè)蹤刪除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▼條/頁(yè)操作按朝區(qū) 口用正 應(yīng)用 取消圖4-2表格操作區(qū)分布京設(shè)置區(qū)1）標(biāo)題列排序：表格列標(biāo)題可以排序時(shí)，表格的列標(biāo)題要體現(xiàn)出當(dāng)前排序狀態(tài)，并要區(qū)分于其他列標(biāo)題顯示，如：背景和圖標(biāo)高亮顯示；如下圖所示：

□亦單號(hào)） 仃單時(shí)間 肉品總價(jià) 訂單總檢 貨物狀態(tài)圖4-3標(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ì)形式如下拉框顯示的形式等；如下圖所示：一條處理 處理中 處理完成 無(wú)效訂單］ 未處理訂單列表 一圖4-4數(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ì)則參見《界面視覺規(guī)范》 。5）操作按鈕區(qū)：對(duì)表格主體的數(shù)據(jù)進(jìn)行操作的按鈕放置在此區(qū)域。 如：刪除、發(fā)布、下架、上架、審核等；當(dāng)列表的數(shù)據(jù)超過一屏顯示時(shí)，在列表上方也要顯現(xiàn)操作按鈕區(qū)，方便用戶對(duì)列表進(jìn)行操作；如下圖所示：□a訂單號(hào)4訂單時(shí)間2007-06-05商品總價(jià)1DO.OO訂單總價(jià)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ā)貨未處理處理中處理完成未處理處理中處理完成無(wú)效訂單$$未處理訂單列表確定應(yīng)用取消訂單錄入操作按鈕區(qū)圖4-5操作按鈕區(qū)按鈕的其它細(xì)則參見《界面視覺規(guī)范》 。6）翻頁(yè)區(qū)：當(dāng)列表中的數(shù)據(jù)量超過默認(rèn)的數(shù)據(jù)顯示條數(shù)時(shí)，應(yīng)用翻頁(yè)模式來(lái)處理多條數(shù)據(jù)的顯示；翻頁(yè)在列表下方居中顯示；翻頁(yè)的詳細(xì)功能和模式參見“翻頁(yè)模式組件規(guī)范” 。7）單條數(shù)據(jù)操作區(qū)：對(duì)行數(shù)據(jù)進(jìn)行操作的按鈕要與操作按鈕區(qū)的按鈕視覺上要有所區(qū)分；具體參見《界面視覺規(guī)范》；盡量不要在此處安排太多的操作，太多的操作給使用者過多的判斷負(fù)擔(dān)。應(yīng)考慮其他的界面布局方式。8）表格列標(biāo)題區(qū)：當(dāng)表格的數(shù)據(jù)列較多，屏幕顯示已經(jīng)達(dá)到最大限度，而這些數(shù)據(jù)列又必不可少時(shí),允許通過鼠標(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;精選精選.2通訊錄精選精選4.2單元格數(shù)據(jù)4.2.1單元格數(shù)據(jù)展以單元格為單位的數(shù)據(jù)展示是指應(yīng)用表格的單元格來(lái)描述每個(gè)數(shù)據(jù)對(duì)象的展示形【設(shè)計(jì)意圖】?讓用戶更加清晰的瀏覽信息;?方便查看選中單元格的信息。【應(yīng)用條件】適用于多數(shù)據(jù)的查看、瀏覽和操作；例如：如短信中的收信人、郵件中的收件人等。組成：如下圖所示:圖4-6單元格數(shù)據(jù)展示應(yīng)用規(guī)范：鼠標(biāo)經(jīng)過或選中此類表格的單元格時(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成：如下圖所示：點(diǎn)擊展開菜單畋信人：，/廉 |司蟀|李潁穎|李燕|李欣忤曜圉| |H0查找添加號(hào)碼到通訊錄導(dǎo)出圖4-7通訊錄應(yīng)用規(guī)范:a）通訊錄中無(wú)此信息的高亮反饋通訊錄中存在姓名時(shí)表格內(nèi)只顯示姓名；通訊錄中沒有姓名只有手機(jī)號(hào)碼（或 email地址）時(shí)則顯示號(hào)碼（或email地址）；姓名、手機(jī)號(hào)碼（或email地址）兩者都無(wú)的單元格自動(dòng)高亮反饋給用戶。b）默認(rèn)顯示默認(rèn)顯示表格的一個(gè)空行；如下圖所示:

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

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

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

“手機(jī)號(hào)碼”、“聯(lián)系地址”、“郵政編碼”等（根據(jù)具體需要再增加） 。I招屐系方式 〕國(guó)涼地區(qū)：中國(guó) “省樁：口晾7城市：北京E聯(lián)系電語(yǔ)：066 -傳其尋螞二DS6-0L0-59022266手機(jī)號(hào)碼二086-136252S2142聯(lián)系地址：郵政編M:looiio圖4-27聯(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ū)”，如下圖所示：舐聯(lián)系方式區(qū)地陽(yáng)安雞中木南陽(yáng)林地成西寶涉神渭咸.區(qū)地陽(yáng)安雞中木南陽(yáng)林地成西寶涉神渭咸.南H要百耳地地區(qū)的透項(xiàng)庶系電話：0S6-010-580222ES一傳真號(hào)嶼：-010-53O222G6手機(jī)號(hào)碼：08S-136252S2M2隙地址：山題:編母二icon0圖4-28其他地區(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)品的銷售人群不同自行選擇是否保留；如下圖所示：能聯(lián)系方式郵政編眄二100119圖4-29正確示例圖舐聯(lián)系方式園褰地區(qū):聯(lián)系電話二傳真號(hào)螞:手機(jī)號(hào)碼:聯(lián)系地址:園褰地區(qū):聯(lián)系電話二傳真號(hào)螞:手機(jī)號(hào)碼:聯(lián)系地址:咸陽(yáng)郵政編碼：wcna圖4-30錯(cuò)誤示例圖各字段分別與上面的“國(guó)家地區(qū)”、“省份”、“城市”連動(dòng)：“國(guó)家地區(qū)”和“省份”、“城市”選擇后，國(guó)家代碼和區(qū)號(hào)自動(dòng)顯示，如下圖所示：國(guó)家選定后相頤園加代媽聯(lián)的顯示在相關(guān)數(shù)據(jù)框中 省林地市選定后相應(yīng)的區(qū)]一號(hào)聯(lián)動(dòng)顯示求聯(lián)系方式國(guó)冢地區(qū)二

聯(lián)系電話：

住其號(hào)碼:

手機(jī)號(hào)碼;中國(guó)/ 北京國(guó)冢地區(qū)二

聯(lián)系電話：

住其號(hào)碼:

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

郵政編碼：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ī)范：用戶手動(dòng)輸入郵政編碼時(shí)，系統(tǒng)根據(jù)“省份” 、“城市”給出一些不同地區(qū)郵政編碼的關(guān)聯(lián)提示，供用戶參考，用戶選擇郵政編碼輸入框后面“查詢郵政編碼”鏈接（如下圖所示） ，可點(diǎn)擊打開新窗口查看本市的郵政編碼。圖4-33查詢郵政編碼【注意事項(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ù)約束 如下圖所示：可用鼠標(biāo)隨意移動(dòng)裁切區(qū)可用鼠標(biāo)隨意移動(dòng)裁切區(qū)鼠標(biāo)施動(dòng)滑熱，工以便圖片在預(yù)覽區(qū)內(nèi)成比例免放計(jì)圖片格式前F,JT0FMG(100k4內(nèi)。一數(shù)據(jù)約束，根據(jù)具體產(chǎn)品的需要迸行設(shè)定一［瀏覽..j□控2—捋所選圖片港除直擊圖綠國(guó)以相鹿放火縮小海莫內(nèi)的圉片圖4-34固定尺寸圖片裁切應(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)重新上傳！或您上傳的圖片大小超過 200k!請(qǐng)重新上傳！。自定義尺寸應(yīng)用于用戶上傳一些日常的沒有特殊限制的圖片設(shè)計(jì)中，在上傳時(shí)提供簡(jiǎn)單方便快捷裁切的功能，上傳后可以讓用戶很快地得到比較理想的圖片效果?！驹O(shè)計(jì)意圖】?減少用戶的工作量和學(xué)習(xí)時(shí)間，并充分考慮到使用者的電腦水平，通過簡(jiǎn)單的圖片裁切處理，用戶將不需要打開其他的圖片處理軟件；?快捷方便的裁切處理出用戶想要的圖片；【應(yīng)用條件】?用戶可以自定義上傳或插入的圖片尺寸時(shí)；?系統(tǒng)對(duì)圖片大小的約束比較寬泛，在1M以內(nèi)時(shí)；例如：應(yīng)用于上傳照片、文檔中插入圖片等設(shè)計(jì)中；【模式描述】組成：圖片上傳區(qū)域+圖片裁切區(qū)域+操作按鈕如下圖所示：骷圖片上傳選擇量片；| |蒯覽二：會(huì)可以上傳一個(gè)JPG、GIFsBMP.或PNG文件0圖4-35圖片上傳

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

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

年月日的輸入均可以通過鼠標(biāo)點(diǎn)擊出現(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日J(rèn)619B71936I蠲日19901991”居9219S3199419第199619971996199920002QQ1SACK2003如M￡005200&200T圖4-50選擇年份默認(rèn)只提供顯示90個(gè)年份，當(dāng)前所在年份不足 10年時(shí)，未來(lái)年份默認(rèn)置灰顯示。月的輸入方式；如下圖所示:1962h月月的輸入方式；如下圖所示:1962h月一月月月月月月月月月n-^_圖4-51選擇月份日的輸入方式；如下圖所示：%234567Qg101112131415161716192021222324252b27282930圖4-52選擇日期4.104.10分隔精選精選4.104.10分隔精選精選4.10.1等量條目分隔線等量條目分隔線是一種對(duì)包含大量記錄行的列表進(jìn)行等量條目分隔的視覺指示符號(hào)?！驹O(shè)計(jì)意圖】?使頁(yè)面更加有條理，看起來(lái)更清晰；?讓用戶清楚自己當(dāng)前瀏覽的條目位置；?讓用戶感覺到一部分告一段落，減輕用戶的視覺疲勞和心理負(fù)擔(dān)?！緫?yīng)用條件】?同一頁(yè)（或同一框架）中顯示超過 70條記錄時(shí)；?列表?xiàng)l目之間無(wú)邏輯分組的關(guān)系。例如：論壇、評(píng)論、聊天室?！灸Ｊ矫枋觥拷M成：橫線+條目數(shù)指示如下圖所示：120 丁條目數(shù)指示 橫線圖4-53分割線應(yīng)用規(guī)范：分隔線只是起輔助