科技助力经济发展

© 2024  TMTforum  沪ICP备15013635号-21
首页 声音 项目 正文

什么是好的阅读体验？

作者：云野听风 时间：2013-01-22 0

在品牌营销中有句著名的话：“顾客不是要买个钻头，他们想买的可能只是个洞。”设计师在设计产品时，需要多想想用户是为何要使用你的产品，他们在哪些情境下会用到哪些操作及阅读的方式。那么什么是好的阅读体验呢？这个不能一概而论，因为阅读的体验分为各种情境，如：快速浏览、深度阅读、拿到PAD在床上阅读、在公车上用手机阅读等。每种阅读的体验都是不一样的，所以设计时也要根据用户的使用场景来定。

在设计的技巧上，字体类型、大小、字体颜色、行宽、行距、插图的风格、图文的比例、背景色、页边距、文章的留白等都是影响阅读体验的要素。我们重点讨论下WEB端和移动端文章的阅读体验。

一、 WEB端上的文章阅读体验

很难想像用户在WEB端读一篇超过1万字的文章所带来的痛苦体验，更多时候用户都是在读下标题、文章里的插图、或者浏览下导读及分段的标题、或重要的段落。除非你在读喜欢的小说或要学习的文章。所以在一般情况下，用户更多的是在浏览网页，这个时候设计师应该考虑到的是文章排版如何能直接显示得更加易读。

1、 字体的大小和样式：

在pc版的WEB上，默认标准中文字体是：宋体、12-14PX。在读纸质书时，用宋体是一个比较折中或一般的选择，但我们知道，宋体在WEB上是没有抗锯齿显示的，这个时候用默认的字体来读一篇大段落的文章，眼睛看久了就会非常的不舒服。从微软VISTA出来后，微软雅黑渐渐成为一种利于阅读的字体。

上面两个图为同一个页面的两种显示字体：宋体及微软雅黑，显然下面一个更利用阅读

2、 字体的行距与行宽度

一般来说，字体的行距在1.5em~2em、行宽度在50〜70个中文字符，阅读起来比较轻松。

上图：无觅阅读中采用行距及行宽度

3、 字体的颜色及文章的背景颜色

上图：ft中文网的字体颜色及背景颜色

上图：豆瓣读书栏目中的字体颜色及背景颜色

字体的颜色与背景色间的对比应不宜过于强烈，这样阅读起来会比较平缓，视觉上的体验也比较好。如上图FT中文网中，背景做成土黄色，也是参考实物报刊杂志的做法。另外很多网页设计师抛弃了全黑（＃000）字体颜色或全白（＃fff）的背景底色，而是用深灰作为字体颜色或浅灰作为背景颜色。

4、 字体大小的设置

在一般情况下，设计师们设计一个默认的、最适合阅读的文字大小，足以让大部份用户满意，但有时我们也需要考虑到特殊用户的习惯及生理特点。如中老年及视力不好的用户，这个时候他们可能需要更大的字体、更高行间距才能适应原有的阅读习惯，所以如有必要，设计时也需要对这类用户进行关怀。

上图：各大门户网站的新闻正文中都有字体大小的设置

5、 滚动条还是分页？

有时候一篇文章很长，是设计成用默认的滚动条还是分页？其实这两种方式都是可行的，研究证明，用户还是更易接受传统的滚动条形式，它不需要来回移动鼠标点击下一页，点击按钮无形中增加了一个交互的动作。当然，分页的形式也有好处：页面的加载速度更快，特别是很长的图文页面时。

上图：easyicon.com中可以用键盘的“←”及“→”来翻页

分页能否采取一个更好的交互方式呢？嗯，也是有办法的，比如利用键盘中的“←” “→”或“空格”键来切换上一页或下一页，这时阅读时就可以解放鼠标的操作而直接使用键盘，这样的交互会更加便利。

二、移动端上的文章阅读体验

现在各种都市生活的忙碌及年青人的浮躁，加上各类移动端应用的流行，用户更多是用零碎的时间进行碎片化的阅读，包括各种智能手机及PAD上的阅读。

1、 手机上的阅读

手机因受限屏幕尺寸的大小，需要一个全屏模式来阅读，手指点击屏幕来切换操作栏。滚动条的方式比翻页方式更容易操作，且能减轻手指长时间操作的疲劳感。

上图：pocket中手指点击屏幕切换到全屏模式

另外，当文章图文混排的时候，图片是嵌入到文字中（混排），还是单独的一行显示，个人感觉，在小屏幕（3.5寸以下）情况下，第二种方式会更好些。

左图：腾讯爱看采用图文混排，右图：网易新闻用单独行显示图片

2、 PAD上的阅读

PAD是介于手机和电脑的一种设备，由电子书发展而来。它的便携性不如手机，但又比笔记本轻便，操作方式与手机比较类似，但尺寸更大更利于阅读，一般在家中或办公场所使用，所以很多新闻类或杂志类的APP都能在上面获得很好的用户体验。

在很多APP阅读应用中，都直接借鉴了传统杂志的排版及布局方式，如真实翻页的效果、大量的留白、图文的混排、淡雅的背景色等，这些都使用户获得良好的阅读体验。

越来越多pad上阅读方式采用了传统杂志的阅读体验，上图为pchome app应用

另外，设计师在设计IPAD的阅读体验时，除了界面中某些固定的操作按钮，也可以充分利用IPAD中的手势动作，如手指双击正文返回到上一级目录，两个手指同时向内滑动关闭某些页面等，这些当用户习惯这种快捷操作后，能形成很高的效率。

上图：zaker中各种手势动作的运用

三、需不需要设计阅读模式

在WEB中，需不需要单独为网页文章设计一个阅读模式？这个也需要根据用户使用情境来定。如网站的栏目是小说文摘类的，文章的内容比较长且需要读者静下心来阅读里面的每个字、每段话，这时就需要一个单独的阅读模式，像豆瓣阅读，在这种情境下，用户需要排除各种屏幕上的视觉干扰，花较长时间去阅读一篇小说或文章。

目前，很多浏览器插件中都带有阅读模式，如evernote的“悦读”插件，傲游浏览器中的“阅读模式”等。用这种方式，用户可以有选择性地、很舒服地去阅读文章。

上图：evernote中的“阅读模式”

上图：傲游浏览器中的“阅读模式”

产品中的阅读模式（非浏览器自带的）不是任何场景中都有必要，因为用户去做额外的动作去触发它，当不需要时，又得去点击某个按钮去关闭它。如果只是一篇新闻或短文，用户这种需求就非常弱，而且还会增加界面设计及开发的成本，所以设计前设计师需要衡量下，如果这种模式的需求或频率不强，那么设计的意义有何在呢？（用户完全可以用浏览器自带的方式去深度阅读）。请记住，最好的设计是不需要增加用户的使用成本的，设计师把界面设计得干净整洁，排版方式更加舒服，这时就能满足大多数用户的需求。

OK，回到什么是好的阅读体验，需要设计师运用常用的一些设计技巧，根据自身的产品特点和目标用户使用情景，做出一个设计上的判断，就像“顾客不是要买个钻头，他们想买的可能只是个洞”。没有最好的阅读体验，只有最合适的阅读体验。

TAG：阅读体验

fengsan

海内存知己,天涯若比邻
觉得文章不错，微信扫描分享好友

热门文章

© 2011 - 2020  钛锋网  TMTForum.com  沪ICP备15013635号