看看知名平台怎么做
站点 | 类型 | 支持情况 |
---|---|---|
Apple Newsroom | 非技术类博客 | 不支持 |
GitHub Blog | 技术类博客 | 不支持 |
Vue.js | 技术文档 | 不支持 |
简书、掘金 | 博客平台 | 全局开启 |
Stellar | 博客主题 | 可配置:默认关闭,但支持对某个图单独开启、全局支持 |
总结一下可以看到分为两大阵营:非平台类:不支持;平台类:全局支持。从这点可以看出,平台类是服务于博主的,而博主的需求各异,因此平台直接全局支持该功能比较省心。而非平台类,据我所知的几家都不支持,因为他们自己就是博主,直接服务于读者。看到这里你可能会产生疑惑,博主的服务对象也是读者,那为什么经过博主这一层就需要支持了?我的分析是:
提供一张图片很容易,但提供一张优质图片不容易
平台不能保证博主提供的图片质量,需要让用户自己放大来看细节,找到自己需要的信息;而非平台类博客自己能够保证内容质量,确保读者可以从图中一眼看到自己需要的信息。所以上面参考的各家做法都是思路清晰且合理的。
Stellar 支持的方案
既然如此,博客主题也是直接服务于博主的,那 Stellar 为什么不参考简书、掘金那样直接全局开启呢?因为我自己也是 Stellar 的用户,我希望我自己的网站能够做到像非平台类博客那样的优秀的阅读体验。
全局开启,给读者多一个选择,又有什么问题呢?
对于内容简单的博客来说没有问题,仅仅是浏览过程中鼠标光标不断变化产生了一点点干扰。但是对于带有丰富内容的博客来说,会有一些额外的处理成本,例如自定义表情(其本质是图片)、自定义图标(图片格式的),这些要么置之不顾,降低阅读体验,要么需要主题开发者进行兼容。所以 Stellar 的方案就是:优先按需选择,同时支持配置全局开启。博主可以从以下几种方案中选择适合自己的:
默认关闭,但支持对某个图单独开启:在 Stellar 里,这个插件它是按需加载的,也就是说如果一个页面没有任何地方用到,那么就不会加载插件,可以起到省流的作用。
全局开启:像博客平台一样,所有的图支持点击放大。
建议的做法
虽然 Stellar 支持,但回归主题,你真的希望读者需要点击才能看到需要看的内容吗?说白了,这就是一个偷懒的做法,本着为读者提供更好的阅读体验的目的,就不应该抛给读者一张超大图,内含很多无关内容。
适当的信息密度
花点时间加工图片,把与上下文表达无关的地方剪裁掉,无法剪裁的地方模糊化处理。少即是多:减少了无关信息干扰,读者不需要额外操作就能一眼得到有效信息。让读者花更少的时间看到更多有价值的内容,那么读者自然也会越来越多。
适当限制图片宽度
有些图片是竖图、局部细节小图,这些图片不能任其自动布局,铺满页面最大宽度,这样会在纵向占用很大的高度,影响阅读体验。限制宽度的效果可以参考《个人电脑作为办公设备时,我们如何保护隐私?》这篇文章的这两张小图:
在页面宽度逐渐调窄的过程中你会发现,起初这两张图的大小是没有发生变化的,说明页面宽度减少时,被压缩的是图片两侧的空白区域,直到页面宽度已经不足容纳设定好的图片最大宽度时,图片才开始进行缩放。第一张图看起来似乎是横向铺满的,但是实际上我填充了背景色,使两边的留白区域看起来和图片融为一体。