這一段時間以來做web端的產(chǎn)品較多，漸漸地覺得如果能積累一份規(guī)范的交互設計規(guī)范，能有效保證產(chǎn)品操作的一致性和連貫性，并能降低產(chǎn)品開發(fā)中的溝通成本，所以趁著周末時間，在各種社區(qū)搜羅了一些前輩總結的經(jīng)驗并加以自己的總結，形成本文。

本文是對邊跑邊學走的一篇《交互設計規(guī)范分享》的補充，已獲得原文作者的授權補充，再此非常感謝原作者對于我的啟發(fā)，在此表示敬佩的感謝之情。同時，本文也融入了個人項目工作中的復盤總結，總體來看還不夠完善，希望讀者多多指正和補充。

目錄

1.????? 頁面信息展示規(guī)范

1.1.? 頁面命名

1.2.? 頁面兼容性

1.3.? 圖片文字展示

1.4.? 鏈接

2.????? 數(shù)據(jù)操作交互規(guī)范

2.1.? 展示數(shù)據(jù)

2.2.? 選中數(shù)據(jù)

2.3.? 新增數(shù)據(jù)

2.4.? 刪除數(shù)據(jù)

2.5.? 導入/導出

2.6.? 修改數(shù)據(jù)

2.7.? 提交/上傳數(shù)據(jù)

2.8.? 查詢數(shù)據(jù)

3.????? 數(shù)據(jù)校驗規(guī)范

4.????? 通用組件規(guī)范

4.1.? 導航

4.2.? 表單

4.3.? 按鈕

4.4.? 分頁

4.5.? 加載

4.6.? 鼠標

4.7.? 鍵盤

5.????? 提示信息規(guī)范

5.1.? 服務器錯誤提示

5.2.? 預先信息提示

5.3.? 操作信息提示

5.4.? 結果信息提示

6.? ? ?系統(tǒng)通用功能性規(guī)范

以下為正文

1.? 頁面信息展示規(guī)范

1.1? 頁面命名

每個頁面都要有與之模塊對應的名稱，且不易混淆。

1.2? 頁面兼容性

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

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

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

1.3? 圖片文字展示

（1）文字

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

（2）內(nèi)容圖片

內(nèi)容圖片均帶1px描邊（帶描邊主要是為了區(qū)分圖片邊界）；內(nèi)容圖片未加載出來時顯示系統(tǒng)默認圖片。

1.4? 鏈接

（1）鏈接文字或圖片當鼠標劃過時會變成點擊手形。

（2）本窗口打開：查詢結果、上下翻頁、新增、修改等操作在本窗口或彈窗打開。

（3）新窗口打開：各類詳情、預覽頁面等采用新窗口打開。

2.? 數(shù)據(jù)操作交互規(guī)范

2.1? 展示數(shù)據(jù)

（1）表頭：字體加粗、且比單元格內(nèi)容字體大一號，且字體大小參照UI效果圖；

（2）單元格：文字圖片內(nèi)容左對齊，數(shù)字、金額內(nèi)容右對齊；

（3）操作內(nèi)容原則上用圖標表達，如“ ”“”；

（4）鼠標在頁面列表移動，所落腳的行應高亮顯示；

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

（6）表格中不定長的字段，固定顯示寬度，超出內(nèi)容用“…”顯示光標停留后，在浮動層顯示詳細內(nèi)容；

（7）某一條數(shù)據(jù)禁止點擊某按鈕操作，這個時候有3種解決辦法：1隱藏按鈕；2按鈕置灰，鼠標移入顯示為禁止樣式；3按鈕不變，點擊之后彈出提示。本系統(tǒng)規(guī)定選擇第1種方式；

（8）數(shù)據(jù)加密展示規(guī)則：對于公司、公司聯(lián)系人的基本信息，一般不加密，僅對于c端個人的身份證、手機號等敏感信息加密處理，數(shù)據(jù)中間用****展示。

2.2? 選中數(shù)據(jù)

（1）勾選全選則選中當頁所有記錄；

（2）去掉當頁某個記錄的勾選，則全選也去掉勾選；

（3）翻頁后是否進行選擇記錄的保留應試具體業(yè)務而定；

（4）刷新頁面后，自動去掉已勾選的記錄及全選的勾選；

（5）如列表有復選框，則點擊除某一行的按鈕之外其他區(qū)域，應支持選中，而不必點擊復選框才選中。

2.3? 新增數(shù)據(jù)

（1）下拉框：默認為“請選擇”

? 如果為下拉聯(lián)動，用同一顏色標識本組下拉聯(lián)動，下拉框內(nèi)容變動時，下級內(nèi)容跟隨變動，下級的所有下級默認為請選擇，以此類推；

