1. 程式人生 > >WEB開發在內部操作管理應用系統中的互動規範

WEB開發在內部操作管理應用系統中的互動規範

資訊內容規範
頁面相容性
自適應1366*768px及以上的解析度
預設視窗設定下,不應出現水平滾動條,避免出現垂直滾動條(當內容過多時允許滾動條)
彈窗、彈頁要保證768高度的解析度顯示正常,同時能移動檢視彈出框內容。彈出框高度為不超過450px,且顯示在內容頁面相對水平、垂直相對居中位置。
瀏覽器相容Chrome
文字
圖片
內容圖片未加載出來時顯示系統預設圖
資訊互動規範
資料操作
顯示資料(表格)
(1)表頭:字型加粗、且比單無格內容字型大一號,且體字型大小參照UI規範。
(2)單元格:文字圖片內容左對齊,數字、金額內容右對齊。
(3)操作內容原則上均用文字表達,如“編輯-刪除”
(4)滑鼠劃過表格單行時,顏色高亮。
(5)原則上每頁顯示15-20條資料,實際顯示條資料可按設計排列效果而定。
(6)表格中不定長的欄位,固定顯示寬度,超出內容用“…”顯示游標停留後,在浮動層顯示詳細內容。
選中資料
(1)勾選全選則選中當頁所有記錄
(2)去掉當頁某個記錄的勾選,則全選也去掉勾選。
(3)翻頁後,自動去掉已勾選的記錄及全選的勾選。
(4)翻頁後是否進行選擇記錄的保留應試具體業務而定。
(5)重新整理頁面後,自動去掉已勾選的記錄及全選的勾選。
新增資料
(1)新增的記錄必須排在新增頁的首行;
(2)所有列表頁面預設按資料新增時間倒序排列。
(3)提交失敗後留在當前提交頁,且儲存使用者已經輸入的內容以便再次提交。
(4)提交成功後提示資訊,自動回到資料列表頁且資料列表頁重新整理。
(5)提交時需對主要標識欄位進行重複值、空值(空格)判斷。
修改資料
(1)修改完成後提示資訊,回到原表格記錄所在位置,且重新整理顯示修改後的值。
(2)提交失敗後留在當前提交頁,且儲存使用者已經輸入的內容以便再次提交。
(3)在查詢條件下修改返回後,保留原有查詢條件,且修改後的資料如果不滿足查詢條件則不顯示。
(4)提交時需對主標識欄位進行重複值、空值(空格)判斷。
查詢資料
(1)把常用查詢條件顯示出來,並放在查詢列表上方位置,其他查詢條件使用者按需展開。
(2)每個查詢條件必須有預置文案。
(3)每次查詢後保留當前輸入的查詢條件。
(4)當未查詢到任何記錄時,需給予未查詢到相關記錄的提示資訊。
(5)除了使用者明確要求不需要外,需提供模糊查詢功能;查詢內容對客戶輸入文字做前後空格的刪除操作。
(6)必須要有條件“重置”功能,重置後恢復到初始狀態。
刪除資料
(1)必須有確認刪除的提示資訊。
(2)刪除成功後重新整理不顯示刪除的記錄。
(3)刪除成功後返回到原記錄所在頁面,而當原記錄所在頁不存在時,則返回上一頁。
(4)當被刪除的記錄與其他記錄存在關聯時,請示需求介面給予不允許刪除、更明細提示等資訊。
提交/上傳資料
(1)當提交所費的時間較長時,需給出等待的提示,如:沙漏、進度條等。
(2)提交時需對主標識欄位進行重複值、空值(空格)判斷。
(3)提交成功後不可重複提交,有列表展示提交內容的直接返回到展示頁面。
(4)必須要有“取消或返回”功能。
分頁
使用物業雲前端標準翻頁空間,支援顯示總頁數,資料總條數,可手工輸入跳轉頁數
取消
取消操作後須返回到原記錄所在狀態
返回
當從一個頁面進入子頁面後,子頁面必須提供返回按鈕,切主頁面保留進入子頁面前資料狀態;
如果不進入子頁面,則開啟新標籤頁
連結
(1)連結文字或圖片當滑鼠劃過時會變成點選手形。
(2)本視窗開啟:查詢結果、上下翻頁、新增、修改等操作在本視窗開啟。
(3)新視窗開啟:各類詳情、預覽頁面等採用新視窗開啟。


