【to B管理端】後臺管理系統的消息反饋如何設計

2021-02-23 騰訊雲設計中心
最近在整理反饋類組件的設計規範,這裡對後臺管理系統的反饋體系做一個總結。

文章將從以下幾個方面進行總結:

為什麼需要反饋?

在尼爾森十大可用性原則中,第一個原則說的就是系統狀態的可見性,即系統狀態需要反饋給用戶,不讓用戶因對系統狀態的未知而產生焦慮。系統狀態可見性包括讓用戶知道自己在做什麼,系統在做什麼,系統進行到了哪一步以及用戶當前處在系統中的哪一個環節等等,應始終為用戶提供適當且及時的消息,以幫助他們了解他們是否正在朝著自己的目標邁進。若系統沒有及時的反饋信息,用戶不僅僅會產生焦慮,很有可能會執行錯誤的操作。

舉個簡單的例子,在線上支付興起之前,我們常去銀行取現金,銀行的atm機在取款時會發出唰唰的點鈔聲,就算只有一張鈔票,點鈔機的聲音也像是在點很多鈔票,這反饋聲告訴用戶,你的錢正在準備中,就算機器出現故障或者請求時間比較長,只要這個反饋聲在,你就不會因此感到焦慮不安。如果atm機不發出點鈔聲,你就會特別緊張,「機器是壞了嗎?是卡住了嗎?還是請求沒有提交上去?我的錢是不是還在?」

有效的反饋機制可以幫助我們更加安心安全的使用產品。

反饋的作用

反饋的方式有很多,根據用戶操作的各階段,將反饋分為三種:行為反饋,過程反饋和結果反饋。

針對用戶某個操作行為,如滑鼠hover、點擊按鈕等操作進行反饋,能夠及時有效的讓用戶感知到當前正在操作的這個組件的狀態。

過程反饋可以幫助用戶增強掌控感,讓用戶了解任務進程。相對於較注重用戶體驗的toC 產品來說,B端後臺管理系統更注重效率,多以任務為主,用戶在執行一個複雜任務的過程中,可能由於某些操作不當引起錯誤,導致任務中斷難以進行,此時一個準確及時的反饋可以及時的將用戶重新拉回任務流中。

結果的反饋可以幫助用戶了解操作產生的結果或引導用戶進行下一步的操作,提升整個操作流程的完整性和流暢度。

反饋相關的組件

以下是我最近整理到的與反饋相關的組件,從吸引程度、停留時間和信息量三個維度進行對比:

message(全局提示);notification(消息通知);alert (警示);popconfirm 氣泡確認框;表單校驗提示 ;dialog對話框 ;獨佔式頁面 。

1.Message全局提示

定義:對用戶的操作作出輕量的全局反饋。
何時使用:

在完結某個獨立頁面後的反饋(如:提交某個落地頁表單)

在一個操作區域或一系列操作完成之後的總體反饋(如:提交分步驟表單中的某個表單)

在某個操作點之後的反饋(如:點擊關閉某個功能的結果反饋)
(示例:因為網絡原因,點擊「編輯」時加載出錯)

2.Notification消息通知

定義:輕量級的全局消息提示和確認機制,出現和消失時需要有緩動動畫。
何時使用:

1.需要提醒用戶來自系統的消息,且不打斷用戶
2.帶有解釋描述的提醒內容
3.需要用戶進行相關交互時(如:確認操作等)
(示例:來自平臺的帳戶實名認證通知)

3.Alert警告

定義:警告條用於承載需要用戶注意的信息。
何時使用:需要告知用戶需要關注的信息時,提示作用較強。
(示例:雲伺服器到期提醒,出現在頁面內容區頂部)

4.Popconfirm 氣泡確認框

定義:氣泡確認框通常用於不會造成嚴重後果的二次確認場景,其會在點擊元素上彈出浮層進行提示確認。氣泡確認框沒有蒙層,點擊確認框以外的區域即可關閉

何時使用:
1.需要用戶進行二次確認、需要給用戶展示反饋信息時
2.不會造成嚴重後果的二次確認場景
(示例:刪除二次確認)

5.表單校驗提示

何時使用:
1.用戶輸入的內容不符合欄位或表單的要求;
2.必填欄位未填寫;
(示例:集群創建表單校驗)

