精品国产一区二区三区免费,国内精品久久久久久不卡影院,日韩三级精品

啥？你說我不懂如何設(shè)計(jì)消息中心？

2020-5-25 鶴鶴

消息中心設(shè)計(jì)樣式的簡單匯總

作為APP標(biāo)配的消息中心，我們無時(shí)無刻不在與其打交道，看似千篇一律的設(shè)計(jì)實(shí)際上其中也有許多值得我們深入探討的內(nèi)容，今天我們一起從消息中心頁入口出發(fā)，一層一層剝開它的秘密。

全文分為五個(gè)部分：

一、消息中心頁入口位置

二、消息中心頁常見的組成模塊

三、消息中心頁分類導(dǎo)航方式的選擇

四、消息列表的呈現(xiàn)形式

五、劃重點(diǎn)

一、消息中心頁入口位置

消息中心頁是應(yīng)用內(nèi)系統(tǒng)發(fā)送給用戶的各種信息的一個(gè)集合頁面，它的本質(zhì)是與用戶互動溝通。也就是說，產(chǎn)品越是需要與用戶進(jìn)行溝通，消息中心的重要程度也就越高。

一般情況下，不同類型的APP消息中心的重要程度為：社交通訊類＞電商類＞資訊類＞工具類

而消息中心頁的入口位置正好側(cè)面反映了其在產(chǎn)品中的重要程度。

1.底部導(dǎo)航欄

消息中心頁入口位置放在底部導(dǎo)航欄，屬于一級導(dǎo)航，重要程度很高，常見于即時(shí)通訊、社交社群類產(chǎn)品，如下圖：

即時(shí)通訊類的QQ，核心業(yè)務(wù)就是通訊交流，消息頁入口不僅放在底部導(dǎo)航欄，且做為APP的首頁。而微博作為最早的社群內(nèi)容類產(chǎn)品，社交溝通需求也很高，固將消息中心入口放置在底部導(dǎo)航欄。

當(dāng)然也不是只有社交通訊類產(chǎn)品會選擇該位置作為消息中心的入口，如下圖淘寶和小紅書也將消息中心入口放置在底部導(dǎo)航欄。

淘寶本是電商類產(chǎn)品，消息入口放置在底部導(dǎo)航欄，結(jié)合官方號、內(nèi)容號、小黑群等功能，我的理解是淘寶是想通過社交溝通促使用戶更多的購物。

小紅書主打生活內(nèi)容分享，輔助電商購物，是現(xiàn)在比較常見的某個(gè)核心業(yè)務(wù)+社交的產(chǎn)品，這類產(chǎn)品可根據(jù)自身一級導(dǎo)航類別的多少決定是否將消息中心入口放置在底部導(dǎo)航欄。

2.頂部導(dǎo)航欄

消息中心頁入口放置在頂部導(dǎo)航欄，重要程度根據(jù)入口跟隨頁面的多少分成兩種情況：

1）幾乎每頁跟隨，重要程度較高

京東和豆瓣幾乎是每個(gè)一級頁面的頂部都有消息頁入口圖標(biāo)，京東甚至在一些二級頁面也還保留了頂部消息入口，方便用戶隨時(shí)查看。

2）僅在動態(tài)頁、首頁或個(gè)人中心頂部有入口，重要程度較低

如上圖所示，愛奇藝的消息入口僅出現(xiàn)在泡泡頁面的頂部，KEEP的消息入口在個(gè)人中心頁的頂部，二者都只有一個(gè)入口。

3.個(gè)人中心頁

消息中心頁入口放置在個(gè)人中心頁除頂部外的區(qū)域，重要程度一般，某些APP會在個(gè)人中心消息入口直接對其分類展示，用戶能快速地到達(dá)想去的消息分類。

波洞的消息中心入口在個(gè)人中心頁就分好了類別，用戶點(diǎn)擊進(jìn)入對應(yīng)的類別，消息頁內(nèi)部沒有做類別的劃分，相比放一個(gè)消息圖標(biāo)入口在個(gè)人中心頂部，更加直觀。

入口不一定只有一個(gè)，三種情況混合使用也是可以的，重點(diǎn)是方便用戶，引導(dǎo)用戶。即便入口位置本身不顯眼，加上紅點(diǎn)數(shù)字后一樣會被用戶看到的。

二、消息中心頁常見的組成模塊

消息中心頁的主要組成模塊有：分類消息導(dǎo)航、消息列表；輔助組成模塊有：搜索區(qū)、全部已讀、消息設(shè)置、通訊錄等。

1.主要的組成模塊

消息中心的主要組成模塊中消息列表是必不可少的（有些在下一級界面中），分類消息導(dǎo)航根據(jù)消息類別的多少不一定都有。

前文對消息中心的定義說過：消息中心頁是應(yīng)用內(nèi)系統(tǒng)發(fā)送給用戶的各種信息的一個(gè)集合頁面。集合頁面意味著消息本身被劃分成了各種類型，這時(shí)候適合的分類消息導(dǎo)航能幫助用戶快速找到需要的信息。

消息列表引導(dǎo)用戶進(jìn)入消息詳情頁，做為整個(gè)消息中心的核心，需要設(shè)計(jì)師根據(jù)產(chǎn)品需求盡可能多的考慮到囊括的信息類型，從而選擇合適的消息列表呈現(xiàn)形式。

