數(shù)字出版物交互內(nèi)容動(dòng)態(tài)設(shè)計(jì)分析

曾嶸 安娜

摘 要 從數(shù)字出版物多維、動(dòng)態(tài)、非線的媒介特點(diǎn)入手，對(duì)視覺元素和交互內(nèi)容在數(shù)字界面中的動(dòng)態(tài)設(shè)計(jì)原則進(jìn)行全面解析，分別從版面元素、界面布局、信息層級(jí)、導(dǎo)航方式四個(gè)方面闡述了動(dòng)態(tài)設(shè)計(jì)的具體形式，探討在數(shù)字出版物中動(dòng)態(tài)設(shè)計(jì)的應(yīng)用原則與發(fā)展方向。從而更加全面、辯證地理解動(dòng)態(tài)變化的依據(jù)及所呈現(xiàn)的效果，歸納總結(jié)了數(shù)字出版物中各類動(dòng)態(tài)設(shè)計(jì)的交互功能與價(jià)值所在。

關(guān)鍵詞 數(shù)字出版物；媒介特點(diǎn)；動(dòng)態(tài)設(shè)計(jì)

中圖分類號(hào) G2 文獻(xiàn)標(biāo)識(shí)碼 A 文章編號(hào) 2096-0360（2020）19-0001-04

基金項(xiàng)目：魯迅美術(shù)學(xué)院院級(jí)課題“圖形動(dòng)畫在公益科普類數(shù)字出版物中的創(chuàng)新應(yīng)用研究”。

1 數(shù)字出版物的媒介特點(diǎn)

數(shù)字技術(shù)問世以來，為出版領(lǐng)域帶來了變革性的發(fā)展，終端和平臺(tái)的不斷改進(jìn)，使電子出版物形式和內(nèi)容日益豐富，成為異軍突起的新興業(yè)態(tài)。閱讀媒介的轉(zhuǎn)變讓出版物呈現(xiàn)的方式發(fā)生了質(zhì)的變化，從紙質(zhì)媒介的精致版式設(shè)計(jì)、海量內(nèi)容編輯轉(zhuǎn)為界面交互方式及動(dòng)態(tài)媒體技術(shù)的嘗試和拓展。網(wǎng)絡(luò)屏讀出版物高度簡約概括的視覺效果需要用最簡單的方式來表達(dá)，用最良好的體驗(yàn)來服務(wù)，用最有效的動(dòng)態(tài)來引導(dǎo)。技術(shù)浸入內(nèi)容傳播不僅僅只是提供了更多的功能，更是為設(shè)計(jì)藝術(shù)服務(wù)，讓設(shè)計(jì)美學(xué)與交互功能實(shí)現(xiàn)完美的融合。數(shù)字設(shè)計(jì)是一種多維設(shè)計(jì)，因此也是一種動(dòng)態(tài)化的設(shè)計(jì)。這是數(shù)字設(shè)計(jì)與傳統(tǒng)設(shè)計(jì)最為根本的區(qū)別[ 1 ]。終端顯示媒介的數(shù)字化，同時(shí)也改變了內(nèi)容讀取的方式，在原本的文本與圖片基礎(chǔ)上疊加交互元素可以使內(nèi)容的呈現(xiàn)更為生動(dòng)形象直觀，閱讀體驗(yàn)也更為豐富，還增加了參與感。多媒體技術(shù)輔助實(shí)現(xiàn)了傳統(tǒng)紙質(zhì)內(nèi)容到數(shù)字形式的轉(zhuǎn)化，通過交互元素的動(dòng)態(tài)設(shè)計(jì)整合豐富的視聽內(nèi)容，提供了各種媒體互動(dòng)體驗(yàn)，從而體現(xiàn)出數(shù)字出版物多維、動(dòng)態(tài)、非線的特點(diǎn)。

2 數(shù)字內(nèi)容的動(dòng)態(tài)設(shè)計(jì)

2.1 版面元素的動(dòng)態(tài)設(shè)計(jì)

