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

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

此設(shè)計(jì)規(guī)范主要分享了中后臺(tái)常用設(shè)計(jì)組件的定義、組成、使用場(chǎng)景及注意事項(xiàng)。

字體

概述

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

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

字體使用建議

• 中文字體優(yōu)先級(jí)：PingFang SC、Hiragino Sans GB 、Microsoft YaHei（平臺(tái)使用字體）
• 英文字體優(yōu)先級(jí)：Helvetica Neue、Helvetica、Arial（平臺(tái)使用字體）

字號(hào)使用建議

行高使用建議

行高也是影響用戶閱讀體驗(yàn)的重要因素之一，我們查閱資料得知西文的基本行高通常是字號(hào)的 1.2em 左右，而中文因?yàn)樽址麖?fù)雜，所以中文行高需要更大?，F(xiàn)在公認(rèn)1.5em 至 1.8em 之間會(huì)有一個(gè)比較好的視覺閱讀效果。

安暢云項(xiàng)目行高計(jì)算公式：行高值=字號(hào) x 1.5，例如：12 號(hào)字體的行高為 18px，14 號(hào)字體的行高為 21px。

按鈕＆鏈接文字

使用按鈕 or 鏈接文字 or 圖標(biāo)？

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

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

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

使用場(chǎng)景

1、主按鈕

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

2、次級(jí)按鈕

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

3、幽靈按鈕

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

4、線框按鈕

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

5、多按鈕組合

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

輸入框

定義與組成

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

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

輸入框狀態(tài)

輸入框類型及使用場(chǎng)景

1、單文本框（當(dāng)輸入的字符長(zhǎng)度超過文本框固定的寬度時(shí)，須保證最后輸入的字符顯示出來）

（1）普通文本輸入框

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

（2）密碼輸入框

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

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

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

2、多文本框

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

對(duì)話框＆氣泡確認(rèn)框＆氣泡提示＆通知

對(duì)話框（消息對(duì)話框）

1、定義

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

2、組成

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

3、使用場(chǎng)景

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

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

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

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

1、定義

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

2、組成

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

3、使用場(chǎng)景

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

氣泡確認(rèn)框

1、定義

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

2、組成

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

3、使用場(chǎng)景

頻繁使用的破壞性操作。

氣泡提示

1、定義

用于對(duì)對(duì)象簡(jiǎn)短描述或補(bǔ)充說明的控件。當(dāng)用戶將鼠標(biāo)懸停在對(duì)象上時(shí)會(huì)自動(dòng)顯示，當(dāng)鼠標(biāo)移開對(duì)象時(shí)提示就會(huì)消失。

2、組成

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

3、使用場(chǎng)景

輕量級(jí)的信息反饋。例如，對(duì)某個(gè)對(duì)象簡(jiǎn)短描述或補(bǔ)充說明。對(duì)象通常是 鏈接文字或者是問號(hào)、感嘆號(hào)圖標(biāo)。

通知

1、定義

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

2、組成

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

3、使用場(chǎng)景

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

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

單選控件

定義

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

示例

（1）通用單選控件

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

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

單選控件使用場(chǎng)景及注意事項(xiàng)

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

（2）當(dāng)有推薦選項(xiàng)或者是用戶常用選項(xiàng)時(shí)，建議默認(rèn)選中。（若默認(rèn)項(xiàng)對(duì)用戶選擇產(chǎn)生干擾，則不要默認(rèn)）

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

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

復(fù)選控件

定義

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

示例

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

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

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

復(fù)選控件使用場(chǎng)景及注意事項(xiàng)

（1）當(dāng)有推薦選項(xiàng)或者是用戶常用選項(xiàng)時(shí)，建議默認(rèn)選中。（若默認(rèn)項(xiàng)對(duì)用戶選擇產(chǎn)生干擾，則不要默認(rèn)）

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

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

下拉菜單

定義

當(dāng)頁(yè)面上元素或操作較多時(shí)，用以收納這些元素或操作的控件。

示例

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

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

下拉框狀態(tài)

下拉框使用場(chǎng)景及注意事項(xiàng)：

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

（2）當(dāng)下拉選項(xiàng)中包含鼓勵(lì)用戶的可選項(xiàng)或大部分用戶常用選項(xiàng)時(shí)，則可考慮提供默認(rèn)項(xiàng)。

（3）當(dāng)下拉選項(xiàng)非常多時(shí)，需在下拉框中加入搜索功能，方便用戶選擇。

（4）當(dāng)下拉框中標(biāo)簽字符超過最大寬度時(shí)，多余的字符用“…”顯示，鼠標(biāo)移入此選項(xiàng)時(shí)，用氣泡提示全部顯示。

下拉浮層狀態(tài)

下拉浮層使用場(chǎng)景及注意事項(xiàng)：

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

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

翻頁(yè)控件

定義

一組提供翻頁(yè)功能的按鈕。

示例

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

（2）簡(jiǎn)化版

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

翻頁(yè)控件使用場(chǎng)景及注意事項(xiàng)

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

時(shí)間拾取器

定義

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

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

（1）選擇時(shí)間

（2）選擇日期

時(shí)間拾取器使用場(chǎng)景及注意事項(xiàng)

當(dāng)用戶需要輸入一個(gè)時(shí)間，可以點(diǎn)擊標(biāo)準(zhǔn)輸入框，彈出時(shí)間面板進(jìn)行選擇。

數(shù)量控件

定義

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

示例

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

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

數(shù)量控件使用場(chǎng)景及注意事項(xiàng)

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

（2）微調(diào)數(shù)量控件也支持?jǐn)?shù)字直接輸入，默認(rèn)數(shù)量為1，當(dāng)數(shù)值為1時(shí)，減少按鈕禁用。

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

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

Tab選項(xiàng)卡

定義

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

Tab選項(xiàng)卡狀態(tài)

Tab選項(xiàng)卡使用場(chǎng)景及注意事項(xiàng)

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

滑動(dòng)條

定義

展示當(dāng)前值和可選范圍的滑動(dòng)輸入器。

滑動(dòng)條類型

滑動(dòng)條使用場(chǎng)景及注意事項(xiàng)

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

加載控件

定義

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

常見類型

加載控件使用場(chǎng)景及注意事項(xiàng)

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

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

（3）上傳大文件 / 加載需要較久時(shí)間的文件，使用顯示進(jìn)度的加載控件。

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

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

作者：潘達(dá)，個(gè)人公眾號(hào)：潘達(dá)設(shè)計(jì)小站，歡迎勾搭

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