提示資訊
預先資訊提示
(1)內容提交類:每個輸入項、條件選選項(包括時間選擇)均需要給出提示資訊。該提示資訊可放置在輸入框內或者控制元件尾部(如密碼要多少多少位。搜尋框提示使用者輸入什麼內容等。)
(2)謹慎類操作:針對不可修改、重要操作選擇等操作屬於謹慎類操作,均需給出提示資訊。如稽核是否通過操作、退款申請操作、價格輸入等。
操作資訊提示
(1)確認提示:修改設定、刪除資料等操作時需要彈出提示框,使用者需要選擇後方可執行。
(2)錯誤提示:當用戶的操作不符合規則、輸入資料不符合規則需要給出操作提示。比如輸入數值不符系統規定,則進行提示。
(3)錯誤提示分為:即時提示、提交後提示。本系統這裡統一用即時提示。
(4)讀取提示:涉及到大量資訊讀取緩慢的時候應該進行提示。比如進入後臺檢視商品列表時,由於網路、資料量大等原導致載入緩慢,應該顯示讀取提示資訊,已避免使用者過度重複點選操作。
結果資訊提示
(1)儲存結果提示:當進行新增/修改此類涉及到資料儲存的操作,不管是否成功均需給出提示。統一用右上角浮動提示,內容為“儲存成功!”原則上儲存之後直接顯示結果頁(也可視具體情況定)。
(2)查詢結果提示:任何資訊列表、查詢結果,當對應資訊結果的時候需要給出有無結果狀態提示。不得使用空白資訊。


表單
(1)表單輸入框由 表單欄位名稱: + 輸入框組成,欄位名稱原則上2-4個漢字。
(2)預置文案:輸入框內均需有預置文案,且游標進入輸入框獲得焦點時文案自動消失,若輸入框失去焦點且未輸入任何文字時恢復預置文案。
(3)下拉選擇框中內容有多級時,只顯示一級,其他級呈灰色不可用狀態,選擇一級後才會啟用第二級,以此類推。如:部門作為查詢條件時,點選下拉框,預設只有一級部門可用,點選一級部門再啟用開顯示二級部門。
(4)介面的必填項以紅色*號標識出來,且標識在“表單欄位名稱”前面。存在必填項未填寫時,輸入框失去焦點即時提示,輸入框紅色描邊,且輸入框下方左有相應紅色提示文案。輸入框未曾獲得過焦點直接提交時,同樣輸入框紅色描邊+紅色提示文案提醒。
單行輸入框:在未限制字數情況下,當輸入文字比前輸入框長時,最先輸入的文字隱藏,游標和最後一個輸入的文字顯示在輸入框尾部。
(5)多行輸入框:需要有“當前已輸入字數/最多可輸入字數”(如:50/100)。
(6)與限制條件不符的費法輸入應即時提醒。
(7)只允許輸入日期、時間的輸入框需要通過格式化方式約束輸入,而不是輸入非法值後給出提示;


按鈕
(1)按鈕種類:優先操作按鈕(藍色),次要按鈕(白色),不可用按鈕(灰色)。
(2)按鈕狀態:預設顯示狀態,滑鼠經過狀態,點選狀態。
(3)按鈕位置:按windows互動習慣先優先後次要(左確定,右取消)。
(4)按鈕樣式:可直接寫文字,或文字+圖示(具體方案參照UI設計效果圖),原則上按鈕上文字為2-4個漢字。