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

Kenshin

Kenshin

132
目录
  1. ${ item.innerText }

简悦与 160+ 个网站的故事。

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

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

简悦的官网 在这里,代码开源并托管在 Github 上,通过 Chrome Webstore 下载 或者 离线下载Telegram 群 方便沟通;以及 测试版下载通道,并上线 360安全浏览器 与 QQ浏览器。(注:简悦已升到 1.0.3 版,详细请看 简悦 1.0.3,让你离知识再近一步

简悦是什么

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

简单阅读,愉悦心情!
简单阅读,愉悦心情!

简悦的目标

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

使用简悦前后的区别
使用简悦前后的区别

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

阅读模式的痛点

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

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

简悦的思考与做法

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

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

简悦的特点

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

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

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

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

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

至此,简悦的最核心功能已经完成了,但这远远不够...

正如 「马斯洛的需求层次理论」一样,简悦不能只解决温饱问题,它还需要: 好看与定制化 。

简悦的设计语言

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

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

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

基于 Material design 设计方案后实际效果:

简悦 - 阅读模式
简悦 - 阅读模式

简悦 - 阅读模式 · 设置界面
简悦 - 阅读模式 · 设置界面

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

2/8 原则

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

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

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

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

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

简悦 1.0.1 的全部功能
简悦 1.0.1 的全部功能

简悦的另一个核心特色

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

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

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

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

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

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

简悦的遗憾

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

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

最后

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


171

Kenshin

Kenshin

Flex, 前端开发, Golang

已关注 关注
开发者说

开发者说

我们用过很多 App,却很少听过 App 背后的故事。在这里,聊聊作为开发者的心路历程以及产品背后的理念故事。

已关注 关注

App 打开

商务合作

bd@sspai.com

网站反馈

feedback@sspai.com