為什么要做規(guī)范：
1、后臺產(chǎn)品的功能模塊很多，但其中往往存在很多類似的頁面和組件，導(dǎo)致了很多重復(fù)的工作，大大降低了產(chǎn)品的設(shè)計效率。
2、沒有統(tǒng)一的規(guī)范，平臺的一致性得不到保障。同一用語、功能、操作保持一致，能夠讓用戶產(chǎn)生熟悉感繼而提升好感。
解決方案：
統(tǒng)一公司項目的設(shè)計規(guī)范，規(guī)避不必要的溝通誤解、設(shè)計差異和實現(xiàn)成本，實現(xiàn)設(shè)計和前端資源的效率最大化。
本篇設(shè)計規(guī)范主要分享了中后臺常用設(shè)計組件的定義、組成、使用場景及注意事項。
字體
定義：
字體是界面設(shè)計中最基本的構(gòu)成元素之一，用戶通過文字來理解內(nèi)容和完成任務(wù)，優(yōu)秀的字體將大大提升用戶的閱讀體驗及工作效率。
要求：
1、合理的使用不同的字重、字號和顏色來強調(diào)界面中需要突出的信息；
2、盡量使用單種字體，混合使用多種字體會讓界面看起來零散和雜亂無章；
3、遵循WCAG 2.0 標(biāo)準（標(biāo)準詳情見https://www.w3.org/Translations/WCAG20-zh/#visual-audio-contrast），字體在使用時與背景顏色的對比值滿足無障礙閱讀的最低標(biāo)準。
字體使用建議：
中文字體優(yōu)先級：PingFang SC、Hiragino Sans GB 、Microsoft YaHei（平臺使用字體）
英文字體優(yōu)先級：Helvetica Neue、Helvetica、Arial（平臺使用字體）
字號使用建議：
行高使用建議：
行高也是影響用戶閱讀體驗的重要因素之一，我們查閱資料得知西文的基本行高通常是字號的 1.2em 左右，而中文因為字符復(fù)雜，所以中文行高需要更大?，F(xiàn)在公認1.5em 至 1.8em 之間會有一個比較好的視覺閱讀效果。
行高計算公式：行高值=字號x 1.5，例如：12號字體的行高為18px，14號字體的行高為21px。
按鈕&鏈接文字
該用哪一個？使用按鈕 or 鏈接文字 or 圖標(biāo)？
當(dāng)按鈕標(biāo)簽過長（超過6個中文字），導(dǎo)致視覺出現(xiàn)問題時，建議改用鏈接文字。
當(dāng)按鈕嵌在文本中時，應(yīng)該用鏈接文字；
當(dāng)命令是次要時，應(yīng)該用鏈接文字。
當(dāng)命令是很常規(guī)的操作（如刪除、編輯等），且圖標(biāo)語義非常容易理解時，可以使用圖標(biāo)作為操作按鈕。
按鈕類型及狀態(tài)
按鈕類型主要有：主按鈕、次級按鈕、幽靈按鈕和線框按鈕。
按鈕狀態(tài)主要有：正常、懸浮、點擊、加載中和禁用。
按鈕中的文本標(biāo)簽應(yīng)該足夠簡潔和易懂，并且通常是一個動詞。
如果點擊按鈕后不會立即響應(yīng)，應(yīng)當(dāng)切換為加載狀態(tài)；加載狀態(tài)下不能點擊。
使用場景
主按鈕：當(dāng)需要突出或需要強調(diào)時使用它；通常情況下同一模塊只允許有一個主要按鈕。
次級按鈕：當(dāng)已存在主要按鈕后還需要再突出時使用它；次級按鈕權(quán)重比主要按鈕低、比幽靈按鈕高。
幽靈按鈕：幽靈按鈕幾乎適用所有場景，是所有按鈕中最基礎(chǔ)的按鈕。
線框按鈕：權(quán)重性較低，主要用于添加附件等場景。
多按鈕組合：當(dāng)某條數(shù)據(jù)同時存在多個操作時，建議使用主按鈕樣式折疊顯示，如下圖
輸入框
定義：用于顯示、輸入或編輯文本、數(shù)值操作所使用的控件。
組成：一般由標(biāo)簽、必填項符號（根據(jù)業(yè)務(wù)需求而定）、輸入框和狀態(tài)反饋組成。
3種常見形式（狀態(tài)反饋放在輸入框下面還是后面，視排版空間而定；一般情況下，彈窗中表單輸入框錯誤狀態(tài)反饋放下面，新頁面表單輸入框錯誤狀態(tài)反饋放后面）
輸入框狀態(tài)
輸入框類型及使用場景
單文本框（當(dāng)輸入的字符長度超過文本框固定的寬度時，須保證最后輸入的字符顯示出來）
普通文本輸入框：例如，昵稱、名稱等填寫。用戶按照規(guī)則要求輸入即可，輸入錯誤時出現(xiàn)錯誤狀態(tài)反饋提示；輸入正確給出正確狀態(tài)反饋提示。
密碼輸入框：為了安全性起見，用戶輸入密碼時，默認隱藏處理（同時提供顯示密碼功能）。同時需遵循密碼的規(guī)則要求，狀態(tài)反饋提示同普通文本輸入框。
數(shù)字輸入框：建議給出輸入框的同時，可以讓用戶對數(shù)字進行微調(diào)的功能。對于類似固定電話填寫，建議將區(qū)號與主體號碼分開填寫，中間用“—”隔開。
多文本框
當(dāng)用戶需要輸入或編輯長字符串時，請使用多行輸入框。例如，備注、描述以及意見建議等的填寫。
使文本控件的高度足夠大，以便容納典型的輸入。
?不要讓文本輸入控件在用戶鍵入時增加高度；如果輸入內(nèi)容超過控件高度時，建議在框內(nèi)出現(xiàn)滾動條。
對話框＆氣泡確認框＆氣泡提示＆通知
對話框（消息對話框）
定義：用來臨時顯示與用戶當(dāng)前正在執(zhí)行的操作相關(guān)信息的控件，通常與黑色背景遮罩搭配使用。
組成：一般由標(biāo)題（可有可無依照具體場景而使用）、內(nèi)容、操作按鈕以及“×” 組成。
使用場景：
1.操作后發(fā)生某些嚴重錯誤或者警告用戶接下來操作可能出現(xiàn)的風(fēng)險時使用。
2.操作不可進行時；某些操作無法讓用戶進行時，應(yīng)彈出警告消息對話框。
3.操作不可逆時；例如刪除命令，執(zhí)行后再也不能復(fù)原，就應(yīng)該在執(zhí)行前使用對話框進行再次確定。
對話框（任務(wù)對話框）
定義：用來臨時顯示與用戶當(dāng)前正在執(zhí)行的操作相關(guān)信息的控件，通常與黑色背景遮罩搭配使用。? ? ? ?? ? ? ? ? ?
組成：一般由標(biāo)題、內(nèi)容、操作按鈕以及 “×” 組成。
使用場景：操作任務(wù)多或復(fù)雜時；當(dāng)用戶進行較復(fù)雜的任務(wù)時，應(yīng)使用對話框嵌套控件，突出操作內(nèi)容。例如表單。
氣泡確認框
定義：用來臨時顯示與用戶當(dāng)前正在執(zhí)行的操作相關(guān)信息的控件。通常在操作對象附近直接顯示，不出現(xiàn)黑色背景遮罩。
組成：一般由內(nèi)容、操作按鈕以及 “×”（大部分情況下沒有，在氣泡確認框外部點擊即可關(guān)閉該確認框）組成。
使用場景：頻繁使用的破壞性操作。
氣泡提示
定義：用于對對象簡短描述或補充說明的控件。當(dāng)用戶將鼠標(biāo)懸停在對象上時會自動顯示，當(dāng)鼠標(biāo)移開對象時提示就會消失。
組成：一般由解釋說明信息組成。
使用場景：輕量級的信息反饋。例如，對某個對象簡短描述或補充說明。對象通常是鏈接文字或者是問號、感嘆號圖標(biāo)。
通知
定義：全局展示通知提醒信息。通常在系統(tǒng)頂部或右上角顯示。
組成：一般由通知提醒信息組成。
使用場景：
用戶的操作反饋提示。例如操作失敗、成功、系統(tǒng)正在執(zhí)行某操作等。
系統(tǒng)主動推送的消息。
單選控件
定義：只能在一組相關(guān)但互相排斥的選項中選擇，且只能選擇一個有效項的控件（包括通用單選控件和自定義單選控件）。
示例
通用單選控件
自定義單選控件（此處僅列舉一種樣式，其他樣式視具體場景而定）
單選控件5種狀態(tài)
單選控件使用場景及注意事項
當(dāng)選項數(shù)量 ≤ 4時，一般使用單選控件；選項數(shù)量大于4個時建議使用下拉控件。（最終使用單選還是下拉控件，根據(jù)頁面空間大小而定）
當(dāng)有推薦選項或者是用戶常用選項時，建議默認選中。（若默認項對用戶選擇產(chǎn)生干擾，則不要默認）
若用于對立相反的選項且只有兩個選項時，例如同意、不同意，這兩個選項應(yīng)該整合為一個復(fù)選控件而不是使用單選控件。
例如
?復(fù)選框標(biāo)簽文本是對選中時的狀態(tài)描述，未選狀態(tài)的含義必須與選中狀態(tài)明確相反。
下拉菜單
定義：當(dāng)頁面上元素或操作較多時，用以收納這些元素或操作的控件。
示例：下拉菜單—下拉框
示例：下拉菜單—下拉浮層
下拉框狀態(tài)
下拉框使用場景及注意事項
頁面上的元素或操作較多時，用此控件收納元素或操作。點擊或移入觸點，會出現(xiàn)一個下拉菜單?？稍诹斜碇羞M行選擇，并執(zhí)行相應(yīng)的命令。
在下拉展開時，圖標(biāo)順時針翻轉(zhuǎn)；下拉收起時，圖標(biāo)逆時針翻轉(zhuǎn)。
當(dāng)下拉選項中包含鼓勵用戶的可選項或大部分用戶常用選項時，則可考慮提供默認項。
當(dāng)下拉選項非常多時，需在下拉框中加入搜索功能，方便用戶選擇。
當(dāng)下拉框中標(biāo)簽字符超過最大寬度時，多余的字符用“…”顯示，鼠標(biāo)移入此選項時，用氣泡提示全部顯示。
下拉浮層狀態(tài)
當(dāng)頁面上的元素或操作較多時且視覺層次弱于下拉框時，用此控件收納元素或操作。通常鼠標(biāo)移入觸點，會出現(xiàn)一個下拉浮層。可在列表中進行選擇，并執(zhí)行相應(yīng)的命令。
在浮層展開時，圖標(biāo)順時針翻轉(zhuǎn)且同時變成紅色；浮層收起時，圖標(biāo)逆時針翻轉(zhuǎn)且同時由紅色變?yōu)槟J顏色。
翻頁控件
定義：一組提供翻頁功能的按鈕。
示例：比較完整的版本（具體形式需根據(jù)業(yè)務(wù)需求而定）
簡化版
翻頁控件狀態(tài)（以例1做說明）
翻頁控件使用場景及注意事項
當(dāng)加載或者渲染所有數(shù)據(jù)將花費很多時間時，建議使用翻頁將數(shù)據(jù)分為幾部分加載。
時間拾取器
定義：為用戶提供時間選擇或日期選擇的控件。
示例：選擇時間
示例：選擇日期
時間拾取器使用場景及注意事項
當(dāng)用戶需要輸入一個時間，可以點擊標(biāo)準輸入框，彈出時間面板進行選擇。
數(shù)量控件
定義：用于數(shù)量選擇的控件。
示例：微調(diào)數(shù)量控件
示例：下拉數(shù)量控件
數(shù)量控件使用場景及注意事項
當(dāng)在連續(xù)且較短區(qū)間，一般為 10 以內(nèi)取值時使用微調(diào)數(shù)量控件。
微調(diào)數(shù)量控件也支持數(shù)字直接輸入，默認數(shù)量為1，當(dāng)數(shù)值為1時，減少按鈕禁用。
當(dāng)非連續(xù)、取值范圍較大的場景時使用下拉數(shù)量控件。下拉數(shù)量控件不支持數(shù)字直接輸入，系統(tǒng)按業(yè)務(wù)需求規(guī)則默認一些數(shù)值供用戶選擇。
為了頁面保持一致，若旁邊有其他下拉控件時可考慮把微調(diào)數(shù)量控件以下拉控件方式使用。
Tab選項卡
定義：在頁面內(nèi)切換內(nèi)容的功能控件。
Tab選項卡狀態(tài)
Tab選項卡使用場景及注意事項
各選項卡內(nèi)容模塊之間是相互獨立的，按照模塊內(nèi)容重要性以及用戶使用 頻率從前往后排列。
滑動條
定義：展示當(dāng)前值和可選范圍的滑動輸入器。
滑動條使用場景及注意事項
連續(xù)數(shù)值型滑動條一般數(shù)值以較小變量變化，建議在其后面增加自定義數(shù)值輸入框，方便用戶精確輸入。
加載控件
定義：用于反饋需要2秒以上才能完成的系統(tǒng)進程的控件。
常見類型
加載控件使用場景及注意事項
（1）模塊或正文初始內(nèi)容加載、表單提交按鈕提交后的加載、滾屏加載、加載更多等用通用加載控件。
（2）官網(wǎng)中產(chǎn)品展示圖初始化加載時使用圖片加載控件。
（3）上傳大文件 / 加載需要較久時間的文件，使用顯示進度的加載控件。
（4）官網(wǎng)專題頁宣傳時，需要配合主題的加載使用自定義加載控件。
