我是Firefox和Pocket的忠实用户, 甚至都没有注意到Firefox最近的版本都开始默认集成了Pocket插件. Pocket插件主要提供了这些功能: 1. 将网页保存到Pocket服务器, 在不同设备间进行同步. 2. 提取网页的内容, 去除干扰, 渲染成更适合阅读的版式. Firefox集成Pocket之后, 对于一些已经优化过的站点, 用户可以直接点击地址栏旁边的阅读模式按钮, 以阅读模式查看网页. 这个功能非常方便, 比如, 维基百科桌面版的字体比较小, 行的宽度太宽, 整体阅读体验不是很好, 转换成阅读模式后, 网页就被Pocket转换的更加容易阅读了.

链接样式的问题

虽然阅读模式已经大幅度的提升了维基百科的阅读体验, 但是还有进一步提升的空间. 我个人认为最大的问题是: 超链接的显示效果. 普通的网页的正文当中超链接的数量不会太多, 基本上只有三四处引用到别人地方会加上超链接, 而维基百科的内容页面中会有非常多的交叉引用和参考文献, 这些引用从内容的角度, 只是为读者提供辅助的相关信息, 提升文章的可信度. 但是Firefox的阅读模式, 会对这些超链接渲染成带下划线和亮蓝色的格式, 我认为, 这样的超链接, 是画蛇添足, 分散了用户的注意力, 应该进行修改.

我的设计方案

通常来说, 蓝色带下划线是超链接的默认样式, 在《点石成金》这本用户体验的书中, 作者告诉我们保持用户习惯的样式是最好. 但是在阅读模式里, 我们更关注的是文章本身的内容, 而不是内部的链接, 所以需要削弱链接的存在感.

从设计的角度来说, Firefox阅读模式的超链接同时使用了下划线和文字颜色两个设计元素, 所以, 要弱化的话, 只要两者取其一进行弱化就可以了. 第一种方案是保留下划线, 文字颜色与正文保持相同, 目前比较热门的博客服务medium就是这样做的. feedly是google reader关闭之后我选用的rss阅读服务, 它也提供了提取正文, 重新排版的功能, 在feedly中, 超链接的下划线的灰度一开始比较淡, 当鼠标悬停上去后, 灰度会更深一些.

第二种设计的方案是, 去掉下划线, 修改文字的颜色, 我觉得这种方案更适合维基百科这种有大量超链接的页面, 毕竟大量的线条也会干扰读者的视线. 接下来是颜色的选择. 我记得在以前学习图像学的时候, 曾经学到过人眼对亮度的变化更加敏感, 而这里我想要达到的效果就是弱化正文和引用的对比, 所以, 只要把亮度控制在相同的范围, 两者的对比就会小很多. 这里使用了Adobe的色彩服务, 可以快速的调色. 最后可以学习feedly的设计, 在用户鼠标悬停的时候对超链接加上下划线, 进行补偿.

实现方法

设计思路有了之后, 我去寻找实现方法, 很快就google到了解决方法: 使用Stylish这个Firefox插件来覆盖网页的css样式. 具体来说, 就是这样的步骤:

  1. 安装Stylish插件
  2. 创建一个新的配置
  3. 代码如下

新的stylish配置:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("about:reader?") {

    a,
    a:visited,
    a:hover,
    a:active {
      color: #738FA7 !important;
      text-decoration: none !important;
    }

}

我去掉了链接的下划线, 同时降低了链接的字体颜色的亮度和饱和度, 让链接不再那么出挑.

以下是对比图

修改Firefox阅读模式链接样式前: WorldHistory

修改Firefox阅读模式链接样式后: WorldHistory

总结

通过Stylish插件, 弱化了Firefox阅读模式的超链接显示效果, 提升了阅读维基百科时的体验.

希望对你有帮助

D3(Data Driven Documents)是一个流行的Javascript数据可视化库, 这里来简单的介绍一些D3的基本用法. 代码我都放在github repo 上了:https://github.com/pp2moonbird/d3Tutorial

D3环境搭建

首先我们用nodejs来搭建一个简单的web应用, 其实任何语言和框架都可以, 因为d3的基本操作只需要html, js和css就够了.

首先用express搭建一个脚手架, 并安装依赖的包

express d3Tutorial
npm install

然后在\public中创建一个pages文件夹, 创建一个脚手架页面, 就可以了, 可以参照skelton.html

启动nodejs, 然后访问http://localhost:3000/pages/skelton.html

npm start

D3的选择操作

d3的第一重要方法是它的选择操作, 选择操作可以通过DOM的语法来选择对应的页面元素, 然后进行一些操作

