![ee8f2e2fa05d8c4f1f3e25807293bb01.png](https://i-blog.csdnimg.cn/blog_migrate/2651c428e4bc374356dde7bf9443a628.png)
1. 视觉样式(长啥样),2.展示策略(啥时候出现)。
重点聊一下“视觉样式”。构成消息提醒视觉样式的核心元素有两个:
a. 色彩
看了下市面大部分产品对“小红点”的色彩解法,得出以下结论:
1大多数互联网产品的提示色采用的是“红色”;
猜测原因:大家本能的认为用“红色”总不会出错。
![051985310e249bcbb91c1e4d46dba096.png](https://i-blog.csdnimg.cn/blog_migrate/eb55b9c4b24ff0b19927b05373a985bb.jpeg)
追溯了下“小红点”的由来:它最早来自于黑莓手机系统。
在诺基亚一统天下的时代,新消息的提醒是图标+数字的形式。黑莓在2009年推出的9700系列,搭载的黑莓系统开始使用了带星号的小红点形式。
Apple公司在2013年注册了相关专利,并在iOS系统上开始正式使用。
![eba187571576ee85d4c1197ec786a7cf.png](https://i-blog.csdnimg.cn/blog_migrate/8a564b5569642ab1a7f9d51c5fae4a42.jpeg)
目前小红点已经变成了一个通用的提醒机制,且出现被滥用的趋势。
2“品牌主色”与“红色”接近的产品,大多倾向于采用“品牌主色”作为提示色;
猜测原因:“红色”和“橙红,玫红,粉红等相近主色”并存且柔和到一起时,页面会显得混乱,所以他们把自己“主色”也作为提示色。
![1280e3959b9e874e93d6486e76071190.png](https://i-blog.csdnimg.cn/blog_migrate/b14be9b18be57cf020a8685e05b80aea.jpeg)
不过这种处理手法也一般,还是乱。
3.虽然“黄色”也具备一定的警惕和提示性,但仅存在于少数的黑色界面产品中;
猜测原因:黄色在白色背景上看不清。
![935fb10ed48c65887389a849189c783a.png](https://i-blog.csdnimg.cn/blog_migrate/d907ec185074c2b9d52bbe0962e101a5.jpeg)
4.部分产品采用“两种消息提醒色”,进行分层处理(1级页面红色,2级页面其他颜色)。
猜测原因:1级页面强提醒,2级页面用弱级色彩,降低消息的打扰度,增加用户可控感。
![b36a875d7fd7add6c3ef197e2eed186c.png](https://i-blog.csdnimg.cn/blog_migrate/79a95754301a032c0cc129a289e5422a.jpeg)
![8a0d21af745b6d4a3ca2cb5f490d930a.png](https://i-blog.csdnimg.cn/blog_migrate/78dfafc62eba86a22383a09e3440f7a9.jpeg)
看到第4种方式时,我就很开心了,因为这就是我想找到的答案。平常用的时候没有意识到,在研究“小红点”的时候才发现他们设计的挺用心。
拿QQ邮箱举例:
![b75f52988379f382109a20cd3352c880.png](https://i-blog.csdnimg.cn/blog_migrate/4424f876d36211794e1326f3481c79e4.jpeg)
左图,当收件箱已经有4000多封未读邮件时,它并不是出红点,或者红点上“...”或“99+”来警示我。而仅是弱化的蓝底+数字,告诉我里面有多少封。
如果是红色,会有种逼迫我必须读完才消除,对于拥有4565条未读邮件的我,应该想死。而且对用户来说,并不一定每封邮件是非读不可的。
类似“每日悦读”,采用小红点通知,能够满足平台的可控权(合理的下发策略),进行流量的分配。
右图,二级页采用的也是蓝色点,将阅读的选择权交给用户,节省用户有限的注意力,不过多打扰。
基于以上分析,我觉得第四种处理方式同样适用于内容类产品,原因是:
1.像开头所说,用户对于内容型消息的“实时性”,“关系稳定性”较弱,因此对于较强提示带来干扰的忍耐度会更低。而“红色”给人给人非看不可,不看不消的印象。
基于内容型平台特点,其实并不是所有的消息都需要全局“红色”那么强化。“红色”可在一级界面保留,满足从平台角度的可控性即可。
2.“蓝色”是第二种辅助提示色的备选方案,从以下几个角度分析:
a.从互联网产品角度:蓝色在互联网产品中常被用作“更新”;
![05cd42dc39f2b814cab9106bc6f37939.png](https://i-blog.csdnimg.cn/blog_migrate/d3d89e93830477572e1af8e38b10e081.jpeg)
b.从交通系统色彩心理角度:蓝色有“指示性”作用;
![8091b568b557d22f5910c101d3bce2e1.png](https://i-blog.csdnimg.cn/blog_migrate/574b92e8eb28856b864bec223daf7b8c.jpeg)
当然,这也不是绝对的,有时候也得基于自己产品的主色进行具体问题具体分析。拓宽下大家对“内容类产品”消息提示的色彩思路,不用太局限于满屏“红”。
好,说完“色彩”接下来我们来聊聊“形状”。