曾嶸 安娜

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

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

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

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

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

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

2 數(shù)字內(nèi)容的動態(tài)設(shè)計

2.1 版面元素的動態(tài)設(shè)計

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

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

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

2.2 界面布局的動態(tài)設(shè)計

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

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

2.3 信息層級的動態(tài)設(shè)計

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

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

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

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

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

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

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

3.1 動態(tài)設(shè)計的整體性

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

3.2 動態(tài)設(shè)計的一致性

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

3.3 動態(tài)設(shè)計的功能性

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

3.4 動態(tài)設(shè)計的趣味性

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

4 結(jié)語

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

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

參考文獻(xiàn)

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

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

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