d3.select()

比如说在<script>中增加:

d3.select("body")
	.append("div")
	.text("hello d3");

d3.selectAll()

select方法选择的是第一个元素, 如果有一系列数据,然后要绑定到一系列页面元素上的话就需要使用selectAll()

d3.select("body")
	.selectAll("binding")
	.data(simpleArray)
	.enter()
	.append("div")
	.text(function(d) {return d;});

这段代码稍微复杂一些.

  • 首先, 它获取了body这个对象
  • 然后去选择binding对象, 但是这些对象还没有创建出来, 不过这没有关系, 后面会有解释
  • data()方法把这些还没有创建的对象和simpleArray关联(join)了起来
  • enter()方法会创建那些数据已经存在, 但展现层还没有存在的对象
  • 最后我们给这些对象创建了div, 并且添加了文本内容
  • 文本内容会遍历数组中的每一个元素, 然后返回其中的值

Data Join的概念

上面的那个例子其实就揭露了D3的最重要的一个概念, data join, 这个join并不是数据库sql操作中表和表的join, 而是数据(data)和展现层(visual)的join. 之所以借用join这个概念, 可能是因为d3的设计也是一种声明式编程方法(Declarative Programming), 而不是用for循环来指定创建多少个对象的指令式编程

参考这两个链接

人的五感中, 视觉获得的信息量是最大的. 在发明了文字之后, 书写和阅读变成为了信息传递最有效的方案. 现代的人几乎无时不刻在阅读, 有个笑话说上厕所的时候把旁边的洁厕剂的说明书读了30遍, 说明了人们对阅读有多么深的渴望.

对于传达信息的一方来说, 除了文字本身的内容, 文字展现的形式, 诸如字体, 颜色, 大小, 材质, 也会影响到接受者最终对信息的理解. 在这其中, 字体是一个很重要的因素, 因为在文字映入读者眼帘的那一刻, 字体本身所蕴含的意象, 就会在潜移默化中影响读者. 读者可以感受到强劲与温柔, 庄严与调皮, 复古或现代.

字体的获取

然而, 当我们打开系统自带的字体列表, 不免感到忧心忡忡, Windows自带的字体, 好像都不怎么好看. 而那些专业网站和杂志上的字体, 都是字体公司辛辛苦苦设计出来, 并且收费的.

难道就没有什么好看的免费字体吗? 天无绝人之路, google提供了一项免费的字体服务, 里面提供了600多种免费字体, 可以随意使用. 进入Google Font之后, 你可以根据不同条件搜索字体, 比如衬线, 无衬线. 然后Google会提供即时的预览. 此外, Google还提供这些额外的功能:

  1. 下载字体文件到本地
  2. 提供javascript代码, 让网站引用google提供的web font
  3. 选中字体, 跳转到typecast这个在线字体设计应用里进行进一步设计

免费字体推荐

There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action.

虽然有了免费字体库, 但是那么多字体, 一个个看怎么来得及呢? 好在有前人栽树, 请看这个网站: beautiful-web-type. 在这个网页设计中, 作者精选了十几种精美的网络字体, 配上文字和设计, 展现出这些字体的独特魅力.

基于他的列表, 我从无衬线(sans serif)和衬线(serif)两种西文字体大类中再精选两个, 推荐给大家.

无衬线 Sans Serif

无衬线字体, 是指那些笔画粗细一致的字体, 最最常见的字体就是Windows自带字体Arial了. 在数码时代, 因为无衬线字体的弯曲比较少, 线条比较分明, 适合作为大段文字的字体, 长时间阅读也不吃力. 同时, 作为标题使用, 也显得苍劲有力. 这里, 我要推荐的是Open SansLato这两种字体.

Open Sans

Open Sans字体比Arial字体在显示大段文字的效果上好很多, 因为它的字腔更大, 所以字与字之间的更宽, 上下的行距也比较宽. 比Arial宽敞多了.

下图是用typecast生成, 左为Arial, 右为Open Sans

Arial vs Open Sans

Lato

Lato也是一款无衬线字体, 它提供了非常丰富的字重的选择, 从细如发丝到非常粗重. 感觉很适合做各种标题

左为Lato-Regular, 右为Open Sans

Lato vs Open Sans

衬线

衬线字体(Serif), 主要是指带爪形装饰的西文字体. 最常见的就是Times New Roman这种字体了. 因为最初印刷行业都是使用衬线字体来印刷书籍的, 所以使用衬线字体会给人带来一种复古, 优雅的感觉. 但是在数码时代, 衬线字体因为过多的曲线, 不太适合字体大小较小的正文.