6.Dialog對話框

定義:對話框是一種臨時窗口,通知用戶需要關注的信息或需要獲得用戶響應時,在頁面中打開一個對話框承載相應的信息及操作
何時使用:

需要展示操作反饋或提示信息

需要填寫或展示某些信息,但不方便中斷當前流程時

對於脫離當前頁面內容的獨立線程,內容較少時也可以使用對話框
(示例:刪除結果反饋)

7.獨佔式頁面

何時使用:

長流程表單結束後提供結果反饋

需要展示失敗詳情
(示例:騰訊雲訂單支付成功反饋)

反饋方式

上文提到,根據用戶的操作進程,將反饋分為行為反饋、過程反饋和結果反饋三種,下面結合以上七種反饋組件,分析各個組件在反饋進程中的使用方式。

1.行為反饋

頁面中可進行操作的元素在用戶操作之後應該提供行為反饋,例如hover、點擊、拖拽動作、複製信息、刪除等,幫助用戶增強掌控感。
(示例:上傳組件拖拽反饋)

對於較為敏感的操作,需要二次確認的反饋,建議使用氣泡確認。
(示例:刪除函數時二次確認)

2.過程反饋

用戶進行操作後如果後臺處理需要一定時間,需要給用戶提供過程反饋,減少用戶等待的焦慮感。處理時間非常短的可以忽略,需要較長時間的可分為短時間反饋和長時間反饋:

1.較短時間反饋

指幾秒就可以處理完的操作,建議使用短時間反饋,直接在組件上進行反饋。
較短時間的反饋方式通常出現在會觸發需要時間處理過程的控制項/組件上,例如按鈕、開關;或者出現在表格、表單等承載處理結果的組件中,常見場景如下所示:
場景1:按鈕/開關上的過程反饋,顯示loading動畫

場景2:表格中的過程反饋

場景3:表單中的過程反饋

2.長時間過程反饋
指需要幾十秒甚至更長時間才能處理完的操作,最好能夠顯示進度,若前端無法拉取到進度,建議提供大致時長預估且支持異步操作。
長時間的處理過程分為「處理時可以異步操作」和「處理時不能異步操作」兩種

• 在處理時可以異步操作的情況下,需要保證用戶去到其他頁面也能了解到操作結果

• 在處理過程中不能進行異步操作時,這種情況下最好提供取消的途徑

• 如果可以最好給用戶提供處理進度
場景1:對於有單獨頁面承載的功能操作需要長時間處理時,使用下方樣式展示:

在處理時可以做其他操作,需要保證在其他頁面也能了解到操作的結果,可以使用消息提示承載進度和操作結果。

對於某些需要長時間處理的操作,但又沒有單獨的頁面承載時,使用右上角的loading提示,用戶可以手動關閉:

場景2:在處理時不可以異步操作,建議給用戶提供取消操作的途徑。

3.結果反饋

用戶操作後無法直接看出操作結果,或還需要有進一步引導的時候,需要給用戶提供反饋結果,幫助用戶了解產生的結果,並了解下一步應該如何操作,能夠直接看到操作結果時,不需要提供結果反饋,例如刪除操作、開關操作等。
結果反饋的形式有以下幾種:

• 就近反饋:在頁面中進行的局部操作,可以在局部操作附近就近反饋,例如複製操作、輸入框反饋等

• 全局反饋條:會對全局頁面產生影響的操作,反饋可以用右上角的全局反饋條進行反饋,全局反饋條有自動消失和手動關閉兩種

• 彈窗反饋:對於操作後反饋內容多且內容必須讓客戶看到,或者還有下一步操作指引時,建議使用彈窗反饋結果

• 落地頁反饋:用於某個任務流結束後的結果反饋,且用戶非常關注此任務的結果時,建議使用落地頁反饋結果。

3.1 就近反饋

後臺管理系統頁面多以表單為主,且表單結構複雜冗長,對於表單的信息反饋需要做到及時且準確,因此,表單多採用就近反饋。

局部的表單操作,在表單組件離開focus態時立即判斷輸入是否合法,如果不合法,則立即在組件下方反饋錯誤提示:

3.2 全局反饋

