关于消息设计的那些事儿

我们在做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:重心偏向于用户交流及产生内容的,消息入口放在个人中心,但详细展示页面则将常用功能单独设计,提高用户互动之间的效率及体验。

参考链接:

《APP应该如何设计“消息”功能?》

《如何构建一个便捷高效的App消息列表?》

海盐社(公众号)
作者: 潘团子

(0)

相关推荐

  • 干货集锦——20个最佳Bootstrap着陆页模板,快速网页设计不是事儿

    着陆页是网站上的一个至关重要的页面,一个好的着陆页,可以引导访客在登陆你的网站时进行一系列操作,进而达成注册,购买或者其他转化.因此,设计师们都必须精心设计着陆页,因为只有精心设计的页面才可以增加转化 ...

  • APP概念设计前后那些事儿(扩充作品集)

    学UI网老虎帮的五月妹子:"很多新手UI设计师缺少项目,而想要尝试App概念设计来进行练习或是筹备作品集时,常会有点无从下手的感觉.本篇文章想要通过自己的设计经历和大家分享一些设计思路和,阐 ...

  • 电商 APP 中消息按钮该如何设计

    在网上购物的过程中,发现不同 APP 中他们消息按钮摆放的位置也不同,有的放在底部 tab,有的放在页面顶部,他们这样设计的原因是什么?有哪些设计细节?这篇文章就和大家分享一下电商 APP 中消息按钮 ...

  • 学UI入门阶段到底要掌握哪些知识(UI第一阶段课程)

    写在之前:"这篇教程内容比较多,如果你是新手,能坚持每个知识点都搞明白的话,起码要半年的时间!如果你进来随便看一看就走了,那不能怪别人,是你自己不努力~!~~已经有很多新人在这里学完找到了高 ...

  • 结构化消息专为大屏而设计

    小编:屏幕越来越大,生活中带来更好的体验,但是做为设计师更要多思考一点.本文即为腾讯带来的分享.简而未减-结构化消息专为大屏而设计!随着大屏幕高清分辨率的普及,我们在打游戏.看电影.浏览美图时,总希望 ...

  • 授权弹窗设计那些事儿你都了解吗?

    当你注意到授权弹窗的重要性时,已经晚了. PM或者UE设计师在产品设计过程中,抓住了每一个点.每一个细节都是慢慢斟酌.但是直到上线后,才发现了最致命的一个问题.授权弹窗.很多前端开发工程师嫌麻烦,会将 ...

  • 从10个人性的角度讲解详情页设计的N种玩法!

    写在前面 @TTTing 以前我花了很多篇幅写Banner和专题页设计方面的文章,现在感觉是时候多写一些详情页方面的文章了,虽然服务于平台的设计师可能几乎不会需要设计详情页,但是对于服务于服务于店铺的 ...

  • [高清图]全新Win9概念版界面图 界面设计堪称惊艳

    目前,关于微软下一代操作系统Windows 9的传闻不断,据称在Windows 9中,我们将看到经典开始菜单的回归,以及改进后的Metro界面等等。 今天,设计师Martin Androvich就展示 ...

  • Apple Watch与Android Wear的交互设计哪个好?UI设计大比拼

    Apple Watch与Android Wear哪个更优秀?除了硬件上的对比,UI设计优劣也是一个很重要的参考条件。在11月18日,苹果公司正式发布了WatchKit开发工具,向大家展示了更多的App ...