（2）輸入框默認為空，按照業(yè)務需要可提示輸入內(nèi)容；

（3）復選框、復選框默認為不選中；

（4）新增時按照業(yè)務需要記錄操作人員和時間；

（5）新增的記錄必須排在新增頁的首行；

（6）除特殊標記或規(guī)定，所有列表頁面默認按數(shù)據(jù)新增時間倒序排列。

（7）點擊返回或者取消，直接回到查詢列表界面。

2.4? 刪除數(shù)據(jù)

（1）本系統(tǒng)無物理刪除，所有刪除均為邏輯刪除；

（2）必須有確認刪除的提示信息。如果確定刪除，則進行刪除，否則，取消操作；

（3）刪除成功后需要更新查詢結果列表中對應的狀態(tài)。

（4）刪除成功后返回到原記錄所在頁面，而當原記錄所在頁不存在時，則返回上一頁。

（5）當被刪除的記錄與其他記錄存在關聯(lián)時，請示需求界面給予不允許刪除、更明細提示等信息。

（6）點擊返回或者取消，直接回到查詢列表界面。

2.5? 導入/導出

（1）導入需要提供導入模板，模板上的字段需要與新增頁面字段保持一致；

（2）導入的數(shù)據(jù)校驗規(guī)則要與新增頁面的校驗規(guī)則保持一致；

（3）導出的數(shù)據(jù)范圍可分為2種：1.按照搜索條件查詢出來的全部數(shù)據(jù)項；2.選中的數(shù)據(jù)項；。根據(jù)業(yè)務需要，本系統(tǒng)選擇第1種，導出的內(nèi)容為搜索條件的全部內(nèi)容，與勾選無關。

（4）點擊返回或者取消，直接回到查詢列表界面。

2.6? 修改數(shù)據(jù)

（1）修改時按照業(yè)務需要記錄操作人員和時間；

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

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

（4）進入到修改界面時，所有的輸入項要和新增（也有可能是修改后）的輸入值保持一致；

（5）點擊返回或者取消，直接回到查詢列表界面。

2.7? 提交/上傳數(shù)據(jù)

（1）提交時需對主標識字段進行重復值、空值（空格）判斷；

（2）提交成功后不可重復提交，有列表展示提交內(nèi)容的直接返回到展示頁面；

（3）必須要有“取消或返回”功能；

（4）取消必須給予提示，取消操作后須返到原記錄所在狀態(tài)；

（5）當從一個頁面點擊按鈕或鏈接進入子頁面時，子頁面必須提供返回按鈕；

（6）保存成功應給出保存成功提示，一般提示格式為“XXX信息保存成功！”，點擊提示框中確定或者提示框消失后，需要跳轉到數(shù)據(jù)列表界面；

（7）提交失敗后留在當前提交頁，并且給出明確的提交失敗原因，改正做法，點擊確定后留在當前界面且保存用戶已經(jīng)輸入的內(nèi)容以便再次提交；

（8）點擊返回或者取消，直接回到查詢列表界面；

2.8? 查詢數(shù)據(jù)

查詢條件區(qū)域

（1）每個查詢條件必須有預置文案；

（2）點擊查詢按鈕后，顯示查詢結果列表；

（3）要有“重置”功能，重置后恢復到初始狀態(tài)；

（4）除了用戶明確要求不需要外，需提供模糊查詢功能；

（5）輸入框：如果內(nèi)容為中文，一般為模糊查詢，如果為數(shù)字、編碼、手機號或者用戶名，則為精確查詢；

（6）下拉框：常規(guī)排序如是-否，上架-下架，有效-無效等，非常規(guī)按照數(shù)據(jù)庫中順序；

（7）日期控件：一般為起止兩個控件，精確到年月日，默認起止日期為當前日期往前一個月或7天；sql語句中查詢條件為閉區(qū)間（>=或者<=）；

查詢結果區(qū)域

（1）查詢后保留當前輸入的查詢條件；

（2）當未查詢到任何記錄時，需給予未查找到相關記錄的提示信息；

（3）排序：按日期倒序排序，查詢結果中的時間一般精確到年月日時分秒；

3.? 數(shù)據(jù)校驗規(guī)范

（1）非空校驗：提示內(nèi)容—“XX不能為空，請輸入！”；

（2）超長限制：提示內(nèi)容—“XX最大不能超過XX個字，請檢查！”；

（3）“*”標識：*標識字段為必填項，需要進行非空校驗；

（4）下拉框：一般為必選項，默認為“請選擇”；

（5）備注項：一般為選填項，字段長度一般不超過400個字；

