PC端web管理系統的交互設計規范分享

前些時間正準備寫交互規范，就去網上搜羅了一下交互規范的一些范本，想作為借鑒參考，但卻沒能找到比較滿意的，找到了一些零散的內容（當然有些還是有參考價值的），所以就覺得交互規范這方面的內容比較少，就來此給分享一下自已整理的規范。本規范是PC端 web管理系統的規范，文檔結構和內容有參考過網上一些大牛的分享，個人的思考并不完善希望各位大神多多指正和補充。不多講了，請看正文…

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

一、頁面信息規范

頁面命名

頁面兼容

文字

內容圖片

二、信息交互規范

數據操作

鏈接

提示信息

三、通用組件規范

導航

表單

按鈕

加載

失敗/空頁面

鼠標

鍵盤

一、 頁面信息規范

1. 頁面命名
   每個頁面都要有與之模塊對應的名稱。
2. 頁面兼容性
   （1）頁面大小兼容
   自適應1366*768px及以上的分辨率
   默認窗口設置下，不應出現水平滾動條，避免出現垂直滾動條（當內容過多時允許滾動條）
   （2）彈窗、彈頁要保證768高度的分辨率顯示正常，同時能移動查看彈出框內容。彈出框高度為不超過450px，且顯示在內容頁面相對水平、垂直相對居中位置。

瀏覽器兼容

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

1. 文字
   （1）文字用系統自帶的常規字體，且分一級標題、二級標題、主內容文字、次內容文字、輔助文字（說明或引導性文字，提醒性文字），分別用不同的字號、顏色。具體字號大小和顏色參考UI設計效果圖。
2. 內容圖片
   （1）內容圖片均帶1px描邊。
   （2）內容圖片未加載出來時顯示系統默認圖片。

二、 信息交互規范

1. 數據操作

   顯示數據（表格）

   （1）表頭：字體加粗、且比單無格內容字體大一號，且體字體大小參照UI效果圖。

   （2）單無格：文字圖片內容左對齊，數字、金額內容右對齊。

   （3）操作內容原則上均用文字表達，如“編輯-刪除”

   （4）鼠標劃過表格單行時，顏色高亮。

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

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

選中數據

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

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

（3）翻頁后，自動去掉已勾選的記錄及全選的勾選。

（4）翻頁后是否進行選擇記錄的保留應試具體業務而定。

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

新增數據

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

（2）所有列表頁面默認按數據新增時間倒序排列。

（3）提交失敗后留在當前提交頁，且保存用戶已經輸入的內容以便再次提交。

（4）提交成功后自動回到數據列表頁。

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

修改數據

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

（2）提交失敗后留在當前提交頁，且保存用戶已經輸入的內容以便再次提交。

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

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

查詢數據

（1）把所有查詢條件全部顯示出來，并放在查詢列表上方位置。

（2）每個查詢條件必須有預置文案。

（3）每次查詢后保留當前輸入的查詢條件。

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

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

（6）必須要有條件“重置”功能，重置后恢復到初始狀態。

刪除數據

（1）必須有確認刪除的提示信息。

（2）刪除成功后刷新不顯示刪除的記錄。

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

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

提交/上傳數據

（1）當提交所費的時間較長時，需給出等待的提示，如：沙漏、菊花、進度條等。

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

（3）提交成功后不可重復提交，有列表展示提交內容的直接返回到展示頁面。

（4）必須要有“取消或返回”功能。

分頁

（1）當對查詢結果進行分頁時，分頁的同時需要能夠執行查詢功能；

（2）當頁數較多時，允許輸入具體頁數進行查詢；

取消

（1）取消必須給予提示。

（2）取消操作后須返到原記錄所在狀態。

返回

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

1. 鏈接
   （1）鏈接文字或圖片當鼠標劃過時會變成點擊手形。
   （2）本窗口打開：查詢結果、上下翻頁、新增、修改等操作在本窗口打開。
   （3）新窗口打開：各類詳情、預覽頁面等采用新窗口打開。
