APP應(yīng)該如何設(shè)計(jì)“消息”功能?

5 評(píng)論 18734 瀏覽 137 收藏 8 分鐘

“消息”是APP中的一個(gè)重要功能,主要提供消息推送和溝通交流的功能,但是不同APP的消息功能設(shè)計(jì)有很大不同。本篇文章我們來分析不同APP的消息功能設(shè)計(jì)不同的原因,以及“消息”能夠提供哪些功能。enjoy~

首先我們來看一下不同APP的“消息”功能的頁(yè)面布局和按鈕設(shè)計(jì)如何:

以上3款A(yù)PP分別為QQ、手機(jī)淘寶和人人都是產(chǎn)品經(jīng)理APP。他們的“消息”功能在頁(yè)面布局、按鈕設(shè)計(jì)方面有明顯的不同。

一個(gè)功能點(diǎn)的頁(yè)面要如何設(shè)計(jì),最根本的還是與產(chǎn)品自身的定位和用戶需求有關(guān)。

James Garrett在《用戶體驗(yàn)要素——以用戶為中心的web設(shè)計(jì)》中將用戶體驗(yàn)定義為產(chǎn)品與外界聯(lián)系并發(fā)揮作用的方式,并擬定了用戶體驗(yàn)的5個(gè)層級(jí)要素:

  1. 戰(zhàn)略層:定義產(chǎn)品目標(biāo)和用戶需求范圍
  2. 范圍層:將產(chǎn)品目標(biāo)和用戶需求轉(zhuǎn)化為內(nèi)容和功能
  3. 結(jié)構(gòu)層:根據(jù)目標(biāo)和需求進(jìn)行交互設(shè)計(jì)與信息架構(gòu)
  4. 框架層:確認(rèn)詳細(xì)的界面外觀、導(dǎo)航和信息設(shè)計(jì)
  5. 表現(xiàn)層:用戶使用看到的界面,匯集內(nèi)容、功能和美學(xué)設(shè)計(jì)

用戶在表現(xiàn)層所看到的功能設(shè)計(jì)(顏色、大小等)、交互方式和頁(yè)面布局等,取決于戰(zhàn)略層的產(chǎn)品目標(biāo)和用戶需求,以達(dá)到實(shí)現(xiàn)APP功能以及使用戶擁有良好的用戶體驗(yàn)的目的。

基本功能

接下來,詳細(xì)地分析三類APP的消息功能設(shè)計(jì)的原因:

1. 內(nèi)容/社交類APP

對(duì)于內(nèi)容和社交類的APP而言,消息中心是APP中一個(gè)非常重要的功能,通常會(huì)在一級(jí)導(dǎo)航欄中設(shè)置一個(gè)Tab,作為消息中心的入口。

像微信、QQ這類APP,聊天通訊作為其最核心的功能,消息中心自然是放在APP首頁(yè)的位置,并且每次打開APP的時(shí)候首先也是展示消息頁(yè)面。

小紅書和微博這類的消息中心主要承載了通知和聊天功能,集合了轉(zhuǎn)發(fā)、評(píng)論、贊、@等通知功能,以及官方與粉絲、粉絲與粉絲之間的聊天互動(dòng)功能。

圖1為QQ、圖2為小紅書、圖3、4為微博

2. 電商類APP

對(duì)于電商類APP而言,在消息中心里告知用戶交易物流信息非常重要;并且因?yàn)榫W(wǎng)購(gòu)商品無法看到實(shí)體商品,所以消費(fèi)者通過消息對(duì)話向商家了解商品信息,幾乎是購(gòu)買過程中都要涉及的步驟。此外,消息中心還會(huì)有一些互動(dòng)、優(yōu)惠版塊等。

正因?yàn)橄⒐δ苁褂妙l率非常高,所以幾乎很多電商APP都會(huì)獨(dú)立出一個(gè)“消息”Tab按鈕,方便用戶快速進(jìn)入消息中心入口。

圖1為淘寶、圖2為京東、圖3為盒馬鮮生

但是同樣為電商類APP,淘寶、京東和盒馬鮮生又有著很大的不同:淘寶和京東的都在一級(jí)導(dǎo)航欄中間,而盒馬鮮生的消息按鈕在首頁(yè)右上角一個(gè)很小的地方。產(chǎn)生這種的原因,主要是因?yàn)閮深愲娚藺PP的產(chǎn)品定位差異:

