关于消息设计的那些事儿

我们在做APP的时候会发现，一个页面可能会有各种各样的消息提醒，主要提供消息推送和沟通交流的功能，在设计的时候网上查资料会发现有很多种不同的形式，但是具体要在我们设计的界面上使用哪一种，以及“消息”能够提供哪些功能，我们今天就通过四种不同的APP来研究和讨论。

目前市面上的APP类型大致可以分为通讯类APP，电商类APP，咨询类及工具类这四种。

通讯类APP

对于以通讯产品核心的APP来说，消息可以说是一个非常重要的功能，因此这类产品的消息入口大多都出现在底部tab栏上。如下图所示：

QQ和微信这类主打社交的产品，聊天是最核心的产品，所以消息放在了首页的位置，这么做的好处是作为用户使用的最多的功能，一打开就能看到，最简单的产品思路也是最便捷的，极大提高了用户体验。

小结：设计时消息列表为首页，以红点+数字的形式进行强提示，同时用户可以设置是否显示消息通知详情，保护了用户的隐私，而且系统的通知显示层级会低于用户消息。

社交资讯类APP

社交类APP就是让用户的在获取资讯的同时，产生交流和互动，因此消息在社交类APP中是属于获取主流程以外的附加流程，因为社交类的消息也都会在底部有一个单独的消息tab栏。如下图所示：

微博这类以内容社区为主的APP，消息模块承载了所有的内容互动和反馈的功能，因此也是将消息的入口放在了底部tab栏的位置上。将@、评论和点赞这些功能单独列出来，并且固定在屏幕的上方，主要原因是因为微博本身的一些产品定位就是咨询获取，点赞和评论能够很好的鼓励UGC产出。

而微信读书也在最近提高了消息的层级，收到消息时会出现浮层，用户点击进去看完还能再返回之前看的文章路径，提高了用户对于消息这一模块的体验，这也侧面说明了消息这一功能在内容类APP中的重要性也变得越来越强。

小结：考虑到消息对于此类产品的重要性，在做消息设计时，最好将用户使用的最多的几个功能固定位置摆放，可以是列表形式，也可以是宫格形式，以用户使用便捷为主。

电商类的APP

对于电商的APP来说，消息功能也是使用频率非常高的，目前来说电商的消息提醒按钮的位置分为两种，一种是在底部tab栏上，还有一种是位于顶部的操作栏上，我们来分别说明一下这两个情况。

1、在底部tab栏上的

电商里面目前根据我的观察，仅有下图的小红书和淘宝将消息模块做成了如同一个小型的社交平台，把消息放在了底部的tab栏上。如下图所示

小红书因为本身就是以UGC种草的社区带动产品销量，属于半个社交产品，因此消息的及时告知和反馈在产品中的地位是特别重要的。更多的用户互动能够提高UGC的产出以及用户之间的信任，增强用户对小红书的粘性和购买力。

淘宝是目前主流的唯一一个电商产品，将消息放在了底部，我的理解是因为淘宝店主与用户的互动会比别的电商强，淘宝的店主会拉群给用户定期发福利，关注的店主有活动也会定期发通知推送，以及有购买潜力的用户问已购买用户的互动部分。这也是因为淘宝的消息部分承担了一些运营的角色，使用频率特别高，而且交易持续时间长，易发生纠纷，因此将消息独立出来放在了底部。

他们都有一个共同的特点就是将使用频次比较高的功能，放在了金刚区的位置，这样做的原因也是为了提高用户打开消息能够第一时间看到自己所关注的信息，比如淘宝的物流信息和互动消息，以及小红书赞和评论，满足用户的需求，这也是我们设计的最终目的。

2、在首页顶部的

其他的电商类APP将消息提醒都是放在了首页搜索框的左右位置，之前京东也是将消息单独放在了底部tab栏的，但是现在也放在了首页的顶部。如下图所示：

对于这样的设计，我的看法是首先将按钮放在了首页的顶部，也是可以让用户一眼就能看到的，其次相比于淘宝其他的电商平台里的商家相对来说不是很杂，并且很多有线下自己的门店或者生产工厂，在用户心中品质是有所保障的，并且大部分都有自己的专属快递，交易时间短。

进入消息页面，展现形式仅仅是列表形式，并不同于上面所说的，将一些信息用区别设计形式展现在顶部，这也说明了在这些产品中消息对于用户并不重要，仅仅作为产品咨询时的一个沟通工具，用户与用户之间沟通的这种需求并不强。

而且目前来看，这些平台都没有像淘宝和小红书一样形成社区化，消息这个功能的使用频率相对较低，因此将按钮放在了首页，没有做一个单独的tab出来，且消息页面用列表的形式展示，并没有突出设计某一模块。

小结：因此针对电商类的消息提示，我们在设计的时候需要考虑到的首先是位置，然后是展现形式，分为两种情况：

1、如果产品比较复杂且用户之间交流比较多，则将消息按钮放在tab底部，且该页面将重点功能突出设计；

2、如果产品仅偏向于销售产品本身，消息功能承载的仅仅是与客服沟通及官方通知，则将消息按钮放在首页顶部，消息页面仅做列表展示，无突出功能设计。

工具类APP

工具类的APP由于其产品的定位，消息功能存在感很弱，几乎就是用来做官方通知的。不过下面要说的是一些特别的工具类消息列表，以工具为切入点，围绕产品的一些社交元素的。如下图所示：

上图中的keep和猫耳FM这两个都是属于工具类的产品，用户利用碎片化的时间健身或者听真人小说，消息入口都是在个人中心的界面里，推送都是围绕产品主题的产生的周边内容或者官方消息通知，加油和点赞都是用来鼓励UGC用户产生更多内容的一种手段，@是让用户能够更简单直接的互动。这种工具类想要营造一些社区氛围，提高用户粘性的，可以将点赞，@以及评论单独列出来。

小结：针对工具类的产品的设计，仅做官方的通知就在个人中心页面增加消息入口，展示形式以列表为主；而一些重心偏向于用户交流及产生内容的，消息入口也在个人中心，但详细展示页面则将常用的功能单独设计，提高用户互动之间的效率及体验。

总结

本文主要分享了消息设计在不同类型APP中的应用，结合今天的分析，总结起来主要有四个要点:

1、通讯类APP：设计时消息列表为首页，以红点和数字的形式提示，同时用户可以设置是否保护隐私，而且系统的通知显示层级会低于用户消息。

2、社交资讯类APP：在做消息设计时，将用户使用的最多的几个功能固定位置摆放，多种展现形式，以用户使用便捷为主。

3、电商类APP：产品比较复杂且用户之间交流比较多，则将消息按钮放在tab底部重点功能突出设计；产品仅偏向于销售产品，消息功能承载的内容仅为通知为主，消息按钮放在首页顶部，消息页面无突出功能设计。

4、工具类APP：重心偏向于用户交流及产生内容的，消息入口放在个人中心，但详细展示页面则将常用功能单独设计，提高用户互动之间的效率及体验。

参考链接：

http://www.woshipm.com/pd/1305557.html《APP应该如何设计“消息”功能？》

http://www.woshipm.com/pd/591022.html《如何构建一个便捷高效的App消息列表?》