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