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

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

1、頁面命名

每個(gè)頁面都要有與之模塊對(duì)應(yīng)的名稱。

2、頁面兼容性

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

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

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

3、文字

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

4、內(nèi)容圖片

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

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

網(wǎng)頁ui設(shè)計(jì)規(guī)范二、 信息交互規(guī)范

1、數(shù)據(jù)操作-顯示數(shù)據(jù)(表格)

(1)表頭：字體加粗、且比單無格內(nèi)容字體大一號(hào)，且體字體大小參照UI效果圖。

(2)單無格：文字圖片內(nèi)容左對(duì)齊，數(shù)字、金額內(nèi)容右對(duì)齊。

(3)操作內(nèi)容原則上均用文字表達(dá)，如“編輯-刪除”

(4)鼠標(biāo)劃過表格單行時(shí)，顏色高亮。

(5)原則上每頁顯示15-20條數(shù)據(jù)，實(shí)際顯示條數(shù)據(jù)可按設(shè)計(jì)排列效果而定。

(6)表格中不定長(zhǎng)的字段，固定顯示寬度，超出內(nèi)容用“…”顯示光標(biāo)停留后，在浮動(dòng)層顯示詳細(xì)內(nèi)容。

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

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

(2)去掉當(dāng)頁某個(gè)記錄的勾選，則全選也去掉勾選。

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

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

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

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

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

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

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

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

(5)提交時(shí)需對(duì)主要標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值(空格)判斷。

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

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

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

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

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

(4)提交時(shí)需對(duì)主標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值(空格)判斷。

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

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

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

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

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