版面元素是指文本、圖片、音視頻、超鏈接這些呈現(xiàn)在數(shù)字出版物頁面中的信息內(nèi)容，動(dòng)態(tài)設(shè)計(jì)是指元素通過再設(shè)計(jì)實(shí)現(xiàn)從靜態(tài)到動(dòng)態(tài)變化的圖形結(jié)果。動(dòng)態(tài)的變化讓原本靜止的界面出現(xiàn)新的視覺引導(dǎo)，提高用戶大腦的興奮度，更為清晰流暢地展示信息，形成內(nèi)容之間的動(dòng)靜關(guān)系，完成和諧統(tǒng)一的生動(dòng)畫面。

數(shù)字媒介可以直接將剪輯好的動(dòng)態(tài)影像內(nèi)容通過置入安插在界面中，也可以加入基于flash AS3.0或HTML5技術(shù)衍生出的很多文字和矢量圖形的動(dòng)效設(shè)計(jì)，這一點(diǎn)在很多啟動(dòng)頁面上應(yīng)用較多。而對(duì)于靜態(tài)圖片則可以依據(jù)特征進(jìn)行有條理的排序組合之后通過幻燈片切換來活躍版式效果，類似編排設(shè)計(jì)中組別的劃分。流暢且連續(xù)的成組序列幀式圖片可以通過圖片序列展示的功能實(shí)現(xiàn)類似動(dòng)畫的效果，甚至可以完成物像360°旋轉(zhuǎn)的瀏覽。一些軟件的交互功能還可以用六張全景圖片創(chuàng)造三維空間的展示，不再受到二維平面空間的局限。而當(dāng)圖片內(nèi)容比較大需要較長時(shí)間加載的時(shí)候可以使用漸顯或動(dòng)畫的方式；圖片太過密集需要著重展示時(shí)，具體信息內(nèi)容可以使用移動(dòng)縮放功能局部放大來展現(xiàn)特定信息，例如一些高清圖片的細(xì)節(jié)和地圖位置信息等等。

動(dòng)態(tài)設(shè)計(jì)可以強(qiáng)調(diào)和突出版面視覺元素，豐富視覺效果，但也要注意整體的統(tǒng)一，根據(jù)內(nèi)容劃分整體與部分，結(jié)構(gòu)并列的部分在設(shè)計(jì)上應(yīng)該具有一致性。隨著數(shù)字技術(shù)和發(fā)行渠道的不斷變化，版面動(dòng)態(tài)設(shè)計(jì)也在不斷地發(fā)展變化，很多主流出版物對(duì)于單純動(dòng)效的加入并不很熱衷，但是面向青年或小眾群體的時(shí)尚類雜志還是會(huì)使用比較酷炫的動(dòng)態(tài)設(shè)計(jì)效果來吸引用戶注意。

2.2 界面布局的動(dòng)態(tài)設(shè)計(jì)

界面布局是數(shù)字媒介體系化視覺設(shè)計(jì)的起點(diǎn)，數(shù)字界面的布局空間要基于動(dòng)態(tài)思維展開，在保持頁面秩序美的原則基礎(chǔ)上，構(gòu)筑動(dòng)態(tài)空間秩序的布局方式。動(dòng)態(tài)設(shè)計(jì)解決的是界面與元素的空間關(guān)系，界面框架結(jié)構(gòu)的調(diào)節(jié)方式，版面功能的突出顯示等問題。常見的界面布局方式有宮格式、左舵式、卡片式、標(biāo)簽式、分屏平鋪式、菜單式、瀑布流式等，如圖1所示。

數(shù)字出版物可以利用設(shè)備優(yōu)勢，通過多任務(wù)多手勢來實(shí)現(xiàn)不同方向的滑動(dòng)、縮放、點(diǎn)擊、切換、翻頁等動(dòng)態(tài)設(shè)計(jì)，也可設(shè)定自動(dòng)完成圖片和文本信息內(nèi)容的展示和切換。對(duì)于信息內(nèi)容較多，在界面結(jié)構(gòu)框架中無法完整顯示，需要擴(kuò)展隱藏的空間時(shí)，可以采用可滾動(dòng)框架、上滑、下拉、點(diǎn)擊展開等動(dòng)態(tài)設(shè)計(jì)方式實(shí)現(xiàn)，如圖2所示。分組信息則可使用手風(fēng)琴模式或卡片模式折疊在界面中。與內(nèi)容無關(guān)的動(dòng)態(tài)元素在界面中的存在比例不宜太多，會(huì)對(duì)視覺感知產(chǎn)生不必要的干擾，增加認(rèn)知負(fù)荷，不利于信息的傳達(dá)和內(nèi)容的學(xué)習(xí)。動(dòng)態(tài)設(shè)計(jì)不能夠隨意添加，要具有引導(dǎo)的作用且能夠讓用戶接受，恰當(dāng)?shù)膭?dòng)態(tài)設(shè)計(jì)才能夠?qū)崿F(xiàn)簡潔而有效的用戶體驗(yàn)。

