您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > APP

APP消息中心设计思考

时间:2022-08-10 09:33:32  来源:  作者:佐田

1.消息

1.1消息是什么?

消息一词,最早来源于《易经》的“天地盈虚,与时消息”,意思为“天地间的变化,丰盈或虚弱,都随着时间的推移而变化,有时消减有时滋长”,消息一词泛指盛衰、生灭,所以中国古代把客观世界的的枯荣、聚散、沉浮、升降、兴衰、动静、得失等等「变化中的事实」称之为“消息”。

到现代,人们把新鲜事统称为消息,也指新闻,其形式是利用简明的文字迅速、实时地报道最新事实。在日常生活中,我们通常会用“告诉你一条消息”“有什么新消息吗“等等常见用法来组句,此时的消息意为「新的的信息或事实」。

1.2消息的载体与信息的传递

消息的载体来自信息,而信息泛指人类社会传播的一切内容,信息通过文字、语言、电码、图像、色彩、光、气味、声音等渠道传播,人通过获得、识别自然界和社会的不同信息来区别不同事物,得以认识和改造世界。

在古代,人们通过飞鸽传书、钟声、鼓声、烽火台、狼烟、火光、孔明灯、记号等方式进行人与人之间信息的传递;而在现代,人们主要通过网络通讯进行信息的传递。

2. 消息中心

2.1App消息中心是什么?

在互联网应用产品中,消息中心是多数APP中不可或缺的功能模块,它可以帮助用户集中查看、处理各类消息。完整的消息中心页面包括消息中心入口、消息列表页、消息卡片页、消息落地页、消息横幅。在产品设计中,利用消息中心可以更好地将业务信息、功能状态、营销信息等触达至用户。

2.2APP消息通过哪些感官触达我们?

在互联网应用产品中,产品可以通过设备触达至人感官的有视觉、听觉、触觉三种类型,对应的信息种类为以下几种:

1.视觉:文字、图像、符号、视频
2.听觉:音频、声音
3.触觉:震动

2.3 APP消息类型

不同业务的APP产品,消息来源均有所不同,例如电商类消息来源主要是店铺客服对话消息;即时通讯类消息来源主要是人与人之间对话的消息;工具类消息来源主要是系统通知消息。随着产品业务的发展,消息的来源也会越来越复杂,越来越多元。消息类型可粗略分为三种,分别为功能型消息、内容型消息和营销类消息,每种消息类型的消息来源、重要性和频率控制各有不同,详情查看下表:

 


2.4APP消息的触达渠道

APP消息触达用户有多种渠道,不同的场景所匹配的渠道以及它们自身的提醒强度各有不同,一般情况下,APP内触达用户有九种渠道,分别为弹窗式消息触达、动作面板消息触达、浮层式消息触达、站内横幅式消息触达、消息中心列表触达、滚动栏式消息触达、snack bar式消息触达、 toast式消息触达、badge式消息触达。

 


 


 


3. 如何设计消息中心?

3.1消息入口设计

3.1.1 底部导航入口

 

底部导航栏固定于APP一级页面的底部,其位置最符合用户单手操作手机习惯,也是最容易、最快捷触达用户的位置,在产品设计中,底部导航栏一般会放置当前产品最主要的业务模块,重要程度高。

消息入口放置在底部导航一般分为以下几种情况:

1.核心业务为即时通讯、办公交流等产品,例如QQ、微信、钉钉、飞书等

2.核心业务离不开用户间沟通交流的产品,例如陌陌、微博、脉脉、BOOS直聘等

3.核心业务需要强消息触达场景的产品,例如淘宝、闲鱼、美团、58同城等

3.1.2产品一级页面入口

产品一级页面与一级导航栏分别对应,承载了当前导航下所在业务细节,在产品设计中,消息中心入口放置在一级页面中,说明该产品的消息业务弱于核心业务,重要程度中。

消息入口放置在一级页面中一般分为以下几种情况:

1.核心业务不能缺少消息触达场景的产品,例如京东、得物、今日头条、招商银行、小米有品等

2.核心业务中较少有消息处理场景的产品,例如同花顺、智行火车票、天猫精灵、wifi万能钥匙等

3.1.3侧边栏入口

