後臺產品設計規範
一、 基礎框架Basic
1. 頁面佈局Layout
頁面佈局元素包括頂欄、側邊欄、主要區域和底欄。
幾種常見的頁面佈局方式：
國字形佈局
國字形佈局，是一些大型網站常用的佈局型別。頂欄是網站的logo、標題，頁面中間放置網站的主要內容，左右分列一些訊息內容，如導航欄、友情連結等，最下方是網站的一些基本資訊、聯絡方式、版權宣告等。
優點：頁面容納內容很多，資訊量大。
缺點：頁面擁擠，不夠靈活。
T型佈局
T型佈局結構因與英文大寫字母T相似而得名。其頁面的頂部一般放置橫網站的標誌或Banner廣告，下方左側是導航欄選單，下方右側則用於放置網頁正文等主要內容。
優點：頁面結構清晰，主次分明
缺點：規矩呆板，如果不注意細節色彩，很容易讓人看之無味。
標題正文型佈局
這種佈局的最上方是標題或廣告等內容，下面是正文，一般用於顯示文章頁面、新聞頁面和一些註冊頁面等。
特點：簡潔明快，干擾資訊少，較為正規。
左右型佈局
左右型佈局是一些大型論壇和企業經常使用的一種佈局結構。左側一般主要為導航欄，右側則放置網站的主要內容。
優點：視覺衝擊力強。
缺點：很難將兩部分有機地結合起來。
幾種常見的頁面佈局方式
2.色彩Color
主色：主題顏色、用於頂欄等的背景色。
輔助色：除了主色外的場景色，不同使用場景顏色不同。如操作成功時的提示文字顏色等。
中性色：用於文字、邊框等的顏色。
中性色使用規範
3.字型Typography
不同層級的文字字號、行間距可能都會不同，有了規範可保持整體的一致性，降低溝通成本和了解成本。
字型使用規範
4.邊框Border
可設定各級邊框的樣式。
邊框使用規範
5.按鈕Button
可規定按鈕樣式、尺寸、色號等。
按鈕使用規範
6.圖示Icon
相同圖示需統一。
7.其他規範
1.篩選條件一行顯示幾列；
2.上下左右內邊距值；
3.原型頁面尺寸等。
二、 引導類Navigation
1. 導航選單NavMenu
樣式1：頂欄
樣式2：固定側欄
樣式3：可摺疊側欄:
2. 麵包屑Breadcrumb
樣式1：首頁/列表頁/新增
樣式2：首頁>列表頁>新增
麵包屑樣式
3. 標籤頁Tabs
1.是否為選項卡樣式
2.是否有動態增減
3.標籤頁的位置（上下左右）
4. 步驟條Steps
1.橫式還是豎式
2.是否顯示狀態，如初審中、複審中等
3.是否有描述，如初審中（初審由XXX角色的使用者完成…）
4.是否帶圖示
步驟條樣式
5. 下拉選單Dropdown
1.觸發物件：按鈕或文字
2.觸發方式：hover啟用或click啟用
下拉選單樣式
三、 表單元素Form
1. 單選框Radio
1.樣式1:
單選樣式1
2.樣式2：
單選樣式2
2. 多選框Checkbox
1.樣式1：
多選樣式1
2.樣式2：
多選樣式2
3. 輸入框Input
1.單一型輸入還是複合式輸入
2.是否帶單位
3.是否帶聯想輸入
4.是否有提示文字
輸入框樣式
4. 計數器InputNumber
1.設定精度
2.設定增減幅度
計數器樣式
5. 選擇器Select
1.是否有搜尋
2.是否支援多選
3.備選項是否分組
4.是否顯示禁用選項
選擇器分組樣式
6. 級聯選擇器Cascader
1.是否有搜尋
2.是否支援多選
3.是否僅顯示最後一級
4.是否每一級都可單獨選擇
7. 時間選擇器TimePicker
1.固定時間點或範圍
2.精確時間點或範圍
8. 日期選擇器DatePicker
日期選擇器樣式
9. 開關Switch
開關樣式
10. 滑塊Slider
滑塊樣式
11. 上傳Upload
1.上傳檔案展示型別：平鋪展示或列表展示
2.上傳型別：點選上傳、拖拽上傳
上傳樣式
12. 評分Rate
1.是否允許出現半顆星
2.是否出現文字
3.是否將不同分值設定為不同顏色
評分樣式
四、 資料展現
1. 表格Table
1.有無斑馬線、有無邊框、有無特殊顏色行/值
2.表頭是否固定、列是否固定、表格是否固定高度、是否有多級表頭
3.是否有選中某行的效果、有無多選全選、是否可排序、是否可篩選
4.懸浮資料時是否可顯示額外內容、是否可展開行、是否需要合計
表格樣式
2. 樹形控制元件Tree
1.控制元件中是否可以選擇
樹樣式
3. 分頁Pagination
1.是否顯示省略號
2.是否顯示總條數
3.是否可調整每頁顯示條數
4.是否可直接跳轉至某頁
分頁樣式
4. 標籤Tag
是否可移除，是否可新增。
可移除標籤樣式
5. 進度條Progress
1.線型/環形進度條
2.百分數內顯/外顯/不顯
進度條樣
6. 標記Badge
標記樣式：數字/其他文字/小紅點
五、 通知Notice
1. 警告Alert
非浮層元素，不會自動關閉的提示。
1.是否帶圖示
2.是否帶標題文案
3.是否可關閉
警告樣式
2. 載入Loading
1.載入圖示樣式
2.是否帶文字
載入樣式
3. 訊息提示Message
主要用於主動操作後的反饋提示。
4. 彈框MessageBox
複雜、慎重的提示用彈框表現，如刪除、提交等。
5. 通知Notification
懸浮出現在頁面角落，顯示全域性的通知提醒訊息。彈出位置；是否帶圖示；是否可自動關閉。
通知樣式
大部分樣式參考各網站前端樣式庫，部分圖片來源於網路，侵刪。