为了完美阅读模式这个小目标 ,我适配了 160+ 个网站,因此诞生了它 — 简悦 :沉浸式阅读的 Chrome 扩展

Kenshin Wang
Jul 25, 2017 · 6 min read

在 「知识爆炸 / 信息过载」 的当下,如果你有与我一样的 「阅读障碍」,相信本篇文章会对你所有帮助。

大家好,我叫 Kenshin,简悦的作者,本次想跟大家分享一下开发简悦的故事,希望大家能喜欢简悦。

马上使用

简悦的官网在这里,代码开源并托管在 Github ,通过 Chrome Webstore 下载 或者 离线下载Telegram 群 方便沟通,以及 测试版下载通道

简悦是什么

让你瞬间进入沉浸式阅读的 Chrome 扩展,类似 Safari 的阅读模式。
简悦的灵感来源于:「单阅读,愉心情」 之意!

简悦的目标

还原阅读的本质,提升你的阅读体验。

使用简悦前后的区别

更多实际效果图,请看 简悦 · 图赏

阅读模式的痛点

在简悦之前 Chrome 也有很多阅读模式的扩展,为什么我还要重复造轮子?

阅读模式的主要作用 「将标题、正文等提取出来,再整理为适合阅读的样子呈现在用户面前」。但由于每个页面的结构不一样,页面还有可能包含代码、防盗链的图片等资源,导致阅读模式呈现出来的效果差强人意。

既然阅读模式大多有上述的问题,自然简悦不能走老路!

简悦的思考与做法

通常情况下,一个人(长时间)阅读的网站相对来说固定,而这些网站的页面结构一般情况下也不会经常修改。

如果能逐一(根据每个页面不同的结构)适配这些网站,并且按照符合中文阅读的习惯生成页面即可。

简悦的特点

通过分析 Feedly / 即可 等阅读咨询类 网站 / App 的数据源,再加上精准适配,最后得到了:

简悦逐一适配了 160+ 个网站,并提取 标题,描述,正文,媒体资源( 图片/ 视频 )等,生成符合中文阅读的页面。

我将这种模式称为:阅读模式,这是简悦独创的功能,也是有别于其它同类产品的一大特色。

即便这样,如果遇到需要阅读但暂时未适配网址怎么办?所以在阅读模式的基础上,又增加了 :

聚焦模式:不改变当前网页的结构,只高亮需要阅读的段落,并隐藏掉其余部分,不分散用户的注意力,适合非适配阅读模式的网站,或者临时阅读。

至此,简悦的最核心功能已经完成了,但这远远不够。正如 「马斯洛的需求层次理论」一样,简悦不能只解决温饱问题,它还需要: 好看与定制化 。

简悦的设计语言

对于一个 Developer 来说,最大的问题不是代码如何敲?而是如何设计一个好看的界面…

还好万能的 Google 大神拯救了我们于水火:

Material design 一个符合现代化 UI 的设计语言,事无巨细的官方设计指导让非 Designer 的我们也可以设计出 严谨 / 美观 / 成熟 的 UI 界面。

简悦 — 阅读模式
简悦 — 阅读模式 · 控制栏界面
简悦 — 阅读模式 · 设置界面
简悦 — 设置界面
简悦 — 设置界面· 高级设定
简悦 — 稍后读

更多实际效果图,请看 简悦 · 图赏

2/8 原则

解决了如何才能好看的问题后,细节的设定就需要考虑了。根据 2/8 原则,一个过渡化的定制选项并不是一个好主意,所以就有了这个克制版功能定制:

  • 快捷键,方便键盘控,直接召唤 “阅读模式 / 聚焦模式”;
  • 自选字体,包括: 系统默认,苹果苹方,苹果幼圆,微软雅黑,谷歌思源;
  • 字体大小;
  • 三种版面:宽版,正常,窄版;
  • 分享功能;
  • 几种不同的主题模式,包括: 白练,灰青,素色,鸟之子色,青磁鼠,焦茶,御纳戸色,黒鸢等;
  • 导出 / 导入 配置文件;
  • 清除数据;
  • 自动/手动 通过网络 同步最新的 适配列表;

主题既定名字为 github, newsprint, gothic, engwrite… 等,为了更加突出以及表达中文,所以才将上述英文名称改为更加直观的中文颜色名(和色)。

随着用户的增多,既定的一些常规设定已经无法满足个性化需求了,所以 1.0.1 版又新增加了一些细节的定制,包括:

  • 支持 ESC 退出方式;
  • 阅读进度可隐藏;
  • 控制栏可隐藏;
  • 右键菜单可隐藏;
  • 已适配的网址可自动进入阅读模式`;
  • 手动添加未适配网址到阅读模式;
简悦 1.0.1 的全部功能

简悦的另一个核心特色

在开发并使用简悦的期间发现了一些问题,如:某些正文中包含了广告、正文中也包含了推广链接等干扰阅读体验的情况。所以,阅读模式还需要拥有更强大的个性定制化功能。

因此一个更灵活的高级定制功能出现在当前版本中:可编程的阅读模式,目前包括了:

  • HTML 节点
  • jQuery 语句
  • 正则表达式
  • 任意段落

以及,每个适配站点均支持以上方式,包括:

  • 标题
  • 描述
  • 正文
  • 排除列表

可编程的阅读模式的详细说明 请看这里

至此,简悦的开发及思考过程已经全部结束。

简悦的遗憾

目前简悦暂时未开放自行添加新站功能,当然这个功能会在 1.1.0 版本中出现;除此以外放在 TO-DO 列表的功能还包括:

  • 稍后读可以直接发送到 Pocket / Linnk;
  • 增强型聚焦模式;
  • 自定义主题;
  • 更加细致的中文阅读定制化;

最后

希望简悦可以还原阅读的本质,提升阅读体验。

Kenshin Wang

Written by

Full-stack developer,独立开发者,Chrome 扩展:简悦、简 Tab 以及 gnvm 作者,联系 http://kenshin.wang

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade