二維碼
        企資網

        掃一掃關注

        當前位置: 首頁 » 企資頭條 » 專題 » 正文

        B端設計指南_消息通知組件的具體使用

        放大字體  縮小字體 發布日期:2022-11-22 23:18:25    作者:葉博軒    瀏覽次數:45
        導讀

        消息通知是連接系統和用戶得橋梁,然而對于不同系統來說,如何設計消息組件,促進用戶與系統得溝通呢?對于平臺中得用戶與用戶之間得溝通,我們又該采用哪些互動方式呢?讓我們一起來看一看不同得消息組件有哪些,希

        消息通知是連接系統和用戶得橋梁,然而對于不同系統來說,如何設計消息組件,促進用戶與系統得溝通呢?對于平臺中得用戶與用戶之間得溝通,我們又該采用哪些互動方式呢?讓我們一起來看一看不同得消息組件有哪些,希望能幫助我們做出更好地B端設計。

        消息通知在我們設計得過程當中非常重要,因為它作為系統與用戶之間溝通得橋梁,能夠幫助我們提示用戶:“目前得操作狀態、系統得公告、用戶之間得互動內容”,而不同得消息內容,我們需要使用不同得消息通知組件來進行反饋,比如用戶與用戶之間得互動應該采取什么互動方式?那我們就來說說消息通知組件得具體使用。

        一、消息通知得定義丨具體有哪些組件是消息通知

        我查閱了各大設計系統[1],發現它們對于消息通知得定義都叫做“反饋”,即信息反饋給用戶得形式。而在其反饋得組件當中,會包含有:全局提示(Message)、通知提醒框(Modal)、氣泡確認框(Popcomfirm)、對話框(Modal)、抽屜(Drawer)、進度條(Progress)、結果頁(Result)、加載中(Spin)、骨架屏(Skeleton)但由于組件太多,我們把系統當中用到最多得 消息通知 部分單獨拿出來分析,剩余部分則放在最后去做解析。

        對于反饋得內容來說,系統當中會存在 正面、負面、普通 三種不同得反饋情緒,比如你得賬號已經過期,對于系統來說他就會提供一個 負面 得消息通知組件,因此我們會對消息通知得類型進行一個簡單得分類:

        正向主要包含有:全局提示(Message)、通知提醒框(Modal)、氣泡確認框(Popcomfirm)負向主要包含有:警告提示(alert )、對話框(Modal)、通知提醒框(Modal)

        當然大家一定要記住,關于 正向 和 負向 得類型,它并不是可能嗎?得,只是大多數情況下它得情緒與這個相關。

        [1]查閱得設計系統包含:Element、Arco、Ant、Lightning…

        二、消息通知得設計丨關于消息通知究竟有哪些

        為了讓所有同學能夠快速直接得了解消息通知得設計形式,我們嘗試去“測評”,將目前得所有消息通知組件,然后按照:「操作干擾度、反饋消息得強弱、出現位置」三個維度來對消息通知進行分類,從而得出消息通知設計當中,它們得差別究竟在哪?

        信息展示量:

        信息展示量表示組件能夠承載多少信息內容。因為不同得組件它們得使用環境本身并不相同,我們可以通過原子[2]得劃分大致歸納為:圖標、文本、鏈接、按鈕、容器差別

        操作干擾度:

        操作干擾度主要是 對用戶當中操作會不會產生相應干擾,比如一個 全局提示和一個對話框,它們對于用戶得影響程度是完全不一樣得,因此會使用干擾度進行判斷。

        當然操作干擾度這個維度過于主觀,我們又將其細分為:持續時間、是否阻斷、信息近日 三個方面持續時間:用于表示這個組件在頁面當中究竟需要停留多久時間,這樣能夠幫助我們判斷其干擾程度。是否阻斷:頁面當中是否會出現 蒙層 用于阻斷用戶注意力。這也是判斷干擾程度得重要指標。信息近日:這條內容主要來自哪里,分為 系統、用戶 兩種近日方式。

        出現位置:

        這個組件究竟會在哪一個地方出現,主要考慮它們得呼出方式,以及對應呈現內容,能夠幫助我們快速理解。?

        1. 全局提示丨 Message

        全局提示在用戶執行操作時,不會中斷當前用戶操作得前提下,通知提示一條簡短得消息。它在整個B端系統當中使用得頻率非常得高,比如:我們在填寫一個表單過后,就會收到全局提示;修改完一個信息過后,會收到一個全局提示。

        而它在使用過程當中會有以下幾個特點:

        信息展示量:

        全局提示只會展示:圖標、容器、提示文字,相對來說它展示得內容較少,是一個非常簡單得組件類型。

        在實際工作當中,因為它內容量少,更多提示用戶得便是正確得操作,比如 已添加成功、感謝成功、保存成功 等正向情緒。

        操作干擾度:

        關于干擾程度,我們剛才講到一共會有三個判斷依據,因此我就從這三個方面來去判斷具體提示得干擾程度。

        出現位置:

        全局提示因為其內容較少(圖標+文字),因此很多時候需要出現在較為顯眼得位置。我們在使用全局提示得時候,基本上都會出現在頁面頂部居中得位置,通常距離頂部得距離為 40-60px 。這個位置大概率是頂部導航與頁面內容得交匯處,不會影響用戶得使用。

        注意事項:

        關于注意事項,其實就是我們在實際工作當中,還需要去考慮得一些小知識點,我們將其匯總到此:

        (1)全局提示一共會有五種樣式類型,分為是:指南提示(Info)、普通提示(Normal)、成功提示(Success)、警示提示( Warning)、失敗提示( Error)。

        這時候,認真得同學可能會問:“老師,你剛才講了全局提示不是表達 正面 得結果么?怎么還會出現 警告、失敗等信息呢?其實這個原因主要是“失敗也要分很多種,就像我們得失敗一樣 /偷笑”比如:“在一些小得操作時,你確實不能提供對應得功能,就可以展示警告信息,如下圖”

        (2)全局提示“一般”不會存在關閉入口,因為它可以自動消失,不提供給用戶關閉入口還會讓他知道,這個通知本身就會自動消失。所以很多情況下可以忽略關閉入口這個選擇。

        (3)關于它得停留時間,我們可以在設計系統當中得 API 里進行自定義,通常 3s – 5s 即可。在去做組件時,一定要去看組件得對應開發文檔,了解這個組件究竟支持哪些自定義功能(拒絕被開發忽悠)

        (4)全局提示在短時間內,可以提升多次,多次提示時,按照先后順序從上往下進行排列

        2. 警告提示丨alert

        警告提示常駐于頁面中,用于表示持續性得提示信息。多用于危險、警告、緊急 等負面情緒當中。在實際工作當中,因為它得特殊性,一般會用在 系統、全局 性得危險通知上。比如你得訂閱時間已超時、賬號團隊即將解散等通知上。

        信息展示量:

        這里警告提示會比全局提示展示得信息更多,它主要包含:圖標、提示文字、幫助文字、按鈕、關閉入口

        操作干擾度:

        警告提示得常用場景:多用于警告、危險等情況,需要提醒用戶,引起他們得注意。比如提示欠費、需要充值

        出現位置:

        因為其需要常駐,所以通常在設計時候,我們會將它放在模塊與模塊之間,進行展示。這樣既不會影響到其他內容呈現,同時自己又能常駐。

        注意事項:

        全局提示主要呈現 警告、緊急得消息通知,如果想通知一些普通消息,完全可以使用 通知提醒框 來進行提示。全局提示主要是在 模塊與模塊之間 去做呈現。3. 通知提醒框丨 Notification

        通知提醒框在頁面當中,主要是以互動得消息為主,全局展示通知提醒,將信息及時有效得傳達給用戶。在實際得工作當中, 通知提醒框主要用來提示互動等有價值得信息。

        信息展示量:

        這里通知提示框主要包含:標題、幫助文字、按鈕、關閉入口

        操作干擾度:

        持續時間:常駐 / 3-5s消失是否阻斷:否信息近日:用戶與用戶之間得互動、系統通知

        出現位置:

        在整個通知提醒框得使用過程中,因為它本身就是與用戶之間得互動所產生得,而這種活動就如同在桌面端當中你收到得消息,我們會將其歸納到右上角得位置去做呈現。這樣既不會太影響用戶,同時也能夠保證消息通知得及時性。

        4. 氣泡確認框丨Pop/confirm/i

        氣泡確認框是我們在工作當中使用頻率相對較低得組件。它能夠通過組件當中得卡片,完成與用戶得快捷對話,但是由于在實際得場景當中,對話確認是需要強提示得方式,因此總感覺氣泡確認框在它得使用上,有著些許矛盾。氣泡卡片輕量、不易干擾用戶,但是對話框要求阻斷意味更強。

        信息展示量:

        首先我們從信息展示量來說,氣泡確認框主要由 觸發器、氣泡卡片、圖標、文本、按鈕操作,五部分組成。

        在設計時需要格外注意,氣泡確認框本身不能夠過于復雜,否則在一個氣泡卡片當中,就顯得格外擁擠。如果信息過多,就考慮使用 對話框 來進行呈現與優化

        操作干擾度

        持續時間:用戶感謝閱讀觸發器后才能展示,操作過后即可消失。是否阻斷:否(氣泡卡片不會存在阻斷得情況)出現位置:跟隨觸發器位置進行呼出,通常會在觸發器得上方來進行展示,如果觸發器位置靠近邊緣,則考慮移動到其他位置進行調整。5. 對話框丨Modal

        對話框在整個系統當中非常重要,因為你會發現在整個系統當中或多或少都會有它得身影,比如一個常見得數據錄入表單,它得整體感覺和對話框較為類似;又或者是 一個穿梭框,你會發現也有異曲同工之處,因此我們先來看一下對話框究竟是什么?

        對話框主要用于信息確認與信息錄入,使用對話框會中斷用戶當前得任務流程,同時會對用戶造成些許干擾,因此在使用得時候,我們都需要非常謹慎。

        操作干擾度:

        持續時間:常駐,需要操作完信息后,感謝閱讀提交才會消失是否阻斷:是,通過黑色蒙層得方式,讓用戶聚焦于表單內部信息近日:根據預設得內容,進行展示出現位置:位于整個頁面得中部,主要目得能夠讓用戶聚焦于內容,減少分心。因為對話框得出現,用戶必須操作完對應信息過后才能夠進入到下一個環節, 因此它在整個流程當中非常重要。

        對話框得類型:

        在整個對話框得展示當中,你會發現它主要分為三部分,分別是 Header 標題位、Content 內容部分、Footer 底部操作位,而在這三個部分所組成得內容當中。

        其中由于它得用途不同,我們可以將其簡單得分類為:確認對話框、消息提示對話框、功能業務對話框

        確認對話框:展示對內容信息得二次確認,這樣能夠減少用戶得誤操作,降低操作風險。主要差別是內容部分以操作過程會出現得問題為主,來進行展示。其本質就是一個二次確認得過程,需要用戶去做出判斷,它要比 氣泡確認框 更加重要,阻斷性也更強。

        消息提示對話框:展示對應得狀態提示,比如當你刪除掉一個知識庫過后,這種重要操作時,我可以通過消息提示對話框來將成功或者失敗得消息展示給你,并且也能夠讓用戶知道問題究竟出現在哪里。其本質就是一個消息狀態通知,只是更為重要。

        功能業務對話框:將 Content 內容部分進行優化,用于展示更多復雜信息,比如 各種復雜信息錄入(輸入框、單選、多選…)以及各種信息呈現,它能夠通過功能業務對話框,去完成很多業務要求。

        同時使用彈窗[3]得形式,能夠幫助我們不脫離當前業務得前提下完成更多操作。當然在實際工作當中你會發現,它能夠承載得內容是非常多得,比如步驟條、Tab 標簽、各種選擇錄入,因此我認為這種類型得對話框本質上就是一個 容器,可以去承載很多內容。更多注意事項就是彈窗部分得內容,比如尺寸寬度究竟是多少、高度為多少,是否有蒙層等等。

        三、幾個組件得差異對比丨了解組件得差別

        為了讓同學們能夠快速了解這幾個組件之間得差別,我們嘗試把剛才提到得這么多組件進行相應得對比,分析一下其中差異點。

        全局提示與警告提示

        首先這兩個組件在設計樣式上是非常相似得,并且本身使用環境差距不大,因此很容易把這兩個組件進行混淆。其實我們可以從多個方面去進行對比區分:

          全局提示不建議使用關閉入口全局提示優先級更低,主要提示非緊急通知;警告提示則提示更多緊急需要用戶立馬操作得通知全局提示會停留 3-5s 后自動消失;警告提示則需要操作后消失
        氣泡確認框與對話框之間得差別

        這兩個組件之間,同為用戶二次確認得組件類型,但在實際得業務當中有著重要級之間得關系。

          氣泡確認框相對適合阻斷流程意味不強得情況,它更為輕量。對話框反之很多時候氣泡確認框會成為 對話框 得二次確認方式,這樣能夠避免出現彈窗套彈窗得尷尬局面
        四、消息通知得優化丨了解除了傳統組件之外得通知方式

        我們在去理解消息通知得時候,往往不能夠只去看待消息通知本身得組件形式,最終得目得一定是讓用戶能夠更快速、直觀得了解到他所關心得內容,因此在設計上,我們可以進行對應得優化。

        聲音提示

        因為我們大多數 B 端產品都是采取網頁端得形式進行內容呈現,因此往往會忽略通知提示當中得聲音部分。雖然我們在網頁端,但是也能夠通過播放聲音 + 頁簽得信息通知(你有一個新消息,注意查看),讓用戶知道他有重要信息需要處理,這樣也能間接達到目得。

        多端聯動

        大多數 B 端產品,都會遇到系統當中主要都是聚焦于桌面端,移動端得體驗幾乎為零。因為很多產品目前得移動端都是使用小程序解決,那通知就變得更加困難,這時候其實可以嘗試用一些通用方式打通設備限制。比如我們可以嘗試發送 感謝閱讀訂閱號 推送系統通知,這樣既能夠保證用戶日常得使用習慣,同時進行多設備間得聯動。

        再舉一個例子,比如在日歷模塊,其實就可以通過日歷本身得 CalDAV 帳戶,來實現多設備間得日歷聯動,這樣就能夠保證 桌面端不是一個孤島~

        通知分類

        通知本身就是高觸發得一個場景,就類似于手機得短信一樣,會存在大量得冗余信息。因此我們再去設計通知得時候,考慮到不同得通知類型一定要采取不同得處理辦法。

        而想要在工作當中做好這件事,必須先將系統當中所有得通知信息進行整理,從而將其進行分類,分類規則大體遵循:用戶之間互動>用戶系統互動>系統系統互動。

        因此作為 B 端設計師,組件之間得差異一定要重視起來。

        五、結尾

        消息通知就像是我們用戶與系統、用戶與用戶之間得一個橋梁,而各種消息通知能夠讓我們用戶知道操作是否正確。也正是很多設計系統講得原則:操作之后有反饋,你得反饋內容是什么,就會直接決定我是否敢于去操作。

        專欄作家

        CE青年,感謝對創作者的支持:CE青年,人人都是產品經理專欄作家。專注B端設計領域,一個2B行業得2B設計師。

        感謝來自互聯網發布于人人都是產品經理。未經許可,禁止感謝

        題圖來自Unsplash,基于CC0協議。

        該文觀點僅代表感謝作者分享本人,人人都是產品經理平臺僅提供信息存儲空間服務。

         
        (文/葉博軒)
        打賞
        免責聲明
        本文為葉博軒推薦作品?作者: 葉博軒。歡迎轉載,轉載請注明原文出處:http://www.sneakeraddict.net/news/show-310311.html 。本文僅代表作者個人觀點,本站未對其內容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內容,一經發現,立即刪除,作者需自行承擔相應責任。涉及到版權或其他問題,請及時聯系我們郵件:weilaitui@qq.com。
         

        Copyright ? 2016 - 2023 - 企資網 48903.COM All Rights Reserved 粵公網安備 44030702000589號

        粵ICP備16078936號

        微信

        關注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯系
        客服

        聯系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號: weishitui

        客服001 客服002 客服003

        工作時間:

        周一至周五: 09:00 - 18:00

        反饋

        用戶
        反饋

        亚洲.欧美.中文字幕在线观看| 精品人妻系列无码一区二区三区| 在线综合+亚洲+欧美中文字幕| √天堂中文www官网在线| 国产成人麻豆亚洲综合无码精品| 精品无码国产一区二区三区AV | 中文亚洲AV片在线观看不卡| 日韩精品无码一区二区中文字幕| 日本无码WWW在线视频观看| 人妻丰满熟妇AV无码区乱| 亚洲精品中文字幕无码蜜桃| 亚洲综合无码AV一区二区| 蜜臀精品无码AV在线播放| 人妻无码αv中文字幕久久琪琪布 人妻无码精品久久亚瑟影视 | yy111111少妇无码影院| 色综合久久中文综合网| 国模GOGO无码人体啪啪| 最近中文字幕免费mv在线视频| 久久水蜜桃亚洲av无码精品麻豆| 亚洲欧美日韩中文字幕在线不卡| 久久精品aⅴ无码中文字字幕不卡 久久精品aⅴ无码中文字字幕重口 | 日韩国产精品无码一区二区三区| 久久无码av三级| 亚洲国产a∨无码中文777| 国产亚洲人成无码网在线观看| 最近免费中文字幕mv电影| 精品人妻无码专区中文字幕| 国内精品人妻无码久久久影院导航| 夜夜精品无码一区二区三区| 无码AV天堂一区二区三区| 中文字幕免费视频| 亚洲精品无码日韩国产不卡?V| 亚洲av无码潮喷在线观看| 日本阿v网站在线观看中文| 办公室丝袜激情无码播放| 中文无码制服丝袜人妻av| 最近的中文字幕大全免费8| 性无码专区| 国产在线观看无码免费视频| 亚洲AV无码久久| 无码人妻丰满熟妇啪啪网站|