數字出版物交互內容動態設計分析

曾嶸 安娜

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

關鍵詞 數字出版物；媒介特點；動態設計

中圖分類號 G2 文獻標識碼 A 文章編號 2096-0360（2020）19-0001-04

基金項目：魯迅美術學院院級課題“圖形動畫在公益科普類數字出版物中的創新應用研究”。

1 數字出版物的媒介特點

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

2 數字內容的動態設計

2.1 版面元素的動態設計

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

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

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

2.2 界面布局的動態設計

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

數字出版物可以利用設備優勢，通過多任務多手勢來實現不同方向的滑動、縮放、點擊、切換、翻頁等動態設計，也可設定自動完成圖片和文本信息內容的展示和切換。對于信息內容較多，在界面結構框架中無法完整顯示，需要擴展隱藏的空間時，可以采用可滾動框架、上滑、下拉、點擊展開等動態設計方式實現，如圖2所示。分組信息則可使用手風琴模式或卡片模式折疊在界面中。與內容無關的動態元素在界面中的存在比例不宜太多，會對視覺感知產生不必要的干擾，增加認知負荷，不利于信息的傳達和內容的學習。動態設計不能夠隨意添加，要具有引導的作用且能夠讓用戶接受，恰當的動態設計才能夠實現簡潔而有效的用戶體驗。

2.3 信息層級的動態設計

信息層次指系統中的信息組織方式，按照一定的原則對信息進行分組和排序，信息層級有著優化結構、形成焦點、強化邏輯的作用。動態設計可以幫助用戶建立圖形界面的層級關系，避免視覺認知變化太過而突然出現的缺口，完成界面順暢地轉場。

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

2.4 導航方式的動態設計

導航方式的動態設計是指數字出版物導航界面和按鈕的人機交互、創作邏輯等體現出版物動態變化的視覺流程。用戶觸發了某種導航方式，界面會進行相應的反饋，導航的動態設計是出版物交互邏輯和創意體現的重要部分。

不同于紙質出版物的線性方式，數字出版物信息內容采用基于超文本的非線性編輯方式，欄目、菜單、分類等布局結構對用戶的閱讀引導就顯得尤為重要。導航的主要功能是輔助用戶閱讀，而動態設計可以重新定義數字出版物界面的體驗感，減少導航的操作步驟，提高用戶的閱讀效率。基于手勢的界面交互也會隨著操作手勢的不斷增加而調整導航方式，可以根據手勢動作的發展來研發新的交互功能。

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

3 動態設計的應用原則

3.1 動態設計的整體性

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

3.2 動態設計的一致性

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

3.3 動態設計的功能性

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

3.4 動態設計的趣味性

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

4 結語

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

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

參考文獻

[1]王靈毅.解構傳統：數字出版物設計理念及方法研究[J].出版廣角，2014（14）：58-59.

[2]荊世鵬.數字出版物視覺界面信息設計研究[J].計算機產品與流通，2018（4）：152.

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