博客导读网

移动设备阅读器设计技巧

译者 丹青

iPad eReader apps have only been around for a few months but they build upon a formidable predecessor—the book.  They also benefit from the relatively recent success of the Kindle and iPhone apps like Stanza.  Although there are many models to learn from, the eReader app space is still evolving and will continue to evolve in years to come.  As designers and developers create new versions of eReader apps, I hope the following design principles will serve as a useful reference.  They are primarily based on a screen-by-screen analysis of iBooks, Kindle, and Kobo which is embedded at the end of this post.  Stanza, Comic Zeal, GoodReader, and Instapaper were also reviewed but without as much rigor.

iPad eReader 应用出现才几个月的时间，但它们是建立再一个强大的前身基础上的，那就是书。这些应用也从Kindle和Stanza等IPONE应用中吸取经验。虽然现在有不少的模式可以从中学习，但是eReader 应用程序仍在创新和改进，并且再接下来的几年不会仍会继续。我希望以下这些设计规则可以为应用程序的设计师和开发者提供有用的参考。基本上这些这些研究基于对iBooks，Kindle和这些设备上的Kobo进行的实际使用分析，一些其他的应用例如Stanza，Comic Zeal，GoodReader以及Instapaper也被考虑在内但没有充分分析。

Here are the 10 design principles for eReader apps:

以下是对阅读器应用的10条设计原则：

1. Design for the book content.

1.根据内容设计

Reading a novel is very different from reading a web page or a computer manual.  And reading a comic book is surely different from reading a book of poems.  Successful eReader apps will create experiences that are well-suited to the content at hand.  For example, Comic Zeal provides a special Japanese manga mode which supports right to left reading.  If your app supports alternative content types, it should allow the user to choose the desired interaction (more on this in “Personalize the reading experience”).

阅读小说与浏览网页或者电脑说明书有很大不同。读一本漫画和一本诗集（的体验）也肯定不一样。成功的电子阅读器应该能够创造出很好的适合内容的阅读体验。例如，Comic Zeal特别提供日本漫画模式支持从右到左的阅读方式。如果你的应用程序能够支持更多的内容类型，它应该允许用户选择恰好所需的交互方式。（更多请参照“个性化阅读体验”一节）。

2. Consider the reading context.

2.考虑阅读环境

iPad users will read on airplanes, in their beds, on lounge chairs, and more.  Understanding the different contexts may help app designers and developers make informed design decisions.  For example, given the cramped conditions on airplanes, I’ve found that it’s more comfortable to access tools along the top of eReader apps (Figure A), rather than those at the bottom.  I encountered similar problems when I tried to read while lying in bed.   These are just two examples—user research may reveal other opportunities to improve current designs.  It’s probably worth mentioning that Apple recommends this tool placement in their guidelines.

ipad的用户的阅读环境也许是在飞机上、床上、休息长凳或者其他的地方。对阅读环境的理解可以帮助应用程序设计师和开发者做出明智的开发决策。例如，在乘坐飞机的狭小空间里，我发现工具栏在顶端比在底部使用起来更加舒适（如图1）。躺在床上阅读的时候也遇到类似的问题。这只是两个例子——用户研究能够发现更多的机会来改进现有的设计。或许值得一提的是，苹果在设计指南中对工具栏位置提供了建议。

Figure A. iBooks page with tools “on” (See larger size)

3. Let the book content shine.

3. 突出内容本身

While search, annotation, and other tools will be welcomed by many readers they shouldn’t get in the way of the user’s primary task—to read.  Take the iBooks tool icons (Figure A).  They are rendered in sepia tones and tucked into the page’s corners.  They are there when you need them but not intrusive. In addition to the book text, consider subtle ways to let other book content shine.  For example, images are a fixed size in printed books but eReader apps should allow users to enlarge them.  Similarly, if a location is mentioned in a book, wouldn’t it be nice to link directly to a map?

使用这些应用时，大部分读者希望查找、标注以及其他工具不会影响到他们的主要目的——阅读。在上图中，iBooks的工具图标使用了灰褐色的色调，并且摆在页面的角落。再需要的时候可以找到，但是并不喧宾夺主。除了书中的文字，可以考虑更加巧妙的方式让书的内容更炫。比如，在纸质书籍中图片是固定大小的，但是再阅读器应用中读者可以缩放图片。类似的，如果书中提到一个地址，直接能够链接到一个地图是不是更好呢？