2.3 信息層級(jí)的動(dòng)態(tài)設(shè)計(jì)

信息層次指系統(tǒng)中的信息組織方式，按照一定的原則對(duì)信息進(jìn)行分組和排序，信息層級(jí)有著優(yōu)化結(jié)構(gòu)、形成焦點(diǎn)、強(qiáng)化邏輯的作用。動(dòng)態(tài)設(shè)計(jì)可以幫助用戶建立圖形界面的層級(jí)關(guān)系，避免視覺認(rèn)知變化太過而突然出現(xiàn)的缺口，完成界面順暢地轉(zhuǎn)場。

數(shù)字出版物信息內(nèi)容缺乏組織性，呈現(xiàn)出碎片化、扁平化、開放式的特點(diǎn)，在非線性的層級(jí)系統(tǒng)中，很多是平等的。這就需要良好的信息組織，拉開主次層級(jí)，形成合理、清晰、有區(qū)域劃分有視覺焦點(diǎn)的界面。數(shù)字出版物在結(jié)構(gòu)內(nèi)容的組織上又不同于App的縱向展開方式，多采用層級(jí)結(jié)構(gòu)較淺的橫向方式。針對(duì)標(biāo)題及內(nèi)容提要的預(yù)覽之下，一般可用單擊、彈出、標(biāo)簽展開、列表展開、卡片展開等動(dòng)態(tài)設(shè)計(jì)方式，來達(dá)到信息內(nèi)容索引的目的，如圖3所示。當(dāng)下的很多數(shù)字出版物會(huì)通過輪播式多屏滑動(dòng)瀏覽模式來實(shí)現(xiàn)橫向預(yù)覽，并可對(duì)并置頁面采用透疊模式顯示，優(yōu)點(diǎn)是不需要在層級(jí)切換時(shí)，來回進(jìn)出頁面，通過滑屏過程中，點(diǎn)擊切換直接地實(shí)現(xiàn)跳轉(zhuǎn)，如圖3所示。移動(dòng)端的設(shè)計(jì)中也經(jīng)常會(huì)在考慮版面設(shè)計(jì)的前提下，加入隱藏式按鈕和菜單來完成一些輔助功能的索引。

2.4 導(dǎo)航方式的動(dòng)態(tài)設(shè)計(jì)

導(dǎo)航方式的動(dòng)態(tài)設(shè)計(jì)是指數(shù)字出版物導(dǎo)航界面和按鈕的人機(jī)交互、創(chuàng)作邏輯等體現(xiàn)出版物動(dòng)態(tài)變化的視覺流程。用戶觸發(fā)了某種導(dǎo)航方式，界面會(huì)進(jìn)行相應(yīng)的反饋，導(dǎo)航的動(dòng)態(tài)設(shè)計(jì)是出版物交互邏輯和創(chuàng)意體現(xiàn)的重要部分。

不同于紙質(zhì)出版物的線性方式，數(shù)字出版物信息內(nèi)容采用基于超文本的非線性編輯方式，欄目、菜單、分類等布局結(jié)構(gòu)對(duì)用戶的閱讀引導(dǎo)就顯得尤為重要。導(dǎo)航的主要功能是輔助用戶閱讀，而動(dòng)態(tài)設(shè)計(jì)可以重新定義數(shù)字出版物界面的體驗(yàn)感，減少導(dǎo)航的操作步驟，提高用戶的閱讀效率?；谑謩莸慕缑娼换ヒ矔?huì)隨著操作手勢的不斷增加而調(diào)整導(dǎo)航方式，可以根據(jù)手勢動(dòng)作的發(fā)展來研發(fā)新的交互功能。

