論交互電子書的視覺引導(dǎo)*

□文│沈 珉 楊至元

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

一、交互電子書視覺引導(dǎo)的特殊性

王躍虎認(rèn)為，電子書與紙質(zhì)書的差異在于紙質(zhì)書模型只有內(nèi)容與載體兩層，而電子書則有內(nèi)容、載體與呈現(xiàn)器三層。呈現(xiàn)器與內(nèi)容的適當(dāng)分離形成了閱讀的復(fù)雜性，[1]而交互電子書的發(fā)展正好說明了這一點(diǎn)。由于交互電子書的實(shí)際不同，“視覺引導(dǎo)”在各類型的交互電子書中的作用也不盡相同。為了分析的方便，有必要將當(dāng)下交互電子書做一個(gè)簡單的分類。

表1所示為交互電子書的分類。交互式圖形電子書正在探索階段，且多適應(yīng)于結(jié)構(gòu)開放的故事類型出版物，視覺也可用鏡頭語言來分析；目前有許多幼兒教育類圖書多屬于增強(qiáng)現(xiàn)實(shí)電子書，此類圖書場景化較強(qiáng)，視覺引導(dǎo)相對簡單；[2]而以多媒體為主導(dǎo)的交互電子書既需要文本的有序表達(dá)，又需要各種視頻、動(dòng)畫以增強(qiáng)娛樂性，因此視覺引導(dǎo)較為復(fù)雜，本文多以其為例。

表1 交互電子書的分類

在紙質(zhì)版面設(shè)計(jì)中，視覺引導(dǎo)是指通過合理設(shè)計(jì)，使讀者視覺停留軌跡最后落實(shí)到版面的焦點(diǎn)上。但是交互電子書中的視覺引導(dǎo)不那么簡單，非線性以及交互性閱讀使視覺引導(dǎo)明顯區(qū)別于二維版面。

1.由非線性帶來的視覺引導(dǎo)特殊性

紙質(zhì)書中，版面間形成一個(gè)個(gè)相對獨(dú)立的視覺單元，視覺引導(dǎo)路線較短。通過頁面翻動(dòng)，形成自然的節(jié)奏與過渡。而交互電子書中視覺引導(dǎo)更具立體性與穿透性。立體性主要顯現(xiàn)為：動(dòng)態(tài)元素本身帶來的視覺效果，如速度、遠(yuǎn)近、軌跡、時(shí)間軸線變化等；模擬三維空間時(shí)運(yùn)用圖層所形成的前與后、底與面的移動(dòng)與隱現(xiàn)效果；版面局部內(nèi)容滾動(dòng)的設(shè)置；音頻、音效的加入等。而穿透性則表現(xiàn)在版面變更與圖景變化可以無縫對接之后，傳統(tǒng)意義上的單獨(dú)版面消失了，其結(jié)果是視覺可以穿透以往的多個(gè)版面并以綿長流線來貫穿。另外，版面滑動(dòng)的方向也更加靈活，視覺可以在多個(gè)維度上延伸。

可以說，當(dāng)線性閱讀模式變?yōu)榭臻g互動(dòng)閱讀模式之后，特別是在二維度的靜態(tài)元素中加入了諸多媒體的混合元素之后，雖然閱讀充分調(diào)用了視覺、聽覺以及觸覺的體驗(yàn)來增加閱讀的趣味，但同時(shí)也讓閱讀受到了干擾。視覺引導(dǎo)過濾干擾、提純閱讀質(zhì)量的難度加劇了。

2.由交互性帶來的視覺引導(dǎo)特殊性

“交互”使人與人造物之間的情感發(fā)生了質(zhì)變，意味著電子書的設(shè)計(jì)要向界面設(shè)計(jì)靠攏，而界面又包含了物理界面與情感界面等。

其中物理界面既包含人造物對人的作用表面，如按鈕，也包含了發(fā)生感知得以產(chǎn)生的表面屏幕。交互電子書中，這兩者同時(shí)需要構(gòu)造，但又需要區(qū)分。設(shè)計(jì)者要使讀者在觸發(fā)視覺對象時(shí)有物理操作的感覺，又要讓這些操作與文本結(jié)合，使讀者按預(yù)定設(shè)計(jì)尋找到視覺線索，完成既定的閱讀任務(wù)，并控制讀者進(jìn)一步的操作。因此，視覺引導(dǎo)關(guān)鍵在于揭示“關(guān)系”，包括文本間的關(guān)系、版面間的關(guān)系，特別是人機(jī)間的關(guān)系。

