APP消息中心設(shè)計(jì)思考

 

 

消息一詞，最早來(lái)源于《易經(jīng)》的“天地盈虛，與時(shí)消息”，意思為“天地間的變化，豐盈或虛弱，都隨著時(shí)間的推移而變化，有時(shí)消減有時(shí)滋長(zhǎng)”，消息一詞泛指盛衰、生滅，所以中國(guó)古代把客觀世界的的枯榮、聚散、沉浮、升降、興衰、動(dòng)靜、得失等等「變化中的事實(shí)」稱(chēng)之為“消息”。

到現(xiàn)代，人們把新鮮事統(tǒng)稱(chēng)為消息，也指新聞，其形式是利用簡(jiǎn)明的文字迅速、實(shí)時(shí)的報(bào)道最新事實(shí)。在日常生活中，我們通常會(huì)用“告訴你一條消息”“有什么新消息嗎“等等常見(jiàn)用法來(lái)組句，此時(shí)的消息意為「新的的信息或事實(shí)」。

 

 

消息的載體來(lái)自信息，而信息泛指人類(lèi)社會(huì)傳播的一切內(nèi)容，信息通過(guò)文字、語(yǔ)言、電碼、圖像、色彩、光、氣味、聲音等渠道傳播，人通過(guò)獲得、識(shí)別自然界和社會(huì)的不同信息來(lái)區(qū)別不同事物，得以認(rèn)識(shí)和改造世界。

在古代，人們通過(guò)飛鴿傳書(shū)、鐘聲、鼓聲、烽火臺(tái)、狼煙、火光、孔明燈、記號(hào)等方式進(jìn)行人與人之間信息的傳遞；而在現(xiàn)代，人們主要通過(guò)網(wǎng)絡(luò)通訊進(jìn)行信息的傳遞。

 

 

 

在互聯(lián)網(wǎng)應(yīng)用產(chǎn)品中，消息中心是多數(shù)APP中不可或缺的功能模塊，它可以幫助用戶(hù)集中查看、處理各類(lèi)消息。完整的消息中心頁(yè)面包括消息中心入口、消息列表頁(yè)、消息卡片頁(yè)、消息落地頁(yè)、消息橫幅。在產(chǎn)品設(shè)計(jì)中，利用消息中心可以更好的將業(yè)務(wù)信息、功能狀態(tài)、營(yíng)銷(xiāo)信息等觸達(dá)至用戶(hù)。

 

 

在互聯(lián)網(wǎng)應(yīng)用產(chǎn)品中，產(chǎn)品可以通過(guò)設(shè)備觸達(dá)至人感官的有視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)三種類(lèi)型，對(duì)應(yīng)的信息種類(lèi)為以下幾種：

1.視覺(jué)：文字、圖像、符號(hào)、視頻
2.聽(tīng)覺(jué)：音頻、聲音
3.觸覺(jué)：震動(dòng)

 

 

不同業(yè)務(wù)的APP產(chǎn)品，消息來(lái)源均有所不同，例如電商類(lèi)消息來(lái)源主要是店鋪客服對(duì)話(huà)消息；即時(shí)通訊類(lèi)消息來(lái)源主要是人與人之間對(duì)話(huà)的消息；工具類(lèi)消息來(lái)源主要是系統(tǒng)通知消息。隨著產(chǎn)品業(yè)務(wù)的發(fā)展，消息的來(lái)源也會(huì)越來(lái)越復(fù)雜，越來(lái)越多元。消息類(lèi)型可粗略分為三種，分別為功能型消息、內(nèi)容型消息和營(yíng)銷(xiāo)類(lèi)消息，每種消息類(lèi)型的消息來(lái)源、重要性和頻率控制各有不同，詳情查看下表：

 

 

 

APP消息觸達(dá)用戶(hù)有多種渠道，不同的場(chǎng)景所匹配的渠道以及它們自身的提醒強(qiáng)度各有不同，一般情況下，APP內(nèi)觸達(dá)用戶(hù)有九種渠道，分別為彈窗式消息觸達(dá)、動(dòng)作面板消息觸達(dá)、浮層式消息觸達(dá)、站內(nèi)橫幅式消息觸達(dá)、消息中心列表觸達(dá)、滾動(dòng)欄式消息觸達(dá)、snack bar式消息觸達(dá)、 toast式消息觸達(dá)、badge式消息觸達(dá)。

 

 

 

 

 

 

 

 

底部導(dǎo)航欄固定于APP一級(jí)頁(yè)面的底部，其位置最符合用戶(hù)單手操作手機(jī)習(xí)慣，也是最容易、最快捷觸達(dá)用戶(hù)的位置，在產(chǎn)品設(shè)計(jì)中，底部導(dǎo)航欄一般會(huì)放置當(dāng)前產(chǎn)品最主要的業(yè)務(wù)模塊，重要程度高。

消息入口放置在底部導(dǎo)航一般分為以下幾種情況：

1.核心業(yè)務(wù)為即時(shí)通訊、辦公交流等產(chǎn)品，例如QQ、微信、釘釘、飛書(shū)等

2.核心業(yè)務(wù)離不開(kāi)用戶(hù)間溝通交流的產(chǎn)品，例如陌陌、微博、脈脈、BOOS直聘等

3.核心業(yè)務(wù)需要強(qiáng)消息觸達(dá)場(chǎng)景的產(chǎn)品，例如淘寶、閑魚(yú)、美團(tuán)、58同城等

 

 

 

產(chǎn)品一級(jí)頁(yè)面與以及導(dǎo)航欄分別對(duì)應(yīng)，承載了當(dāng)前導(dǎo)航下所在業(yè)務(wù)細(xì)節(jié)，在產(chǎn)品設(shè)計(jì)中，消息中心入口放置在一級(jí)頁(yè)面中，說(shuō)明該產(chǎn)品的消息業(yè)務(wù)弱于核心業(yè)務(wù)，重要程度中。

消息入口放置在一級(jí)頁(yè)面中一般分為以下幾種情況：

1.核心業(yè)務(wù)不能缺少消息觸達(dá)場(chǎng)景的產(chǎn)品，例如京東、得物、今日頭條、招商銀行、小米有品等

2.核心業(yè)務(wù)中較少有消息處理場(chǎng)景的產(chǎn)品，例如同花順、智行火車(chē)票、天貓精靈、WIFI萬(wàn)能鑰匙等

 

 

 

側(cè)邊欄，又叫抽屜式導(dǎo)航，它的入口按鈕一般在頁(yè)面的左上角或者右上角，點(diǎn)擊按鈕之后會(huì)展開(kāi)內(nèi)容，內(nèi)容可以是列表形式也可以是宮格形式。側(cè)邊欄有兩個(gè)特點(diǎn)，一是可見(jiàn)性不好，邊角的小圖標(biāo)入口用戶(hù)容易忽略和忘記；二操作相對(duì)比較復(fù)雜，需要將手指移動(dòng)至左上角，點(diǎn)擊喚出內(nèi)容，再次進(jìn)行點(diǎn)擊才能完成操作，所以側(cè)邊欄的核心思路就是隱藏非核心操作與功能，一般在產(chǎn)品業(yè)務(wù)或者功能非常多且復(fù)雜的時(shí)候需要到側(cè)邊欄。

消息入口放置在側(cè)邊欄中一般分為以下幾種情況：

1.核心業(yè)務(wù)中消息處理頻率比較低的產(chǎn)品，例如網(wǎng)易云音樂(lè)、咪咕音樂(lè)、酷我音樂(lè)等

 

 

 

除了以上幾種常見(jiàn)的消息入口，還存在特殊的隱藏消息入口，例如在錄屏直播場(chǎng)景下的產(chǎn)品，虎牙助手

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

圓形：從形態(tài)上看，從圓形中心到各邊的距離相等，觀感上更加的圓滑、友愛(ài)，視覺(jué)聚焦區(qū)域僅有一個(gè)圓心，更能吸引我們的注意力。

方形：從形態(tài)上看，方形中心到各邊的距離不相等，觀感上有棱有角，比較嚴(yán)肅正式，視覺(jué)聚焦區(qū)域有五個(gè)，分別為直角的中心和四個(gè)角，更能感受到穩(wěn)定可靠。

 

 

 

氣泡在左側(cè)：

1.當(dāng)氣泡在左側(cè)頭像上的時(shí)候，人的自然瀏覽順序是：“who（誰(shuí)）→how（多少條消息）→what（說(shuō)了什么）”，從自然瀏覽順序的角度來(lái)看，首先關(guān)注是誰(shuí)，有幾條消息，是什么內(nèi)容。

