前些時(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ǔ)充薛窥。不多講了胖烛，請(qǐng)看正文…
本規(guī)范按web交互屬性分三個(gè)部分：頁(yè)面信息規(guī)范、信息交互規(guī)范诅迷、通用組件規(guī)范佩番。
一、頁(yè)面信息規(guī)范
頁(yè)面命名
頁(yè)面兼容
文字
內(nèi)容圖片
二罢杉、信息交互規(guī)范
數(shù)據(jù)操作
鏈接
提示信息
三趟畏、通用組件規(guī)范
導(dǎo)航
表單
按鈕
加載
失敗/空頁(yè)面
鼠標(biāo)
鍵盤
一、 頁(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ì)水平著洼、垂直相對(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ù)（表格）
（1）表頭：字體加粗、且比單無(wú)格內(nèi)容字體大一號(hào)贫途，且體字體大小參照UI效果圖吧彪。
（2）單無(wú)格：文字圖片內(nèi)容左對(duì)齊，數(shù)字丢早、金額內(nèi)容右對(duì)齊姨裸。
（3）操作內(nèi)容原則上均用文字表達(dá)，如“編輯-刪除”
（4）鼠標(biāo)劃過(guò)表格單行時(shí)怨酝，顏色高亮傀缩。
（5）原則上每頁(yè)顯示15-20條數(shù)據(jù)，實(shí)際顯示條數(shù)據(jù)可按設(shè)計(jì)排列效果而定农猬。
（6）表格中不定長(zhǎng)的字段赡艰，固定顯示寬度，超出內(nèi)容用“…”顯示光標(biāo)停留后斤葱，在浮動(dòng)層顯示詳細(xì)內(nèi)容慷垮。
選中數(shù)據(jù)
（1）勾選全選則選中當(dāng)頁(yè)所有記錄
（2）去掉當(dāng)頁(yè)某個(gè)記錄的勾選，則全選也去掉勾選揍堕。
（3）翻頁(yè)后料身，自動(dòng)去掉已勾選的記錄及全選的勾選。
（4）翻頁(yè)后是否進(jìn)行選擇記錄的保留應(yīng)試具體業(yè)務(wù)而定衩茸。
（5）刷新頁(yè)面后芹血，自動(dòng)去掉已勾選的記錄及全選的勾選。
新增數(shù)據(jù)
（1）新增的記錄必須排在新增頁(yè)的首行递瑰；
（2）所有列表頁(yè)面默認(rèn)按數(shù)據(jù)新增時(shí)間倒序排列祟牲。
（3）提交失敗后留在當(dāng)前提交頁(yè)，且保存用戶已經(jīng)輸入的內(nèi)容以便再次提交抖部。
（4）提交成功后自動(dòng)回到數(shù)據(jù)列表頁(yè)说贝。
（5）提交時(shí)需對(duì)主要標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值（空格）判斷慎颗。
修改數(shù)據(jù)
（1）修改完成后必須回到原記錄所在位置乡恕，且刷新顯示修改后的值。
（2）提交失敗后留在當(dāng)前提交頁(yè)俯萎，且保存用戶已經(jīng)輸入的內(nèi)容以便再次提交傲宜。
（3）在查詢條件下修改返回后，保留原有查詢條件夫啊，且修改后的數(shù)據(jù)如果不滿足查詢條件則不顯示函卒。
（4）提交時(shí)需對(duì)主標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值（空格）判斷撇眯。
查詢數(shù)據(jù)
（1）把所有查詢條件全部顯示出來(lái)报嵌，并放在查詢列表上方位置虱咧。
（2）每個(gè)查詢條件必須有預(yù)置文案。
（3）每次查詢后保留當(dāng)前輸入的查詢條件锚国。
（4）當(dāng)未查詢到任何記錄時(shí)腕巡，需給予未查找到相關(guān)記錄的提示信息。
（5）除了用戶明確要求不需要外血筑，需提供模糊查詢功能绘沉。
（6）必須要有條件“重置”功能，重置后恢復(fù)到初始狀態(tài)豺总。
刪除數(shù)據(jù)
（1）必須有確認(rèn)刪除的提示信息车伞。
（2）刪除成功后刷新不顯示刪除的記錄。
（3）刪除成功后返回到原記錄所在頁(yè)面园欣，而當(dāng)原記錄所在頁(yè)不存在時(shí)帖世，則返回上一頁(yè)。
（4）當(dāng)被刪除的記錄與其他記錄存在關(guān)聯(lián)時(shí)沸枯，請(qǐng)示需求界面給予不允許刪除日矫、更明細(xì)提示等信息。
提交/上傳數(shù)據(jù)
（1）當(dāng)提交所費(fèi)的時(shí)間較長(zhǎng)時(shí)绑榴，需給出等待的提示哪轿，如：沙漏、菊花翔怎、進(jìn)度條等窃诉。
（2）提交時(shí)需對(duì)主標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值（空格）判斷赤套。
（3）提交成功后不可重復(fù)提交飘痛，有列表展示提交內(nèi)容的直接返回到展示頁(yè)面。
（4）必須要有“取消或返回”功能容握。
分頁(yè)
（1）當(dāng)對(duì)查詢結(jié)果進(jìn)行分頁(yè)時(shí)宣脉，分頁(yè)的同時(shí)需要能夠執(zhí)行查詢功能；
（2）當(dāng)頁(yè)數(shù)較多時(shí)剔氏，允許輸入具體頁(yè)數(shù)進(jìn)行查詢塑猖；
取消
（1）取消必須給予提示。
（2）取消操作后須返到原記錄所在狀態(tài)谈跛。
返回
（1）當(dāng)從一個(gè)頁(yè)面點(diǎn)擊按鈕或鏈接進(jìn)入子頁(yè)面時(shí)羊苟，子頁(yè)面必須提供返回按鈕
鏈接
（1）鏈接文字或圖片當(dāng)鼠標(biāo)劃過(guò)時(shí)會(huì)變成點(diǎn)擊手形。
（2）本窗口打開(kāi)：查詢結(jié)果感憾、上下翻頁(yè)蜡励、新增、修改等操作在本窗口打開(kāi)。
（3）新窗口打開(kāi)：各類詳情巍虫、預(yù)覽頁(yè)面等采用新窗口打開(kāi)彭则。提示信息
預(yù)先信息提示
（1）內(nèi)容提交類：每個(gè)輸入項(xiàng)、條件選選項(xiàng)（包括時(shí)間選擇）均需要給出提示信息占遥。該提示信息可放置在輸入框內(nèi)或者控件尾部（如密碼要多少多少位。搜索框提示用戶輸入什么內(nèi)容等输瓜。）
（2）謹(jǐn)慎類操作：針對(duì)不可修改瓦胎、重要操作選擇等操作屬于謹(jǐn)慎類操作，均需給出提示信息尤揣。如審核是否通過(guò)操作搔啊、退款申請(qǐng)操作、價(jià)格輸入等北戏。
操作信息提示
（1）確認(rèn)提示：修改設(shè)置负芋、刪除數(shù)據(jù)等操作時(shí)需要彈出提示框，用戶需要選擇后方可執(zhí)行嗜愈。
（2）錯(cuò)誤提示：當(dāng)用戶的操作不符合規(guī)則旧蛾、輸入數(shù)據(jù)不符合規(guī)則需要給出操作提示。比如輸入數(shù)值不符系統(tǒng)規(guī)定蠕嫁，則進(jìn)行提示锨天。
（3）錯(cuò)誤提示分為：即時(shí)提示、提交后提示剃毒。本系統(tǒng)這里統(tǒng)一用即時(shí)提示病袄。
（4）讀取提示：涉及到大量信息讀取緩慢的時(shí)候應(yīng)該進(jìn)行提示。比如進(jìn)入后臺(tái)查看商品列表時(shí)赘阀，由于網(wǎng)絡(luò)益缠、數(shù)據(jù)量大等原導(dǎo)致載入緩慢，應(yīng)該顯示讀取提示信息基公，已避免用戶過(guò)度重復(fù)點(diǎn)擊操作幅慌。
結(jié)果信息提示
（1）保存結(jié)果提示：當(dāng)進(jìn)行商品添加/修改此類涉及到數(shù)據(jù)保存的操作，不管是否成功均需給出提示酌媒。統(tǒng)一用Toast提示,內(nèi)容為“保存成功!”原則上保存之后直接顯示結(jié)果頁(yè)（也可視具體情況定）欠痴。
（2）查詢結(jié)果提示：任何信息列表、查詢結(jié)果秒咨，當(dāng)對(duì)應(yīng)信息結(jié)果的時(shí)候需要給出有無(wú)結(jié)果狀態(tài)提示喇辽。不得使用空白信息。
三雨席、 通用組件規(guī)范
- 導(dǎo)航
菜單導(dǎo)航欄
（1）導(dǎo)航路徑：原則上不超過(guò)三級(jí)就能到達(dá)用戶想要的主要頁(yè)面菩咨，且隨時(shí)能返回。
導(dǎo)航菜單：各級(jí)別的菜單寬高一致，樣式一致抽米。鼠標(biāo)劃過(guò)或點(diǎn)擊選中菜單模塊時(shí)會(huì)有突出（比如高亮）狀態(tài)顯示特占。
（2）有子菜單的模塊默認(rèn)不顯示子菜單，點(diǎn)擊后顯示子菜單云茸，再次點(diǎn)擊時(shí)可收起是目。
當(dāng)前位置導(dǎo)航
（1）原則上每個(gè)頁(yè)均有“當(dāng)前位置導(dǎo)航”，但彈出頁(yè)标捺、預(yù)覽頁(yè)等特殊頁(yè)面無(wú)需當(dāng)前導(dǎo)航懊纳。
（2）若當(dāng)前位置導(dǎo)航有多個(gè)層級(jí)，則當(dāng)前層級(jí)的前面層級(jí)均可鏈接到相應(yīng)頁(yè)面亡容。
（3）當(dāng)前位置導(dǎo)航位置固定嗤疯，具體位置參考UI設(shè)計(jì)效果圖。
表單
（1）表單輸入框由 表單字段名稱： + 輸入框組成闺兢，字段名稱原則上2-4個(gè)漢字茂缚。
（2）預(yù)置文案：輸入框內(nèi)均需有預(yù)置文案，且光標(biāo)進(jìn)入輸入框獲得焦點(diǎn)時(shí)文案自動(dòng)消失屋谭，若輸入框失去焦點(diǎn)且未輸入任何文字時(shí)恢復(fù)預(yù)置文案脚囊。
（3）下拉選擇框中內(nèi)容有多級(jí)時(shí)，只顯示一級(jí)戴而，其他級(jí)呈灰色不可用狀態(tài)凑术，選擇一級(jí)后才會(huì)激活第二級(jí)，以此類推所意。如：部門作為查詢條件時(shí)淮逊，點(diǎn)擊下拉框，默認(rèn)只有一級(jí)部門可用扶踊，點(diǎn)擊一級(jí)部門再激活開(kāi)顯示二級(jí)部門泄鹏。
（4）界面的必填項(xiàng)以紅色*號(hào)標(biāo)識(shí)出來(lái)，且標(biāo)識(shí)在“表單字段名稱”前面秧耗。存在必填項(xiàng)未填寫時(shí)备籽，輸入框失去焦點(diǎn)即時(shí)提示，輸入框紅色描邊分井，且輸入框下方左有相應(yīng)紅色提示文案车猬。輸入框未曾獲得過(guò)焦點(diǎn)直接提交時(shí)，同樣輸入框紅色描邊+紅色提示文案提醒尺锚。
單行輸入框：在未限制字?jǐn)?shù)情況下珠闰，當(dāng)輸入文字比前輸入框長(zhǎng)時(shí)，最先輸入的文字隱藏瘫辩，光標(biāo)和最后一個(gè)輸入的文字顯示在輸入框尾部伏嗜。
（5）多行輸入框：需要有“當(dāng)前已輸入字?jǐn)?shù)/最多可輸入字?jǐn)?shù)”（如：50/100）坛悉。
（6）與限制條件不符的費(fèi)法輸入應(yīng)即時(shí)提醒。
（7）只允許輸入日期承绸、時(shí)間的輸入框需要通過(guò)格式化方式約束輸入裸影，而不是輸入非法值后給出提示；按鈕
（1）按鈕種類：優(yōu)先操作按鈕军熏，次要按鈕轩猩，不可用按鈕。
（2）按鈕狀態(tài)：默認(rèn)顯示狀態(tài)羞迷，鼠標(biāo)經(jīng)過(guò)狀態(tài)界轩，點(diǎn)擊狀態(tài)。
（3）按鈕位置：按windows交互習(xí)慣先優(yōu)先后次要（左確定衔瓮，右取消）。
（4）按鈕樣式：可直接寫文字抖甘，或文字+圖標(biāo)（具體方案參照UI設(shè)計(jì)效果圖）热鞍，原則上按鈕上文字為2-4個(gè)漢字。加載
（1）當(dāng)數(shù)據(jù)獲取較慢衔彻，或網(wǎng)絡(luò)狀況不佳時(shí)薇宠，要有統(tǒng)一的加載方案圖示告訴用戶“數(shù)據(jù)正在加載中…”。（如：漏斗艰额、菊花澄港、進(jìn)度條等）具體圖文可參與UI設(shè)計(jì)效果。失敗/空頁(yè)面
（1）當(dāng)頁(yè)面沒(méi)有數(shù)據(jù)柄沮、加載失敗或出錯(cuò)時(shí)回梧，要有統(tǒng)一的提示文案圖標(biāo)告訴用戶“頁(yè)面加載失敗/暫無(wú)數(shù)據(jù)/頁(yè)面出錯(cuò)”，具體圖文可參與UI設(shè)計(jì)效果祖搓。鼠標(biāo)
（1）默認(rèn)狀態(tài)鼠標(biāo)為“箭頭形狀”狱意，經(jīng)過(guò)可點(diǎn)擊元素時(shí)變?yōu)椤笆种笭睢保诳奢斎肟蛑袨椤柏Q線光標(biāo)狀”鍵盤
（1）支持回車鍵提交
（2）支持回車鍵查詢
（3）支持tab鍵移動(dòng)光標(biāo)焦點(diǎn)拯欧，移動(dòng)遵循從左至右详囤，從上至下的原則
歡迎補(bǔ)充、交流學(xué)習(xí)镐作，微信：275371854