而從情感界面講，交互電子書生產(chǎn)是以人為尺度的信息生產(chǎn)，視覺成為形式與功能結(jié)合的最佳語言。設(shè)計(jì)者要依賴讀者的心理、審美以及情緒來營造視覺對象，誘調(diào)讀者的“內(nèi)隱記憶”，[3]使讀者在減少認(rèn)知負(fù)擔(dān)的前提下，根據(jù)已有的經(jīng)驗(yàn)觸發(fā)人與物之間的互動(dòng)。同時(shí)，視覺圖像能夠召喚讀者進(jìn)入一定的文化場中，完成文本的閱讀。因此，視覺引導(dǎo)不僅是純物質(zhì)性的與技術(shù)性的，也是精神性與文化性的。

綜上所述，交互電子書“非線性”特征增加了視覺引導(dǎo)的層次與難度，而“交互性”則引起設(shè)計(jì)思維的本質(zhì)性變化，對視覺引導(dǎo)提出更高的要求。

二、交互電子書視覺引導(dǎo)的多重功能

基于以上分析，交互電子書視覺引導(dǎo)功能不是單一版面中的聚焦，而是側(cè)重于若干版面的結(jié)構(gòu)化探索，是通過對版面元素的判斷、尋找操作點(diǎn)作出行為應(yīng)對且把此種對應(yīng)行為貫穿在整個(gè)閱讀過程之中的過程。

具體來說，交互電子書視覺引導(dǎo)的功能如下所示。

1.形式引導(dǎo)功能

形式引導(dǎo)又包括文本結(jié)構(gòu)引導(dǎo)與版面邏輯引導(dǎo)。

文本結(jié)構(gòu)引導(dǎo)針對電子書的文本框架。電子書結(jié)構(gòu)多以層級式結(jié)構(gòu)為主，如古滕貝格（Gutenbergz）出品的《福爾摩斯》；也有基于知識服務(wù)的服務(wù)要求設(shè)計(jì)成網(wǎng)狀結(jié)構(gòu)的，如《大都會(huì)美術(shù)館》以L型設(shè)計(jì)了三個(gè)類型的搜索方式：年代、風(fēng)格、作者，右側(cè)界面則以導(dǎo)航方式展開，節(jié)點(diǎn)間可以相互鏈接。一般目錄頁的視覺流程能夠清晰表述出文本的結(jié)構(gòu)特征，以提示閱讀模式。

版面邏輯引導(dǎo)指示文本封閉回環(huán)的情況。具體設(shè)置中，有的是通過逐層回歸，從具體文本回到章節(jié)，再從章節(jié)回到目錄頁；也有的在具體章節(jié)中設(shè)置導(dǎo)航，來控制下級平行版面的展開。在視覺提示中，版面邏輯引導(dǎo)的視覺標(biāo)志多在版心外側(cè)，且位置保持同一性。

除此之外，版面上還有一些附屬設(shè)置，比如分享與傳輸資料、關(guān)閉聲音等。附屬設(shè)置采用抽屜式設(shè)計(jì)，減少視覺的干擾。

2.內(nèi)容引導(dǎo)功能

內(nèi)容引導(dǎo)又包括層次引導(dǎo)與主次引導(dǎo)。

層次引導(dǎo)主要針對電子書的內(nèi)容容量而言，是處理文本的“寬度”與“深度”的視覺方法。所謂“寬度”是指目錄下章節(jié)包含的數(shù)量，而“深度”是指從目錄每一章節(jié)內(nèi)容經(jīng)歷的層級數(shù)。[4]具體視覺引導(dǎo)中，手指的滑動(dòng)方向與音頻、底色差異都能進(jìn)行提示。比如《腦筋急轉(zhuǎn)彎》以左右滑屏表現(xiàn)“寬度”，上下滑屏表現(xiàn)“深度”。知識服務(wù)性的電子書結(jié)構(gòu)較散，在“寬度”“深度”處理上更需用心引導(dǎo)，比如適應(yīng)地運(yùn)用導(dǎo)航條來展疊內(nèi)容，這時(shí)導(dǎo)航就表現(xiàn)文本間的平行關(guān)系，呈現(xiàn)出“寬度”；或者在文本框中加以文字滾動(dòng)效果，以減少文本的“深度”；而在圖中添加必要的鏈接，是控制“寬度”與“深度”的有效方法。

