隨著科技的不斷進步，設計行業(yè)也在不斷的發(fā)展，從平面設計再到網(wǎng)頁ui設計，網(wǎng)頁ui設計是有一定的規(guī)范的，下面就跟隨小編來了解網(wǎng)頁ui設計規(guī)范中的頁面信息規(guī)范及交互規(guī)范吧。

網(wǎng)頁ui設計規(guī)范一、 頁面信息規(guī)范

1、頁面命名

每個頁面都要有與之模塊對應的名稱。

2、頁面兼容性

(1)頁面大小兼容。自適應1366*768px及以上的分辨率，默認窗口設置下，不應出現(xiàn)水平滾動條，避免出現(xiàn)垂直滾動條(當內(nèi)容過多 時允許滾動條)

(2)彈窗、彈頁要保證768高度的分辨率顯示正常，同時能移動查看彈出框內(nèi)容。彈出框高度為不超過450px，且顯示在內(nèi)容頁面相對水平、 垂直相對居中位置。

(3)瀏覽器兼容。兼容Chrome、Firefox 、Safari、IE8及以上主流瀏覽器。

3、文字

文字用系統(tǒng)自帶的常規(guī)字體，且分一級標題、二級標題、主內(nèi)容文字、次內(nèi)容文字、輔助文字(說明或引導性文字，提醒性文字)，分別用不同的字號、顏色。具體字號大小和顏色參考UI設計效果圖。

4、內(nèi)容圖片

內(nèi)容圖片均帶1px描邊;內(nèi)容圖片未加載出來時顯示系統(tǒng)默認圖片。

 （圖片來自網(wǎng)絡）

網(wǎng)頁ui設計規(guī)范二、 信息交互規(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)容用“…”顯示光標停留后，在浮動層顯示詳細內(nèi)容。

2、選中數(shù)據(jù)

(1)勾選全選則選中當頁所有記錄

(2)去掉當頁某個記錄的勾選，則全選也去掉勾選。

(3)翻頁后，自動去掉已勾選的記錄及全選的勾選。

(4)翻頁后是否進行選擇記錄的保留應試具體業(yè)務而定。

(5)刷新頁面后，自動去掉已勾選的記錄及全選的勾選。

3、新增數(shù)據(jù)

(1)新增的記錄必須排在新增頁的首行;

(2)所有列表頁面默認按數(shù)據(jù)新增時間倒序排列。

(3)提交失敗后留在當前提交頁，且保存用戶已經(jīng)輸入的內(nèi)容以便再次提交。

(4)提交成功后自動回到數(shù)據(jù)列表頁。

(5)提交時需對主要標識字段進行重復值、空值(空格)判斷。

 （圖片來自網(wǎng)絡）

4、修改數(shù)據(jù)

(1)修改完成后必須回到原記錄所在位置，且刷新顯示修改后的值。

(2)提交失敗后留在當前提交頁，且保存用戶已經(jīng)輸入的內(nèi)容以便再次提交。

(3)在查詢條件下修改返回后，保留原有查詢條件，且修改后的數(shù)據(jù)如果不滿足查詢條件則不顯示。

(4)提交時需對主標識字段進行重復值、空值(空格)判斷。

5、查詢數(shù)據(jù)

(1)把所有查詢條件全部顯示出來，并放在查詢列表上方位置。

(2)每個查詢條件必須有預置文案。

(3)每次查詢后保留當前輸入的查詢條件

       以上就是小編給大家整理的網(wǎng)頁ui設計規(guī)范中的頁面信息規(guī)范及交互規(guī)范了。這些都是ui設計需要知道的規(guī)范，如果你剛?cè)胄芯托枰⒁饬?/span>