操作後對整個頁面會有影響的操作,結果反饋建議使用全局反饋來反饋

場景1:反饋結果較簡單,且沒有更多信息/操作的入口時,使用message,4.5s後自動消失。

(示例:提交局部表單,提示提交結果)

場景2:反饋結果需要更多的解釋,或包含下一步操作入口時,使用需要手動關閉的notification。

錯誤提示建議都使用手動關閉的提示條,且提供錯誤更詳細的原因說明入口

場景3:反饋結果需要用戶關注到,如網絡異常或者有伺服器過期等,建議使用alert
(示例:雲伺服器到期提醒,出現在頁面內容區頂部)

3.3 彈窗反饋

彈框反饋的主體是操作行為,對於操作後反饋內容多且內容必須讓客戶看到,或者還有下一步操作指引時,建議使用彈窗反饋結果。
(示例:在刪除操作之後提醒用戶操作結果)

彈窗反饋是後臺管理系統反饋機制中最常用的反饋方式,因其阻斷式的反饋效果能夠有效的傳遞需要用戶關注的信息,但注意不要輕易使用彈窗,更要避免二次彈窗的使用。彈窗容易打斷用戶在執行複雜任務時的心流,若不是非常高危的提示,可以考慮使用alert等警示效果明顯的非模態反饋方式。

3.4 落地頁反饋

獨佔式落地頁反饋的主體是操作流程,是種強度較高的反饋方式,通常用在長流程步驟表單的最後告知用戶操作結果需要展示較複雜的補充信息,例如配置信息詳情、購買流程結束後的購買結果反饋等。
(示例:騰訊雲訂單支付成功反饋)

反饋原則

以上介紹了反饋機制中較常使用的幾種反饋方式,下面來討論反饋機制的設計原則。

好的反饋機制會讓人們感到正在和系統的設計者進行對話。作為設計師,我們可以通過反饋機制來回答人們可能提出的問題,為他們提供指引,或是幫助他們了解行動的結果。因此,在設計時,不妨設想你正在和使用它的人進行面對面的交流;想想看,你會在哪些環節,以怎樣的方式說些什麼?

原則一:輕量化

一個愉快的交談應該是輕鬆的,自然的,所以,反饋機制的第一個原則是輕量化。

絕大多數的反饋機制應該遵循著「告知但不打擾」的基本規則,過於頻繁或破壞性的通知會帶來負面的體驗。讓用戶的神經系統收到信息,確保操作的正確性,如果錯了,應該從反饋和提示中獲得正確操作的提示,儘量柔和且不要讓人覺得煩躁。

輕量的反饋方式上面提到很多,如message,notification和就地反饋,可在工作實踐中,經常會遇到產品跟我說,我們這個信息很重要,這種提示用戶看不到,要強一點,我問,那你覺得多強的提示合適呢?他說:彈窗啊,或者用什麼背景色比較明顯的。然後就會出現下面這樣的頁面:

其實頁面中強提示太多,視覺焦點反而不集中,提示效果也會大大降低。文本、圖片、動態元素的視覺焦點依次遞增,因此,可以考慮在反饋中加入合適的動效以達到吸引用戶注意力的目的。

原則二:文案清晰

後臺管理系統多以複雜任務為主,及時的引導和清晰的文案提示能防止用戶在任務流中迷失,反饋內容的主要說明文字需明確表達其目的及操作的後果,錯誤提示需說明清楚錯誤的原因及改正方式。
表單校驗:
如圖所示,CIDR填寫內容範圍廣泛,若不及時告知錯誤原因,會導致用戶一直試錯。

彈窗:
如圖所示,刪除操作若會引起某些後果,需明確寫出正在進行是刪除操作以及刪除操作所導致的後果。

原則三:一致性

一致性即保持系統中所有相同的事件反饋方式是一致的,有利於培養用戶的使用習慣和心理預期,當用戶注意到並且學會了這種呈現方式,看一眼就能知道發生了什麼。

如騰訊雲控制臺中橙色提示條的使用,通常是用來告知用戶一些較為重要的警示信息,若不處理可能會影響業務正常運行。如主機過期等信息提示,當所有相同等級的信息都用這樣的提示條反饋時,用戶在頁面出現相同的提示時就會引起關注。

