无干扰阅读体验
⇨⇦
写在前面：文中所述来自于我在UXLS和WordCamp Zurich的讲话，在此，我再次感谢活动组织者的邀请以及他们的筹备工作。
几个月前，我难以自制的沉浸在Kenya Hara的《White》书中，不论是在混乱嘈杂的列车旅途还是在拥挤不堪的咖啡店里，我全然对周围的喧闹充耳不闻。作为设计师，这本书引起我如此料想不到的注意就像是一个启示。
专注于某件事对大多数人来说原本就是很困难的，特别在智能手机发展如此迅速的今天，难以数计的通知消息充斥着我们的生活。
现在我们拥有Readability，Instapaper，Adblocker这样的阅读工具，甚至说我们可以自由的阅读任何我们感兴趣的信息，但事实上呢？阅读范围的扩大并不代表我们阅读质量的提高。最终，仍还有大量的没被发现的，不引人注目的，没有被分享的，等待人阅读的文字存在。
这不是我们所期待的阅读时代
通过我们设计，重塑读者阅读体验是我们作为设计师的首要工作。
如何打造无干扰阅读体验？
打造无干扰阅读体验，首先，意味着要排除屏幕上任何可能成为干扰的因素。
The Bird Paradox
我将屏幕干扰这一概念称之为Bird-paradox。你可能玩过Flappy Bird，可这和无干扰又有什么关系呢？请接着看。
显而易见，整个游戏都是关于专注力。任何一点点的分心都将导致死亡，受伤，游戏结束，即便已经有大量的游戏攻略告诉你如何玩得更好，但都只有一个核心，不要去关注分数，仅仅是专注专注，不断的专注。
当然了，设计阅读体验和开发游戏不是一回事，但相似的对于专注力的渴求确是一致的。
接下来我们将接着探讨如何把读者从该死的阅读体验中解救出来。
版式&内容
显而易见，版式和内容很大程度上取决了我们所读所看的意义。
事实上，很多人都说他们已经尽可能的摘选了可读性高的美妙的文字内容，有时这并不是最重要的，要知道版式所起的作用更值得我们去注意。
请阅读Matthew Butterick’s practical typography guide
你将会发现这儿有些规则，甚至说诀窍，能完全有效提升阅读体验。差劲的排版也并不是看上去多糟糕，只是更容易让人们分心，放弃阅读罢了。
帮你还有你的读者一个忙吧，尽力去找到最合适的版式。
模仿需谨慎
盲目的将物理实体的体验照搬到数字媒体应用并不是一个好的设计，就如Erik Spiekermann曾说：
在阅读上，人们总是热爱他们习惯的。
过去，设计上对于书籍，报纸以及杂志实体的动作效仿能够被人接受是因为人们对纸媒时代的习惯。但现在不一样，数字媒体占据了人们的生活，我们已对以数码产品为媒介的阅读方式习以为常，也许可以尝试改变。
就拿翻页作比方，模仿真实翻书动作的轻击翻页一不小心可能会翻到随意的一页，读者就不得不重整思路。而Apple现在就为iBooks用户就提供了＂滚动翻页＂和＂轻击翻页＂的选择。当然了，如果你希望你的读者像真实读书一样体验数字阅读，你就把应用做得像书一样吧。
固定位置
在网页设计上，我们大量了使用了固定位置，不论是在全局选项，导航标志还有logo。让我们看一个例子：Focuslab LLC。一家来自美国的设计工作室：
Focuslab利用色彩，字形表现了他们的品牌，不论你合适滚动屏幕，这个标幅一直都固定在视图上方。
但是，并不是所有的logo设计都可以如此精美，值得占据这样大的空间。
当我们重新为Holtzbrinck.com（著名媒体公司）设计师，我们将所有的信息都糅合在同一页里，所以这是非常长的一页。因此我们想着必须给页面增添一个导航，以至于方便用户又不影响可读性。所以我们用了其他的方法解决：
当用户阅览时不仅可以利用手机自身的操作控制，还可以滑动右边的进度条调节。既满足了阅读体验又方便操作。
书签
书签和固定位置的设定有着很多相似之处，但实质却全然不同。因为，它最初并不是设定好的，而是根据读者的需要所决定。
尽管书签对可读性没有太大价值，但对于应用自身来说又非常的重要。当用户需要做个标记方便联系上下文阅读时，书签就必不可少。
侧边栏
当设计师开始他的设计时，首先，他会专注于将最重要的内容展示出来，此时，他也许会对自己的作品充满敬畏又相当满足。直到一个自以为聪明的同事路过，建议性的说了一句：＂诶，我觉得这里空白的地方可以加更多的东西，来一个侧边栏吧，人们都喜欢！＂
于是，设计师仿佛打开了潘多拉魔盒，将空白的地方不断填满不断填满，直到原本设计面目全非。
我觉得Oliver Reichenstein说过一句非常好的话：
你觉得你需要侧边栏，只是因为你自己就是个侧边栏，如此微不足道。
如果你真的非得要添加个侧边栏，我只能说你至少要确保它不会碍眼。动画效果，图片，还有醒目的边幅都会分散读者的注意力。
我再说一句，一旦你有了这个想法，请你一定要坚决的放弃，毫不犹豫的退格删除你写下的编码。忠告！
简洁动画
在我先前的文章Transitions中，我有提到如何有效利用切换和动画。就阅读的要求而言，任何移动，摇晃，弹跳都可能会影响阅读。
而在长篇文章的阅读中聪明的利用动话，适当的嵌入多媒体信息又可提升读者阅读体验。因此很难形容什么样的设计才是最好的，但我必须告诉你：在没有任何动画的影响下，读者关闭了当前页面的阅读，只能证明这篇文章不好。
以The Verge为例，当前这是一篇关于星战迷友的文章。当你使用不同的设备（OS X，Windows，Android）阅读时，阅读的界面和设计会有不同，但设计上真算得上是不错的体验。此处查看原文。
令人忧心的是，人们在看到第一个动画后，后文再次出现的动画不再那么有吸引力，而且还可能分散读者的注意力。
如果某些内容需要强调，我建议还是用尽可能简洁的动画吧。
广告
Brad Frost曾说广告就是垃圾，而我通过在广告工作的经验，确信在此我们应该客观一些。广告并不坏，恶心人的仅仅是糟糕的广告和糟糕的广告布局，我们对此避之不及。太多理由证明广告有时候是组成完整网页的一部分，只是广告从业者有些过头，给我们的屏幕添载了太多无用的信息。
庆幸我们知道怎么屏蔽广告，通过安装Adblocker，而那些迷信＂更多的广告更好的生活＂的人们也将发现他们处在一个无止境的黑洞。
广告无处不在，我想我们有必要开始解决这个问题。首先，不要像Forbes Magazine那样：
好吧，只有过分痴迷于冰淇淋的经理会将这样全然无关主题内容的广告添加到页面上，而且就算点开了，也可能会发现这个品牌在你的国家根本不存在。
那些重视自己时间的人也做了一些改进：
固定的标题栏，极具诱惑的箭头还有底部的横标。所有的功能似乎都完备了，但也十足的吸引了读者的注意力。
结果就是：放弃了阅读。首先，整个页面内容看起来太廉价了，让人分心，没有效率而且有不适感。第二，这种设计不仅搅扰了原文作者的内容而且读者阅读起来也很困难。人们也许会像最初那样用工具移除视觉＂噪音＂，或者找到其他更合适的阅读方式。
不得不承认，除了广告，要完全的注意力高度集中保持阅读是非常困难的，在手机上更是如此。在此我想给你一些建议：
不要让读者猜这是不是广告。
Quartz Magazine仅仅只在文章页面的底部展示广告，这似乎是非常聪明的做法。
他们尝试过很多不同的设计了解到只有当广告非常棒的时候，才有可能被人们接受。而且质量代表着一切。
广告在今天的时代面临着很大的挑战，对此我也没法给出最佳答案，我只知道我们还能做得更好。通过精心的设计，选择合适的广告，我相信我们能在用户阅读体验和合作伙伴的工作中得到保证。
页码
当你浏览网页时，通常都会希望能够快速的浏览直到找到你需要的信息。不幸的只是那个设计页码的人没法完全考虑到你的需求。最后你只能无止尽的点击下一页：
也许你能够设计出最漂亮的翻页按钮，但没有人会在乎。要知道，人们打开网页不是为了点下一页，他们需要的是实用信息。人为的增加更多的页面是非常愚蠢的，有些人可能会觉得这样阅读会更加舒适，但读者真的不想去抱怨不停的滚动页面还是没找到自己想要的。
一些表明，用户接受滚动，但某些情况下，比起单页浏览，用户更喜欢通篇浏览，找到自己需要的页面。
给读者想要的
在我们开始阅读之前，实在有太多的链接了！
导航条
上／下一篇
评论
相似的文章
博客链接
等等
如果没有读者，Techcrunch这样的公司也没法存在。但是，在Techcrunch最近的设计中，仅仅占据页面三分之一的正文内容，你确定这是读者需要的么？
在选择过多的今天，就好比你去一家餐厅，这里有成百上千中可口的菜肴供你选择。该从哪里开始呢？该吃汉堡还是披萨？真的很难抉择。
而且不论你做了什么选择，你都会想觉得也许别的选择会更好。
过多选择，过多浪费。
用户在阅读时也有同样的感受，他们总在想也许下一篇文章要比现在读得要好，不断的思想挣扎，产生了过度认知。
从信息的索取上来看，人们习惯于循序渐进。在多数情况下，他们更喜欢直接通过搜索引擎而不是信息量巨大的网页来寻找自己所需要的信息。用户唯一关心的也仅仅是那些内容对他而言是有用的。
Mandy Brown写作一篇文章，在最后一个章节曾说，必须得最终每一个读者的需求。从吸引他阅读到让他独自阅览，直到最后提供给他有价值的信息。
图片
图片对于我们阅览网页时的体验有很大的影响，因为他们能够快速有效的给我们大脑直接的反应：情绪。
然而，我们却很少讨论到如何有效地利用图片，并且不使读者分心。举个例子：
有个来自Kissmetics分析说，图片的位置对于人们浏览网页的行为有着直接影响。他们发现必须保证页眉图片是单纯明了的，不会使人分心，否则，不论你什么时候开始阅读，他都可能会影响你。
另一个有趣的事实是关于内嵌图片和标题。据说标题的阅读次数比实际正文要多300倍次。所以，你最好保证这些标题不会有什么更吸引人注意的变化。
内嵌图片最好安排在正文的右侧，这将利于读者更舒适的阅读。要知道，读者的视线要不停的从行与行之间进行转换。
对比下图中内嵌图片的布局，是否觉得我说的话很有道理？
看看这幅图？更特别了，那我们该如何利用这种大尺寸的图片呢？
很明显，这种图片会利用他们的视觉优势分散读者的注意力。
但这种图片对文章来说有用么？根本是垃圾。谁要知道他们在交谈什么？他们是在展示他们用了很贵的笔么？这些人的电脑是来自于1999么？天啊。
这类图片充斥在我们周围，我也真诚的希望在你读我的文章时没有影响到你。所以是，在我们使用图片是务必要谨慎，要知道除了造成干扰，这些图片还会是网页载入的时间变得更慢。
写在最后