侧边栏,又叫抽屉式导航,它的入口按钮一般在页面的左上角或者右上角,点击按钮之后会展开内容,内容可以是列表形式也可以是宫格形式。侧边栏有两个特点,一是可见性不好,边角的小图标入口用户容易忽略和忘记;二操作相对比较复杂,需要将手指移动至左上角,点击唤出内容,再次进行点击才能完成操作,所以侧边栏的核心思路就是隐藏非核心操作与功能,一般在产品业务或者功能非常多且复杂的时候需要到侧边栏。

消息入口放置在侧边栏中一般分为以下几种情况:

1.核心业务中消息处理频率比较低的产品,例如网易云音乐、咪咕音乐、酷我音乐等

3.1.4其他入口

除了以上几种常见的消息入口,还存在特殊的隐藏消息入口,例如在录屏直播场景下的产品,虎牙助手

3.2消息列表分类设计

3.2.1 不分类


 

3.2.2 按时间分类


3.2.3按行为来源分类

 

 


3.2.4按标签分类


3.2.5混合分类

 

 


33消息列表细节设计

3.3.1方形头像vs圆形头像


 

圆形:从形态上看,从圆形中心到各边的距离相等,观感上更加的圆滑、友爱,视觉聚焦区域仅有一个圆心,更能吸引我们的注意力。

方形:从形态上看,方形中心到各边的距离不相等,观感上有棱有角,比较严肃正式,视觉聚焦区域有五个,分别为直角的中心和四个角,更能感受到稳定可靠。

3.3.2气泡在左vs气泡在右

气泡在左侧:

1.当气泡在左侧头像上的时候,人的自然浏览顺序是:“who(谁)→how(多少条消息)→what(说了什么)”,从自然浏览顺序的角度来看,首先关注是谁,有几条消息,是什么内容。

2.从视觉动线的角度来看,呈现“F”型视觉浏览动线,并且眼睛扫描的很快,浏览效率更高,更关注阅读效率。

3.从视觉感官的角度来看,视觉重心集中在左侧一列,有一个明显的“左侧强,右侧弱”的视觉对比,整体来看更加清爽、简洁。

气泡在左侧案例:微信、支付宝、咸鱼、小红书

气泡在右侧:

1.当气泡在列表右侧的时候,人的自然浏览顺序是:“who(谁)→what(说了什么)→how(多少条消息)”,从自然浏览顺序的角度来看,首先关注是谁,是什么内容,有几条消息。

2.从视觉动线的角度来看,呈现Z字型视觉浏览动线,眼睛的扫描需要往复,效率不高,但用户阅停留时间更长,更关注内容。

3.从视觉感官的角度来看,视觉重心分布为左右侧两个竖列,左侧和右侧两列的视觉对比更加平均,整体来看更加平衡、丰富。

气泡在右侧案例:QQ、淘宝、抖音、快手、钉钉、拼多多、美团、得到、雪球等

3.3.3有搜索vs无搜索

 

当消息体量慢慢变大之后,加入消息搜索可以便捷用户的操作。

3.3.4 快捷操作设计

删除消息、免打扰、置顶等更多操作可以通过左滑手势进行完成。

3.4二级消息页卡片设计

3.4.1 可点击文字卡片


 

可点击文字卡片相对于图文卡片,比较简单,承载的往往是一些精简、重要、快捷的通知信息。

3.4.2 可点击图文卡片

可点击图文卡片常见于订阅号、官方消息等场景,它可以承载丰富的图文、音视频信息,一般用于复杂文章场合。

3.4.3 纯文字卡片

 

纯文字卡片相对于图文卡片,比较简单,承载的往往是一些精简、重要、快捷的通知信息。

3.5应用内横幅通知设计

3.5.1 通知类横幅


 

通知类横幅通知,一般用做站内的消息触达,消息类通知仅展示简要的消息,不强调是否有行为进行下一步,例如常见的通讯类消息、活动通知等。

3.5.2 行动类横幅

行动类横幅通知,一般用做站内的行为触达,行动类通知会在横幅通知上加一个行动按钮,例如:领取、回复、打开等,去强调或引导用户操作。

4..小结

