首先我們來看一下不同APP的“消息”功能的頁面布局和按鈕設計如何:
以上3款APP分別為QQ、手機淘寶和人人都是產品經理APP。他們的“消息”功能在頁面布局、按鈕設計方面有明顯的不同。
一個功能點的頁面要如何設計,最根本的還是與產品自身的定位和用戶需求有關。
James Garrett在《用戶體驗要素——以用戶為中心的web設計》中將用戶體驗定義為產品與外界聯(lián)系并發(fā)揮作用的方式,并擬定了用戶體驗的5個層級要素:
- 戰(zhàn)略層:定義產品目標和用戶需求范圍
- 范圍層:將產品目標和用戶需求轉化為內容和功能
- 結構層:根據(jù)目標和需求進行交互設計與信息架構
- 框架層:確認詳細的界面外觀、導航和信息設計
- 表現(xiàn)層:用戶使用看到的界面,匯集內容、功能和美學設計
用戶在表現(xiàn)層所看到的功能設計(顏色、大小等)、交互方式和頁面布局等,取決于戰(zhàn)略層的產品目標和用戶需求,以達到實現(xiàn)APP功能以及使用戶擁有良好的用戶體驗的目的。
基本功能
接下來,詳細地分析三類APP的消息功能設計的原因:
1. 內容/社交類APP
對于內容和社交類的APP而言,消息中心是APP中一個非常重要的功能,通常會在一級導航欄中設置一個Tab,作為消息中心的入口。
像微信、QQ這類APP,聊天通訊作為其最核心的功能,消息中心自然是放在APP首頁的位置,并且每次打開APP的時候首先也是展示消息頁面。
小紅書和微博這類的消息中心主要承載了通知和聊天功能,集合了轉發(fā)、評論、贊、@等通知功能,以及官方與粉絲、粉絲與粉絲之間的聊天互動功能。
圖1為QQ、圖2為小紅書、圖3、4為微博
2. 電商類APP
對于電商類APP而言,在消息中心里告知用戶交易物流信息非常重要;并且因為網購商品無法看到實體商品,所以消費者通過消息對話向商家了解商品信息,幾乎是購買過程中都要涉及的步驟。此外,消息中心還會有一些互動、優(yōu)惠版塊等。
正因為消息功能使用頻率非常高,所以幾乎很多電商APP都會獨立出一個“消息”Tab按鈕,方便用戶快速進入消息中心入口。
圖1為淘寶、圖2為京東、圖3為盒馬鮮生
但是同樣為電商類APP,淘寶、京東和盒馬鮮生又有著很大的不同:淘寶和京東的都在一級導航欄中間,而盒馬鮮生的消息按鈕在首頁右上角一個很小的地方。產生這種的原因,主要是因為兩類電商APP的產品定位差異:
因此,盒馬鮮生的商品有一定的品質保證,所以避免了很多售前的資訊和售后的糾紛;以及其訂單完成時間較短,不需要經常使用消息功能。
3. 資訊類APP
資訊類APP的消息中心幾乎都是“我/我的”頁面中的鏈接或者按鈕,主要是因為資訊類APP的核心需求是文章內容閱讀,消息主要承載部分文章推送或者其他消息推送(在資訊APP中首頁其實已經會根據(jù)用戶愛好或訂閱而推薦閱讀),幾乎在使用過程中不需要使用到消息功能。
圖1為IT之家、圖2為36Kr、圖3為人人都是產品經理
總結:
通過上面的分析,一個功能的頁面布局和設計,取決于根據(jù)產品定位和用戶需求而決定的需求優(yōu)先級,消息功能在不同類型的APP的需求優(yōu)先級大概如下:
內容/社交類APP > 電商類APP > 資訊類APP > 工具類APP
其他功能
消息中心除了上述的聊天、私信、物流信息和狀態(tài)提示等功能外,消息中心還能成為APP提供更多功能的入口:
- 內容推送:現(xiàn)在很多APP將消息中心打造成類似于公眾號的形式;制作精美的文章,精準地推送給用戶,進行活動推廣。這類功能在音樂類APP—網易云音樂、蝦米音樂等經常會看到。
- 活動營銷:對于一些追求更多的付費和活動轉化的需求,會在消息中心推送一些鏈接,跳轉到優(yōu)惠活動頁面,或者推送一些優(yōu)惠券吸引用戶。這類功能主要屬于消息中心的服務通知,在生活服務類APP—美團(外賣)、大眾點評等經常會看到。
全文總結
上面分析了不同APP消息功能設計不同的原因以及消息中心的其他功能,我們可以知道消息中心是一個集聊天、狀態(tài)通知、互動、內容推送和活動營銷為一體的功能入口。設計APP的消息中心的時候還是要根據(jù)自身產品定位和用戶需求,由此來設計消息中心的頁面布局、位置,按鈕大?。伾┖瓦x擇性地選取其中符合自身產品的功能。
探索、思考、創(chuàng)造、分享。
我們從未?止步于專業(yè),期望為客戶提供更更前沿、更更有價值的服務。