論交互電子書的視覺引導*

□文│沈 珉 楊至元

技術的日新月益，使得電子書從傳統紙質圖書在網絡平臺或閱讀器上的電子文件一直發展到融入虛擬技術的立體書。但各種技術的加入，是否更便于閱讀呢？反觀現在的一些交互電子書，存在著交互操作提示不清、功能按鍵設計隨意破壞版面、多媒體信息任意添加等情形，既破壞了版面的美觀，又干擾了閱讀流程。在紙質版面的營造中，我們通常利用視覺引導來指示版面的焦點，控制閱讀的速度。那么交互電子書中的視覺引導是否還具有同樣作用？其功能是否得到擴展？怎么運用其達到更好的閱讀效果呢？

一、交互電子書視覺引導的特殊性

王躍虎認為，電子書與紙質書的差異在于紙質書模型只有內容與載體兩層，而電子書則有內容、載體與呈現器三層。呈現器與內容的適當分離形成了閱讀的復雜性，[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]表現意義，使內容的呈現更具條理，使交互操作更為合理，使情感體現更具人性化。希望本文梳理交互電子書視覺引導的特點，分析交互電子書視覺引導的功能，探討交互電子書視覺引導的實現原則及方式，能夠為交互電子書提供一些幫助。