早上打开淘宝，我愣住了
今天早上我跟往常一样，习惯性地打开淘宝想看看有没有要补的东西。
结果一眼看过去，整个人都不好了。
咋回事？我的淘宝怎么变成黑白了？
我第一反应是手机坏了，赶紧擦了擦屏幕。
又重启了下App。
还是黑的。
我心想，不会是淘宝倒闭了吧？
不是手机坏了，是国家公祭日
等我仔细一看日期，才反应过来。
今天是12月13日，国家公祭日。
每年这个时候，淘宝、京东、拼多多这些大平台都会把网站和App变成黑白色调。
这是一种默哀和纪念的方式。
说起来挺惭愧的，我做了这么多年电商，居然每年都要”愣”这么一下。
前一秒还在想是不是公司要倒闭了，后一秒才想起来是公祭日。
这反应速度，也是没谁了。
淘宝这次的黑白效果，技术上咋实现的？
作为一个老电商人，我肯定不能只看表面。
我得研究研究，淘宝这黑白效果是怎么实现的。
我打开浏览器开发者工具，一顿研究。
发现了几个关键点：
方法一：CSS滤镜（grayscale）
这是最简单粗暴的方法。
只需要在CSS里面加一行代码：
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
就这么简单。
一行代码，整个网站瞬间变灰。
我之前做网站的时候也用过这招，真的超级好使。
方法二：更换图片资源
有些平台会选择把图片资源全部替换成黑白版本。
这样做的好处是兼容性更好，毕竟有些老浏览器不支持CSS滤镜。
但缺点也很明显，工作量太大了。
淘宝这么大的网站，图片资源成百上千万，全部换一遍？
疯了吧。
所以淘宝肯定是用的方法一，CSS滤镜。
简单、快速、效果好。
我第一次做”黑白网站”的惨痛经历
说到这里，我想起来我第一次做”黑白网站”的经历。
那还是2019年的事情。
当时也是国家公祭日，老板让我把公司官网改成黑白的。
我说：”行，简单。”
我想都没想，直接上了CSS滤镜。
结果出问题了。
公司的官网用的是IE8兼容模式（别问我为什么2019年还在用IE8，问就是客户要求）。
IE8不支持CSS滤镜。
页面没变灰就算了，还把整个布局搞崩了。
老板打开网站一看，直接炸了。
“你这是啥玩意？怎么乱七八糟的？”
我赶紧改。
最后没办法，只能用Photoshop把banner图一张张改成黑白的。
那天晚上我改图改到凌晨3点。
眼睛都快瞎了。
所以后来我再遇到这种需求，第一件事就是先问：”要不要兼容IE8？”
如果要，那就老老实实用PS改图吧。
虽然累，但至少不会翻车。
为什么电商平台都要搞黑白？
你可能会问，为啥电商平台都要在国家公祭日把网站改成黑白的？
其实这已经成了一种行业惯例。
从2014年开始，国家公祭日设立之后，各大互联网平台都会在这个日子进行”灰度”处理。
这是一种表达哀悼和尊重的方式。
说白了，就是”表态”。
你不搞黑白，用户会觉得你没良心。
搞了黑白，用户会觉得你”有温度”。
所以这事儿，不做不行。
我记得有一年，有个小电商平台忘了改黑白。
结果被用户在微博上骂惨了。
“连这个都不记得，还有什么良心？”
老板赶紧凌晨爬起来改网站。
所以现在大家都学乖了，提前一周就开始准备。
生怕忘了。
用户体验的争议：有人支持，有人吐槽
不过说实话，对于网站变黑白这件事，用户的反应也是两极分化。
有人觉得挺好的，有纪念意义。
也有人觉得麻烦。
“我就想买个东西，你给我看黑白的干嘛？影响心情。”
我之前在电商群里看到有人吐槽：
“大早上打开淘宝想买个东西，结果一看黑白的，瞬间没心情了。”
“感觉像是在参加葬礼。”
哈哈，这吐槽也是够直接的。
但总体来说，支持的声音还是占多数的。
毕竟这是一种态度。
你不支持，那就显得你格格不入。
其他平台都是怎么做的？
我研究了一下，除了淘宝，其他平台都是怎么搞黑白的。
京东
京东的做法跟淘宝类似，也是用CSS滤镜。
但京东会多一个细节：在首页顶部加一个灰色的横幅，写着”国家公祭日，勿忘国耻”。
这个细节我觉得挺好的，有教育意义。
拼多多
拼多多就比较”敷衍”了。
只是把logo和主色调改成了黑白，其他部分还是彩色的。
我估计是技术实力不够，或者懒得搞。
毕竟拼多多的技术团队，你懂的。
微信
微信的做法更狠。
直接把整个UI都改成黑白的，包括聊天界面。
你发消息的时候，看到的都是黑白的。
这个沉浸感就很强了。
不过也有人吐槽说，看着太压抑。
做电商的，这些日子要记住
作为一个电商人，我总结了一下，这些日子网站可能需要改成黑白的：
| 日期 | 事件 | 建议 |
|---|---|---|
| 12月13日 | 国家公祭日 | 必须改黑白 |
| 4月4日 | 清明节 | 可以改，也可以不改 |
| 5月12日 | 汶川地震纪念日 | 建议改 |
| 发生重大灾难时 | 比如地震、洪水等 | 根据情况决定 |
这里面，12月13日是国家公祭日，这个是必须改的。
不改就是政治错误。
其他的，看情况吧。
技术实现的最佳实践
如果你也想把自己的网站改成黑白的，我给你几个建议：
1. 用CSS滤镜，别用PS改图
除非你要兼容IE8，否则一律用CSS滤镜。
一行代码搞定，省时省力。
2. 提前测试兼容性
我那个2019年的惨痛经历，就是因为没有提前测试兼容性。
你要提前在不同浏览器、不同设备上测试一下。
确保没问题再上线。
3. 设置定时任务
别像我一样，每年都忘记。
写个定时任务，到了12月13日零点自动生效。
省心。
4. 记得恢复
这个很重要！
有一次我改完黑白，结果忘记恢复了。
过了三天，网站还是黑白的。
用户以为我们公司出啥事了。
赶紧改回来。
所以一定要设置自动恢复，比如12月14日零点自动取消滤镜。
一个真实案例：某电商平台的”翻车”
我再给你讲一个真实案例。
2020年的时候，某电商平台在国家公祭日把网站改成黑白的。
本来挺好的事情。
结果他们家的技术小哥，手一抖，把滤镜加错了地方。
只加在了PC端，移动端没加。
结果用户发现，手机上看到的还是彩色的，电脑上看到的是黑白的。
有人在微博上吐槽：”你们这是啥意思？手机端不哀悼，电脑端才哀悼？”
舆论一下就炸了。
平台赶紧发声明，说”技术故障，正在修复”。
然后连夜把移动端也改成了黑白的。
所以这事儿，看似简单，但其实挺考验细节的。
你要确保所有端都改到了。
PC端、移动端、App、小程序，一个都不能少。
淘宝这次的表现，我给8分
回过头来说淘宝。
我觉得淘宝这次的表现，整体还是不错的。
黑白效果做得很彻底，PC端、移动端、App都覆盖了。
页面加载速度也没受太大影响。
毕竟是用CSS滤镜实现的，对性能影响很小。
但为啥我只给8分？
扣两分的原因是：我觉得可以在首页加一些科普内容。
比如”国家公祭日的由来”、”南京大屠杀的历史”之类的。
让用户不只是看到黑白的页面，还能了解到背后的意义。
这样更有价值。
不过话说回来，淘宝毕竟是个电商平台，不是教育平台。
能做到这样，已经很不错了。
最后说两句
其实网站变黑白，看似是个小细节。
但背后反映的是一个企业的价值观。
你愿不愿意花时间去纪念、去哀悼，这体现了你的态度。
作为用户，我会更愿意支持那些”有温度”的平台。
作为电商从业者，我也建议大家，该纪念的日子，还是要认真对待。
别偷懒。
别敷衍。
用户看得到。
今天你打开淘宝看到黑白的页面，现在知道是为什么了吧？
如果觉得这篇文章有用，记得收藏一下。
明年12月13日，你就不会像我一样”愣”住了。
勿忘国耻，警钟长鸣。
本文作者：一个做了8年电商的老兵，每年12月13日都会”愣”一下。
本文来自投稿，不代表展天博客立场，如若转载，请注明出处：https://www.me900.com/535522.html