（6）用戶輸入完成時校驗：需對主要標識字段進行重復值、空值（空格）判斷

（7）輸入項內(nèi)容應該滿足一般性校驗要求，如手機號規(guī)則（以1開頭，11位數(shù)字），身份證號規(guī)則（15或者18位數(shù)字，末尾可以為X），郵箱規(guī)則（XX@XX），價格（允許兩位小數(shù)），數(shù)量（0或者正整數(shù)），日期（一般精確到年月日，有時需要精確到時分秒，具體功能具體說明），名稱規(guī)則（中文為2-8位，不允許有空格；英文2-24位，允許有空格）輸入長度限制等；

（8）輸入項默認為空；

（9）數(shù)據(jù)回顯：如無特殊說明，在執(zhí)行修改類或刪除類操作后均需要執(zhí)行數(shù)據(jù)回顯；

4.? 通用組件規(guī)范

4.1? 導航

菜單導航欄

（1）導航路徑：原則上不超過三級就能到達用戶想要的主要頁面，且隨時能返回。

（2）導航菜單：各級別的菜單寬高一致，樣式一致。鼠標劃過或點擊選中菜單模塊時會有突出（比如高亮）狀態(tài)顯示。

（3）有子菜單的模塊默認不顯示子菜單，點擊后顯示子菜單，再次點擊時可收起。

當前位置導航

（1）原則上每個頁均有“當前位置導航”，但彈出頁、預覽頁等特殊頁面無需當前導航；

（2）若當前位置導航有多個層級，則當前層級的前面層級均可鏈接到相應頁面；

（3）當前位置導航位置固定，具體位置參考UI設計效果圖。

頁簽

頁簽即工作臺菜單欄，出現(xiàn)的名稱除首頁外，其他都應是菜單名稱；

頁簽與當前位置導航保留一個即可，當前頁面所在頁簽應高亮標記，支持刷新；

從菜單進入后，某頁面下的子頁面，都應該在本菜單下，不應該再跳轉打開一個新的頁面；

子頁面回到主頁面時，一般是點擊子頁面的返回按鈕，回到主頁面；

切換頁簽不刷新新進的頁面，若前臺操作時校驗到后臺數(shù)據(jù)已發(fā)生變動，提示“當前數(shù)據(jù)已發(fā)生變化”，并刷新頁面；

點擊瀏覽器的刷新按鈕，刷新當前頁簽所在的頁面。

4.2? 表單

（1）表單輸入框由表單字段名稱： + 輸入框組成，字段名稱原則上2-4個漢字。

（2）預置文案：輸入框內(nèi)均需有預置文案，且光標進入輸入框獲得焦點時文案自動消失，若輸入框失去焦點且未輸入任何文字時恢復預置文案。

（3）下拉選擇框中內(nèi)容有多級時，只顯示一級，其他級呈灰色不可用狀態(tài)，選擇一級后才會激活第二級，以此類推。如：部門作為查詢條件時，點擊下拉框，默認只有一級部門可用，點擊一級部門再激活開顯示二級部門。

（4）界面的必填項以紅色*號標識出來，且標識在“表單字段名稱”前面。存在必填項未填寫時，輸入框失去焦點即時提示，輸入框紅色描邊，且輸入框下方左有相應紅色提示文案。輸入框未曾獲得過焦點直接提交時，同樣輸入框紅色描邊+紅色提示文案提醒。

（5）單行輸入框：在未限制字數(shù)情況下，當輸入文字比前輸入框長時，最先輸入的文字隱藏，光標和最后一個輸入的文字顯示在輸入框尾部。

（6）多行輸入框：需要有“當前已輸入字數(shù)/最多可輸入字數(shù)”（如：50/100）。

（7）與限制條件不符的非法輸入應即時提醒；

（8）只允許輸入日期、時間的輸入框需要通過格式化方式約束輸入，而不是輸入非法值后給出提示；

4.3? 按鈕

（1）按鈕種類：優(yōu)先操作按鈕，次要按鈕，不可用按鈕。

（2）按鈕狀態(tài)：默認顯示狀態(tài)，鼠標經(jīng)過狀態(tài)，點擊狀態(tài)。

（3）按鈕位置：按windows交互習慣先優(yōu)先后次要（左確定，右取消）。

（4）按鈕樣式：可直接寫文字，或文字+圖標（具體方案參照UI設計效果圖），原則上按鈕上文字為2-4個漢字。

4.4? 分頁

（1）分頁控件：置于數(shù)據(jù)列表下方，無結果時不顯示；在某一查詢條件下翻頁，改變單頁展示數(shù)據(jù)條數(shù)，應不改變查詢條件。

