web端消息中心设计分析——附原型资源分享

消息中心几乎已经成为了每个产品的「标配」,它让用户能够及时获取到需要知道的消息和提醒并进行处理,同时也让运营者能够有一个渠道能向用户发送重要通知。作为产品的设计者,我们并不能将所有消息一股脑儿地直接推送给用户,而是需要根据产品特性和消息类型来将消息合理有效地展示给用户,让用户能够「Get」到最重要的信息。

最近我研究了很多网站的消息中心设计,本文选取了其中5个比较有代表性的网站来和大家一起探讨一下。

同时,贴心如我,只分析不分享可不是我的作风,所以我也分享给了大家这几种常见消息中心的原型资源(完整资源见文末),有需要的小伙伴可以直接下载使用哟~

常见消息中心分析

1.知乎


知乎的消息中心采用了消息弹层+落地页的形式,弹层向用户展示消息中最核心的信息,让用户能够高效获取信息并快速判断是否需要进行处理。而落地页则是将所有信息以天为单位进行汇总展示,方便用户快速定位到某条消息。

知乎作为一个问答社区,有很多种不同的消息通知。但设计者并没有将所有类型全部单独自成一类进行展示,而是根据他们的重要程度和内在属性划分成了【消息】和【私信】两个大的类别,又将【消息】中所有通知划分成了【提醒】、【关注】、【感谢/赞】。让用户可以很快的对消息的属性做出判断。

在这里,知乎将【感谢/赞】单独分成一类,是因为这类操作是表达对知乎平台内容产出者的认同的最重要的方式,而被认同的感觉以及其所伴随的成就感能够鼓励用户更多地分享自己的学识、见解和经验,促进活跃。所以在设计消息分类时,我们不仅需要根据消息的逻辑类型来进行划分,也需要充分结合产品特性进行思考。


2.PMCAFF

PMCAFF是针对产品经理所创立的内容社区,功能相对比较简单,所以它的的消息中心也设计地非常简洁,只有一个汇总的落地页。

但在落地页中,PMCAFF将【邀请我回答的问题】从【全部通知】中单拎出来列为一个独立标签,并且这类消息不是点击标签就被标记为已读,而是需要用户前往回答或点击【忽略】才会被标记已读。这也体现出PMCAFF非常鼓励用户去产出,努力地在为用户营造一个好的UGC环境,让平台形成良性循环,同时加强自身平台的特色。


3.新浪微博

新浪微博的消息中心非常完善并且庞大,它作为一个社交平台,用户间的互动形态非常多,并且重要性比较接近,所以它将每种消息单独作为一个分类,方便用户进行筛选查看。

新浪微博没有采用类似知乎的消息弹层的形式,而是直接将用户从消息提醒引导到功能齐全的落地页,我认为主要有以下两点原因:一是因为新浪微博绝大多数消息都是来自对单条微博或评论的交互操作,而微博作为没有标题的图文信息,在弹层中并不方便展示其缩略信息;而是在落地页用户可以直接看到完整的前后文信息,并可以直接进行【回复】操作,能够促进用户进一步交流互动。


4.石墨文档

石墨文档是一款可以多人同时编辑同一文档和表格的在线协作文档工具,作为一款工具型产品,它的所有消息都是有关合作者的“协同协作”的通知,比如【添加协作者】、【评论】、【@】等。

工具类产品不同于其它平台类产品,消息并不是用户关注的重点,用户往往比较专注于自己的工作面板和当前的任务,并不希望常常被打扰。并且用户可能会直接通过任务本身(比如打开文档)就能看到【评论】和【@】等内容,而不需要通过消息中心一一查看。所以石墨文档将消息中心做的非常简洁轻量,数字提醒很弱,并且只有一个消息弹层来,让用户在有需要的时候「有迹可循」,不需要的时候也完全不会受影响。

当然,为了保证重要消息的接收,石墨会为【邀请协同】等重要通知发送邮件提醒,保证用户能够实时获取到重要通知。


5.Teambition

作为一个工具类产品,Teambition同样是采用了弹层的方式来设计消息中心。但Teambition的消息中心弹层非常大,不仅能够承载消息通知,还能直接在当前页对任务进行处理。当然,这样的设计和Teambition本身的产品功能和特性有很大关系,它的消息几乎都是和单个任务的操作相关,而单个任务的形态也相对简单,可以在弹层中完整展示和操作。所以设计者将消息通知和任务快捷处理都设计在弹层中,这样用户在工作中可以在不脱离当前的任务流程的情况下,快速高效地在当前页把事情处理完毕。

知乎、微博、PMCAFF都是平台型的网站,而石墨和Teambition是工具型的网站,因为属性不同所以消息中心的表达侧重点也就不同;而同样是平台型的网站,由于不同的产品定位、特性和功能,各个平台的消息中心最终呈现方式也各不相同。

所以我们在设计消息中心的时候,除了参考常见的设计形式外,一定要充分结合自身的产品特性、消息类型来进行思考,做到不仅能够向用户合理有效地传达各类信息,也能从产品设计上去引导用户完成我们想要鼓励用户进行的操作。


原型资源

分析的过程中我也做好了以上各个产品消息中心的原型,在这里一起分享给大家,希望能对你们有一些帮助!~

原型预览

资源链接

消息中心高保真原型

消息中心低保真原型

消息中心组件库

消息中心页面库


往期文章

「后台系统」原型模板合集

后台设计无从下手,微信后台用这7点教会你!——附原型资源分享

8种引导方式,7个设计要点,让你全面了解新手引导!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335