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

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

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

大家好,我叫 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;
  • 增强型聚焦模式;
  • 自定义主题;
  • 更加细致的中文阅读定制化;

最后

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

编辑于 2017-07-26

文章被以下专栏收录

    大家好,我叫 Kenshin,你可以叫我 KS;我是一名自由职业者、独立开发者;这里主要是关于自由职业与独立开发的一些感悟;你也可以通过 http://kenshin.wang 找到我。