论交互电子书的视觉引导*

□文│沈 珉 杨至元

技术的日新月益，使得电子书从传统纸质图书在网络平台或阅读器上的电子文件一直发展到融入虚拟技术的立体书。但各种技术的加入，是否更便于阅读呢？反观现在的一些交互电子书，存在着交互操作提示不清、功能按键设计随意破坏版面、多媒体信息任意添加等情形，既破坏了版面的美观，又干扰了阅读流程。在纸质版面的营造中，我们通常利用视觉引导来指示版面的焦点，控制阅读的速度。那么交互电子书中的视觉引导是否还具有同样作用？其功能是否得到扩展？怎么运用其达到更好的阅读效果呢？

一、交互电子书视觉引导的特殊性

王跃虎认为，电子书与纸质书的差异在于纸质书模型只有内容与载体两层，而电子书则有内容、载体与呈现器三层。呈现器与内容的适当分离形成了阅读的复杂性，[1]而交互电子书的发展正好说明了这一点。由于交互电子书的实际不同，“视觉引导”在各类型的交互电子书中的作用也不尽相同。为了分析的方便，有必要将当下交互电子书做一个简单的分类。

表1所示为交互电子书的分类。交互式图形电子书正在探索阶段，且多适应于结构开放的故事类型出版物，视觉也可用镜头语言来分析；目前有许多幼儿教育类图书多属于增强现实电子书，此类图书场景化较强，视觉引导相对简单；[2]而以多媒体为主导的交互电子书既需要文本的有序表达，又需要各种视频、动画以增强娱乐性，因此视觉引导较为复杂，本文多以其为例。

表1 交互电子书的分类

在纸质版面设计中，视觉引导是指通过合理设计，使读者视觉停留轨迹最后落实到版面的焦点上。但是交互电子书中的视觉引导不那么简单，非线性以及交互性阅读使视觉引导明显区别于二维版面。

1.由非线性带来的视觉引导特殊性

纸质书中，版面间形成一个个相对独立的视觉单元，视觉引导路线较短。通过页面翻动，形成自然的节奏与过渡。而交互电子书中视觉引导更具立体性与穿透性。立体性主要显现为：动态元素本身带来的视觉效果，如速度、远近、轨迹、时间轴线变化等；模拟三维空间时运用图层所形成的前与后、底与面的移动与隐现效果；版面局部内容滚动的设置；音频、音效的加入等。而穿透性则表现在版面变更与图景变化可以无缝对接之后，传统意义上的单独版面消失了，其结果是视觉可以穿透以往的多个版面并以绵长流线来贯穿。另外，版面滑动的方向也更加灵活，视觉可以在多个维度上延伸。

可以说，当线性阅读模式变为空间互动阅读模式之后，特别是在二维度的静态元素中加入了诸多媒体的混合元素之后，虽然阅读充分调用了视觉、听觉以及触觉的体验来增加阅读的趣味，但同时也让阅读受到了干扰。视觉引导过滤干扰、提纯阅读质量的难度加剧了。

2.由交互性带来的视觉引导特殊性

“交互”使人与人造物之间的情感发生了质变，意味着电子书的设计要向界面设计靠拢，而界面又包含了物理界面与情感界面等。

其中物理界面既包含人造物对人的作用表面，如按钮，也包含了发生感知得以产生的表面屏幕。交互电子书中，这两者同时需要构造，但又需要区分。设计者要使读者在触发视觉对象时有物理操作的感觉，又要让这些操作与文本结合，使读者按预定设计寻找到视觉线索，完成既定的阅读任务，并控制读者进一步的操作。因此，视觉引导关键在于揭示“关系”，包括文本间的关系、版面间的关系，特别是人机间的关系。

而从情感界面讲，交互电子书生产是以人为尺度的信息生产，视觉成为形式与功能结合的最佳语言。设计者要依赖读者的心理、审美以及情绪来营造视觉对象，诱调读者的“内隐记忆”，[3]使读者在减少认知负担的前提下，根据已有的经验触发人与物之间的互动。同时，视觉图像能够召唤读者进入一定的文化场中，完成文本的阅读。因此，视觉引导不仅是纯物质性的与技术性的，也是精神性与文化性的。