數(shù)字出版物中信息內(nèi)容較多，容易產(chǎn)生迷航現(xiàn)象，所以導(dǎo)航方式的設(shè)計(jì)非常重要。好的導(dǎo)航必須能夠快速準(zhǔn)確靈活地切換頁面，以及提供切換過程中較為明顯的提示信息，常見的方式比如在iPad電子雜志中設(shè)置底部的快速導(dǎo)航欄，或者簡潔明了的頁面地圖式導(dǎo)航，如圖4所示。很多時(shí)候有必要設(shè)置導(dǎo)航按鈕的動(dòng)態(tài)變化來強(qiáng)化用戶的操作體驗(yàn)，比如觸發(fā)按鈕會(huì)有即時(shí)的反饋如釋放、變色等。通過層級(jí)的深度交互來創(chuàng)建更為流暢的體驗(yàn)過程，提供過渡視圖之間的視覺引導(dǎo)和反饋，并對(duì)按鈕點(diǎn)擊和界面轉(zhuǎn)場進(jìn)行動(dòng)態(tài)設(shè)計(jì)以幫助用戶更好地適應(yīng)數(shù)字化閱讀方式。

3 動(dòng)態(tài)設(shè)計(jì)的應(yīng)用原則

3.1 動(dòng)態(tài)設(shè)計(jì)的整體性

數(shù)字出版信息內(nèi)容具有高度的開放性與多維結(jié)構(gòu)，其復(fù)雜多樣對(duì)視覺設(shè)計(jì)的整體性提出了考驗(yàn)，動(dòng)態(tài)元素的大量使用會(huì)影響識(shí)別度，也易產(chǎn)生閱讀障礙。因此，動(dòng)靜關(guān)系的整體性是數(shù)字出版物設(shè)計(jì)需要平衡好的重點(diǎn)。心理學(xué)研究表明，運(yùn)動(dòng)的物像容易引起關(guān)注，但無序的過度運(yùn)動(dòng)則會(huì)造成不適。因此，數(shù)字出版物的動(dòng)態(tài)設(shè)計(jì)對(duì)于內(nèi)容的傳播既有利也有弊，這就需要在設(shè)計(jì)中注意圍繞主題內(nèi)容，按照層級(jí)秩序有機(jī)地疊加動(dòng)態(tài)效果，在數(shù)量上和變化上也要整體考慮。不加選擇地濫用動(dòng)態(tài)元素會(huì)造成界面視覺上的混亂，導(dǎo)致整體設(shè)計(jì)的失敗。

3.2 動(dòng)態(tài)設(shè)計(jì)的一致性

數(shù)字出版物視覺界面之間必須保持一致性的視覺元素，風(fēng)格必須整體統(tǒng)一[2]，具有相似和一致性的動(dòng)態(tài)設(shè)計(jì)可以降低閱讀過程中的負(fù)擔(dān)，讓用戶可以用同一種方式思考和操作，有更多的注意力集中在對(duì)內(nèi)容的理解上。一致的動(dòng)態(tài)設(shè)計(jì)還可以建立學(xué)習(xí)型的認(rèn)知體驗(yàn)，將已經(jīng)理解的操作方式延續(xù)到后面的頁面。所以，頻繁地更換動(dòng)態(tài)效果并不是好的選擇，會(huì)使用戶在使用過程中產(chǎn)生困惑，不利于用戶快速準(zhǔn)確地操作。蘋果的首席設(shè)計(jì)師喬納森·艾弗說：“好的設(shè)計(jì)無需認(rèn)知門檻”，好的動(dòng)態(tài)設(shè)計(jì)對(duì)于操作的引導(dǎo)應(yīng)該簡單有效易用，通過動(dòng)態(tài)效果連接同級(jí)的頁面和狀態(tài)，那么其基本動(dòng)態(tài)設(shè)計(jì)也應(yīng)該是相同或一致的。

3.3 動(dòng)態(tài)設(shè)計(jì)的功能性