4. Personalize the reading experience.

4.个性化阅读体验

One of the biggest benefits of eBooks is the ability to customize the reading experience.  Customization may be for accessibility reasons or to accommodate user preferences.  At minimum, eReader apps should support accessibility, allowing users to change brightness, page color, and type size (Figure B).  Other potential customizations may include typefaces, transitions, line spacing, pagination direction, and more.  When possible, be sure to provide previews so users can see how the changes will impact their display.

可以自定义的阅读体验可以说是eBooks的最大优势之一。自定义可能是为了可达性要求或者兼容用户的喜好。eReader最起码需要满足可达性要求，允许用户改变亮度，页面颜色，字体大小（如下图）。其他的自定义项包括字体，翻页方式，行间距，页面导航以及更多。如果可能，尽量提供阅览让用户可以看到更改后的显示效果。

Figure B. Kindle display options (See larger size)

5. Put the reader in control.

5. 让用户去控制

Compared to mediums like TV and movies which have commercials, trailers, and other distractions, reading books is generally a quiet, solitary experience. eReader apps add complexity since they introduce search and other tools that take the user away from reading.   These tools have the power to enhance the reading experience but they can also backfire if the user feels like they’ve lost control.  For example, tools on Kobo disappear after about 8 seconds if the user hasn’t interacted with them.  Similarly, Kindle tools disappear when the user turns the page.  In contrast, iBooks hides the tools only when the user chooses to hide them.  This interaction style gives the user the most control.

和电视、电影这些充斥这广告、预告片和其他干扰的媒介体验相比，读书大部分是安静、独立的体验。eReader应用因为有了查找和其他一些工具从而给阅读增加了复杂性，可能会分散用户对阅读的注意力。这些工具可以增强阅读的体验，但是也有可能适得其反尤其是当用户觉得已经失去控制的时候。例如，Kobo上的工具栏在没有交互的8秒之后就会消失。相类似的，Kindle电子书上的工具在翻页的时候就没有了。相反，iBooks上的工具栏只有再用户选择隐藏的时候才会隐藏。这种交互方式给了用户最大程度的控制感。

6. Support alternative reading pathways.

6. 提供多种阅读路径

The printed book has a magical user interface.  Anyone can pick one up and easily page through it, flip to the beginning or end, or thumb to a specific page number.  eReader apps should also make navigation easy and fluid.  This can be accomplished with a combination of gestures and explicit navigation elements.  Gestures should allow the user to page back and forth, but they don’t have to stop there.  Apps like Stanza also let users adjust brightness by swiping up and down the screen.  More explicit navigation elements may include access via a TOC, search, or by entering a specific page number (Figure C).  All of these can add value—the challenge is to make sure they don’t overwhelm the user experience.

纸质的书籍提供了一种神奇的用户界面。任何人都可以拿起一本书来浏览，很方便的翻页定位，跳到起始和末尾，或者拨到一个特定的页数。eReader 应用程序也需要提供简单灵活的导航方式。这种导航可以结合手势和明确的导航元素。用户通过手势可以向前和向后。Stanza可以通过翻转屏幕来调节亮度。更加明确导航元素可能包括通过目录、查找或者输入特定页码来定位（图C）。所有这些都可以给应用增值——只是不要过度以致影响到用户的体验。

Figure C. Kindle navigation options (See larger size)

7. Be predictable.

7.可预知

Unless you’re creating a fantasy book or have developed a superior interaction model, your eReader app should follow certain platform conventions.   Following these conventions will make your eReader app easier to learn and use.  For example, tapping the center of the page should display tools along the bottom and/or top, tapping the right/left margins should turn the page, and tapping and holding within the text should reveal options for the selected word(s).   All of the eReader apps reviewed for this post follow these conventions.  If you design an eReader app with a completely different approach, users may have difficulty using the product.  To be clear, this doesn’t mean you shouldn’t try to innovate.  But you should be highly confident that your innovations are clearly better than existing conventions.