（2）當對查詢結果進行分頁時，分頁的同時需要能夠執(zhí)行查詢功能；

（3）當頁數(shù)較多時，允許輸入具體頁數(shù)進行查詢；

4.5? 加載

當數(shù)據(jù)獲取較慢，或網(wǎng)絡狀況不佳時，要有統(tǒng)一的加載方案圖示告訴用戶“數(shù)據(jù)正在加載中……”如：漏斗、菊花、進度條等，具體圖文可參考UI設計效果。

4.6? 鼠標

默認狀態(tài)鼠標為“箭頭形狀”，經(jīng)過可點擊元素時變?yōu)椤笆种笭睢?，在可輸入框中為“豎線光標狀”

4.7? 鍵盤

（1）支持回車鍵提交

（2）支持回車鍵查詢

（3）支持tab鍵移動光標焦點，移動遵循從左至右，從上至下的原則

5.? 提示信息規(guī)范

5.1? 服務器錯誤提示

（1）403：您沒有訪問權限哦；

（2）404：您訪問的頁面不存在或暫時無法訪問；

（3）500：Sorry，內(nèi)部服務器錯誤；

（4）如果為界面跳轉，出現(xiàn)錯誤時，請?zhí)D到錯誤界面；

5.2? 預先信息提示

（1）內(nèi)容提交類：每個輸入項、條件選選項（包括時間選擇）均需要給出提示信息。該提示信息可放置在輸入框內(nèi)或者控件尾部（如密碼要多少位，搜索框提示用戶輸入什么內(nèi)容等）

（2）謹慎類操作：針對不可修改、重要操作選擇等操作屬于謹慎類操作，均需給出提示信息。如審核是否通過操作、退款申請操作、價格輸入等。

5.3? 操作信息提示

（1）確認提示：修改設置、刪除數(shù)據(jù)等操作時需要彈出提示框，用戶需要選擇后方可執(zhí)行；

（2）錯誤提示：當用戶的操作不符合規(guī)則、輸入數(shù)據(jù)不符合規(guī)則需要給出操作提示。比如輸入數(shù)值不符系統(tǒng)規(guī)定，則進行提示；

（3）錯誤提示分為：即時提示、提交后提示。本系統(tǒng)這里統(tǒng)一用即時提示；

（4）讀取提示：涉及到大量信息讀取緩慢的時候應該進行提示。比如進入后臺查看商品列表時，由于網(wǎng)絡、數(shù)據(jù)量大等原導致載入緩慢，應該顯示讀取提示信息，已避免用戶過度重復點擊操作。

5.4? 結果信息提示

（1）當頁面沒有數(shù)據(jù)、加載失敗或出錯時，要有統(tǒng)一的提示文案圖標告訴用戶“頁面加載失敗/暫無數(shù)據(jù)/頁面出錯”，具體圖文可參考UI設計效果。

（2）保存結果提示：當進行商品添加/修改此類涉及到數(shù)據(jù)保存的操作，不管是否成功均需給出提示。統(tǒng)一用Toast提示，內(nèi)容為“保存成功！”原則上保存之后直接顯示結果頁（也可視具體情況定）。

（3）查詢結果提示：任何信息列表、查詢結果，當對應信息結果的時候需要給出有無結果狀態(tài)提示，不得使用空白信息。

6.? 系統(tǒng)通用功能性規(guī)范

（1）所有信息保存時均需記錄操作人員代碼、操作日期、修改人員代碼和修改日期，日期格式精確到年月日時分秒；

（2）對于外部系統(tǒng)通過接口修改的信息需要在操作人員代碼或者修改人員代碼字段記錄外部系統(tǒng)的系統(tǒng)id，記錄操作日期或者修改日期，日期格式精確到年月日時分秒，且根據(jù)插入數(shù)據(jù)或者修改數(shù)據(jù)的情況進行字段的選擇；

（3）對于業(yè)務流程中的刪除流程，需要進行有痕跡的刪除，即增加刪除標志位而不是物理刪除條目，并且需要記錄刪除人員代碼，刪除日期，日期格式精確到年月日時分秒；

（4）用戶每次登錄系統(tǒng)（內(nèi)網(wǎng)）均需要記錄登錄日期、登陸人代碼（操作人員代碼）、是否登錄成功、退出日期、登錄機器ip和mac地址，其中日期格式精確到年月日時分秒；

（5）可設置用戶登錄無前后臺交互時間，延時自動斷開該操作人員登錄鏈接，默認交互時間間隔為30分鐘；

（6）操作人員權限控制，會在具體需求描述中予以表述。

以上。歡迎各位一起探討交互、用戶體驗和產(chǎn)品等內(nèi)容，個人微信：ZYQ616418389