【文章內(nèi)容簡介】 態(tài)；當(dāng)兩者都有時(shí)，顯示復(fù)選框在上，圖標(biāo)被覆蓋； ? 在對(duì)表格行進(jìn)行選中（點(diǎn)選行的任意位置即可選中）時(shí)，此行要高亮顯示，同時(shí)此行前復(fù)選框 為 選中 狀態(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)用頁簽的形式來進(jìn)行設(shè)計(jì)； ? 頁簽總寬度在表格寬度的 75%之內(nèi)為佳，超出此范圍時(shí)，需應(yīng)用其他設(shè)計(jì)形式如下拉框顯示的形式等； 如下圖所示： 圖 44 數(shù)據(jù)篩選區(qū) ? 當(dāng)前分類 狀態(tài)的 的頁簽要高亮顯示，要明顯區(qū)別于其他頁簽； ? 頁簽內(nèi)的文字，需要簡單明了 ， 相同 內(nèi)容的文字 省略 ； 如上圖中未處理（訂單）、處理中（訂單）、處理完成（訂單） ； ? 應(yīng)用頁簽設(shè)計(jì)時(shí)，頁簽類別要?jiǎng)澐置鞔_合理 ； 如 按照數(shù)據(jù)狀態(tài)或分類進(jìn)行劃分 。 4）命令按鈕區(qū)： ? 針 對(duì)整體頁面進(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ì)列IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 13 表進(jìn)行操作； 如下圖所示： 圖 45 操作按鈕區(qū) ? 按鈕的其它細(xì)則參見 《界面視覺規(guī)范》。 6）翻頁區(qū)： ? 當(dāng)列表中的數(shù)據(jù)量超過默認(rèn)的數(shù)據(jù)顯示條數(shù)時(shí)，應(yīng)用翻頁模式來處 理多條數(shù)據(jù)的顯示； ? 翻頁在列表下方居中顯示； ? 翻頁的詳細(xì)功能和模式參見 “翻頁 模式 組件規(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)的方式來對(duì)數(shù)據(jù)列的寬度進(jìn)行改變； 同時(shí)可以使用橫向滾動(dòng)條 ； ? 調(diào)整 列寬度 時(shí) ， 要在 整體表格邊線內(nèi)進(jìn)行， 以免 整體 頁面變形； ? 數(shù)據(jù)項(xiàng)內(nèi)容顯示部分太長時(shí)，省略多余部分并加省略號(hào)；鼠標(biāo)指針?？繒r(shí)，全部詳細(xì)內(nèi)容顯示； IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 14 9） 數(shù)據(jù)條目設(shè)置 區(qū)： ? 默認(rèn)顯示當(dāng)前 頁面 所能 顯示的 最大 數(shù)據(jù)條目數(shù) ； 如： 10 條 /頁 ； ? 還要 提供 幾個(gè) 數(shù)值 選項(xiàng) ，供用戶選擇 ； 如： 50； 【 效果演示 】 查看動(dòng)畫 查看 HTML IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 15 單元格數(shù)據(jù) 單元格數(shù)據(jù)展示 以單元格為單位的數(shù)據(jù)展示是指應(yīng)用表格的單元格來描述每個(gè)數(shù)據(jù)對(duì)象的展示形式。 【 設(shè)計(jì)意圖 】 ? 讓 用戶更加清晰的 瀏覽 信息 ； ? 方便查看選中單元格 的 信息 。 【 應(yīng)用條件 】 適用于 多數(shù)據(jù)的查看、瀏覽和操作 ； 例如： 如短信中的收信人、郵件中的收件人等。 【 模式描述 】 組成 ： 如下圖所示： 圖 46 單元格數(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ù)類表格。 【 擴(kuò)展描述 】 無 【 效果演示 】 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 16 無 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 17 通訊錄 通訊錄是以單元格數(shù)據(jù)展示 形式 為基礎(chǔ)的 ，集添加刪除修改等功能 于一體 的組件 。 【 設(shè)計(jì)意圖 】 ? 用戶不會(huì)再輸入通訊錄信息之間分隔符，更不會(huì)出現(xiàn)由于分隔符輸入不正確而導(dǎo)致的錯(cuò)誤操作； ? 為用戶顯示人名，而不顯示地址， 方便了查看，同時(shí)增加了自動(dòng)匹配，查找，將新信息增加到通訊錄和導(dǎo)出通訊錄的功能。 【 應(yīng)用條件 】 ? 適用于需要用戶多次填寫同類信息的地方。 如：競價(jià)通中的“關(guān)鍵詞管理”；日期格式中年份的展現(xiàn)方式；郵件、短信產(chǎn)品的收信人列表 。 【 模式描述 】 組成 ： 如下圖所示： 圖 47 通訊錄 1 應(yīng)用規(guī)范 ： a）通訊錄中無此信息的高亮反饋 ? 通訊錄中存在 姓名 時(shí)表格內(nèi)只顯示 姓名 ； ? 通訊錄中沒有 姓名 只有 手機(jī) 號(hào)碼 （ 或 地址 ） 時(shí)則顯 示號(hào)碼 （ 或 地址 ） ； ? 姓名、手機(jī)號(hào)碼（ 或 地址） 兩者都無的單元格自動(dòng)高亮反饋給用戶。 b）默認(rèn)顯示 默認(rèn)顯示表格的一個(gè)空行；如下圖 所示 ： IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 18 圖 48 通訊錄 2 整行單元格數(shù)據(jù)被填滿時(shí)，表格自動(dòng)增加一行； 如下圖所示： 圖 49 通訊錄 3 增加至 3 行時(shí)，出 現(xiàn)滾動(dòng)條；如下圖： 圖 410 通訊錄 4 c）自動(dòng)匹配 支持手動(dòng)輸入，可以輸入人名或地址；輸入地址時(shí)自動(dòng)匹配通訊錄中對(duì)應(yīng)的人名； d）快捷操作 為高級(jí)用戶提供快捷操作 ,輸入新人名或新地址時(shí)，可以將其添加到通訊錄。如下圖： 圖 411 通訊錄 5 注意事項(xiàng) ： 使用時(shí)遇到兩個(gè)人同名時(shí)可以采用“姓名（號(hào)碼）” 的方式顯示。 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 19 【 擴(kuò)展描述 】 無 【 效果演示 】 查看動(dòng)畫 查看 HTMLIT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 20 信息列表 信息列表是顯示單列信息集合的一種視圖展示。 【 設(shè)計(jì)意圖 】 ? 利于信息的展示，方便使用者檢索信息； ? 快速定位信息條目。 【 應(yīng)用條件 】 ? 單列信息集合； ? 索引類的信息列表； 例如：信息列表多應(yīng)用于索引類的信息列表， 如：新聞列表、目錄等。 【 模式描述 】 組成： 項(xiàng) 目符號(hào)、 列表 行 ，如下圖所示： 圖 412 信息列表 應(yīng)用規(guī)范： ? 項(xiàng)目符號(hào)可以是固定的符號(hào)，也可以是具有意義的圖標(biāo)； ? 項(xiàng)目符號(hào)如果是圖標(biāo)，圖標(biāo)必須與應(yīng)用場景相符，盡量不使用無意義的僅為裝飾作用的視覺效果顯著的圖標(biāo)作為項(xiàng)目符號(hào)； ? 列表行的內(nèi)容，可以為文字和圖標(biāo)，文字一般為簡單的標(biāo)題； ? 列表行的文字內(nèi)容應(yīng)該簡單易懂，能夠明確的反應(yīng)所要說明的信息。 ? 列表行內(nèi)容如果折行，行距必須 小于兩個(gè)記錄行之間的段距； ? 由于信息列表多為展示信息的條目，因此信息列表的行間距要有一點(diǎn)留白，不要給使用者造成視覺上的負(fù)擔(dān)。 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 21 【 擴(kuò)展描述 】 組成： 列 表標(biāo)題、單選按鈕、多選按鈕、分隔線、翻頁，如下圖所示： 圖 413 信息列表 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)描述）； ? 翻頁（請(qǐng)參見“翻頁”組件中的相關(guān)描述）。 【 效果演示 】 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 22 無 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 23 編號(hào)和序號(hào) 編號(hào) 用來標(biāo)識(shí)某一個(gè)對(duì)象的唯一號(hào)碼。一個(gè)編號(hào)就代表著一個(gè)對(duì)象。 使用編號(hào)能夠更好的 幫助用戶記憶和 或管理對(duì)象。如下圖所示： 圖 414 編號(hào)示例 【 設(shè)計(jì)意圖 】 ? 更好的方便用戶記憶和管理對(duì)象； ? 合理的使用編號(hào)，能方便用戶更好的進(jìn)行溝通 ； 【 應(yīng)用條件 】 ? 需要用唯一號(hào)碼來標(biāo)識(shí)對(duì) 象時(shí) ； ? 具有真實(shí)、合理、有效的意義； 例如： 訂單列表中 訂單的編號(hào)、酒店客房管理中客房的實(shí)際編號(hào)等等； 【 模式描述 】 應(yīng)用規(guī)范 ： ? 編號(hào)必需代表一個(gè)對(duì)象，不要讓編號(hào)無意義的存在 ； ? 如果用戶更關(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)。 【 擴(kuò)展描述 】 無 【 效果演示 】 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 24 無 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 25 序號(hào) 序號(hào)是 用來標(biāo)識(shí)一組有序?qū)ο?的數(shù)字，它具有先后順序的含義。如下圖所示： 圖 415 序號(hào)示例 【 設(shè)計(jì)意圖 】 ? 使用戶更好了解對(duì)象的先后順序或按一定的順序去了解對(duì)象； ? 更好的展示有先后順序的數(shù)據(jù) ； 【 應(yīng)用條件 】 ? 需要 標(biāo)識(shí)一組有序?qū)ο?時(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ì)混淆用戶的注意。 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 26 圖 416 錯(cuò)誤示例 【 擴(kuò)展描述 】 無 【 效果演示 】 無 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 27 注冊(cè)表單 注冊(cè)表單 應(yīng)用于 對(duì)用戶的輸入格式有一定的要求的 設(shè)計(jì)中，幫助用戶更好的完成 填寫表單的操作 。 【 設(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ò)判斷反饋 + 提交按鈕 如下圖所示： IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 28 圖 417 注冊(cè)表單 應(yīng)用規(guī)范 ： 表單的設(shè)計(jì)應(yīng)該遵循簡潔的設(shè)計(jì)原則。在注冊(cè)填寫時(shí)，盡可能的只提供必須填寫的選項(xiàng)給用戶，其他非必填項(xiàng)，可以通過選填或者在日后需要時(shí)再進(jìn)行完善的方式來完成。 a) 信息 輸入對(duì)錯(cuò)判斷： 信息輸入正確時(shí)，要給與填寫正確的反饋；信息輸入錯(cuò)誤的時(shí)候，要給出錯(cuò)誤的反饋，并給出具體的錯(cuò)誤原因要高亮反饋，同時(shí)注釋語位置整體給出反饋提示。如下圖所示： IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級(jí)規(guī)范 29 圖 418 信息輸入對(duì)錯(cuò)判斷 用戶在輸入錯(cuò)誤時(shí)，要針對(duì)不同的輸入內(nèi)容給出相應(yīng)明確的錯(cuò)誤提示，必要的時(shí)候要提出簡要的解決方法提示。 例如：在用戶名填寫時(shí)，可能出現(xiàn)的錯(cuò)誤提示； 您輸入的用戶名過短！ 您輸入的用戶名中不能包含字符“ amp。（等等）”！ 你輸入 的用戶名“ xxx”已經(jīng)被占用 ,請(qǐng)重新輸入！ b) 輸入 格式 約定 （ 注釋文 本） ： 當(dāng)用戶需要輸入某一項(xiàng)時(shí)，相應(yīng)注釋文本才顯示出來； 對(duì)于表單中的某些內(nèi)容除了需要給予用戶正確填寫格式的提示外還需要簡要說明填寫的必要性 ， 如下圖所示： 圖 419 3) 驗(yàn)證碼： 驗(yàn)證碼中的圖示字母是隨機(jī)產(chǎn)生的，但要注意盡可能避免顯示一些不易區(qū)分的字母和數(shù)字，讓用戶難以辨別 （ 如：“ 0 和 o” ）， 如下圖所示： 圖 420 驗(yàn)證碼 IT 應(yīng)用服務(wù)產(chǎn)品界面