这里, 我要推荐的是CardoMerriweather

可以看到Cardo比较纤细, 营造出一种高端, 精致的感觉, 但是在电子屏幕上作为正文显示, 读起来比较吃力.

Merriweather更粗, 设计师还提供了Ultra Black字重, 作为标题显示显得非常掷地有声.

左为Merriweather, 右为Cardo

Merriweather vs Cardo

总结

以上总结了一下Google提供的免费字体, 欢迎大家尝试, 如果还有不错的选择, 也欢迎留下评论.

Web信息架构——设计大型网站(第3版)

这篇文章其实写于去年年初,现在搬到新的博客来。


我的工作是为企业的业务部门设计dashboard,dashboard是一种将数据高度浓缩再呈现的展示和分析方法。因此,我对信息架构这本书产生了兴趣。

《Web信息架构》的两位作者都是这个领域的专家。他们首先解释了信息架构是什么,对于网站来说,信息架构是在了解用户的信息需求后,设计的信息的展现和组织方式。有效的信息架构使得企业员工和网站用户能够更快的找到他们想要的信息,从而提高企业效率或者客户的满意度。

在介绍完信息架构的概况和重要性之后,作者开始说明信息架构体现在网站中的各个元素,主要分为组织系统,导航系统,搜索系统和labelling系统。前面三个系统对于现在的网民来说都不陌生,但是最后一个labelling因为翻译的原因,不太好理解。中文版把labelling翻译成了标签系统,我一开始还以为是标签云的标签(Tag),但其实,这里的labelling是对网站中每个文本元素命名的意思。如果没有规范的命名系统,网站的内容和标示,可能会缺乏统一性,让用户难以理解,为了解决这个问题,书中引入了一种叫做受控词表的方法,这个方法相当于建立了一套命名的主数据,一种命名的规范,当然,如何创建和维护受控词表也是一门学问。

接下来,本书介绍了进行信息架构的工作方法和流程。与一般软件开发工程一样,主要有研究用户需求,制定策略,设计,实施,维护,管理几个阶段。本书主要介绍了前三个阶段。作者认为,研究信息架构,主要从三个方面入手,分别是:情景,用户和内容。 情景,主要指客户所在的组织,他们的目标和流程等相关信息。用户,要研究用户对信息的需求和信息需求的行为,比如,员工想要在企业通讯录中寻找某个员工的联系电话,这是他的信息需求,他可能使用员工的姓名进行搜索,这是他的信息需求的行为。越是了解用户的需求和行为,越能设计出符合用户需求的信息架构。内容,主要指网站包含的各种内容,以及他们的所有权,格式,各种元数据。作者在书中为列举了研究这三个方面的不同方法,比如focus group,benchmark等等。

然后,作者进入了下一个阶段,制定策略,在这个阶段中,信息架构的工作者需要制定出整个信息架构项目的方针政策,例如信息架构的管理模式,使用的信息架构方法,还有建立信息架构时的侧重点等等。作者还专门介绍了这个阶段的流程方法:think,articulate,communicate,test。我觉得这四个词很有意义,我们在进行开发工作的时候,出了自己思考开干,更要去表达自己的理解和思考,让相关的人认可这些想法,或者快速的进行验证这些想法的可行性,而不是在最后验收阶段才发现重大的问题。

接下来,作者介绍了设计阶段的几种产出,有蓝图,线框图和受控词表。最后作者介绍了在实践中的一些要点,比如要对信息架构做推销,还有要考虑和组织的商业策略的关系,利用信息架构暴露出组织的业务策略的分歧点。

看完这本书,我除了了解了信息架构的概况之外,还学习到了一些新的方法论,比如受控词表和制定策略的流程。另外,我觉得这本书写的非常全面,提供了一种说明某一项工作的思维框架,首先说明工作的内容和重要性,然后介绍工作具体的内容,工作的流程,每一步的产出是什么,进入下一步的标志是什么。最后,作者表现出一种非常强的政治敏感性和大局观,除了做好信息架构的本职工作,了解客户(包括客户内部的政治环境),说服客户,也是很重要的工作。

2015年末尾的时候,我在搜索工程师文化的时候,找到这么一篇Open Culture Manifesto,在宣言的作者Martin的自我介绍里,有他自己整理的一些不错的软件开发的资源列表。这让我想起以前看到的一个数据可视化的博客的作者,也在自己的个人网站中列出了很多关于数据可视化的资源

我觉得这是一个很好的尝试,一个是对自己的已有的资源的整理,同时还能给其他人带来帮助,所以,最近我也整理了一份出来。可以直接点击站点右上角的Resources进行访问。