web端消息中心設(shè)計(jì)分析——附原型資源分享

時(shí)間：2023-10-03 20:00:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-03 20:00:01 來源：網(wǎng)站運(yùn)營(yíng)

web端消息中心設(shè)計(jì)分析——附原型資源分享：消息中心幾乎已經(jīng)成為了每個(gè)產(chǎn)品的「標(biāo)配」，它讓用戶能夠及時(shí)獲取到需要知道的消息和提醒并進(jìn)行處理，同時(shí)也讓運(yùn)營(yíng)者能夠有一個(gè)渠道能向用戶發(fā)送重要通知。作為產(chǎn)品的設(shè)計(jì)者，我們并不能將所有消息一股腦兒地直接推送給用戶，而是需要根據(jù)產(chǎn)品特性和消息類型來將消息合理有效地展示給用戶，讓用戶能夠「Get」到最重要的信息。

最近我研究了很多網(wǎng)站的消息中心設(shè)計(jì)，本文選取了其中5個(gè)比較有代表性的網(wǎng)站來和大家一起探討一下。

同時(shí)，貼心如我，只分析不分享可不是我的作風(fēng)，所以我也分享給了大家這幾種常見消息中心的原型資源（完整資源見文末），有需要的小伙伴可以直接下載使用喲～

常見消息中心分析

1.本站

本站的消息中心采用了消息彈層+落地頁的形式，彈層向用戶展示消息中最核心的信息，讓用戶能夠高效獲取信息并快速判斷是否需要進(jìn)行處理。而落地頁則是將所有信息以天為單位進(jìn)行匯總展示，方便用戶快速定位到某條消息。

本站作為一個(gè)問答社區(qū)，有很多種不同的消息通知。但設(shè)計(jì)者并沒有將所有類型全部單獨(dú)自成一類進(jìn)行展示，而是根據(jù)他們的重要程度和內(nèi)在屬性劃分成了【消息】和【私信】?jī)蓚€(gè)大的類別，又將【消息】中所有通知?jiǎng)澐殖闪恕咎嵝选?、【關(guān)注】、【感謝／贊】。讓用戶可以很快的對(duì)消息的屬性做出判斷。

在這里，本站將【感謝／贊】單獨(dú)分成一類，是因?yàn)檫@類操作是表達(dá)對(duì)本站平臺(tái)內(nèi)容產(chǎn)出者的認(rèn)同的最重要的方式，而被認(rèn)同的感覺以及其所伴隨的成就感能夠鼓勵(lì)用戶更多地分享自己的學(xué)識(shí)、見解和經(jīng)驗(yàn)，促進(jìn)活躍。所以在設(shè)計(jì)消息分類時(shí)，我們不僅需要根據(jù)消息的邏輯類型來進(jìn)行劃分，也需要充分結(jié)合產(chǎn)品特性進(jìn)行思考。

2.PMCAFF

PMCAFF是針對(duì)產(chǎn)品經(jīng)理所創(chuàng)立的內(nèi)容社區(qū)，功能相對(duì)比較簡(jiǎn)單，所以它的的消息中心也設(shè)計(jì)地非常簡(jiǎn)潔，只有一個(gè)匯總的落地頁。

但在落地頁中，PMCAFF將【邀請(qǐng)我回答的問題】從【全部通知】中單拎出來列為一個(gè)獨(dú)立標(biāo)簽，并且這類消息不是點(diǎn)擊標(biāo)簽就被標(biāo)記為已讀，而是需要用戶前往回答或點(diǎn)擊【忽略】才會(huì)被標(biāo)記已讀。這也體現(xiàn)出PMCAFF非常鼓勵(lì)用戶去產(chǎn)出，努力地在為用戶營(yíng)造一個(gè)好的UGC環(huán)境，讓平臺(tái)形成良性循環(huán)，同時(shí)加強(qiáng)自身平臺(tái)的特色。

3.新浪微博

新浪微博的消息中心非常完善并且龐大，它作為一個(gè)社交平臺(tái)，用戶間的互動(dòng)形態(tài)非常多，并且重要性比較接近，所以它將每種消息單獨(dú)作為一個(gè)分類，方便用戶進(jìn)行篩選查看。