原則四:就近原則

菲茨定律指出:使用指點設備到達一個目標的時間,與當前設備位置和目標位置的距離(D)和目標大小(S)有關。用數學公式表達為:時間 T = a + b log2(D/S+1),在設計中的應用之一就是就近原則,反饋出現在操作點最近的地方是最容易被發現且容易被操作的。

如騰訊雲控制臺中的信息複製成功的反饋有兩種,就近反饋和全局反饋,全局反饋出現在屏幕中央頂部,與相關的操作距離較遠,且出現的時間較短,用戶很難注意到,因此,表單中對於欄位信息的複製反饋建議使用就近反饋。

寫在最後

反饋在用戶界面設計中是很基礎也是十分重要的一環,B端後臺管理系統與C端產品不同,B端更講究效率和嚴謹,因此反饋應該儘量克制且有效。讓反饋做到最好並不容易,這需要設計師拿捏好對的時間,對的速度,並且傳遞對的信息。通過這次反饋規範的整理,鞏固基礎知識的同時,讓我對一些區別比較模糊的組件有了更加深刻的理解。希望通過我的分享能夠給大家帶來一些啟發。

相關焦點

  • 看看人家那後臺管理系統,那叫一個優雅(附源碼)!
    來源:GitHub猿(ID:GitHubNote) 整理上一篇:API 靈魂四問:接口應該如何設計?
  • Django Admin後臺管理系統
    後臺管理系統的重要性我們先考慮一下,Django 為什麼要引入後臺管理系統呢?我們知道,Web 站點上某些內容的改動是後臺管理員來完成的,如果管理員直接用 Shell 或者 SQL 語句來修改,不僅麻煩,而且容易操作失誤,從而導致數據不一致的結果。假如是一個不懂編程的人呢?應該怎麼去操作呢?
  • 一套完整的 後臺管理系統,賺錢就靠它了!
    前言 這套Base Admin是一套簡單通用的後臺管理系統,主要功能有:權限管理、菜單管理、用戶管理,系統設置、實時日誌,實時監控,API加密,以及登錄用戶修改密碼、配置個性菜單等技術棧 前端:layuijava後端:SpringBoot + Thymeleaf + WebSocket
  • 非常有價值的電商系統,包括前臺商城和後臺管理系統!
    mall項目是一套電商系統,包括前臺商城系統及後臺管理系統,基於SpringBoot+MyBatis實現,採用Docker容器化部署。前臺商城系統包含首頁門戶、商品推薦、商品搜索、商品展示、購物車、訂單流程、會員中心、客戶服務、幫助中心等模塊。後臺管理系統包含商品管理、訂單管理、會員管理、促銷管理、運營管理、內容管理、統計報表、財務管理、權限管理、設置等模塊。
  • 使用Axure設計中,大型的後臺系統原型總結
    上篇在產品原型設計中,經常會涉及到後臺系統原型的設計,如何設計出更規範標準的後臺系統原型,是很多產品同行們都會遇到的一個問題。
  • 3 分鐘生成後臺管理系統,絕了!
    推薦一個免費開源的後臺管理系統編程導航 致力於推薦優質編程資源 💎項目開源倉庫:
  • 開發一個大型後臺管理系統,真的需要用前後端分離的技術方案嗎?
    為了大家好理解,把「xxx 後臺管理系統」泛化一下,變成:開發一個大型後臺管理系統,應該用前後端分離的技術方案嗎?先說一下,本文中的觀點肯定有人不認同,再加上我對前端技術掌握有限,所以大家批判的看吧。1.
  • 10k+點讚的 SpringBoot 後臺管理系統,竟然出了詳細教程!
    其實項目網上有很多了,但是教程比較詳細的沒多少,今天分享的項目從安裝部署到代碼具體功能都有很詳細都說明eladmin 是一款基於 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue 的前後端分離的後臺管理系統
  • 一套開源通用後臺管理系統,賺錢靠它了!
    前言今天我們把它完善成一個簡單通用的後臺管理系統,我把它叫做:Base Admin這套Base Admin是一套簡單通用的後臺管理系統,主要功能有:權限管理、菜單管理、用戶管理,系統設置、實時日誌,實時監控,API加密,以及登錄用戶修改密碼、配置個性菜單等技術棧
  • 這個開源後臺管理系統,用過的都說好!
    開源最前線(ID:OpenSourceTop) 猿妹整編整合自:https://www.cnblogs.com/huanzi-qch/p/11534203.html、https://github.com/huanzi-qch/base-admin話不多說,今天就和大家分享一個牛逼的開源後臺管理系統
  • 產品數據管理(PDM)系統電子文件歸檔與電子檔案管理規範
    1 總體要求1.1 PDM系統中形成的電子文件是企業的核心信息資產,PDM系統電子文件歸檔與電子檔案管理工作應納入單位電子文件歸檔和電子檔案管理整體工作中,統籌規劃,有序推動。1.2 應按照全程管理、前端控制、集中統一原則對PDM系統電子文件實施全生命周期管理,確保電子檔案的「四性」。
  • Spring MVC+Spring+MyBatis整合後臺管理系統
    項目描述後臺管理系統(CMS) ,包括管理員管理模塊、會員管理模塊、系統管理模塊等。
  • B端圖標該如何設計,來看這篇超全總結!
    在設計系統中,基礎組件與業務組件遍布系統的各個角落。因為大多數B端設計系統都是採取這樣的核心思想去構建,這樣更能夠滿足B端系統的實際工作需求,同時又能讓設計系統真正落地,符合B端產品「復用」的設計理念,使每條產品線都能夠高效的搭建。之後我會單獨出一期設計系統的文章,咱們之後單獨細講。
  • 開源推薦,一個完整後臺管理系統,熟悉就能掙錢(附源碼)!
    今天,推薦一個後臺管理系統。第一次使用就有點上頭,熟悉後接私活很實用,愛不釋手,必須要推薦給大家。這是我目前見過最好的後臺管理系統。
  • Excel製作人力資源管理系統,教你如何管理工作
    一直以來想開發一個小系統,卻一直沒有行動。
  • 15 個炫酷的的 Vue 後臺管理模板
    模板是我們做後臺管理系統經常所需要的東西。雖然,我們總可以花很多時間從頭開始設計自己的模板,但有現在的模板讓我們套,節省我們更多時間用來摸魚,何樂而不為呢。這些現有出色模板,除了節省時間外,還附帶這些好處:1.
  • 自動控制系統與職業教育管理
    管理:是指一定組織中的管理者,通過實施計劃、組織、領導、協調、控制等職能來協調他人的活動,使別人同自己一起實現既定目標的活動過程。  開環控制系統:無反饋信息的系統控制方式。因此,開環控制系統的抗幹擾能力很差。我們現在運行的職業教育管理系統,該系統很多,其優點是上峰指令執行性比較強,但需要注意「擾動源」的能量過大、過於頻繁的問題,更應該防止「擾動源」影響「給定值」的設定!
  • 如何設計一個權限系統
    用戶 是發起操作的主體,按類型分可分為2B和2C用戶,可以是後臺管理系統的用戶,可以是OA系統的內部員工,也可以是面向C端的用戶,比如阿里雲的用戶。角色 起到了橋梁的作用,連接了用戶和權限的關係,每個角色可以關聯多個權限,同時一個用戶關聯多個角色,那麼這個用戶就有了多個角色的多個權限。
  • 力挺一套實用的後臺管理系統(附源碼),擺脫重複製造輪子...
    SpringBoot系列——Security + Layui實現一套權限管理後臺模板,今天我們把它完善成一個簡單通用的後臺管理系統,我把它叫做:Base Admin這套Base Admin是一套簡單通用的後臺管理系統,主要功能有:權限管理、菜單管理、用戶管理,系統設置、實時日誌,實時監控,API加密,以及登錄用戶修改密碼、配置個性菜單等。
  • 一套簡單通用的 Java 後臺管理系統,拿來即用,非常方便(附項目地址)
    前言這套Base Admin是一套簡單通用的後臺管理系統,主要功能有:權限管理、菜單管理、用戶管理,系統設置、實時日誌,實時監控,API加密,以及登錄用戶修改密碼、配置個性菜單等技術棧前端:layuijava後端:SpringBoot + Thymeleaf + WebSocket