最近剛完成平臺安暢云 2.0 的改版設(shè)計，平臺模塊很多，經(jīng)常存在很多類似的頁面和組件，若不制定統(tǒng)一的規(guī)范和控件，則會導致很多重復(fù)的工作，大大降低產(chǎn)品的設(shè)計效率；同時，平臺的一致性也得不到保障。

所以，我們視覺、交互、前端的小伙伴們針對我們踩過的坑，大家認真總結(jié)和提煉出一個符合公司定位的設(shè)計規(guī)范，統(tǒng)一公司項目的前端 UI 設(shè)計，規(guī)避不必要的設(shè)計差異和實現(xiàn)成本，實現(xiàn)設(shè)計和前端資源的效率最大化。

此設(shè)計規(guī)范主要分享了中后臺常用設(shè)計組件的定義、組成、使用場景及注意事項。

字體

概述

字體是界面設(shè)計中最基本的構(gòu)成元素之一，用戶通過文字來理解內(nèi)容和完成任務(wù)，合適的字體將大大提升用戶的閱讀體驗及工作效率。在安暢云項目的字體使用中，為了使頁面的視覺層次更加清晰，我們從以下三方面來使平臺的字體符合易閱讀和美觀的要求。

• 合理的使用不同的字重、字號和顏色來強調(diào)界面中需要突出的信息；
• 盡量使用單種字體，使用多種字體會讓界面看起來零散和雜亂無章；
• 遵循 WCAG 2.0 標準（標準詳情見 https://www.w3.org/Translations/WCAG20-zh/#visual-audio-contrast），字體在使用時與背景顏色的對比值滿足無障礙閱讀的最低標準。

字體使用建議

