发布时间:2018-10-10
APP应该如何设计“消息”功能?

首先我们来看一下不同APP的“消息”功能的页面布局和按钮设计如何:

以上3款APP分别为QQ、手机淘宝和人人都是产品经理APP。他们的“消息”功能在页面布局、按钮设计方面有明显的不同。

一个功能点的页面要如何设计,最根本的还是与产品自身的定位和用户需求有关。

James Garrett在《用户体验要素——以用户为中心的web设计》中将用户体验定义为产品与外界联系并发挥作用的方式,并拟定了用户体验的5个层级要素:

  1. 战略层:定义产品目标和用户需求范围
  2. 范围层:将产品目标和用户需求转化为内容和功能
  3. 结构层:根据目标和需求进行交互设计与信息架构
  4. 框架层:确认详细的界面外观、导航和信息设计
  5. 表现层:用户使用看到的界面,汇集内容、功能和美学设计

用户在表现层所看到的功能设计(颜色、大小等)、交互方式和页面布局等,取决于战略层的产品目标和用户需求,以达到实现APP功能以及使用户拥有良好的用户体验的目的。

基本功能

接下来,详细地分析三类APP的消息功能设计的原因:

1. 内容/社交类APP

对于内容和社交类的APP而言,消息中心是APP中一个非常重要的功能,通常会在一级导航栏中设置一个Tab,作为消息中心的入口。

像微信、QQ这类APP,聊天通讯作为其最核心的功能,消息中心自然是放在APP首页的位置,并且每次打开APP的时候首先也是展示消息页面。

小红书和微博这类的消息中心主要承载了通知和聊天功能,集合了转发、评论、赞、@等通知功能,以及官方与粉丝、粉丝与粉丝之间的聊天互动功能。

图1为QQ、图2为小红书、图3、4为微博

2. 电商类APP

对于电商类APP而言,在消息中心里告知用户交易物流信息非常重要;并且因为网购商品无法看到实体商品,所以消费者通过消息对话向商家了解商品信息,几乎是购买过程中都要涉及的步骤。此外,消息中心还会有一些互动、优惠版块等。

正因为消息功能使用频率非常高,所以几乎很多电商APP都会独立出一个“消息”Tab按钮,方便用户快速进入消息中心入口。

图1为淘宝、图2为京东、图3为盒马鲜生

但是同样为电商类APP,淘宝、京东和盒马鲜生又有着很大的不同:淘宝和京东的都在一级导航栏中间,而盒马鲜生的消息按钮在首页右上角一个很小的地方。产生这种的原因,主要是因为两类电商APP的产品定位差异:

因此,盒马鲜生的商品有一定的品质保证,所以避免了很多售前的资讯和售后的纠纷;以及其订单完成时间较短,不需要经常使用消息功能。

3. 资讯类APP

资讯类APP的消息中心几乎都是“我/我的”页面中的链接或者按钮,主要是因为资讯类APP的核心需求是文章内容阅读,消息主要承载部分文章推送或者其他消息推送(在资讯APP中首页其实已经会根据用户爱好或订阅而推荐阅读),几乎在使用过程中不需要使用到消息功能。

图1为IT之家、图2为36Kr、图3为人人都是产品经理

总结:

通过上面的分析,一个功能的页面布局和设计,取决于根据产品定位和用户需求而决定的需求优先级,消息功能在不同类型的APP的需求优先级大概如下:

内容/社交类APP > 电商类APP > 资讯类APP > 工具类APP

其他功能

消息中心除了上述的聊天、私信、物流信息和状态提示等功能外,消息中心还能成为APP提供更多功能的入口:

  • 内容推送:现在很多APP将消息中心打造成类似于公众号的形式;制作精美的文章,精准地推送给用户,进行活动推广。这类功能在音乐类APP—网易云音乐、虾米音乐等经常会看到。
  • 活动营销:对于一些追求更多的付费和活动转化的需求,会在消息中心推送一些链接,跳转到优惠活动页面,或者推送一些优惠券吸引用户。这类功能主要属于消息中心的服务通知,在生活服务类APP—美团(外卖)、大众点评等经常会看到。

全文总结

上面分析了不同APP消息功能设计不同的原因以及消息中心的其他功能,我们可以知道消息中心是一个集聊天、状态通知、互动、内容推送和活动营销为一体的功能入口。设计APP的消息中心的时候还是要根据自身产品定位和用户需求,由此来设计消息中心的页面布局、位置,按钮大小(颜色)和选择性地选取其中符合自身产品的功能。

 

我们能给的
远比您想的更多
提供您的电话号码,格加项目顾问将致电联系您。
等待时间:5分钟以内
400-138-6990