您好,歡迎來(lái)到一站式眾包服務(wù)平臺(tái)-威客牛網(wǎng)
當(dāng)前位置:威客牛首頁(yè) > 知識(shí)百科 > IT軟件 > UI設(shè)計(jì) > 交互頁(yè)面設(shè)計(jì)規(guī)范包含的內(nèi)容

交互頁(yè)面設(shè)計(jì)規(guī)范包含的內(nèi)容

2022-12-04作者:網(wǎng)友投稿
前些時(shí)間正準(zhǔn)備寫交互規(guī)范,就去網(wǎng)上搜羅了一下交互規(guī)范的一些范本,想作為借鑒參考,但卻沒(méi)能找到比較滿意的,找到了一些零散的內(nèi)容(當(dāng)然有些還是有參考價(jià)值的),所以就覺(jué)得交互規(guī)范這方面的內(nèi)容比較少,就來(lái)此給分享一下自已整理的規(guī)范。本規(guī)范是PC端 web管理系統(tǒng)的規(guī)范,文檔結(jié)構(gòu)和內(nèi)容有參考過(guò)網(wǎng)上一些大牛的分享,個(gè)人的思考并不完善希望各位大神多多指正和補(bǔ)充。以下是贏在威客網(wǎng)小編整理的交互頁(yè)面設(shè)計(jì)規(guī)范包含的內(nèi)容。

本規(guī)范按web交互屬性分三個(gè)部分:頁(yè)面信息規(guī)范、信息交互規(guī)范、通用組件規(guī)范。

一、 頁(yè)面信息規(guī)范

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

頁(yè)面兼容性

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

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

瀏覽器兼容

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

文字

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

內(nèi)容圖片

(1)內(nèi)容圖片均帶1px描邊。

(2)內(nèi)容圖片未加載出來(lái)時(shí)顯示系統(tǒng)默認(rèn)圖片。

二、 信息交互規(guī)范

數(shù)據(jù)操作


顯示數(shù)據(jù)(表格)、選中數(shù)據(jù)、新增數(shù)據(jù)、修改數(shù)據(jù)、查詢數(shù)據(jù)、刪除數(shù)據(jù)、提交/上傳數(shù)據(jù)

提示信息

預(yù)先信息提示、操作信息提示、結(jié)果信息提示

三、 通用組件規(guī)范


導(dǎo)航

菜單導(dǎo)航欄、導(dǎo)航菜單、當(dāng)前位置導(dǎo)航

公司級(jí)的規(guī)范文檔格式并不是像上文一樣,但鑒于簡(jiǎn)書排版能力有限,只能做到這樣子了
免費(fèi)查詢商標(biāo)注冊(cè)