新浪微博沒有采用類似本站的消息彈層的形式，而是直接將用戶從消息提醒引導(dǎo)到功能齊全的落地頁，我認(rèn)為主要有以下兩點(diǎn)原因：一是因?yàn)樾吕宋⒉┙^大多數(shù)消息都是來自對(duì)單條微博或評(píng)論的交互操作，而微博作為沒有標(biāo)題的圖文信息，在彈層中并不方便展示其縮略信息；而是在落地頁用戶可以直接看到完整的前后文信息，并可以直接進(jìn)行【回復(fù)】操作，能夠促進(jìn)用戶進(jìn)一步交流互動(dòng)。

4.石墨文檔

石墨文檔是一款可以多人同時(shí)編輯同一文檔和表格的在線協(xié)作文檔工具，作為一款工具型產(chǎn)品，它的所有消息都是有關(guān)合作者的“協(xié)同協(xié)作”的通知，比如【添加協(xié)作者】、【評(píng)論】、【@】等。

工具類產(chǎn)品不同于其它平臺(tái)類產(chǎn)品，消息并不是用戶關(guān)注的重點(diǎn)，用戶往往比較專注于自己的工作面板和當(dāng)前的任務(wù)，并不希望常常被打擾。并且用戶可能會(huì)直接通過任務(wù)本身（比如打開文檔）就能看到【評(píng)論】和【@】等內(nèi)容，而不需要通過消息中心一一查看。所以石墨文檔將消息中心做的非常簡(jiǎn)潔輕量，數(shù)字提醒很弱，并且只有一個(gè)消息彈層來，讓用戶在有需要的時(shí)候「有跡可循」，不需要的時(shí)候也完全不會(huì)受影響。

當(dāng)然，為了保證重要消息的接收，石墨會(huì)為【邀請(qǐng)協(xié)同】等重要通知發(fā)送郵件提醒，保證用戶能夠?qū)崟r(shí)獲取到重要通知。

5.Teambition

作為一個(gè)工具類產(chǎn)品，Teambition同樣是采用了彈層的方式來設(shè)計(jì)消息中心。但Teambition的消息中心彈層非常大，不僅能夠承載消息通知，還能直接在當(dāng)前頁對(duì)任務(wù)進(jìn)行處理。當(dāng)然，這樣的設(shè)計(jì)和Teambition本身的產(chǎn)品功能和特性有很大關(guān)系，它的消息幾乎都是和單個(gè)任務(wù)的操作相關(guān)，而單個(gè)任務(wù)的形態(tài)也相對(duì)簡(jiǎn)單，可以在彈層中完整展示和操作。所以設(shè)計(jì)者將消息通知和任務(wù)快捷處理都設(shè)計(jì)在彈層中，這樣用戶在工作中可以在不脫離當(dāng)前的任務(wù)流程的情況下，快速高效地在當(dāng)前頁把事情處理完畢。







本站、微博、PMCAFF都是平臺(tái)型的網(wǎng)站，而石墨和Teambition是工具型的網(wǎng)站，因?yàn)閷傩圆煌韵⒅行牡谋磉_(dá)側(cè)重點(diǎn)也就不同；而同樣是平臺(tái)型的網(wǎng)站，由于不同的產(chǎn)品定位、特性和功能，各個(gè)平臺(tái)的消息中心最終呈現(xiàn)方式也各不相同。

所以我們?cè)谠O(shè)計(jì)消息中心的時(shí)候，除了參考常見的設(shè)計(jì)形式外，一定要充分結(jié)合自身的產(chǎn)品特性、消息類型來進(jìn)行思考，做到不僅能夠向用戶合理有效地傳達(dá)各類信息，也能從產(chǎn)品設(shè)計(jì)上去引導(dǎo)用戶完成我們想要鼓勵(lì)用戶進(jìn)行的操作。

原型資源

分析的過程中我也做好了以上各個(gè)產(chǎn)品消息中心的原型，在這里一起分享給大家，希望能對(duì)你們有一些幫助！~




原型預(yù)覽




資源鏈接

消息中心高保真原型

消息中心低保真原型

消息中心組件庫

消息中心頁面庫




往期文章