因此,盒馬鮮生的商品有一定的品質(zhì)保證,所以避免了很多售前的資訊和售后的糾紛;以及其訂單完成時(shí)間較短,不需要經(jīng)常使用消息功能。

3. 資訊類APP

資訊類APP的消息中心幾乎都是“我/我的”頁(yè)面中的鏈接或者按鈕,主要是因?yàn)橘Y訊類APP的核心需求是文章內(nèi)容閱讀,消息主要承載部分文章推送或者其他消息推送(在資訊APP中首頁(yè)其實(shí)已經(jīng)會(huì)根據(jù)用戶愛好或訂閱而推薦閱讀),幾乎在使用過程中不需要使用到消息功能。

圖1為IT之家、圖2為36Kr、圖3為人人都是產(chǎn)品經(jīng)理

總結(jié):

通過上面的分析,一個(gè)功能的頁(yè)面布局和設(shè)計(jì),取決于根據(jù)產(chǎn)品定位和用戶需求而決定的需求優(yōu)先級(jí),消息功能在不同類型的APP的需求優(yōu)先級(jí)大概如下:

內(nèi)容/社交類APP > 電商類APP > 資訊類APP > 工具類APP

其他功能

消息中心除了上述的聊天、私信、物流信息和狀態(tài)提示等功能外,消息中心還能成為APP提供更多功能的入口:

  • 內(nèi)容推送:現(xiàn)在很多APP將消息中心打造成類似于公眾號(hào)的形式;制作精美的文章,精準(zhǔn)地推送給用戶,進(jìn)行活動(dòng)推廣。這類功能在音樂類APP—網(wǎng)易云音樂、蝦米音樂等經(jīng)常會(huì)看到。
  • 活動(dòng)營(yíng)銷:對(duì)于一些追求更多的付費(fèi)和活動(dòng)轉(zhuǎn)化的需求,會(huì)在消息中心推送一些鏈接,跳轉(zhuǎn)到優(yōu)惠活動(dòng)頁(yè)面,或者推送一些優(yōu)惠券吸引用戶。這類功能主要屬于消息中心的服務(wù)通知,在生活服務(wù)類APP—美團(tuán)(外賣)、大眾點(diǎn)評(píng)等經(jīng)常會(huì)看到。

全文總結(jié)

上面分析了不同APP消息功能設(shè)計(jì)不同的原因以及消息中心的其他功能,我們可以知道消息中心是一個(gè)集聊天、狀態(tài)通知、互動(dòng)、內(nèi)容推送和活動(dòng)營(yíng)銷為一體的功能入口。設(shè)計(jì)APP的消息中心的時(shí)候還是要根據(jù)自身產(chǎn)品定位和用戶需求,由此來設(shè)計(jì)消息中心的頁(yè)面布局、位置,按鈕大小(顏色)和選擇性地選取其中符合自身產(chǎn)品的功能。

注:以上僅代表本人個(gè)人觀點(diǎn),如有錯(cuò)誤或補(bǔ)充,歡迎大家指出和討論。

 

本文由 @?xunkhun 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 后臺(tái)消息管理和設(shè)置部分呢

    來自上海 回復(fù)
  2. 從消息入口的設(shè)計(jì)可以遷移到任何功能入口的設(shè)計(jì):根據(jù)產(chǎn)品定位和用戶需求決定入口的位置、按鈕大小、樣式,以及功能要呈現(xiàn)的具體內(nèi)容。學(xué)習(xí)了,謝謝!

    來自四川 回復(fù)
  3. 電商類App的京東消息有錯(cuò)誤,現(xiàn)在的京東消息按鈕已經(jīng)變到首頁(yè)右上角了,希望您再將電商類的分析重新寫寫

    回復(fù)
    1. 寫的時(shí)候是最新IOS版本的京東APP,他的消息按鈕是和上面文章一樣的,放在一級(jí)導(dǎo)航欄中間的,你可以看一下你的手機(jī)中的京東APP

      來自廣東 回復(fù)
  4. 下個(gè)迭代剛好要做消息管理,頂一下

    回復(fù)