在第三部分中會著重介紹4種不同的分類消息導(dǎo)航，第四部分介紹3種不同的消息內(nèi)容呈現(xiàn)形式。

2.輔助組成模塊

所謂輔助的組成模塊，就是不一定所有消息中心都有的，要結(jié)合產(chǎn)品實(shí)際情況增減。主要包括搜索區(qū)、全部已讀、消息設(shè)置、通訊錄等。

上圖中微博的消息中心基本包括了所有的輔助組成模塊，用戶可以收發(fā)消息，設(shè)置消息，搜索消息，形成了針對消息功能的一個(gè)閉環(huán)。像微博這種消息功能重要，類別多，有社交屬性的產(chǎn)品加入這些輔助功能是合適的，但不適合所有產(chǎn)品。

1）搜索區(qū)

用來在消息中心頁搜索消息、聯(lián)系人、群聊等的，僅適合消息中心頁用戶之間互動頻繁的產(chǎn)品，如即時(shí)通訊類、聊天頻繁的社群類產(chǎn)品。搜索區(qū)是全局搜索的根據(jù)產(chǎn)品自身性能選擇加入。

2）全部已讀/一鍵清除

對于用戶體量不算大，消息溝通還不太頻繁的產(chǎn)品可以不加。但對于消息溝通頻繁的產(chǎn)品，不加的話，可能會逼死強(qiáng)迫癥......

3）消息設(shè)置

用來設(shè)置消息提醒方式或屏蔽消息推送，大部分產(chǎn)品會將此功能放入設(shè)置中避免用戶關(guān)閉消息推送，放在消息中心雖可增加用戶體驗(yàn)，但也方便了用戶直接屏蔽消息。

4）通訊錄/發(fā)起聊天

常見在有好友通訊錄體系或關(guān)注粉絲體系的產(chǎn)品中。

三、消息中心頁分類導(dǎo)航方式的選擇

消息中心分類導(dǎo)航方式主要有四種：頂部固定圖標(biāo)導(dǎo)航、頂部Tab導(dǎo)航、列表導(dǎo)航、頂部Tab混合導(dǎo)航，接下來通過分析它們各自的優(yōu)缺點(diǎn)幫助你選擇合適的消息中心分類導(dǎo)航方式。

1.頂部固定圖標(biāo)導(dǎo)航

頂部固定展示重要的3~5個(gè)消息類別，消息列表按照發(fā)送的時(shí)間順序依次展示。

優(yōu)點(diǎn)：可以突出重點(diǎn)消息類別。

缺點(diǎn)：類別切換不方便，需要返回上一級重新進(jìn)入；超過5個(gè)類別后，其他類別只能歸入消息列表中。

2.頂部Tab導(dǎo)航

頂部純文字標(biāo)簽Tab導(dǎo)航，消息類別以標(biāo)簽的形式出現(xiàn)，可左右切換。

優(yōu)點(diǎn)：切換方便，類別可拓展性強(qiáng)，占據(jù)空間小，為消息列表留出更多的空間，純文字標(biāo)簽設(shè)計(jì)所需時(shí)間成本小。

缺點(diǎn)：分類標(biāo)簽不要超過9個(gè)，過多的標(biāo)簽用戶切換到后面的成本較高，容易被忽略。

3.列表導(dǎo)航

消息中心列表導(dǎo)航有分類列表導(dǎo)航和混合列表導(dǎo)航兩種形式。

1）分類列表導(dǎo)航

分類列表導(dǎo)航將不同的消息類別按照icon+文字的形式從上至下展示，左側(cè)是消息類別，右側(cè)是消息未讀紅點(diǎn)提醒，每一個(gè)列表對應(yīng)進(jìn)入一種消息類別。

優(yōu)點(diǎn)：類別可拓展性強(qiáng)，分類清晰，設(shè)計(jì)簡潔明了，適合輕量、極簡風(fēng)的消息中心頁。

缺點(diǎn)：到達(dá)具體消息內(nèi)容的路徑較長，不適合復(fù)雜的消息中心頁。

2）混合列表導(dǎo)航

消息列表與消息類別混合，按照消息發(fā)布時(shí)間順序以列表形式展示，常見于重社交、即時(shí)通訊類產(chǎn)品。

優(yōu)點(diǎn)：可拓展性極強(qiáng)，能容納各種類別的消息。

缺點(diǎn)：消息內(nèi)容太多后查找麻煩，需要配合搜索區(qū)使用，易產(chǎn)生閱讀疲勞。

4.頂部Tab混合導(dǎo)航

頂部Tab混合導(dǎo)航，進(jìn)一步對消息類別細(xì)致劃分，一級Tab標(biāo)簽一般會劃分為兩部分：通知及消息/私信，通知一般是產(chǎn)品發(fā)送的一些系統(tǒng)消息或推送，消息一般是用戶與用戶之間的互動消息（包括官方號的信息），私信主要是有關(guān)注粉絲體系的產(chǎn)品的分類。二級內(nèi)容根據(jù)需要選擇進(jìn)一步分類導(dǎo)航，如下圖：