常用中后臺交互設(shè)計控件使用場景與規(guī)范總結(jié)

96 評論 115565 瀏覽 1412 收藏 22 分鐘

最近剛完成平臺安暢云 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)載

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 來自海南 回復(fù)
    1. 可以關(guān)注下我微信公眾號 “深夜看啥”,后續(xù)內(nèi)容更精彩哦,哈哈哈。

      來自上海 回復(fù)
  2. 總結(jié)的非常非常好,趕緊收藏嘻嘻

    來自河北 回復(fù)
    1. 可以關(guān)注下我微信公眾號 “深夜看啥”,后續(xù)內(nèi)容更精彩哦,哈哈哈。

      來自上海 回復(fù)
  3. 干貨啊,樓主有沒有把他們做成rplib呀,提供一個下載路徑唄 ??

    來自河北 回復(fù)
  4. 感謝分享

    來自湖南 回復(fù)
  5. 很干很干

    來自江蘇 回復(fù)
  6. 好久沒吃這么飽了,還這么好吃

    來自上海 回復(fù)
    1. 不能餓著呀 ??

      來自上海 回復(fù)
  7. 難得一見的干貨!偷偷收藏起來 :mrgreen:

    來自天津 回復(fù)
    1. 可以關(guān)注并宣傳下我微信公眾號 “深夜看啥”,后續(xù)內(nèi)容更精彩哦,哈哈哈。

      來自上海 回復(fù)
  8. ;-)滿滿的干貨!

    來自湖北 回復(fù)
  9. 干貨

    來自江蘇 回復(fù)
  10. 這才叫干貨

    來自廣東 回復(fù)
    1. 可以關(guān)注并宣傳下我微信公眾號 “深夜看啥”,后續(xù)內(nèi)容更精彩哦,哈哈哈。

      來自上海 回復(fù)
  11. 這種文章應(yīng)該打賞,感謝作者分享!

    來自廣東 回復(fù)
    1. 可以關(guān)注并宣傳下我微信公眾號 “深夜看啥”,后續(xù)內(nèi)容更精彩哦,哈哈哈。

      來自上海 回復(fù)
  12. 幫幫幫?。?! ??

    來自香港 回復(fù)
  13. 可否轉(zhuǎn)載親、

    來自北京 回復(fù)
    1. 轉(zhuǎn)載請標明出處噢 ??

      來自上海 回復(fù)
  14. 有元件庫可以提供一下么? :mrgreen:

    來自廣東 回復(fù)
    1. 可以關(guān)注并宣傳下我微信公眾號 “深夜看啥”,然后私信發(fā)你

      來自上海 回復(fù)
  15. 正在重新規(guī)劃后臺設(shè)計,太感謝了 :mrgreen:

    來自上海 回復(fù)
  16. 整理的很好呀,雖然已經(jīng)在平時使用多了,自己自然就會記得一些常用的規(guī)格。又這樣一個規(guī)范稿,媽媽再也不用擔心我要多次調(diào)試才能做出能看的原型了

    來自廣東 回復(fù)
  17. 整理的好?。?!

    來自北京 回復(fù)
  18. 換了個配色的Ant Design

    來自上海 回復(fù)
    1. 老司機 :mrgreen:

      來自廣東 回復(fù)
  19. 學習了

    來自北京 回復(fù)
  20. 真的很棒!在做原型設(shè)計的時候看來也是很需要規(guī)范的,規(guī)范一貼出來,很多不必要的誤解就很清楚了!

    來自廣東 回復(fù)
  21. 非常實用,沒有規(guī)范做起來真心很累,感謝分享,干貨中的幾點曾經(jīng)因為給別人設(shè)計的原型提建議,還得罪人了,哈哈

    來自江蘇 回復(fù)
  22. 感謝分享 ??

    來自浙江 回復(fù)
  23. PM里難得一見的干貨

    來自廣東 回復(fù)
  24. 好牛逼啊,哈哈

    來自上海 回復(fù)
  25. 親愛的作者你好,1.我在做后臺設(shè)計的時候,一直不太會做調(diào)整排序的功能(例如:調(diào)整兩個信息條目的排序,從而控制商品在前端的排序),現(xiàn)在用的有直接拖動或者通過輸入數(shù)字來控制順序,有沒有更好的方式呢,希望能分享下;2.按照您寫的這個后臺,需要前端銅須參與開發(fā)吧,純后端同學很少能寫出這樣的界面的。。。 ??

    來自北京 回復(fù)
    1. 第一個問題:現(xiàn)在基本上也都是使用拖拽去控制條目的順序,因為這種交互模式用戶對它已經(jīng)有了一定的認知了,易上手使用,認知成本和操作成本低,且在操作的時候,能夠清晰的看到被拖拽對象與其他對象的位置關(guān)系,符合所見即所得的交互原則。
      第二個問題:按照這個規(guī)范,是需要前端的同學參與開發(fā)的。

      來自上海 回復(fù)
  26. 學習了。

    來自廣東 回復(fù)
  27. 寫得非常好,已轉(zhuǎn)到微信收藏

    回復(fù)
    1. 謝謝啦,可以一起探討 ??

      來自上海 回復(fù)
  28. 干貨啊 太感謝了正好直接抄襲過來用哈哈

    來自廣東 回復(fù)
    1. 哈哈,那要收打賞費的噢 ??

      來自上海 回復(fù)
  29. 全面細致,謝謝了

    來自北京 回復(fù)
  30. 好棒啊

    來自上海 回復(fù)
    1. 謝謝夸獎 ??

      來自上海 回復(fù)
    2. 可以關(guān)注并宣傳下我微信公眾號 “深夜看啥”,后續(xù)內(nèi)容更精彩哦,哈哈哈。

      來自上海 回復(fù)