本文一共三大部分,第一部分给大家详解了「消息」的释义,让大家对消息一词有一致的认知;第二部分进一步讲解是什么是「消息中心」,以及他的触达方式、类型和触达渠道;第三部分「如何设计消息中心」是本文的重点,也是从设计师角度梳理出的一些设计技巧,关于如何设计,又分为五个部分,分别为消息入口设计、消息列表分类设计、消息列表细节设计、消息卡片设计,以及横幅通知设计,每个部分都会用图文去讲解里边的原理和可适用范围,希望关于消息中心的设计思考可以为各位带来帮助。

@yibo



Tags:APP   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
TikTok确认正开发新App:有点像小红书 要抢扎克伯格生意
财联社4月10日讯(编辑 史正丞)种种迹象显示,凭借短视频应用火遍全球的TikTok,也开始考虑开拓新的业务线了。近几日不断有外国网友在社交媒体上分享称,收到TikTok应用的弹窗称,一款...【详细内容】
2024-04-10  Search: APP  点击:(8)  评论:(0)  加入收藏
苹果将允许游戏机模拟器登陆App Store
据The Verge报道,在欧盟开出巨额罚单和新的监管要求后,苹果于前日更新了App Store指南,显示其将首次允许游戏机模拟器登陆iOS设备。游戏机模拟器类软件一直以来都被苹果禁止,无...【详细内容】
2024-04-07  Search: APP  点击:(24)  评论:(0)  加入收藏
理想汽车上线“潮汐 App”:车内提供小憩模式、冥想模式
IT之家 4 月 6 日消息,理想汽车日前宣布,潮汐 App 现已上线理想 MEGA、理想 L 系列车型,号称为车主打造“专属休憩空间”。IT之家附官方介绍:小憩模式:潮汐独特的小憩助手,专为车...【详细内容】
2024-04-07  Search: APP  点击:(15)  评论:(0)  加入收藏
租赁车如何使用12123 APP处理违法 官方指南来了
快科技4月2日消息,对于租车的用户来说,租赁期间出现交通违章的话,需要携带租赁车辆行驶证前往当地交管部门处理违章,十分不便。为此,公安部于去年9月份推行了“租赁车交通违法处...【详细内容】
2024-04-03  Search: APP  点击:(15)  评论:(0)  加入收藏
记者调查App“免费试用”“低价享用”乱象:本想免费试用,结果被扣一年会员费?
“因为想用一个滤镜,下载了一款修图App软件,软件页面显示‘七天免费试用,到期自动续费98元,可随时取消’。我以为开通7天内免费,其间取消就不收费了,结果被直接扣了一年...【详细内容】
2024-04-01  Search: APP  点击:(11)  评论:(0)  加入收藏
“专业人员帮忙多退税”?别信!专家拆解仿冒个税App诈骗套路
2023年度个人所得税年度汇算办理时间为2024年3月1日至6月30日。“你的个人所得税申报了吗?”“退了多少税?”成为近期热门话题。工业和信息化部反诈专班发现,一些仿冒的“个人...【详细内容】
2024-03-31  Search: APP  点击:(14)  评论:(0)  加入收藏
关于Windows中AppData的相关知识,看这篇文章就可以了
如果AppData文件夹占用了你电脑上的太多空间,则需要清理AppData文件夹。下面是一些帮助你在Windows计算机上进行AppData清理的方法。什么是AppData文件夹AppData文件夹是保存...【详细内容】
2024-03-30  Search: APP  点击:(10)  评论:(0)  加入收藏
手把手教你如何修改12123APP的联系方式
输入新手机号→发送验证码并输入→确认信息点击确定。注意啦!如果密码忘记无法正常登录需要进行以下操作找回密码手机号正常使用密码忘记的情况如果手机号正常使用,交...【详细内容】
2024-03-30  Search: APP  点击:(14)  评论:(0)  加入收藏
抖音电商推出独立APP“抖音商城版”,主攻货架场景
图片来源:视觉中国近日,抖音电商近日推出了独立的“抖音商城版”APP。对此,抖音电商相关负责人向蓝鲸财经表示:“我们观察到部分用户在主动购物方面存在着旺盛的需求,为了更好地...【详细内容】
2024-03-26  Search: APP  点击:(13)  评论:(0)  加入收藏
抖音电商首次走出抖音,上线抖音商城版APP
3月26日消息,近日,字节上线了一款名为“抖音商城版”的APP,主打“超值好物省心选”,意在与淘宝、京东、拼多多等竞争。这也是抖音电商首次在抖音APP之外,推出综合性独立电商平台...【详细内容】
2024-03-26  Search: APP  点击:(10)  评论:(0)  加入收藏
▌简易百科推荐
如何构建基于大模型的App
ChatGPT 的出现让大模型再一次成为业界的关注热点,然而,并不是每个组织都要去训练及生成大模型的,而且各个组织的技术积累和计算资源也不太允许这样去做。更多的时候, 我们还是...【详细内容】
2023-09-27    喔家ArchiSelf  Tags:App   点击:(284)  评论:(0)  加入收藏
Google play应用成功上架要点——如何防止封号、拒审、下架?
Google Play是全球最大的移动应用商店之一,它是运行Android操作系统的设备的官方应用商店。它提供各种数字内容,包括应用程序(应用)、游戏、音乐、书籍等,包括免费和付费选项。这...【详细内容】
2023-08-18  Balen跨境说    Tags:Google play   点击:(269)  评论:(0)  加入收藏
微信公告将备案!App为何要备案?哪些需备案?怎样办理?
8月9日,微信公众平台运营中心发布了《关于开展微信小程序备案的通知》,表示微信公众平台ICP代备案管理系统将提供新增备案、变更备案、注销备案等服务,协助开发者完成微信小程...【详细内容】
2023-08-10    北京日报  Tags:   点击:(412)  评论:(0)  加入收藏
APP开发入门:了解主流的编程语言
在过去的几年里,有许多程序员开始学习和使用编程语言。这其中包括C、C++、 Java和 Python。尽管有许多语言可供选择,但大多数程序员都会选择最容易学习的编程语言。如今,有很多...【详细内容】
2023-07-28  爱尚网络科技    Tags:编程语言   点击:(179)  评论:(0)  加入收藏
App在线封装容易吗?是什么原理?
App在线封装是一种将网页应用封装成App的技术,通过这种技术,用户可以在不下载安装App的情况下,直接在浏览器中使用App的功能。相对于传统的App开发模式,App在线封装具有更低的开...【详细内容】
2023-06-30  李hh18122    Tags:App   点击:(242)  评论:(0)  加入收藏
APP原生开发和非原生的区别
我们都知道 APP开发的时候需要根据实际情况来选择合适的开发方式,而在 APP定制开发中要考虑功能、技术以及用户体验等多方面的问题,那么就有很多人会问到这个问题:APP原生开发...【详细内容】
2023-05-19  爱尚网络科技    Tags:APP原生开发   点击:(481)  评论:(0)  加入收藏
App开发中的人机交互:如何设计出符合人机交互原则的应用程序?
随着移动应用的普及,人们对于应用程序的期望也越来越高。一个优秀的App应用程序应该是易用、易学、易记和富有吸引力的,并且应该符合人机交互的基本原则。下面我们将详细讨论...【详细内容】
2023-05-17  跨境电商360  搜狐号  Tags:App开发   点击:(385)  评论:(0)  加入收藏
OA类APP的开发流程及注意事项
OA类APP的特点是方便交流,可以随时随地与同事进行工作上的沟通。尤其对于销售类的公司员工,移动APP非常符合他们的工作场景。他们经常出差或在外拜访客户,不方便在电脑上操作办...【详细内容】
2023-05-08  北京APP外包    Tags:APP   点击:(346)  评论:(0)  加入收藏
短视频app搭建的技术难点是什么?
近年来,短视频app的流行引起了广泛关注。越来越多的企业开始投入资源来开发短视频app,以满足用户的需求。然而,短视频app的开发过程中,存在许多技术难点需要解决。本文将深入分...【详细内容】
2023-04-24  玉柏科技勇哥说软件    Tags:app   点击:(275)  评论:(0)  加入收藏
短视频app搭建前需要注意哪些事项?
如果您正在考虑搭建一个短视频app,那么在开始之前,您需要注意以下几件事情:1. 确定您的目标受众在搭建短视频app之前,您需要确定您的目标受众。这将有助于您确定app的外观、功能...【详细内容】
2023-04-21  玉柏科技勇哥说软件    Tags:app   点击:(321)  评论:(0)  加入收藏
站内最新
站内热门
站内头条