• 中文字體優(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 圖標？

• 當按鈕標簽過長（超過6個中文字），導致視覺出現(xiàn)問題時，建議改用鏈接文字。
• 當按鈕嵌在文本中時，應(yīng)該用鏈接文字；
• 當命令是次要時，應(yīng)該用鏈接文字。
• 當命令是很常規(guī)的操作（如刪除、編輯等），且圖標語義非常容易理解時，可以使用圖標作為操作按鈕。

按鈕類型及狀態(tài)

• 按鈕類型主要有：主按鈕、次級按鈕、幽靈按鈕和線框按鈕。
• 按鈕狀態(tài)主要有：正常、懸浮、點擊、加載中和禁用。
• 按鈕中的文本標簽應(yīng)該足夠簡潔和易懂，并且通常是一個動詞。
• 如果點擊按鈕后不會立即響應(yīng)，應(yīng)當切換為加載狀態(tài)；加載狀態(tài)下不能點擊。

使用場景

1、主按鈕

當需要突出或需要強調(diào)時使用它；通常情況下同一模塊只允許有一個主要按鈕。

2、次級按鈕

當已存在主要按鈕后還需要再突出時使用它；次級按鈕權(quán)重比主要按鈕低、比幽靈按鈕高。

3、幽靈按鈕

幽靈按鈕幾乎適用所有場景，是所有按鈕中最基礎(chǔ)的按鈕。

4、線框按鈕

權(quán)重性較低，主要用于添加附件等場景。

5、多按鈕組合

當某條數(shù)據(jù)同時存在多個操作時，建議使用主按鈕樣式折疊顯示，如下圖：

輸入框

定義與組成

• 定義：用于顯示、輸入或編輯文本、數(shù)值操作所使用的控件。
• 組成：一般由標簽、必填項符號（根據(jù)業(yè)務(wù)需求而定）、輸入框和狀態(tài)反饋組成。

3種常見形式（狀態(tài)反饋放在輸入框下面還是后面，視排版空間而定；一般情況下，彈窗中表單輸入框錯誤狀態(tài)反饋放下面，新頁面表單輸入框錯誤狀態(tài)反饋放后面）

輸入框狀態(tài)

輸入框類型及使用場景

1、單文本框（當輸入的字符長度超過文本框固定的寬度時，須保證最后輸入的字符顯示出來）

（1）普通文本輸入框

例如，昵稱、名稱等填寫。用戶按照規(guī)則要求輸入即可，輸入錯誤時出現(xiàn)錯誤狀態(tài)反饋提示；輸入正確給出正確狀態(tài)反饋提示。

（2）密碼輸入框

為了安全性起見，用戶輸入密碼時，默認隱藏處理（同時提供“顯示密碼”和“密碼加強計”功能）。同時需遵循密碼的規(guī)則要求，狀態(tài)反饋提示同普通文本輸入框。

（3）數(shù)字輸入框

建議給出輸入框的同時，可以讓用戶對數(shù)字進行微調(diào)的功能。對于類似固定電話填寫，建議將區(qū)號與主體號碼分開填寫，中間用“—”隔開。

2、多文本框

1. 當用戶需要輸入或編輯長字符串時，請使用多行輸入框。例如，備注、描述以及意見建議等的填寫。
2. 使文本控件的高度足夠大，以便容納典型的輸入。
3. 不要讓文本輸入控件在用戶鍵入時增加高度；如果輸入內(nèi)容超過控件高度時，建議在框內(nèi)出現(xiàn)滾動條。

對話框＆氣泡確認框＆氣泡提示＆通知

對話框（消息對話框）

1、定義

用來臨時顯示與用戶當前正在執(zhí)行的操作相關(guān)信息的控件，通常與黑色背景遮罩搭配使用。

2、組成

一般由標題（可有可無依照具體場景而使用）、內(nèi)容、操作按鈕以及 “×” 組成。

3、使用場景

（1）操作后發(fā)生某些嚴重錯誤或者警告用戶接下來操作可能出現(xiàn)的風險時使用。

（2）操作不可進行時；某些操作無法讓用戶進行時，應(yīng)彈出警告消息對話框。

（3）操作不可逆時；例如刪除命令，執(zhí)行后再也不能復(fù)原，就應(yīng)該在執(zhí)行前使用對話框進行再次確定。

對話框（任務(wù)對話框）

1、定義

用來臨時顯示與用戶當前正在執(zhí)行的操作相關(guān)信息的控件，通常與黑色背景遮罩搭配使用。

2、組成

一般由標題、內(nèi)容、操作按鈕以及 “×” 組成。

3、使用場景

操作任務(wù)多或復(fù)雜時；當用戶進行較復(fù)雜的任務(wù)時，應(yīng)使用對話框嵌套控件，突出操作內(nèi)容。例如表單。

氣泡確認框

1、定義

用來臨時顯示與用戶當前正在執(zhí)行的操作相關(guān)信息的控件。通常在操作對象附近直接顯示，不出現(xiàn)黑色背景遮罩。

2、組成

一般由內(nèi)容、操作按鈕以及 “×”（大部分情況下沒有，在氣泡確認框外部點擊即可關(guān)閉該確認框） 組成。

3、使用場景

頻繁使用的破壞性操作。

氣泡提示

1、定義

用于對對象簡短描述或補充說明的控件。當用戶將鼠標懸停在對象上時會自動顯示，當鼠標移開對象時提示就會消失。

2、組成

一般由解釋說明信息組成。

3、使用場景

輕量級的信息反饋。例如，對某個對象簡短描述或補充說明。對象通常是 鏈接文字或者是問號、感嘆號圖標。

通知

1、定義

全局展示通知提醒信息。通常在系統(tǒng)右上角顯示。

2、組成

一般由通知提醒信息組成。

3、使用場景

（1）用戶的操作反饋提示。例如操作失敗、成功、系統(tǒng)正在執(zhí)行某操作等。

（2）系統(tǒng)主動推送的消息。

單選控件

定義

只能在一組相關(guān)但互相排斥的選項中選擇，且只能選擇一個有效項的控件（包括通用單選控件和自定義單選控件）。

示例

（1）通用單選控件

（2）自定義單選控件（此處僅列舉一種樣式，其他樣式視具體場景而定）

單選控件5種狀態(tài)

單選控件使用場景及注意事項

（1）當選項數(shù)量 ≤ 4時，一般使用單選控件；選項數(shù)量大于4個時建議使用下拉控件。（最終使用單選還是下拉控件，根據(jù)頁面空間大小而定）

（2）當有推薦選項或者是用戶常用選項時，建議默認選中。（若默認項對用戶選擇產(chǎn)生干擾，則不要默認）

（3）若用于對立相反的選項且只有兩個選項時，例如同意、不同意，這兩個選項應(yīng)該整合為一個復(fù)選控件而不是使用單選控件。如下圖：

（4）單選控件建議以邏輯順序排列選項，如從被選到的可能性從高到低、從小到大、操作難以度從簡單到復(fù)雜、風險程度從低到高等。

復(fù)選控件

定義

在兩個相對立選項之間進行選擇或者是能選擇多個有效項的控件（包括通用復(fù)選控件和自定義復(fù)選控件）。

示例

（1）通用復(fù)選控件

（2）自定義復(fù)選控件（此處僅列舉一種樣式，其他樣式視具體場景而定）

復(fù)選控件5種狀態(tài)

復(fù)選控件使用場景及注意事項

（1）當有推薦選項或者是用戶常用選項時，建議默認選中。（若默認項對用戶選擇產(chǎn)生干擾，則不要默認）

（2）若用于對立相反的選項且只有兩個選項時，例如同意、不同意，這兩個選項應(yīng)該整合為一個復(fù)選控件而不是使用單選控件。如下圖

（3）復(fù)選框標簽文本是對選中時的狀態(tài)描述，未選狀態(tài)的含義必須與選中狀態(tài)明確相反。

下拉菜單

定義

當頁面上元素或操作較多時，用以收納這些元素或操作的控件。

示例

（1）下拉菜單—下拉框：

（2）下拉菜單—下拉浮層：

下拉框狀態(tài)

下拉框使用場景及注意事項：

（1）當頁面上的元素或操作較多時，用此控件收納元素或操作。點擊或移入觸點，會出現(xiàn)一個下拉菜單?？稍诹斜碇羞M行選擇，并執(zhí)行相應(yīng)的命令。

（2）當下拉選項中包含鼓勵用戶的可選項或大部分用戶常用選項時，則可考慮提供默認項。

（3）當下拉選項非常多時，需在下拉框中加入搜索功能，方便用戶選擇。

（4）當下拉框中標簽字符超過最大寬度時，多余的字符用“…”顯示，鼠標移入此選項時，用氣泡提示全部顯示。

下拉浮層狀態(tài)

下拉浮層使用場景及注意事項：

（1）當頁面上的元素或操作較多時且視覺層次弱于下拉框時，用此控件收納元素或操作。通常鼠標移入觸點，會出現(xiàn)一個下拉浮層。可在列表中進行選擇，并執(zhí)行相應(yīng)的命令。

（2）在浮層展開時，三角形圖標順時針翻轉(zhuǎn)且同時變成紅色；浮層收起時，三角形圖標逆時針翻轉(zhuǎn)且同時由紅色變?yōu)槟J顏色。

