手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

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

2024-5-16    資深UI設(shè)計(jì)者

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

 
 
 

教會大家如何設(shè)計(jì)消息中心

 

 

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

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

 

 

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

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

 

 

 

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

 

 

在互聯(lián)網(wǎng)應(yīng)用產(chǎn)品中,產(chǎn)品可以通過設(shè)備觸達(dá)至人感官的有視覺、聽覺、觸覺三種類型,對應(yīng)的信息種類為以下幾種:

1.視覺:文字、圖像、符號、視頻
2.聽覺:音頻、聲音
3.觸覺:震動

 

 

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

 

 

 

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

 

 

 

 

 

 

 

 

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

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

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

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

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

 

 

 

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

消息入口放置在一級頁面中一般分為以下幾種情況:

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

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

 

 

 

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

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

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

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

 

 

 

氣泡在左側(cè):

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

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

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

氣泡在左側(cè)案例:微信、支付寶、咸魚、小紅書等

 

氣泡在右側(cè):

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

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

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

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

 

 

 

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

 

 

 

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

 

 

 

 

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

 

 

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

 

 

 

純文字卡片相對于圖文卡片,比較簡單,承載的往往是一些精簡、重要、快捷的通知信息。

 

 

 

 

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

 

 

 

 

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

 

 

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

 



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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