作為APP標(biāo)配的消息中心，我們無(wú)時(shí)無(wú)刻不在與其打交道，看似千篇一律的設(shè)計(jì)實(shí)際上其中也有許多值得我們深入探討的內(nèi)容，今天我們一起從消息中心頁(yè)入口出發(fā)，一層一層剝開(kāi)它的秘密。
全文分為五個(gè)部分：
一、消息中心頁(yè)入口位置
二、消息中心頁(yè)常見(jiàn)的組成模塊
三、消息中心頁(yè)分類(lèi)導(dǎo)航方式的選擇
四、消息列表的呈現(xiàn)形式
五、劃重點(diǎn)
一、消息中心頁(yè)入口位置
消息中心頁(yè)是應(yīng)用內(nèi)系統(tǒng)發(fā)送給用戶(hù)的各種信息的一個(gè)集合頁(yè)面，它的本質(zhì)是與用戶(hù)互動(dòng)溝通。也就是說(shuō)，產(chǎn)品越是需要與用戶(hù)進(jìn)行溝通，消息中心的重要程度也就越高。
一般情況下，不同類(lèi)型的APP消息中心的重要程度為：社交通訊類(lèi)＞電商類(lèi)＞資訊類(lèi)＞工具類(lèi)
而消息中心頁(yè)的入口位置正好側(cè)面反映了其在產(chǎn)品中的重要程度。
1.底部導(dǎo)航欄
消息中心頁(yè)入口位置放在底部導(dǎo)航欄，屬于一級(jí)導(dǎo)航，重要程度很高，常見(jiàn)于即時(shí)通訊、社交社群類(lèi)產(chǎn)品，如下圖：
即時(shí)通訊類(lèi)的QQ，核心業(yè)務(wù)就是通訊交流，消息頁(yè)入口不僅放在底部導(dǎo)航欄，且做為APP的首頁(yè)。而微博作為最早的社群內(nèi)容類(lèi)產(chǎn)品，社交溝通需求也很高，固將消息中心入口放置在底部導(dǎo)航欄。
當(dāng)然也不是只有社交通訊類(lèi)產(chǎn)品會(huì)選擇該位置作為消息中心的入口，如下圖淘寶和小紅書(shū)也將消息中心入口放置在底部導(dǎo)航欄。
淘寶本是電商類(lèi)產(chǎn)品，消息入口放置在底部導(dǎo)航欄，結(jié)合官方號(hào)、內(nèi)容號(hào)、小黑群等功能，我的理解是淘寶是想通過(guò)社交溝通促使用戶(hù)更多的購(gòu)物。
小紅書(shū)主打生活內(nèi)容分享，輔助電商購(gòu)物，是現(xiàn)在比較常見(jiàn)的某個(gè)核心業(yè)務(wù)+社交的產(chǎn)品，這類(lèi)產(chǎn)品可根據(jù)自身一級(jí)導(dǎo)航類(lèi)別的多少?zèng)Q定是否將消息中心入口放置在底部導(dǎo)航欄。
2.頂部導(dǎo)航欄
消息中心頁(yè)入口放置在頂部導(dǎo)航欄，重要程度根據(jù)入口跟隨頁(yè)面的多少分成兩種情況：
1）幾乎每頁(yè)跟隨，重要程度較高
京東和豆瓣幾乎是每個(gè)一級(jí)頁(yè)面的頂部都有消息頁(yè)入口圖標(biāo)，京東甚至在一些二級(jí)頁(yè)面也還保留了頂部消息入口，方便用戶(hù)隨時(shí)查看。
2）僅在動(dòng)態(tài)頁(yè)、首頁(yè)或個(gè)人中心頂部有入口，重要程度較低
如上圖所示，愛(ài)奇藝的消息入口僅出現(xiàn)在泡泡頁(yè)面的頂部，KEEP的消息入口在個(gè)人中心頁(yè)的頂部，二者都只有一個(gè)入口。
3.個(gè)人中心頁(yè)
消息中心頁(yè)入口放置在個(gè)人中心頁(yè)除頂部外的區(qū)域，重要程度一般，某些APP會(huì)在個(gè)人中心消息入口直接對(duì)其分類(lèi)展示，用戶(hù)能快速地到達(dá)想去的消息分類(lèi)。
波洞的消息中心入口在個(gè)人中心頁(yè)就分好了類(lèi)別，用戶(hù)點(diǎn)擊進(jìn)入對(duì)應(yīng)的類(lèi)別，消息頁(yè)內(nèi)部沒(méi)有做類(lèi)別的劃分，相比放一個(gè)消息圖標(biāo)入口在個(gè)人中心頂部，更加直觀。
入口不一定只有一個(gè)，三種情況混合使用也是可以的，重點(diǎn)是方便用戶(hù)，引導(dǎo)用戶(hù)。即便入口位置本身不顯眼，加上紅點(diǎn)數(shù)字后一樣會(huì)被用戶(hù)看到的。
二、消息中心頁(yè)常見(jiàn)的組成模塊
消息中心頁(yè)的主要組成模塊有：分類(lèi)消息導(dǎo)航、消息列表；輔助組成模塊有：搜索區(qū)、全部已讀、消息設(shè)置、通訊錄等。
1.主要的組成模塊
消息中心的主要組成模塊中消息列表是必不可少的（有些在下一級(jí)界面中），分類(lèi)消息導(dǎo)航根據(jù)消息類(lèi)別的多少不一定都有。
前文對(duì)消息中心的定義說(shuō)過(guò)：消息中心頁(yè)是應(yīng)用內(nèi)系統(tǒng)發(fā)送給用戶(hù)的各種信息的一個(gè)集合頁(yè)面。集合頁(yè)面意味著消息本身被劃分成了各種類(lèi)型，這時(shí)候適合的分類(lèi)消息導(dǎo)航能幫助用戶(hù)快速找到需要的信息。
消息列表引導(dǎo)用戶(hù)進(jìn)入消息詳情頁(yè)，做為整個(gè)消息中心的核心，需要設(shè)計(jì)師根據(jù)產(chǎn)品需求盡可能多的考慮到囊括的信息類(lèi)型，從而選擇合適的消息列表呈現(xiàn)形式。
在第三部分中會(huì)著重介紹4種不同的分類(lèi)消息導(dǎo)航，第四部分介紹3種不同的消息內(nèi)容呈現(xiàn)形式。
2.輔助組成模塊
所謂輔助的組成模塊，就是不一定所有消息中心都有的，要結(jié)合產(chǎn)品實(shí)際情況增減。主要包括搜索區(qū)、全部已讀、消息設(shè)置、通訊錄等。
上圖中微博的消息中心基本包括了所有的輔助組成模塊，用戶(hù)可以收發(fā)消息，設(shè)置消息，搜索消息，形成了針對(duì)消息功能的一個(gè)閉環(huán)。像微博這種消息功能重要，類(lèi)別多，有社交屬性的產(chǎn)品加入這些輔助功能是合適的，但不適合所有產(chǎn)品。
1）搜索區(qū)
用來(lái)在消息中心頁(yè)搜索消息、聯(lián)系人、群聊等的，僅適合消息中心頁(yè)用戶(hù)之間互動(dòng)頻繁的產(chǎn)品，如即時(shí)通訊類(lèi)、聊天頻繁的社群類(lèi)產(chǎn)品。搜索區(qū)是全局搜索的根據(jù)產(chǎn)品自身性能選擇加入。
2）全部已讀/一鍵清除
對(duì)于用戶(hù)體量不算大，消息溝通還不太頻繁的產(chǎn)品可以不加。但對(duì)于消息溝通頻繁的產(chǎn)品，不加的話，可能會(huì)逼死強(qiáng)迫癥......
3）消息設(shè)置
用來(lái)設(shè)置消息提醒方式或屏蔽消息推送，大部分產(chǎn)品會(huì)將此功能放入設(shè)置中避免用戶(hù)關(guān)閉消息推送，放在消息中心雖可增加用戶(hù)體驗(yàn)，但也方便了用戶(hù)直接屏蔽消息。
4）通訊錄/發(fā)起聊天
常見(jiàn)在有好友通訊錄體系或關(guān)注粉絲體系的產(chǎn)品中。
三、消息中心頁(yè)分類(lèi)導(dǎo)航方式的選擇
消息中心分類(lèi)導(dǎo)航方式主要有四種：頂部固定圖標(biāo)導(dǎo)航、頂部Tab導(dǎo)航、列表導(dǎo)航、頂部Tab混合導(dǎo)航，接下來(lái)通過(guò)分析它們各自的優(yōu)缺點(diǎn)幫助你選擇合適的消息中心分類(lèi)導(dǎo)航方式。
1.頂部固定圖標(biāo)導(dǎo)航
頂部固定展示重要的3~5個(gè)消息類(lèi)別，消息列表按照發(fā)送的時(shí)間順序依次展示。
優(yōu)點(diǎn)：可以突出重點(diǎn)消息類(lèi)別。
缺點(diǎn)：類(lèi)別切換不方便，需要返回上一級(jí)重新進(jìn)入；超過(guò)5個(gè)類(lèi)別后，其他類(lèi)別只能歸入消息列表中。
2.頂部Tab導(dǎo)航
頂部純文字標(biāo)簽Tab導(dǎo)航，消息類(lèi)別以標(biāo)簽的形式出現(xiàn)，可左右切換。
優(yōu)點(diǎn)：切換方便，類(lèi)別可拓展性強(qiáng)，占據(jù)空間小，為消息列表留出更多的空間，純文字標(biāo)簽設(shè)計(jì)所需時(shí)間成本小。
缺點(diǎn)：分類(lèi)標(biāo)簽不要超過(guò)9個(gè)，過(guò)多的標(biāo)簽用戶(hù)切換到后面的成本較高，容易被忽略。
3.列表導(dǎo)航
消息中心列表導(dǎo)航有分類(lèi)列表導(dǎo)航和混合列表導(dǎo)航兩種形式。
1）分類(lèi)列表導(dǎo)航
分類(lèi)列表導(dǎo)航將不同的消息類(lèi)別按照icon+文字的形式從上至下展示，左側(cè)是消息類(lèi)別，右側(cè)是消息未讀紅點(diǎn)提醒，每一個(gè)列表對(duì)應(yīng)進(jìn)入一種消息類(lèi)別。
優(yōu)點(diǎn)：類(lèi)別可拓展性強(qiáng)，分類(lèi)清晰，設(shè)計(jì)簡(jiǎn)潔明了，適合輕量、極簡(jiǎn)風(fēng)的消息中心頁(yè)。
缺點(diǎn)：到達(dá)具體消息內(nèi)容的路徑較長(zhǎng)，不適合復(fù)雜的消息中心頁(yè)。
2）混合列表導(dǎo)航
消息列表與消息類(lèi)別混合，按照消息發(fā)布時(shí)間順序以列表形式展示，常見(jiàn)于重社交、即時(shí)通訊類(lèi)產(chǎn)品。
優(yōu)點(diǎn)：可拓展性極強(qiáng)，能容納各種類(lèi)別的消息。
缺點(diǎn)：消息內(nèi)容太多后查找麻煩，需要配合搜索區(qū)使用，易產(chǎn)生閱讀疲勞。
4.頂部Tab混合導(dǎo)航
頂部Tab混合導(dǎo)航，進(jìn)一步對(duì)消息類(lèi)別細(xì)致劃分，一級(jí)Tab標(biāo)簽一般會(huì)劃分為兩部分：通知及消息/私信，通知一般是產(chǎn)品發(fā)送的一些系統(tǒng)消息或推送，消息一般是用戶(hù)與用戶(hù)之間的互動(dòng)消息（包括官方號(hào)的信息），私信主要是有關(guān)注粉絲體系的產(chǎn)品的分類(lèi)。二級(jí)內(nèi)容根據(jù)需要選擇進(jìn)一步分類(lèi)導(dǎo)航，如下圖：
優(yōu)點(diǎn)：將消息做了更細(xì)致的劃分
缺點(diǎn)：有二級(jí)分類(lèi)的頁(yè)面占的空間大，消息列表展示空間少。
四、消息列表的呈現(xiàn)形式
消息列表是消息中心的核心，我們需要根據(jù)內(nèi)容類(lèi)型的不同選擇合適的呈現(xiàn)形式，便于用戶(hù)理解。主要的呈現(xiàn)形式有3種，分別是：icon/頭像+縮略?xún)?nèi)容列表、圖文列表、純文字列表。
1.icon/頭像+縮略?xún)?nèi)容列表
最常見(jiàn)的一種消息列表，以icon或頭像+縮略?xún)?nèi)容的形式展示，符合從左到右的瀏覽習(xí)慣，能承載多種類(lèi)型的消息，包括對(duì)話聊天類(lèi)、訂閱號(hào)、官方活動(dòng)、系統(tǒng)通知等等，需要引入下一級(jí)頁(yè)面展示消息詳情。適合大部分的產(chǎn)品。
2.圖文列表
消息列表采用圖文形式，對(duì)用戶(hù)更具吸引力，一般用在消息類(lèi)別比較單一的消息中心。常見(jiàn)的有上圖下文卡片（大圖）和左圖右文的展現(xiàn)形式。需要注意的是上圖下文（大圖）的展現(xiàn)形式對(duì)圖片質(zhì)量要求較高。常用在活動(dòng)消息、資訊消息。
3.純文字列表
消息列表以純文字形式展示，形式較單一，能展示較多的文字信息，常見(jiàn)于通知消息。
五、劃重點(diǎn)
本文主要通過(guò)消息入口位置、消息中心頁(yè)組成、消息中心頁(yè)分類(lèi)導(dǎo)航選擇、消息列表呈現(xiàn)形式介紹了消息中心頁(yè)的設(shè)計(jì)。
消息中心頁(yè)入口：底部導(dǎo)航欄、頂部導(dǎo)航欄、個(gè)人中心頁(yè)
消息中心頁(yè)組成模塊：分類(lèi)消息導(dǎo)航、消息列表；、搜索區(qū)、全部已讀、消息設(shè)置、通訊錄。
消息中心頁(yè)分類(lèi)導(dǎo)航：頂部固定圖標(biāo)導(dǎo)航、頂部Tab導(dǎo)航、列表導(dǎo)航、頂部Tab混合導(dǎo)航。
消息列表的呈現(xiàn)形成：icon/頭像+縮略?xún)?nèi)容列表、圖文列表、純文字列表。
轉(zhuǎn)自：站酷-人類(lèi)君