翻頁控件

定義

一組提供翻頁功能的按鈕。

示例

（1）比較完整的版本（具體形式需根據(jù)業(yè)務(wù)需求而定）

（2）簡化版

翻頁控件狀態(tài)（以例1做說明）

翻頁控件使用場景及注意事項

當加載或者渲染所有數(shù)據(jù)將花費很多時間時，建議使用翻頁將數(shù)據(jù)分為幾部分加載。

時間拾取器

定義

為用戶提供時間選擇或日期選擇的控件。

示例（其他形式根據(jù)自身需求而定）

（1）選擇時間

（2）選擇日期

時間拾取器使用場景及注意事項

當用戶需要輸入一個時間，可以點擊標準輸入框，彈出時間面板進行選擇。

數(shù)量控件

定義

用于數(shù)量選擇的控件。

示例

（1）微調(diào)數(shù)量控件

（2）下拉數(shù)量控件

數(shù)量控件使用場景及注意事項

（1）當在連續(xù)且較短區(qū)間，一般為 10 以內(nèi)取值時使用微調(diào)數(shù)量控件。

（2）微調(diào)數(shù)量控件也支持數(shù)字直接輸入，默認數(shù)量為1，當數(shù)值為1時，減少按鈕禁用。

（3）當非連續(xù)、取值范圍較大的場景時使用下拉數(shù)量控件。下拉數(shù)量控件不支持數(shù)字直接輸入，系統(tǒng)按業(yè)務(wù)需求規(guī)則默認一些數(shù)值供用戶選擇。

（4）為了頁面保持一致，若旁邊有其他下拉控件時可考慮把微調(diào)數(shù)量控件以下拉控件方式使用。

Tab選項卡

定義

在頁面內(nèi)切換內(nèi)容的功能控件。

Tab選項卡狀態(tài)

Tab選項卡使用場景及注意事項

各選項卡內(nèi)容模塊之間是相互獨立的，按照模塊內(nèi)容重要性以及用戶使用 頻率從前往后排列。

滑動條

定義

展示當前值和可選范圍的滑動輸入器。

滑動條類型

滑動條使用場景及注意事項

連續(xù)數(shù)值型滑動條一般數(shù)值以較小變量變化，建議在其后面增加自定義數(shù)值輸入框，方便用戶精確輸入。

加載控件

定義

用于反饋需要2秒以上才能完成的系統(tǒng)進程的控件。

常見類型

加載控件使用場景及注意事項

（1）模塊或正文初始內(nèi)容加載、表單提交按鈕提交后的加載、滾屏加載、加載更多等用通用加載控件。

（2）官網(wǎng)中產(chǎn)品展示圖初始化加載時使用圖片加載控件。

（3）上傳大文件 / 加載需要較久時間的文件，使用顯示進度的加載控件。

（4）官網(wǎng)專題頁宣傳時，需要配合主題的加載使用自定義加載控件。

暫時先總結(jié)這么多，不足之處請大家多多指教。同時，希望能和大家一起交流，一起進步。

作者：潘達，個人公眾號：潘達設(shè)計小站，歡迎勾搭

本文由 @潘達 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載