作者：?panda? （轉載已取得作者授權）

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

字體

概述

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

• 合理的使用不同的字重、字號和顏色來強調界面中需要突出的信息；

• 盡量使用單種字體，使用多種字體會讓界面看起來零散和雜亂無章；

• 遵循 WCAG 2.0 標準（標準詳情見 https://www.w3.org/Translations/WCAG20-zh/#visual-audio-contrast），字體在使用時與背景顏色的對比值滿足無障礙閱讀的最低標準。

字體使用建議

• 中文字體優先級：PingFang SC、Hiragino Sans GB 、Microsoft YaHei（平臺使用字體）

• 英文字體優先級：Helvetica Neue、Helvetica、Arial（平臺使用字體）

字號使用建議

行高使用建議

行高也是影響用戶閱讀體驗的重要因素之一，我們查閱資料得知西文的基本行高通常是字號的 1.2em 左右，而中文因為字符復雜，所以中文行高需要更大。現在公認1.5em 至 1.8em 之間會有一個比較好的視覺閱讀效果。

安暢云項目行高計算公式：行高值=字號 x 1.5，例如：12 號字體的行高為 18px，14 號字體的行高為 21px。

按鈕＆鏈接文字

使用按鈕 or 鏈接文字 or 圖標？

• 當按鈕標簽過長（超過6個中文字），導致視覺出現問題時，建議改用鏈接文字。

• 當按鈕嵌在文本中時，應該用鏈接文字；

• 當命令是次要時，應該用鏈接文字。

• 當命令是很常規的操作（如刪除、編輯等），且圖標語義非常容易理解時，可以使用圖標作為操作按鈕。

按鈕類型及狀態

• 按鈕類型主要有：主按鈕、次級按鈕、幽靈按鈕和線框按鈕。

• 按鈕狀態主要有：正常、懸浮、點擊、加載中和禁用。

• 按鈕中的文本標簽應該足夠簡潔和易懂，并且通常是一個動詞。

• 如果點擊按鈕后不會立即響應，應當切換為加載狀態；加載狀態下不能點擊。

使用場景

1、主按鈕

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

2、次級按鈕

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

3、幽靈按鈕

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

4、線框按鈕

權重性較低，主要用于添加附件等場景。

5、多按鈕組合

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

輸入框

定義與組成

• 定義：用于顯示、輸入或編輯文本、數值操作所使用的控件。

• 組成：一般由標簽、必填項符號（根據業務需求而定）、輸入框和狀態反饋組成。

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

輸入框狀態

輸入框類型及使用場景

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

（1）普通文本輸入框

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

（2）密碼輸入框

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

（3）數字輸入框

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

2、多文本框

當用戶需要輸入或編輯長字符串時，請使用多行輸入框。例如，備注、描述以及意見建議等的填寫。

使文本控件的高度足夠大，以便容納典型的輸入。

不要讓文本輸入控件在用戶鍵入時增加高度；如果輸入內容超過控件高度時，建議在框內出現滾動條。

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

對話框（消息對話框）

1、定義

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

2、組成

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

3、使用場景

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

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

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

對話框（任務對話框）

1、定義

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

2、組成

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

3、使用場景

操作任務多或復雜時；當用戶進行較復雜的任務時，應使用對話框嵌套控件，突出操作內容。例如表單。

氣泡確認框

1、定義

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

2、組成

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

3、使用場景

頻繁使用的破壞性操作。

氣泡提示

1、定義

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

2、組成

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

3、使用場景

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

通知

1、定義

全局展示通知提醒信息。通常在系統右上角顯示。

2、組成

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

3、使用場景

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

（2）系統主動推送的消息。

單選控件

定義

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

示例

（1）通用單選控件

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

單選控件5種狀態

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

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

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

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

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

復選控件

定義

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

示例

（1）通用復選控件

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

復選控件5種狀態

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

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

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

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

下拉菜單

定義

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

示例

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

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

下拉框狀態

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

（1）當頁面上的元素或操作較多時，用此控件收納元素或操作。點擊或移入觸點，會出現一個下拉菜單。可在列表中進行選擇，并執行相應的命令。

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

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

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

下拉浮層狀態

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

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

（2）在浮層展開時，三角形圖標順時針翻轉且同時變成紅色；浮層收起時，三角形圖標逆時針翻轉且同時由紅色變為默認顏色。

翻頁控件

定義

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

示例

（1）比較完整的版本（具體形式需根據業務需求而定）

（2）簡化版

翻頁控件狀態（以例1做說明）

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

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

時間拾取器

定義

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

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

（1）選擇時間

（2）選擇日期

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

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

數量控件

定義

用于數量選擇的控件。

示例

（1）微調數量控件

（2）下拉數量控件

數量控件使用場景及注意事項

（1）當在連續且較短區間，一般為 10 以內取值時使用微調數量控件。

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

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

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

Tab選項卡

定義

在頁面內切換內容的功能控件。

Tab選項卡狀態

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

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

滑動條

定義

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

滑動條類型

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

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

加載控件

定義

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

常見類型

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

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

（2）官網中產品展示圖初始化加載時使用圖片加載控件。

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

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

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

最后，也歡迎有問題的小伙伴加微信：yw5201a1?溝通交流。

此外我們的官方網站也上線了，每日分享高質量的文章、原型素材和行業報告，小伙伴可自行前往索取，支持搜索，需要的小伙伴可點擊底部的閱讀原文直接查看，或者復制網址：www.dadaghp.com?打開。

更多干貨可關注微信公眾號：產品劉

想學習更多關于產品、職場、心理、認知等干貨，可長按右邊二維碼，關注我們。

··················END··················

RECOMMEND

推薦閱讀

滴滴的未來會怎樣？

線下實戰2.0

好的產品經理都是這樣繪制原型圖的（下）...

一道小米的產品經理面試題

點擊“閱讀原文”

查看更多干貨

總結

以上是生活随笔為你收集整理的常用中后台交互设计控件使用场景与规范总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。