系統規範重要性：
1.為什麼突然會談到後談產品設計規範這個話題，一切起源於目前的工作環境。
因為前期沒有制定統一規範，頁面佈局，字段排序，字段檢查（菜單欄/麵包屑/查詢條件/列表字段/彈框字段/新增/修改/刪除）不一致。
單據主界面字段排序規範：
①單據編號、②狀態、③類型、（④來源類型、⑤來源單號）、⑥來源系統、（⑦貨主、⑧調整前信息、⑨調整後信息）、⑩創建人、⑪創建時間、⑫審核人、⑬審核時間、⑭備註。
注：部分單據獨有的主界面字段可自行定義其順序，但通用的如：單據編號、狀態、類型等應放在前面，創建人、時間、審核人、時間、備註應放在字段最後。
單據通用狀態規範：
新建：單據創建後，還未進行任何操作的狀態。
完結：作業流程正常完成的狀態。
審核：單據創建後，確認該單據數據無誤，並需按該單據進行作業進行一個確認的狀態，介與單據新建與完結的一箇中間狀態。
取消：針對有指令單據，通常由指令發起方發起的一個取消動作後的狀態。
部分取消：
作廢：針對內部單據，還未開始作業時對單據操作作廢後的狀態。
關閉：針對內部單據，只完成部分作業後強行中止完結作業單據後的狀態。
注：針對不同作業單據特有的狀態，需自行定義並討論最終確認規範。
一、頁面加載：
- 從菜單欄打開已打開的頁面
無須
重新加載，直接打開。 - 打開頁面，默認加載一頁數據。
- 頁面路徑沒有跳轉功能，只做頁面路徑顯示。
- 頁面數據根據頁面縮放效果自適應顯示。
- 切換頁籤不刷新頁面數據。
- 同時最多打開**個頁籤，打開超過頁籤時提示，不允許自動關閉最早頁籤，支持左關閉、右關閉、其他關閉、全部關閉。
- 當前頁面數據被選中後，進入下一頁再返回當前頁時取消之前的選中。
- 當前頁面數據被選中後，增加列表每頁顯示條數時，取消之前的選中。
- 當前頁面數據被選中後，頁面有增加、減少數據時，取消已選中數據。
- 勾選多條數據，點擊修改按鈕表示批量修改。模塊若只允許單條修改時，界面不顯示修改按鈕，通過控件選擇單行進行修改。
- 頁面數據加載時，需提示標記，UI給規範。
二、查詢條件：
- 範圍類查詢均有開始、結束輸入框。
- 範圍類查詢前值大於後值時，輸入時做判斷校驗不允許前值大於後值。
- 查詢條件通過重置按鈕清空所有查詢條件。每個查詢條件支持單條選擇×清空單條查詢條件。
- 查詢條件根據產品根據各自設計模塊說明是否支持模糊查詢。
- 所有查詢條件，前後空格自動過濾。
- 下拉框單選還是多選根據產品各自設計模塊各自說明。
- 日期查詢條件時間設置根據處模塊自行定義，供參考：
1） 日期類型：a默認當前日期。b默認當前日期-1天。
2） 日期+時間點：a默認當前日期0點00分00秒到當前時間點。B默認當前時間點-24小時。
8.所有查詢頁面查詢條件後都有“重置”按鈕。
9.查詢下拉選擇條件全選OR空，默認顯示為空。
10.下拉框，默認是否有空選擇行。
三、列表區：
- 列表區數據默認按單據生成時間倒序排序。
- 列表各字段支持按列排序。
- 列表字段支持拖拉拽自定義排列功能。
1） 保存到緩存級。
2） 保存到用戶賬號級。
3） 保存到公司法人級，可按公司法人配置字段排列順序。
- 列表區字段內容過長時截斷顯示，鼠標懸停顯示。
- 列表區時間格式統一使用：YYYY-MM-DD hh:mm:ss。
- 列表區數據較多時，使用翻頁方式。
- 列表區序號前是否顯示篩選框根據實際產品模塊設計進行說明。
四、頁腳控制：
- 輸入頁數時，自動跳轉到最後一頁。
- 輸入頁數數據非法時警告提示。如輸入0、負數、中文、字母等。
- 當前顯示最後一頁，修改每頁顯示條數時，自動刷新頁面數據，默認顯示第一頁。
- 每頁顯示條數下拉框默認顯示10條，下拉可選20，50，100。
五、導出：
- 按查詢條件篩選結果全部導出。
- 導出數據順序需與系統頁面數據保持一致。
- 導出文件內容格式需與系統頁面格式保持一致。
- 導出模板：樣式、標題行樣式
- 導出模板名稱：根據各模塊產品設計自行說明。
- 導入限制：導入行數限制，開發提供。
- 導入成功、失敗處理：根據各模塊產品設計自行說明。
1) 全部導入成功。
2) 部分導入成功。---部分導入成功，失敗部分提示。-----全部導入失敗，全部重新導入。
3) 全部導入失敗。
六、彈框：
- 刪除數據時：1、需用戶做判斷時用彈框提示。2、不需用戶判斷只做提示時用冒泡提示。
- 彈窗關閉：點擊控制關閉、點擊右上角叉叉關閉。
- 刪除彈框提示內容“提示內容保持一致”
- 修改彈框提示“保存”左邊，“取消”在右邊.
七、下拉框：
- 下拉框默認最大高度8條。
- 下拉框輸入內容模糊匹配根據產品各自設計模塊說明。
八、輸入編輯控制：
- 輸入的內容需做長度、內容合法性校驗。合法在焦點離開時校驗
- 日期時間控件輸入框支持手輸、手選。
- 雙擊單據列表行方式進入詳情頁。
- 用戶操作系統時中英文逗號可同時支持。
- 多行框不允許拖拉改變大小，文本顯示不全時通過滾動條方式。
九、工作流程
在網上也看了一些文章，覺得還是從工作流程開始講起會比較好，先貼上一張感覺很有道理的盜圖。
- 原型圖之前，對於產品經理而言，往往還有很多大量的工作需要處理，這裡就不做具體講解；
- 圖中明確提到“設計規範”，可見我的出發點，不僅僅是我一個人的疑惑，那麼接下來，就開始我們的表演吧。
十、網站設計——Z軸內容層級
對於後臺產品經理而言，常常面對的是後臺網頁產品，所以本文也會圍繞著網頁產品進行談起。
- 底層：數據層、邏輯層
- 內容：各種功能彙總
- 導航：將內容進行整理
- 權限：對用戶訪問數據、導航進行限制
- 全屏展示：按照產品設計，根據導航，展示對應內容
- 插件：頁面點擊、跳轉等交互
- 彈窗：頁面信息反饋，與用戶之間的交互
十一、頁面尺寸
既然是做產品，自然要清楚自己的產品到底有著什麼樣的底子。
1. 屏幕尺寸
可參考http://uiiiuiii.com/screen/computer.htm
2. 頁面佈局
同一個產品，佈局儘量保證統一，具體佈局可參考：https://zhidao.baidu.com/question/585199825.html
呈一份自己比較喜歡的網頁佈局：統一T型網站佈局，頁面主要內容，上下型框架，上下間距32px
3. 分頁
常見的分頁樣式：
分頁樣式一：滾動翻頁
分頁樣式二：常規分頁
分頁樣式三：常規分頁，用於頁數較小的場景
十二、表單
1. 短文本
用於用戶文本輸入，並以字符串的方式提交到數據庫。
2. 短文本聯想
用戶用於文本輸入，在輸入過程中會聯想匹配文本選項，並以字符串的方式提交到數據庫。
3. 選擇器
用戶通過選擇枚舉項，提交到服務器。後端存儲為枚舉項。
4. 長文本
用戶用於長文本輸入，並以文本的方式提交到數據庫。
常見的長文本，還有富文本、Markdown、JsonEditor。
十三、Tab
- 常見Tab分三類，頂部tab、底部Tab、側邊欄Tab，其中側邊欄TaB分左側邊欄、右側邊欄
- 主要考慮各類tab的操作路徑，頁面風格統一佈局等問題
具體界面UI，根據各產品進行定義
十四、字體&顏色
1. 字體
2. 格式
3. 顏色
十五、切圖樣式
十六、控件組件
十七、彈框樣式
1. Toast
用戶產生操作，出現toast提示，一般2-3s消失；通過toast中的提示語告知用戶需要了解的信息。讓用戶的行為在使用過程中得到反饋和幫助。
2. 使用場景
可提供成功、警告或錯誤等反饋信息。
頂部居中顯示並自動消失，是一種不打斷用戶操作的輕量級提示方式。
3. alert 警示提示
當用戶進行某種操作時，網站會出現對應的警告信息提示用戶，該提示信息的狀態不會主動消失。
4. 使用場景
當某個頁面需要向用戶顯示警告的信息時。
非浮層的靜態展現形式，始終展現，不會自動消失，有的組件用戶可以點擊關閉。
5. dialog對話框
用於提示用戶當前操作，或是完成某個任務時需要的一些其他額外的信息。對話框可以用確定/取消的簡單的應答模式，也可以是自定義複雜的模式，例如表單的填寫。
6. 使用場景
用戶在進行重要操作的時，需要進行二次確認。
用於重要的反饋提示，讓用戶知道信息提示。
承載少量的表單填寫類，減少頁面的跳轉。
7. Notification通知提醒框
懸浮出現在網頁右上角，用於全局的提醒式通知。常見於服務器異常、操作失敗等。
8. 使用場景
較為複雜的通知內容。
帶有交互的通知，給出用戶下一步的行動點。
系統主動推送。
Notification通知提醒框出現在網頁右上角，一般4-5s消失，也可以點擊叉號進行關閉。
10. tooltip 文字提示
簡單輕量的的文字提示。
11. 使用場景
鼠標移入則立即顯示提示，移出則立即消失，不承載複雜文本和操作。
常用於解釋操作按鈕的文字說明。
十八、加載樣式
1. 菊花樣式
2. 進度條樣式
十九、命名規則