無論出版物的版面設(shè)計(jì)還是動(dòng)態(tài)設(shè)計(jì)，都不能單純?yōu)槊烙^而設(shè)計(jì)，會(huì)造成形式大于內(nèi)容，喪失了內(nèi)容的功能性。信息組織要有邏輯性、連貫性、流暢性，根據(jù)使用的需求來設(shè)計(jì)，要注重對(duì)閱讀層次的深化，閱讀內(nèi)容的完善，確保動(dòng)態(tài)設(shè)計(jì)元素的融入能夠最大程度地激起讀者共鳴。僅僅擁有動(dòng)態(tài)設(shè)計(jì)效果的出版物，除了視覺的新穎之外，并不能給讀者帶來繼續(xù)閱讀的動(dòng)力，內(nèi)容更是走馬觀花毫無印象，不便于記憶。過于絢麗的動(dòng)態(tài)設(shè)計(jì)讓人眼花繚亂，給人一種華而不實(shí)的感覺。數(shù)字出版物的內(nèi)容如果不夠豐滿，僅僅是頁面堆疊了很多交互元素，也很難獲得持續(xù)的關(guān)注和閱讀，這一點(diǎn)在早期流行的網(wǎng)頁端電子雜志用戶中已經(jīng)得到印證。所以，設(shè)計(jì)師應(yīng)對(duì)界面效果的“動(dòng)”與“靜”有一個(gè)辯證的認(rèn)識(shí)，在確保流暢的閱讀基礎(chǔ)上，適當(dāng)?shù)牟捎镁哂袆?chuàng)意的動(dòng)畫形式才能獲得讀者持續(xù)的關(guān)注[ 3 ]。

3.4 動(dòng)態(tài)設(shè)計(jì)的趣味性

雜志類數(shù)字出版物的優(yōu)勢，在于內(nèi)容的深度和優(yōu)質(zhì)的閱讀體驗(yàn)，其有效的可感知的動(dòng)態(tài)信息交流方式，能夠?qū)崿F(xiàn)更好的操控性、愉悅感和趣味性。數(shù)字環(huán)境下屏幕媒介成為載體，增加了從靜態(tài)到動(dòng)態(tài)的時(shí)間維度，使靜態(tài)頁面在電子屏幕上，由原來的單一靜止畫面演變?yōu)檫\(yùn)動(dòng)變化形態(tài)，擴(kuò)充了信息容量的同時(shí)也豐富了信息傳播的表達(dá)，實(shí)現(xiàn)了立體多維全方位的展示特點(diǎn)，突出了基于媒介變化而產(chǎn)生的互動(dòng)樂趣。充分利用動(dòng)態(tài)設(shè)計(jì)的趣味性，可以給讀者營造氣氛和體驗(yàn)，能充分感受到科技優(yōu)勢和感官刺激，但動(dòng)態(tài)設(shè)計(jì)應(yīng)當(dāng)適度，才能夠很好體現(xiàn)人性化、實(shí)用性和趣味性。

4 結(jié)語

數(shù)字出版物因其動(dòng)態(tài)特點(diǎn)，成為多種媒介相互融合的有機(jī)體，文字、圖片、聲音、影像、交互等內(nèi)容優(yōu)勢，突出了動(dòng)態(tài)設(shè)計(jì)的豐富表現(xiàn)力，提升了感官綜合體驗(yàn)，是技術(shù)與藝術(shù)融合的時(shí)代產(chǎn)物。對(duì)數(shù)字出版物的設(shè)計(jì)而言，要充分認(rèn)識(shí)到設(shè)計(jì)方式的轉(zhuǎn)變，不同于傳統(tǒng)紙媒的線性方式，它的傳播更注重交互性，并且隨著時(shí)代在不斷進(jìn)步愈趨人性化。

數(shù)字出版物所呈現(xiàn)出的高度動(dòng)態(tài)化，不是簡單意義上的元素“動(dòng)起來”，而是融合了先進(jìn)的交互模式與設(shè)計(jì)理念，在信息管理邏輯結(jié)構(gòu)框架內(nèi)，實(shí)現(xiàn)的具有高度整體性和一致性的創(chuàng)新發(fā)展。因此，動(dòng)態(tài)設(shè)計(jì)及操作方式一定要保證以用戶為根本，注重讀者的閱讀感受，實(shí)現(xiàn)簡單易用、符合感知的良好交互體驗(yàn)。

參考文獻(xiàn)

[1]王靈毅.解構(gòu)傳統(tǒng)：數(shù)字出版物設(shè)計(jì)理念及方法研究[J].出版廣角，2014（14）：58-59.

[2]荊世鵬.數(shù)字出版物視覺界面信息設(shè)計(jì)研究[J].計(jì)算機(jī)產(chǎn)品與流通，2018（4）：152.

[3]崔曉敏.電子雜志形式與交互問題分析[J].科技信息，2009（20）：207-208.