ui設計網(wǎng)頁規(guī)范

《ui設計網(wǎng)頁規(guī)范》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在工程資料-天天文庫。

1、一、頁面信息規(guī)范1、頁面命名每個頁面都要有與之模塊對應的名稱。2、頁面兼容性（1）頁面大小兼容o自適應1366*768px及以上的分辨率o默認窗口設置下，不應出現(xiàn)水平滾動條，避免出現(xiàn)垂直滾動條（當內(nèi)容過多時允許滾動條）（2）彈窗、彈頁要保證768高度的分辨率顯示正常，同時能移動查看彈出框內(nèi)容。彈出框高度為不超過450px，且顯示在內(nèi)容頁面相對水平、垂直相對居中位置。（3）瀏覽器兼容兼容Chrome、Firefox、Safari、IE8及以上主流瀏覽器。o文字文字用系統(tǒng)自帶的常規(guī)字體，且分一級標題、二級標題、主內(nèi)容文字、次內(nèi)容文字、輔助文字（說明或引導性文字，

2、提醒性文字），分別用不同的字號、顏色。具體字號大小和顏色參考UI設計效果圖。o內(nèi)容圖片內(nèi)容圖片均帶1px描邊；內(nèi)容圖片未加載出來時顯示系統(tǒng)默認圖片。二、信息交互規(guī)范1、數(shù)據(jù)操作顯示數(shù)據(jù)（表格）（1）表頭：字體加粗、且比單無格內(nèi)容字體大一號，且體字體大小參照UI效果圖。（2）單無格：文字圖片內(nèi)容左對齊，數(shù)字、金額內(nèi)容右對齊。（3）操作內(nèi)容原則上均用文字表達，如“編輯-刪除”（4）鼠標劃過表格單行時，顏色高亮。（5）原則上每頁顯示15-20條數(shù)據(jù)，實際顯示條數(shù)據(jù)可按設計排列效果而定。（6）表格中不定長的字段，固定顯示寬度，超出內(nèi)容用“…”顯示光標停留后，在浮動層

3、顯示詳細內(nèi)容。選中數(shù)據(jù)（1）勾選全選則選中當頁所有記錄（2）去掉當頁某個記錄的勾選，則全選也去掉勾選。（3）翻頁后，自動去掉已勾選的記錄及全選的勾選。（4）翻頁后是否進行選擇記錄的保留應試具體業(yè)務而定。（5）刷新頁面后，自動去掉已勾選的記錄及全選的勾選。新增數(shù)據(jù)（1）新增的記錄必須排在新增頁的首行；（2）所有列表頁面默認按數(shù)據(jù)新增時間倒序排列。（3）提交失敗后留在當前提交頁，且保存用戶已經(jīng)輸入的內(nèi)容以便再次提交。（4）提交成功后自動回到數(shù)據(jù)列表頁。（5）提交時需對主要標識字段進行重復值、空值（空格）判斷。修改數(shù)據(jù)（1）修改完成后必須回到原記錄所在位置，且刷新

4、顯示修改后的值。（2）提交失敗后留在當前提交頁，且保存用戶已經(jīng)輸入的內(nèi)容以便再次提交。（3）在查詢條件下修改返回后，保留原有查詢條件，且修改后的數(shù)據(jù)如果不滿足查詢條件則不顯示。（4）提交時需對主標識字段進行重復值、空值（空格）判斷。查詢數(shù)據(jù)（1）把所有查詢條件全部顯示出來，并放在查詢列表上方位置。（2）每個查詢條件必須有預置文案。（3）每次查詢后保留當前輸入的查詢條件。（4）當未查詢到任何記錄時，需給予未查找到相關記錄的提示信息。（5）除了用戶明確要求不需要外，需提供模糊查詢功能。（6）必須要有條件“重置”功能，重置后恢復到初始狀態(tài)。刪除數(shù)據(jù)（1）必須有確認

5、刪除的提示信息。（2）刪除成功后刷新不顯示刪除的記錄。（3）刪除成功后返回到原記錄所在頁面，而當原記錄所在頁不存在時，則返回上一頁。（4）當被刪除的記錄與其他記錄存在關聯(lián)時，請示需求界面給予不允許刪除、更明細提示等信息。提交/上傳數(shù)據(jù)（1）當提交所費的時間較長時，需給出等待的提示，如：沙漏、菊花、進度條等。（2）提交時需對主標識字段進行重復值、空值（空格）判斷。（3）提交成功后不可重復提交，有列表展示提交內(nèi)容的直接返回到展示頁面。（4）必須要有“取消或返回”功能。分頁（1）當對查詢結(jié)果進行分頁時，分頁的同時需要能夠執(zhí)行查詢功能；（2）當頁數(shù)較多時，允許輸入具

6、體頁數(shù)進行查詢；取消（1）取消必須給予提示。（2）取消操作后須返到原記錄所在狀態(tài)。返回（1）當從一個頁面點擊按鈕或鏈接進入子頁面時，子頁面必須提供返回按鈕2、鏈接（1）鏈接文字或圖片當鼠標劃過時會變成點擊手形。（2）本窗口打開：查詢結(jié)果、上下翻頁、新增、修改等操作在本窗口打開。（3）新窗口打開：各類詳情、預覽頁面等采用新窗口打開。3、提示信息預先信息提示（1）內(nèi)容提交類：每個輸入項、條件選選項（包括時間選擇）均需要給出提示信息。該提示信息可放置在輸入框內(nèi)或者控件尾部（如密碼要多少多少位。搜索框提示用戶輸入什么內(nèi)容等。）（2）謹慎類操作：針對不可修改、重要操作

7、選擇等操作屬于謹慎類操作，均需給出提示信息。如審核是否通過操作、退款申請操作、價格輸入等。操作信息提示（1）確認提示：修改設置、刪除數(shù)據(jù)等操作時需要彈出提示框，用戶需要選擇后方可執(zhí)行。（2）錯誤提示：當用戶的操作不符合規(guī)則、輸入數(shù)據(jù)不符合規(guī)則需要給出操作提示。比如輸入數(shù)值不符系統(tǒng)規(guī)定，則進行提示。（3）錯誤提示分為：即時提示、提交后提示。本系統(tǒng)這里統(tǒng)一用即時提示。（4）讀取提示：涉及到大量信息讀取緩慢的時候應該進行提示。比如進入后臺查看商品列表時，由于網(wǎng)絡、數(shù)據(jù)量大等原導致載入緩慢，應該顯示讀取提示信息，已避免用戶過度重復點擊操作。結(jié)果信息提示（1）保存結(jié)果

8、提示：當進行商品添加/修改此類涉及到數(shù)據(jù)保存的操作，