常用中后台交互设计控件使用场景与规范总结
作者：?panda? （轉(zhuǎn)載已取得作者授權(quán)）
此設(shè)計(jì)規(guī)范主要分享了中后臺(tái)常用設(shè)計(jì)組件的定義、組成、使用場(chǎng)景及注意事項(xiàng)。
字體
概述
字體是界面設(shè)計(jì)中最基本的構(gòu)成元素之一，用戶通過(guò)文字來(lái)理解內(nèi)容和完成任務(wù)，合適的字體將大大提升用戶的閱讀體驗(yàn)及工作效率。在安暢云項(xiàng)目的字體使用中，為了使頁(yè)面的視覺(jué)層次更加清晰，我們從以下三方面來(lái)使平臺(tái)的字體符合易閱讀和美觀的要求。
合理的使用不同的字重、字號(hào)和顏色來(lái)強(qiáng)調(diào)界面中需要突出的信息；
盡量使用單種字體，使用多種字體會(huì)讓界面看起來(lái)零散和雜亂無(wú)章；
遵循 WCAG 2.0 標(biāo)準(zhǔn)（標(biāo)準(zhǔn)詳情見(jià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ù)雜，所以中文行高需要更大。現(xiàn)在公認(rèn)1.5em 至 1.8em 之間會(huì)有一個(gè)比較好的視覺(jué)閱讀效果。
安暢云項(xiàng)目行高計(jì)算公式：行高值=字號(hào) x 1.5，例如：12 號(hào)字體的行高為 18px，14 號(hào)字體的行高為 21px。
按鈕＆鏈接文字
使用按鈕 or 鏈接文字 or 圖標(biāo)？
當(dāng)按鈕標(biāo)簽過(guò)長(zhǎng)（超過(guò)6個(gè)中文字），導(dǎo)致視覺(jué)出現(xiàn)問(wè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種常見(jiàn)形式（狀態(tài)反饋放在輸入框下面還是后面，視排版空間而定；一般情況下，彈窗中表單輸入框錯(cuò)誤狀態(tài)反饋放下面，新頁(yè)面表單輸入框錯(cuò)誤狀態(tài)反饋放后面）
輸入框狀態(tài)
輸入框類型及使用場(chǎng)景
1、單文本框（當(dāng)輸入的字符長(zhǎng)度超過(guò)文本框固定的寬度時(shí)，須保證最后輸入的字符顯示出來(lái)）
（1）普通文本輸入框
例如，昵稱、名稱等填寫(xiě)。用戶按照規(guī)則要求輸入即可，輸入錯(cuò)誤時(shí)出現(xiàn)錯(cuò)誤狀態(tài)反饋提示；輸入正確給出正確狀態(tài)反饋提示。
（2）密碼輸入框
為了安全性起見(jiàn)，用戶輸入密碼時(shí)，默認(rèn)隱藏處理（同時(shí)提供“顯示密碼”和“密碼加強(qiáng)計(jì)”功能）。同時(shí)需遵循密碼的規(guī)則要求，狀態(tài)反饋提示同普通文本輸入框。
（3）數(shù)字輸入框
建議給出輸入框的同時(shí)，可以讓用戶對(duì)數(shù)字進(jìn)行微調(diào)的功能。對(duì)于類似固定電話填寫(xiě)，建議將區(qū)號(hào)與主體號(hào)碼分開(kāi)填寫(xiě)，中間用“—”隔開(kāi)。
2、多文本框
當(dāng)用戶需要輸入或編輯長(zhǎng)字符串時(shí)，請(qǐng)使用多行輸入框。例如，備注、描述以及意見(jiàn)建議等的填寫(xiě)。
使文本控件的高度足夠大，以便容納典型的輸入。
不要讓文本輸入控件在用戶鍵入時(shí)增加高度；如果輸入內(nèi)容超過(guò)控件高度時(shí)，建議在框內(nèi)出現(xiàn)滾動(dòng)條。
對(duì)話框＆氣泡確認(rèn)框＆氣泡提示＆通知
對(duì)話框（消息對(duì)話框）
1、定義
用來(lái)臨時(shí)顯示與用戶當(dāng)前正在執(zhí)行的操作相關(guān)信息的控件，通常與黑色背景遮罩搭配使用。
2、組成
一般由標(biāo)題（可有可無(wú)依照具體場(chǎng)景而使用）、內(nèi)容、操作按鈕以及 “×” 組成。
3、使用場(chǎng)景
（1）操作后發(fā)生某些嚴(yán)重錯(cuò)誤或者警告用戶接下來(lái)操作可能出現(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、定義
用來(lái)臨時(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、定義
用來(lái)臨時(shí)顯示與用戶當(dāng)前正在執(zhí)行的操作相關(guān)信息的控件。通常在操作對(duì)象附近直接顯示，不出現(xiàn)黑色背景遮罩。
2、組成
一般由內(nèi)容、操作按鈕以及 “×”（大部分情況下沒(méi)有，在氣泡確認(rèn)框外部點(diǎn)擊即可關(guān)閉該確認(rèn)框） 組成。
3、使用場(chǎng)景
頻繁使用的破壞性操作。
氣泡提示
1、定義
用于對(duì)對(duì)象簡(jiǎn)短描述或補(bǔ)充說(shuō)明的控件。當(dāng)用戶將鼠標(biāo)懸停在對(duì)象上時(shí)會(huì)自動(dòng)顯示，當(dāng)鼠標(biāo)移開(kāi)對(duì)象時(shí)提示就會(huì)消失。
2、組成
一般由解釋說(shuō)明信息組成。
3、使用場(chǎng)景
輕量級(jí)的信息反饋。例如，對(duì)某個(gè)對(duì)象簡(jiǎn)短描述或補(bǔ)充說(shuō)明。對(duì)象通常是 鏈接文字或者是問(wèn)號(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è)下拉菜單。可在列表中進(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)簽字符超過(guò)最大寬度時(shí)，多余的字符用“…”顯示，鼠標(biāo)移入此選項(xiàng)時(shí)，用氣泡提示全部顯示。
下拉浮層狀態(tài)
下拉浮層使用場(chǎng)景及注意事項(xiàng)：
（1）當(dāng)頁(yè)面上的元素或操作較多時(shí)且視覺(jué)層次弱于下拉框時(shí)，用此控件收納元素或操作。通常鼠標(biāo)移入觸點(diǎn)，會(huì)出現(xiàn)一個(gè)下拉浮層。可在列表中進(jìn)行選擇，并執(zhí)行相應(yīng)的命令。
（2）在浮層展開(kāi)時(shí)，三角形圖標(biāo)順時(shí)針?lè)D(zhuǎn)且同時(shí)變成紅色；浮層收起時(shí)，三角形圖標(biāo)逆時(shí)針?lè)D(zhuǎn)且同時(shí)由紅色變?yōu)槟J(rèn)顏色。
翻頁(yè)控件
定義
一組提供翻頁(yè)功能的按鈕。
示例
（1）比較完整的版本（具體形式需根據(jù)業(yè)務(wù)需求而定）
（2）簡(jiǎn)化版
翻頁(yè)控件狀態(tài)（以例1做說(shuō)明）
翻頁(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)程的控件。
常見(jià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)步。
最后，也歡迎有問(wèn)題的小伙伴加微信：yw5201a1?溝通交流。
此外我們的官方網(wǎng)站也上線了，每日分享高質(zhì)量的文章、原型素材和行業(yè)報(bào)告，小伙伴可自行前往索取，支持搜索，需要的小伙伴可點(diǎn)擊底部的閱讀原文直接查看，或者復(fù)制網(wǎng)址：www.dadaghp.com?打開(kāi)。
更多干貨可關(guān)注微信公眾號(hào)：產(chǎn)品劉
想學(xué)習(xí)更多關(guān)于產(chǎn)品、職場(chǎng)、心理、認(rèn)知等干貨，可長(zhǎng)按右邊二維碼，關(guān)注我們。
··················END··················
RECOMMEND
推薦閱讀
滴滴的未來(lái)會(huì)怎樣？
線下實(shí)戰(zhàn)2.0
好的產(chǎn)品經(jīng)理都是這樣繪制原型圖的（下）...
一道小米的產(chǎn)品經(jīng)理面試題
點(diǎn)擊“閱讀原文”
查看更多干貨
總結(jié)
以上是生活随笔為你收集整理的常用中后台交互设计控件使用场景与规范总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java8新特性 Optional类
- 下一篇： 2022年全球营销趋势