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

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

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

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

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

頁面兼容性

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

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

瀏覽器兼容

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

文字

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

內(nèi)容圖片

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

（2）內(nèi)容圖片未加載出來時顯示系統(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)航

公司級的規(guī)范文檔格式并不是像上文一樣，但鑒于簡書排版能力有限，只能做到這樣子了