综上所述，交互电子书“非线性”特征增加了视觉引导的层次与难度，而“交互性”则引起设计思维的本质性变化，对视觉引导提出更高的要求。

二、交互电子书视觉引导的多重功能

基于以上分析，交互电子书视觉引导功能不是单一版面中的聚焦，而是侧重于若干版面的结构化探索，是通过对版面元素的判断、寻找操作点作出行为应对且把此种对应行为贯穿在整个阅读过程之中的过程。

具体来说，交互电子书视觉引导的功能如下所示。

1.形式引导功能

形式引导又包括文本结构引导与版面逻辑引导。

文本结构引导针对电子书的文本框架。电子书结构多以层级式结构为主，如古滕贝格（Gutenbergz）出品的《福尔摩斯》；也有基于知识服务的服务要求设计成网状结构的，如《大都会美术馆》以L型设计了三个类型的搜索方式：年代、风格、作者，右侧界面则以导航方式展开，节点间可以相互链接。一般目录页的视觉流程能够清晰表述出文本的结构特征，以提示阅读模式。

版面逻辑引导指示文本封闭回环的情况。具体设置中，有的是通过逐层回归，从具体文本回到章节，再从章节回到目录页；也有的在具体章节中设置导航，来控制下级平行版面的展开。在视觉提示中，版面逻辑引导的视觉标志多在版心外侧，且位置保持同一性。

除此之外，版面上还有一些附属设置，比如分享与传输资料、关闭声音等。附属设置采用抽屉式设计，减少视觉的干扰。

2.内容引导功能

内容引导又包括层次引导与主次引导。

层次引导主要针对电子书的内容容量而言，是处理文本的“宽度”与“深度”的视觉方法。所谓“宽度”是指目录下章节包含的数量，而“深度”是指从目录每一章节内容经历的层级数。[4]具体视觉引导中，手指的滑动方向与音频、底色差异都能进行提示。比如《脑筋急转弯》以左右滑屏表现“宽度”，上下滑屏表现“深度”。知识服务性的电子书结构较散，在“宽度”“深度”处理上更需用心引导，比如适应地运用导航条来展叠内容，这时导航就表现文本间的平行关系，呈现出“宽度”；或者在文本框中加以文字滚动效果，以减少文本的“深度”；而在图中添加必要的链接，是控制“宽度”与“深度”的有效方法。

主次引导是对同一视觉空间内细节展示的引导。这其实是平面中版面焦点提示方法的移用。在知识服务型的电子书中，采用链接的方法来过滤下一级的信息；故事性的版面则要在保证文本板块阅读不受影响的前提下，通过突出图形来提醒互动。

3.情感引导功能

视觉心理学告诉我们，当我们对对象进行关注时，绝不只接受纯粹的光学信息，同时还接收了包括触觉、味觉、嗅觉乃至于痛觉、温度觉在内的多种信息。而当注视对象指向文化时，对象就具有了时空感，能够提示自身的历史与未来，读者也能够调用已有的内心经验，进行情绪与心理判断。

电子书中的视觉表现与音效、触觉的表达往往形成一个整体，构成“持续的风格”，[5]引导情感走向。如《福尔摩斯》的开始短片是以深蓝色手绘背景为底中带向上拉动，前景是白色的手书书名，配以节奏较快的合奏，图片定格时是夜晚的伦敦夜景，前景是伦敦眼，五个故事成为悬挂在上面的五个吊箱，传达神秘而略带紧张的气氛，这种调子一直保持在全书之中（参见图1）。

图1 《福尔摩斯》中的目录页及版面