主次引導(dǎo)是對同一視覺空間內(nèi)細(xì)節(jié)展示的引導(dǎo)。這其實(shí)是平面中版面焦點(diǎn)提示方法的移用。在知識服務(wù)型的電子書中，采用鏈接的方法來過濾下一級的信息；故事性的版面則要在保證文本板塊閱讀不受影響的前提下，通過突出圖形來提醒互動(dòng)。

3.情感引導(dǎo)功能

視覺心理學(xué)告訴我們，當(dāng)我們對對象進(jìn)行關(guān)注時(shí)，絕不只接受純粹的光學(xué)信息，同時(shí)還接收了包括觸覺、味覺、嗅覺乃至于痛覺、溫度覺在內(nèi)的多種信息。而當(dāng)注視對象指向文化時(shí)，對象就具有了時(shí)空感，能夠提示自身的歷史與未來，讀者也能夠調(diào)用已有的內(nèi)心經(jīng)驗(yàn)，進(jìn)行情緒與心理判斷。

電子書中的視覺表現(xiàn)與音效、觸覺的表達(dá)往往形成一個(gè)整體，構(gòu)成“持續(xù)的風(fēng)格”，[5]引導(dǎo)情感走向。如《福爾摩斯》的開始短片是以深藍(lán)色手繪背景為底中帶向上拉動(dòng)，前景是白色的手書書名，配以節(jié)奏較快的合奏，圖片定格時(shí)是夜晚的倫敦夜景，前景是倫敦眼，五個(gè)故事成為懸掛在上面的五個(gè)吊箱，傳達(dá)神秘而略帶緊張的氣氛，這種調(diào)子一直保持在全書之中（參見圖1）。

圖1 《福爾摩斯》中的目錄頁及版面

而交互電子書的“入境”儀式[6]能夠立刻將讀者拉入故事場景，成為情感引導(dǎo)的一種方式。故宮博物院出品的《清代皇帝服飾》一開始是寶藍(lán)緞面紋紙，中間是撒金的立體LOGO“宮”字（見圖2）。隨著一聲悠揚(yáng)的鐘聲，“宮”字邊緣出現(xiàn)淡淡投影，隨即圖像漸隱。接下來是一組精致的動(dòng)畫短片展現(xiàn)清帝的各種形象，并以卷軸閱覽方式向左拉動(dòng)，配之以唯美的音頻效果，擬金色的字體與如意邊寶藍(lán)撒金邊簽，奠定了華貴雅致的基調(diào)。進(jìn)入儀式之后，幽揚(yáng)的樂曲、強(qiáng)度不大的悠揚(yáng)音效，慢速度的由虛轉(zhuǎn)實(shí)的精美畫面，版面上幅度極小的微動(dòng)畫互動(dòng)提示等，持續(xù)著精致而有品位的觀看基調(diào)，引導(dǎo)讀者用心體驗(yàn)、仔細(xì)欣賞。

圖2 《清代皇帝服飾》中的入境儀式

可見，交互電子視覺引導(dǎo)功能是全面的，由操作指示到文化暗喻，從框架呈現(xiàn)到細(xì)節(jié)提示，具有多重的功能。在具體落實(shí)中，需要分類把握，一一落實(shí)。

三、交互電子書視覺引導(dǎo)實(shí)現(xiàn)的原則與方式

為了提高閱讀的質(zhì)量，在處理交互電子視覺引導(dǎo)時(shí)，既要讓版面視覺引導(dǎo)有一定的變化性，以滿足讀者的心理期待，又不能讓視覺流動(dòng)過于頻繁，陷入審美的疲勞，因此需要有原則與恰當(dāng)?shù)姆绞健?/p>

1.交互電子書視覺引導(dǎo)實(shí)現(xiàn)的原則

歸納起來，交互電子書視覺引導(dǎo)原則可以總結(jié)為ACD（ Attention Clear Direct）原則。

