数字出版物交互内容动态设计分析

曾嵘 安娜

摘 要 从数字出版物多维、动态、非线的媒介特点入手，对视觉元素和交互内容在数字界面中的动态设计原则进行全面解析，分别从版面元素、界面布局、信息层级、导航方式四个方面阐述了动态设计的具体形式，探讨在数字出版物中动态设计的应用原则与发展方向。从而更加全面、辩证地理解动态变化的依据及所呈现的效果，归纳总结了数字出版物中各类动态设计的交互功能与价值所在。

关键词 数字出版物；媒介特点；动态设计

中图分类号 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.