2.從視覺(jué)動(dòng)線的角度來(lái)看，呈現(xiàn)“F”型視覺(jué)瀏覽動(dòng)線，并且眼睛掃描的很快，瀏覽效率更高，更關(guān)注閱讀效率。

3.從視覺(jué)感官的角度來(lái)看，視覺(jué)重心集中在左側(cè)一列，有一個(gè)明顯的“左側(cè)強(qiáng)，右側(cè)弱”的視覺(jué)對(duì)比，整體來(lái)看更加清爽、簡(jiǎn)潔。

氣泡在左側(cè)案例：微信、支付寶、咸魚(yú)、小紅書(shū)等

 

氣泡在右側(cè)：

1.當(dāng)氣泡在列表右側(cè)的時(shí)候，人的自然瀏覽順序是：“who（誰(shuí)）→what（說(shuō)了什么）→how（多少條消息）”，從自然瀏覽順序的角度來(lái)看，首先關(guān)注是誰(shuí)，是什么內(nèi)容，有幾條消息。

2.從視覺(jué)動(dòng)線的角度來(lái)看，呈現(xiàn)Z字型視覺(jué)瀏覽動(dòng)線，眼睛的掃描需要往復(fù)，效率不高，但用戶(hù)閱停留時(shí)間更長(zhǎng)，更關(guān)注內(nèi)容。

3.從視覺(jué)感官的角度來(lái)看，視覺(jué)重心分布為左右側(cè)兩個(gè)豎列，左側(cè)和右側(cè)兩列的視覺(jué)對(duì)比更加平均，整體來(lái)看更加平衡、豐富。

氣泡在右側(cè)案例：QQ、淘寶、抖音、快手、釘釘、拼多多、美團(tuán)、得到、雪球等

 

 

 

當(dāng)消息體量慢慢變大之后，加入消息搜索可以便捷用戶(hù)的操作。

 

 

 

刪除消息、免打擾、置頂?shù)雀嗖僮骺梢酝ㄟ^(guò)左滑手勢(shì)進(jìn)行完成。

 

 

 

 

可點(diǎn)擊文字卡片相對(duì)于圖文卡片，比較簡(jiǎn)單，承載的往往是一些精簡(jiǎn)、重要、快捷的通知信息。

 

 

可點(diǎn)擊圖文卡片常見(jiàn)于訂閱號(hào)、官方消息等場(chǎng)景，它可以承載豐富的圖文、音視頻信息，一般用于復(fù)雜文章場(chǎng)合。

 

 

 

純文字卡片相對(duì)于圖文卡片，比較簡(jiǎn)單，承載的往往是一些精簡(jiǎn)、重要、快捷的通知信息。

 

 

 

 

通知類(lèi)橫幅通知，一般用做站內(nèi)的消息觸達(dá)，消息類(lèi)通知僅展示簡(jiǎn)要的消息，不強(qiáng)調(diào)是否有行為進(jìn)行下一步，例如常見(jiàn)的通訊類(lèi)消息、活動(dòng)通知等。

 

 

 

 

行動(dòng)類(lèi)橫幅通知，一般用做站內(nèi)的行為觸達(dá)，行動(dòng)類(lèi)通知會(huì)在橫幅通知上加一個(gè)行動(dòng)按鈕，例如：領(lǐng)取、回復(fù)、打開(kāi)等，去強(qiáng)調(diào)或引導(dǎo)用戶(hù)操作。

 

 

本文一共三大部分，第一部分給大家詳解了「消息」的釋義，讓大家對(duì)消息一詞先有一致的認(rèn)知；第二部分進(jìn)一步講解是什么是「消息中心」，以及他的觸達(dá)方式、類(lèi)型和觸達(dá)渠道；第三部分「如何設(shè)計(jì)消息中心」是本文的重點(diǎn)，也是從設(shè)計(jì)師角度梳理出的一些設(shè)計(jì)技巧，關(guān)于如何設(shè)計(jì)，又分為五個(gè)部分，分別為消息入口設(shè)計(jì)、消息列表分類(lèi)設(shè)計(jì)、消息列表細(xì)節(jié)設(shè)計(jì)、消息卡片設(shè)計(jì)，以及橫幅通知設(shè)計(jì)，每個(gè)部分都會(huì)用圖文去講解里邊的原理和可適用范圍，希望關(guān)于消息中心的設(shè)計(jì)思考可以為各位帶來(lái)幫助。

 

作者：一博大大
鏈接：https://www.zcool.com.cn/article/ZMTQzNTg2OA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。