Attention，關(guān)注原則。這是視覺引導(dǎo)的最根本出發(fā)點(diǎn)。按照格式塔原理，讀者會(huì)以一種頭腦中存有的圖式來簡化視覺對象，歸納視覺整體。因此處理版面聚化與分散的關(guān)系，在整體中表現(xiàn)出差異：小圖像可以成為關(guān)注焦點(diǎn)。另外，視覺習(xí)慣決定靜態(tài)對象的關(guān)注度低于動(dòng)態(tài)對象，因此，動(dòng)畫的適應(yīng)采用是合適的選擇，以動(dòng)態(tài)來搏關(guān)注。

Clear，簡明原則。這也有兩個(gè)層面上的要求：一是要充分利用約定成俗的設(shè)計(jì)符號完成意義的表達(dá)，意義不產(chǎn)生歧義；二是引導(dǎo)界面要簡明，如可以通過抽屜式設(shè)計(jì)，實(shí)現(xiàn)信息隱藏，而不是將多重功能的引導(dǎo)圖形散放在版面上。

Direct，直接原則。首先，不同功能的視覺引導(dǎo)要有不同形式表達(dá)，操作與結(jié)果之間的關(guān)系要直接，有一致性。其次，要去除與文本表達(dá)不符的引導(dǎo)，比如不適宜的游戲引導(dǎo)，不適宜的對話引導(dǎo)等，以免增加視覺噪點(diǎn)。

2.交互電子書視覺引導(dǎo)的實(shí)現(xiàn)方式

第一是平面版面設(shè)計(jì)視線流營造依然發(fā)揮重要作用。比如以單線流程表現(xiàn)快速閱讀，以曲折線表現(xiàn)出較停滯的閱讀等。另外，字體選擇表現(xiàn)文本風(fēng)格，字號大小提示重要性以及字間距行間距傳達(dá)情感，色彩運(yùn)用奠定文本的情感基調(diào)，點(diǎn)線面的使用能夠區(qū)分主次，等等。這些基本方法仍然有效。

第二是多使用共通性的符號來表達(dá)意思，提示互動(dòng)。利用顯性符號：版面上以箭頭表示向前翻看或者向后翻看，以手指代表點(diǎn)擊，以足跡代表向前方向等。還有些隱性的結(jié)構(gòu)符號：并列的圖形表示平行的關(guān)系，不同底色涂抹形成的封閉結(jié)構(gòu)可以表現(xiàn)不同層級關(guān)系；不同色彩表現(xiàn)的情緒指示；相近的位置指示功能的相近等。

第三是強(qiáng)調(diào)微動(dòng)畫的使用。微動(dòng)畫使用不會(huì)破壞版面，反而是版面的點(diǎn)睛之筆。使用微動(dòng)的小圖像來設(shè)計(jì)鏈接、導(dǎo)航、按鈕等互動(dòng)設(shè)計(jì)對象，是常用的方法。像故宮博物院出品的《清代皇帝服飾》就在二級目錄頁中采用微動(dòng)的光暈來提示鏈接。不只如此，在版面細(xì)節(jié)處采用微動(dòng)畫，可以活躍版面，使之更抓人眼球。比如《胤禛美人圖》的《桐蔭品茶》一圖顯示時(shí)不只是面畫微微上拉，而且美人手上紈扇墜子輕輕擺動(dòng)，使版面在靜中有動(dòng)，還有動(dòng)態(tài)的焦點(diǎn)。另外文本展開中微動(dòng)畫的使用，可以引起讀者的視覺興奮。如《福爾摩斯》主要以靜態(tài)文字閱讀為主，但一進(jìn)入具體版面，下端的圖像會(huì)有小動(dòng)作，提醒此處可以互動(dòng)。

交互電子書制作目的是為增加閱讀的知識量，增加閱讀興趣，從而提升閱讀的質(zhì)量，因此炫技絕不是目的。優(yōu)秀的交互電子書，會(huì)充分“通過視頻媒介的形式”[7]表現(xiàn)意義，使內(nèi)容的呈現(xiàn)更具條理，使交互操作更為合理，使情感體現(xiàn)更具人性化。希望本文梳理交互電子書視覺引導(dǎo)的特點(diǎn)，分析交互電子書視覺引導(dǎo)的功能，探討交互電子書視覺引導(dǎo)的實(shí)現(xiàn)原則及方式，能夠?yàn)榻换ル娮訒峁┮恍椭?/p>