管理系統的UI規範
emmmm，沒錯，我是一個偏後端的程式設計師，但是之前跟著領導帶過一些專案，所以對PC端管理系統的UI規範有一些經驗。個人覺得，良好的軟體要有好的使用者體驗。使用者體驗有很多細節，一是介面，二是互動。好的使用者體驗能增加使用者黏性，提升滿意度。
下面說說這些規範：
-
關於整站風格
整站的頁面風格要統一，列表、表單、按鈕、文字儘量用同一種風格。整站應相容1366 * 768解析度。 -
關於表單
Esc鍵不應直接退出或關閉表單頁面；謹慎使用回車儲存功能。
提交表單時，按鈕應處於“繁忙”狀態，不能再次提交；提交成功後，應關閉頁面，提交失敗可再次提交。
視業務型別定義提交按鈕的名稱，提交後需要審批的業務，建議按鈕定義為：儲存並提交；普通的儲存業務，建議定義為：儲存。
複雜的輸入項，要有相應提示；
初始化表單時，可預設一些值，如狀態，預設為正常。
表單的內容儘量一頁能展示完成，不要出現滾動條，內容過多應按業務分為多個步驟，每個步驟驗證資訊。 -
關於列表
列表頁面的佈局應儘量通用，如左上顯示功能性按鈕（新增、匯出等），右上顯示篩選內容。中間顯示列表內容，底部顯示分頁。
資料過多時，應該是表格內容進行滾動檢視，而不應影響整個頁面。
列表的內容應是比較重要的資料，一些標籤、狀態應用不同顏色區分。
原則上，頁面顯示的資料條數越多越好，避免頻繁滾動檢視。這些是可以通過佈局優化的，比如有些未優化的佈局，一整頁只能顯示4條訂單資訊，而優化後能顯示10條。
資料內容不多時，應一行一條資料，不應出現換行。
資料內容一行無法展示時，可使用一行兩列的形式。兩列中，內容一般是相關聯的。
同理，一行兩列也滿足不了時，可使用一行三列，建議不要超過一行三列，內容過多可簡化資料
行被點選後，應高亮顯示（第二行顏色背景色深一點）
行的按鈕，如果有刪除業務時，一般文字顏色為紅色，且點選後，要彈窗提示是否確認刪除。
單元格的資訊很長建議左對齊，如標題；資訊短且長度固定，建議居中，如狀態、時間；數量、金額資訊建議右對齊。
設計列表時，根據內容多少，設定寬度，正好適應內容最好。如果文字太長，可用...隱藏一部分(CSS可實現)。 -
關於詳情頁面
1)、業務複雜時，詳情的內容容易多，而且雜亂。在設計詳情頁面時，建議最好能對重要資訊一目瞭然，並且資訊之間最好有一定關聯性。
圖片中的詳情，詢價書編號與詢價單位之間上下間隔大約10px，間隔小能顯示更多資訊，視覺上也不會過於分散。使用者一般的視覺習慣是從上往下看，所以越往上的資訊，是比較基礎和重要的。在這裡，左右的資料，具有一定關聯性，如編制人與聯絡方式，整行就是聯絡資訊。詢價起始時間和詢價截止時間，整行是時間資訊。
2)、資訊內容過多時，可把資訊分割成多個塊，這樣看起來會有條理一些。就像一本書，會分為多個章節，一個章節會有很多段落。下圖分成了三個塊，詢價資訊、採購需求、備選供應商。
3)、頁面中，狀態顏色區分，這樣一目瞭然業務的流程。備註資訊應占一行。 -
關於彈出視窗
視窗尺寸要根據頁面內容來，內容少，視窗大，則看起來很空蕩，反之則過於擁擠。 -
關於溯源
溯源是查出資料的源頭，頁面中，合理的新增溯源點，能使使用者節省很多查詢時間。如下圖的第二行資料，有個檢視合同，這個按鈕不加也不影響業務，但是加了使用者可以直接在列表檢視合同，而不需再點選詳情。
該詳情頁面，有兩個溯源點，一個詢價詳情，一個報價詳情。點選即可檢視，不需要跳轉頁面或複製編號進行檢視。