2. 提示信息
   預先信息提示
   （1）內容提交類：每個輸入項、條件選選項（包括時間選擇）均需要給出提示信息。該提示信息可放置在輸入框內或者控件尾部（如密碼要多少多少位。搜索框提示用戶輸入什么內容等。）
   （2）謹慎類操作：針對不可修改、重要操作選擇等操作屬于謹慎類操作，均需給出提示信息。如審核是否通過操作、退款申請操作、價格輸入等。

操作信息提示

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

（2）錯誤提示：當用戶的操作不符合規則、輸入數據不符合規則需要給出操作提示。比如輸入數值不符系統規定，則進行提示。

（3）錯誤提示分為：即時提示、提交后提示。本系統這里統一用即時提示。

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

結果信息提示

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

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

三、 通用組件規范

1. 導航

   菜單導航欄

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

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

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

當前位置導航

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

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

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

1. 表單
   （1）表單輸入框由 表單字段名稱： 輸入框組成，字段名稱原則上2-4個漢字。
   （2）預置文案：輸入框內均需有預置文案，且光標進入輸入框獲得焦點時文案自動消失，若輸入框失去焦點且未輸入任何文字時恢復預置文案。
   （3）下拉選擇框中內容有多級時，只顯示一級，其他級呈灰色不可用狀態，選擇一級后才會激活第二級，以此類推。如：部門作為查詢條件時，點擊下拉框，默認只有一級部門可用，點擊一級部門再激活開顯示二級部門。
   （4）界面的必填項以紅色*號標識出來，且標識在“表單字段名稱”前面。存在必填項未填寫時，輸入框失去焦點即時提示，輸入框紅色描邊，且輸入框下方左有相應紅色提示文案。輸入框未曾獲得過焦點直接提交時，同樣輸入框紅色描邊 紅色提示文案提醒。
   單行輸入框：在未限制字數情況下，當輸入文字比前輸入框長時，最先輸入的文字隱藏，光標和最后一個輸入的文字顯示在輸入框尾部。
   （5）多行輸入框：需要有“當前已輸入字數/最多可輸入字數”（如：50/100）。
   （6）與限制條件不符的費法輸入應即時提醒。
   （7）只允許輸入日期、時間的輸入框需要通過格式化方式約束輸入，而不是輸入非法值后給出提示；
2. 按鈕
   （1）按鈕種類：優先操作按鈕，次要按鈕，不可用按鈕。
   （2）按鈕狀態：默認顯示狀態，鼠標經過狀態，點擊狀態。
   （3）按鈕位置：按windows交互習慣先優先后次要（左確定，右取消）。
   （4）按鈕樣式：可直接寫文字，或文字 圖標（具體方案參照UI設計效果圖），原則上按鈕上文字為2-4個漢字。
3. 加載
   （1）當數據獲取較慢，或網絡狀況不佳時，要有統一的加載方案圖示告訴用戶“數據正在加載中…”。（如：漏斗、菊花、進度條等）具體圖文可參與UI設計效果。
4. 失敗/空頁面
   （1）當頁面沒有數據、加載失敗或出錯時，要有統一的提示文案圖標告訴用戶“頁面加載失敗/暫無數據/頁面出錯”，具體圖文可參與UI設計效果。
5. 鼠標
   （1）默認狀態鼠標為“箭頭形狀”，經過可點擊元素時變為“手指狀”，在可輸入框中為“豎線光標狀”
6. 鍵盤
   （1）支持回車鍵提交
   （2）支持回車鍵查詢
   （3）支持tab鍵移動光標焦點，移動遵循從左至右，從上至下的原則

公司級的規范文檔格式并不是像上文一樣，但鑒于簡書排版能力有限，只能做到這樣子了，哈哈……，有想要文檔格式參考的小伙伴可以加我 QQ：275371854（同微信），也歡迎各位喜歡UI交互設計的小伙伴們一起交流學習。

文／邊跑邊學走

原文鏈接：http://www.jianshu.com/p/677868714757

著作權歸作者所有，轉載請聯系作者獲得授權。