【正文】 素保持適當?shù)拈g隔距離；參見 《界面視覺規(guī)范》 3) 跳轉(zhuǎn) 組成： 文字 （轉(zhuǎn)到 … 頁） +輸入框 +下拉圖標 +頁碼拖動條 +確定按鈕 如下圖所示： IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 44 圖 443 跳轉(zhuǎn) 應(yīng)用規(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 條 應(yīng)用規(guī)范 ： ? 頁碼超過 11 頁 時顯示； ? 顯示在“首頁”位置之前，保持適當?shù)拈g隔距離；參見 《界面視覺規(guī)范》 【 效果演示 】 查看 動畫 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 45 日期 輸入 通過日歷選擇 日期 日歷選擇是使用 日歷選擇 控件 進行日期 輸入。 【 設(shè)計 意圖 】 ? 使用生活中最常見的日歷形式，使得日期輸入的形式更加直觀； ? 日歷選擇形式能夠使日期輸入更加方便、快捷； ? 能夠減少用戶錯誤輸入日期的幾率； 【 應(yīng)用條件 】 ? 需要 進行 日期 輸入 時 ； ? 年份跨度較小，在 10 年以內(nèi) 時 ； 例如： 2022 年 ? 日期 顯示的一種形式 ； ? 需要進行日期區(qū)間選擇時； 例如：應(yīng)用于表單 中 時間 的輸入 、統(tǒng)計查詢等設(shè)計中 ； 【 模式描述 】 組成： 輸入框 + 日歷 的圖示 + 日歷顯示層 如 下圖所示： 圖 444 日歷輸入 應(yīng)用規(guī)范 ： 1) 日歷 ? 日歷中必須明確標示出當前系統(tǒng)日期； 包括：年、月、日。 如下圖所示： IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 46 圖 445 日歷標注 ? 年份和月 份 選擇 如下圖所示 ； 圖 446 年份和月份選擇 ? 默認顯示近 10 年的 年份 ，前 10 后 1； ? 從當年往上，滑動滾動條，查看到 100 個年份；往下，查看到 10 個年份 ； ? 點擊日歷中的月份 12 個月份全部顯示在下拉層中； ? 當前年份、月份均要區(qū)分于其他高亮顯示； 2) 日期輸入 ? 通過鍵盤輸入 日期 ； 當鼠標移至輸入框內(nèi)時，輸入框中的內(nèi)容被全 部 選 中 并高亮顯示，鼠標移開后恢復；開始鍵盤輸入時，默認內(nèi)容將被清空； 如下圖所示： 默認狀態(tài) 鼠標在輸入框內(nèi)點擊后 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 47 輸入日期后 ? 通過日歷選擇輸入 日期 ； 點擊日歷圖標后，輸入框、圖標及文字均高亮顯示，給出用戶明確的反饋；選定日期要高亮顯示 ， 同時區(qū)分于當前系統(tǒng)日期； 如 下圖所示： 圖 447 日歷選擇 3) 錯誤提示 只允許輸入 09 這十個數(shù)字；只要用戶輸入數(shù)字，無論幾位系統(tǒng)自動按照“ yyyymmdd”的格式顯示給用戶；當月份和日期超出正常值時，系統(tǒng)給出提示；如“很抱歉！您輸入的 月份或日期過大，請重新輸入！ ” 4) 顯示某一時間點 要求顯示當前系統(tǒng)默認時間 不 要求顯示當前系統(tǒng)默認時間 【 擴展描述 】 組成： 時間段的文本提示 + 兩個 日期選擇 如下圖所示： 圖 448 一段時間選擇 應(yīng)用規(guī)范 ： ? 時間段的文本提示“從 … 至 … ” ； IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 48 ? 選定起始時間后，起始時間被回顯到日期框內(nèi) ，同時截至日期日歷框自動被打開，不需要用戶再次點擊，即可選擇日期； 【 效果演示 】 無 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 49 年份跨度較大時的日期選擇 應(yīng)用于 日期選擇時的年份會出現(xiàn)跨度較大的設(shè)計中，方便快速的幫助用戶正確完成時間格式的輸入 。 適用于 出生日期 等方面。 使得 信息反饋及時明確，提示明顯易懂，減少了誤操作和重復操作的次數(shù)。 【 設(shè) 計意圖 】 ? 方便用戶快速定位年份、月份、日期； ? 減少用戶出錯的幾率； ? 符合 此類場景下用戶的心里預期； 【 應(yīng)用條件 】 ? 年份的選擇跨度較大 ，在 1090 年之間時 ； 例如： 適用于 出生日期等 設(shè)計中； 【 模式描述 】 組成： 輸入框 +下拉層 + 年月日的文本提示 整體效果如下圖： 圖 449 年份選擇 應(yīng)用規(guī)范 ： 1）手動輸入 年月日的輸入均可以通過鍵盤操作的方式輸入，輸入內(nèi)容范圍在 09 十個數(shù)字之內(nèi)； 如下圖所示： 未輸入 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 50 鼠標聚焦到輸入框 輸入后 2）選擇輸入 年月日的輸入均可以通過鼠標點擊出現(xiàn)列表選擇的方式輸入； 年的選擇 方式；如下圖所示： 圖 450 選擇年份 默認只提供顯示 90 個年份， 當前所在 年 份不足 10 年時，未來年份默認 置灰顯示。 月的輸入方式；如下圖所示： 圖 451 選擇月份 日的輸入方式；如下圖所示： IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 51 圖 452 選擇日期 【 擴展描述 】 無 【 效果演示 】 查看 HTML IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 52 分隔 等量條目分隔線 等量條目分隔線是一種對包含大量記錄行的列表進行等量條目分隔的視覺指示符號。 【 設(shè)計意圖 】 ? 使頁面更加有條理，看起來更清晰； ? 讓用戶清楚自己當前瀏覽的條目位置 ； ? 讓用戶感覺到一部分告一段落，減輕用戶的視覺疲勞和心理負擔 。 【 應(yīng)用 條件 】 ? 同一頁（或同一框架）中顯示超過 70 條記錄時； ? 列表條目之間無邏輯分組的關(guān)系。 例如：論壇、評論、聊天室。 【 模式描述 】 組成： 橫線 + 條目數(shù)指示 如下圖所示： 圖 453 分割線 應(yīng)用規(guī)范： ? 分隔線只是起輔助作用，不是用戶注意的重點，視覺上不能過于醒目，不能干擾用戶的視覺重心； ? 每 20 條記錄出現(xiàn)一條分隔線 ； ? 分隔線中間標注該分隔線分隔截至的條目數(shù) 或 其他指示； ? 條目數(shù)指示 同樣不易過于醒目； ? 分隔線的分隔效果需要有合適的留白來輔助完成。故在分隔線上方和下方必須留出合適的空間； ? 分割線的寬度不能貫穿整個列表區(qū)域，兩邊需要留一些余地（否則無法起到分隔作用，還會將頁面割斷）。 120 條目數(shù)指示 橫線 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 53 【 擴展描述 】 1） 上 /下條目跳轉(zhuǎn) 組成： 圖 455 分割線的跳轉(zhuǎn)圖 示 應(yīng)用規(guī)范： ? 在分隔線的兩端分別顯示向上和向下的圖示，用戶通 過點擊它們分別可以轉(zhuǎn)到上一個或下一個分隔 線 處； ? 兩個圖示的視覺感覺不能太強烈，在鼠標移過時可以清晰一些以提供受范式反饋； ? 圖示要 提供提示信息 ，如下圖所示 ： 圖 456 提示信息 適用條件： ? 在一頁的數(shù)據(jù)量非常大，用戶的瀏覽行為是比較隨意和無目的性 時可提供這樣的上下跳轉(zhuǎn)功能 ； 2） 返回頂部 組成： 圖 457 返回頂部 應(yīng)用規(guī)范： ? 在分隔線右側(cè)顯示“回到頂部”的圖示； 120 跳轉(zhuǎn)圖示 跳轉(zhuǎn)圖示 120 120 返回頂部圖示 120 圖 454 分割線寬度 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 54 ? 圖示的視覺感覺不能太強烈，在鼠標移過時可以清晰一些以提供受范式反饋； ? 可以加以文本說明作為反饋形式 ，如下圖所示 ： 圖 458 反饋形式 適用條件： 一頁的數(shù)據(jù)量非常大，用戶 需要回到頂部 時 ； 【 效果演示 】 無 120 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 55 高級加密 高級加密是用戶在設(shè)置比較重要的密碼時，提供給用戶的一種用軟鍵盤設(shè)置密碼的組件。 【 設(shè)計意圖 】 ? 用戶通過鼠標點擊進行密碼輸入，可以避免系統(tǒng)自動根據(jù)敲擊鍵盤的輸入獲取密碼，從而增加安全性，讓用戶放心，增加用戶對系統(tǒng)的信任； ? 合理的 軟鍵盤的外觀設(shè)計，讓用戶可以準確和快捷的設(shè)置密碼。 【 應(yīng)用條件 】 ? 對密碼的安全級別要求較高的場景 。 例如：銀行帳號的密碼；容易被盜取的 IM 帳號密碼。 【 模式描述 】 組成： 軟鍵盤打開 /關(guān)閉 指示 圖標 + 軟鍵盤 圖 459 軟鍵盤 應(yīng)用規(guī)范： ? 在密碼輸入框附近，必須有一個可以指示打開 和關(guān)閉 高級加密輸入軟鍵盤的圖示或按鈕 ：圖示在打開和收起兩種外觀上切換 ； ? 對于安全加密要給出相應(yīng)的提示。 ? 由于軟鍵盤點擊輸入的反饋遠遠不如鍵盤敲擊輸入的反饋強烈，再加上輸入的密碼以星號表示，故無法從這里給用戶提供輸入何字符的視覺反饋。為了保證用戶點擊的準確性，必須： ? 軟鍵盤各按鍵必須非常清楚，按鍵與按鍵之間的邊界也必須非常清楚； ? 如果有大小寫指示或者 shift 切換，一定要明確 地表明當前的狀態(tài)，讓用戶能清楚地知道點擊這個鍵輸入的是什么字符； IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 56 ? 鼠標在軟鍵盤上移動，以及點擊和釋放某個鍵時，必須提供清晰的 視覺 反饋：如下圖所示： 圖 460 軟鍵盤示例 ? 每次 重新 啟動 程序或 打開 網(wǎng)絡(luò)應(yīng)用 ，軟鍵盤的布局都應(yīng)該是不一樣的 ； ? 每次鍵盤的順序變化，都一定要有規(guī)律，讓用戶方便定位，可以較準確地找到自己想要點擊的字符，避免出錯，如下圖所示： 圖 461 順序變化 ? 打開軟鍵盤后，鼠標也可定位在輸入框中用 切換回 鍵盤輸入 方式 ； ? 當用戶用軟鍵盤輸入時，文本區(qū)無光標指示； 當鼠標點擊輸入?yún)^(qū)時， 輸入?yún)^(qū)內(nèi)顯示光標， 指示可鍵盤輸入。 【 擴展描述 】 1） 刷新數(shù)字區(qū) 組成 ： “ 刷新數(shù)字區(qū)” 提示 + 可變 區(qū)域 視覺提示 ，如下圖所示： 小寫 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 57 圖 462 刷新數(shù)字區(qū) 應(yīng)用規(guī)范： ? 切換按鈕要明確，在位置上要與軟鍵盤區(qū)域離開一點距離，以防止用戶在點擊設(shè)置密碼時誤點，沒有留 意到鍵盤順序已經(jīng)變化，而記錯自己的設(shè)置的密碼； ? 刷新的數(shù)字應(yīng)該與允許用戶輸入的數(shù)字相匹配。例如：銀行帳號只能輸入數(shù)字 ； ? 用戶點擊切換按鈕或圖標，不能將軟鍵盤全部打亂。只能提供有限的區(qū)域（如：數(shù)字區(qū)）讓用戶選擇變換順序，這樣可以減少用戶的記憶負擔； ? 可變換的區(qū)域在視覺上必須清楚地標識。 【 注意事項 】 可以利用 安裝 ActiveX 安全 控件的方法來 更好的 解決安全性的問題 。 【 效果演示 】 查看 動畫 IT 應(yīng)用服務(wù)產(chǎn)品界面交互規(guī)范 —— 界面組件級規(guī)范 58 進度條 應(yīng)用于 用戶上網(wǎng)瀏覽頁面 、執(zhí)行 數(shù)據(jù)操作時進行等 待 時 的設(shè)計中 ； 【 設(shè)計意圖 】 ? 避免因為等待引起用戶的厭煩和誤解 ； ? 讓用戶 了解應(yīng)用程序 正在執(zhí)行并且實時了解執(zhí)行情況 ， 并 給出用戶有效的即時反饋 ； ? 趣味性的進度條， 能 增加用戶的愉悅性 ； 【 應(yīng)用條件 】 ? 系統(tǒng)需要用戶長時間等待時 ； ? 上傳下載的文件較大時 ； ? 等待時間超過 5 秒鐘時； 例如：數(shù)據(jù)上傳下載、頁面瀏覽、文件打開關(guān)閉、復制、打印文檔等。 【 模式描述 】 組成： 進度 單位 +進度 框 如下圖所示： 圖 463 進度條 應(yīng)用規(guī)范： ? 根據(jù)進度情況逐步顯示 進度單位 ，直到進度完成 ；