雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

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

Time: 2020-02-28

隨著科技的不斷進(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)頁ui設(shè)計(jì)規(guī)范_374845620.png

 (圖片來自網(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)頁ui設(shè)計(jì)規(guī)范_3748451168.png

 (圖片來自網(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>


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開