除非你在创造一个奇幻书或者发明了一个明显优越的交互模式，否则最好遵循一些平台约定。遵循这些约定可以让用户学习和使用起来更加容易。比如，点击页面中心将会在顶部或者底端出现工具栏，点击边缘会翻页，点击停留在文字上会显示出所选择文字可以进行的操作项。这篇文章所分析的这些eReader 应用都遵循以上的这些约定。如果你的设计是一种完全不同的方式，用户可能会觉得使用困难。但是需要声明的时候，这并不表示不可以创新。只是需要高度自信新的方式明显优于现存的约定。

8. Provide forgiving tap targets.

8.大块的点击区域

eReader apps should be flexible and forgiving when users page through a book.  In particular, they should not include miniature or obscure tap targets.  For example, iBooks users must tap precisely in the margins to turn pages whereas Kobo, Kindle, and Stanza expand the tappable zone into the body.  To help users understand these interactions, some apps overlay the tap zones when the user first loads the app (Figure D).  If precision is required, e.g., to select a specific word, magnification and other relevant tools should be provided to minimize the user effort.

用户在页面跳转时的操作应该灵活而且容错。 特别是，不要包括缩略图或者模糊的操作目标。例如，iBooks用户需要精确的点击边缘才可以跳转页面，但是Kobo，Kindle和Stanza将可点击区域延伸到正文部分。为了帮助用户理解这些交互操作，一些应用在首次加载时提供一层覆盖的半透明层来指引新用户（图片D）。如果需要点击精确的区域，比如选择某个词，应该提供放大镜或者相关的工具。

Figure D. Stanza tap zone overlay (See larger size)

9. Speak the reader’s language.

9.使用用户的语言。

Most users were reading printed books long before eBooks came around.  They are familiar with the book’s organizing framework (e.g., book, cover, TOC, chapter, page) and related objects (e.g., shelf and bookmark).  Users may expect these metaphors in your designs, plus including them may make it easier to use your app.  For example, iBooks tells me how many pages are left in a book but Kindle tells me the percent left.  This may be a matter of preference, but for me, it required more cognitive load to translate the Kindle percent into something meaningful—pages.

大多数电子书用户在之前都有相当长纸质书籍的阅读经验。他们已经熟悉书的组织框架（比如，书，封面，目录，章节，页）和相关的事务(比如书架和书签）。用户可能希望阅读应用也能沿袭这些隐喻，那样可能使得用户使用起来比较简单。例如，iBooks显示还有多少页没有读但是kindle显示的是还有百分之多少。也许这只是一个用户习惯的问题，但是对于我来说，这需要更多的认知负载将百分比转换成对我有意义的——页数。

10. Delight your users.

10. 给用户意外惊喜

Platforms conventions are important but designers and developers should also aim to delight their users.  Delightful elements shouldn’t be gratuitous—successful approaches will clearly elevate the user experience.  For example, Kobo lets readers customize their bookmark.  This builds upon readers current behaviors since they can choose a bookmark for traditional books.  Letting them choose one for their eReading experience may make the book feel more like their own and potentially create an emotional connection to the eReader app itself.  Even better, Kobo should allow users to choose a different one for each book.

惯例很重要，但是设计师和开发者仍需给用户一些意外惊喜。这些意外的元素不应该是莫名其妙的——成功的做法应该明确的提升用户体验。例如，Kobo让用户自定义自己的书签。这个功能建立在用户现有的为书籍选择书签的行为上。允许用户为电子书籍选择一个书签能够让这本书更像用户本人拥有的，以及潜意识上和这个应用本身建立一种情感联系。更进一步，Kobo应该让用户为每一本书选择不同的书签。

Figure D. Kobo Bookmark options (See larger size)

To understand where these principles came from, you may want to view the detailed UX review in the slides below.  Topics covered include: 1) Tap zones, 2) Display options, 3) Inline options, 4) Navigation, and 5) Visual design.  Also, you may be interested in two other posts on iPad eReader apps. One discusses purchasing books for eReaders, the other covers personal library management.

Note: If you’re viewing this post on the iPad/iPhone you will not be able to see the slides below. If so, please go directly to this non-Flash version on the Slideshare site.