而交互电子书的“入境”仪式[6]能够立刻将读者拉入故事场景，成为情感引导的一种方式。故宫博物院出品的《清代皇帝服饰》一开始是宝蓝缎面纹纸，中间是撒金的立体LOGO“宫”字（见图2）。随着一声悠扬的钟声，“宫”字边缘出现淡淡投影，随即图像渐隐。接下来是一组精致的动画短片展现清帝的各种形象，并以卷轴阅览方式向左拉动，配之以唯美的音频效果，拟金色的字体与如意边宝蓝撒金边签，奠定了华贵雅致的基调。进入仪式之后，幽扬的乐曲、强度不大的悠扬音效，慢速度的由虚转实的精美画面，版面上幅度极小的微动画互动提示等，持续着精致而有品位的观看基调，引导读者用心体验、仔细欣赏。

图2 《清代皇帝服饰》中的入境仪式

可见，交互电子视觉引导功能是全面的，由操作指示到文化暗喻，从框架呈现到细节提示，具有多重的功能。在具体落实中，需要分类把握，一一落实。

三、交互电子书视觉引导实现的原则与方式

为了提高阅读的质量，在处理交互电子视觉引导时，既要让版面视觉引导有一定的变化性，以满足读者的心理期待，又不能让视觉流动过于频繁，陷入审美的疲劳，因此需要有原则与恰当的方式。

1.交互电子书视觉引导实现的原则

归纳起来，交互电子书视觉引导原则可以总结为ACD（ Attention Clear Direct）原则。

Attention，关注原则。这是视觉引导的最根本出发点。按照格式塔原理，读者会以一种头脑中存有的图式来简化视觉对象，归纳视觉整体。因此处理版面聚化与分散的关系，在整体中表现出差异：小图像可以成为关注焦点。另外，视觉习惯决定静态对象的关注度低于动态对象，因此，动画的适应采用是合适的选择，以动态来搏关注。

Clear，简明原则。这也有两个层面上的要求：一是要充分利用约定成俗的设计符号完成意义的表达，意义不产生歧义；二是引导界面要简明，如可以通过抽屉式设计，实现信息隐藏，而不是将多重功能的引导图形散放在版面上。

Direct，直接原则。首先，不同功能的视觉引导要有不同形式表达，操作与结果之间的关系要直接，有一致性。其次，要去除与文本表达不符的引导，比如不适宜的游戏引导，不适宜的对话引导等，以免增加视觉噪点。

2.交互电子书视觉引导的实现方式

第一是平面版面设计视线流营造依然发挥重要作用。比如以单线流程表现快速阅读，以曲折线表现出较停滞的阅读等。另外，字体选择表现文本风格，字号大小提示重要性以及字间距行间距传达情感，色彩运用奠定文本的情感基调，点线面的使用能够区分主次，等等。这些基本方法仍然有效。

第二是多使用共通性的符号来表达意思，提示互动。利用显性符号：版面上以箭头表示向前翻看或者向后翻看，以手指代表点击，以足迹代表向前方向等。还有些隐性的结构符号：并列的图形表示平行的关系，不同底色涂抹形成的封闭结构可以表现不同层级关系；不同色彩表现的情绪指示；相近的位置指示功能的相近等。

第三是强调微动画的使用。微动画使用不会破坏版面，反而是版面的点睛之笔。使用微动的小图像来设计链接、导航、按钮等互动设计对象，是常用的方法。像故宫博物院出品的《清代皇帝服饰》就在二级目录页中采用微动的光晕来提示链接。不只如此，在版面细节处采用微动画，可以活跃版面，使之更抓人眼球。比如《胤禛美人图》的《桐荫品茶》一图显示时不只是面画微微上拉，而且美人手上纨扇坠子轻轻摆动，使版面在静中有动，还有动态的焦点。另外文本展开中微动画的使用，可以引起读者的视觉兴奋。如《福尔摩斯》主要以静态文字阅读为主，但一进入具体版面，下端的图像会有小动作，提醒此处可以互动。

交互电子书制作目的是为增加阅读的知识量，增加阅读兴趣，从而提升阅读的质量，因此炫技绝不是目的。优秀的交互电子书，会充分“通过视频媒介的形式”[7]表现意义，使内容的呈现更具条理，使交互操作更为合理，使情感体现更具人性化。希望本文梳理交互电子书视觉引导的特点，分析交互电子书视觉引导的功能，探讨交互电子书视觉引导的实现原则及方式，能够为交互电子书提供一些帮助。