毕业论文（设计）科普类网站中动效的设计与应用研究.pdf

重庆邮电大学硕士学位论文摘要摘要日新月异的设计形式在持续满足着大众的审美诉求，动效在界面设计中的植入 突破了静态视觉界面表达的局限。与此同时，中国愈发加大对大众的科普力度，科 普领域以及科普平台的视觉展示方式都有着不同程度的突破。笔者运用文献研究法来充实相关背景知识，确保对研究内容的了解深入且观点 创新；运用问卷调查法了解大众最真实的使用感受与审美需求；运用综合实践法将 研究的理论成果转化为应用实践，使理论与实践相互补足，共同促进。论文内容主 要分为四章。第一章阐述了研究课题的相关背景等内容，整理研究课题的框架为下 一步研究工作做好大致的规划。第二章笔者从基本概念、原则对科普类网站动效进 行深入剖析，并在实际的调研中得出结论，结论对接下来的动效应用实践有一定的 指导意义。第三、四章探讨科普类网站中动效的设计构思与实践应用，结合各类动 效的表现与功能意义等将动效设计系统化地分类研究。再根据前期的理论探索与实 践分析，笔者运用图形创意与运动规律等知识将科普类网站中的动效设计设想在原 型设计阶段具体化展现。该论文在一定程度弥补了科普类网站中动效设计理论不足的缺陷，动效的植入 为科普传播提供了新颖的展示形式，科普类网站更为设计领域中的革新思路提供了 实践的平台，科普类网站与动效设计二者互利互促、相得益彰。关键词：动效设计，科普，网站，界面设计III重庆邮电大学硕士学位论文AbstractAbstractThe ever-changing design forms continue to meet the aesthetic demands of the public,and the implantation of motion design in interface design breaks through the limitations of static visual interface expression.At the same time,China is increasing its efforts to popularize science to the public.There are different breakthroughs in the field of popular science and the visual display mode of popular science platform.The author uses the method of literature research to enrich the relevant background knowledge,to ensure a thorough understanding of the research content and innovative viewpoints;uses the questionnaire survey method to understand the most authentic use feelings and aesthetic needs of the public;uses the comprehensive practice method to transform the theoretical results of the research into application practice,so that theory and practice complement each other and promote together.Enter.The paper is divided into four chapters.Chapter 1 elaborates the background of the research topic and other contents,and arranges the framework of the research topic to make a general plan for the next research work.In the second chapter,the author makes a deep analysis of the basic concepts and principles of the dynamic effect of popular science websites,and draws a conclusion in the actual investigation.The conclusion has a certain guiding significance for the following dynamic effect application practice.The third and fourth chapters discuss the design conception and practical application of dynamic design in popular science websites,and systematically classify the dynamic design according to the performance and functional significance of various motion design.Then,according to the previous theoretical exploration and practical analysis,the author uses the knowledge of graphic creativity and motion law to concretely display the dynamic design concept of popular science websites in the prototype design stage.This paper makes up for the deficiency of dynamic design theory in popular science websites to a certain extent.The implantation of dynamic effect provides a new form of display for popular science communication.Popular science websites provide a practical platform for innovative ideas in the field of design.Popular science websites and dynamic design are mutually beneficial and mutually reinforcing.Keywords:Motion Design,popularization of science,Website,Interface DesignIV重庆邮电大学硕士学位论文目录目录第一章绪论.1第一节国内外研究背景与意义.1一、国内外研究背景.1二、研究意义.1第二节国内外研究现状.2一、国外研究现状.2二、国内研究现状.3第三节创新点与难点.6一、研究创新点.6二、研究难点.7第四节 研究方法与研究思路.7一、主要研究方法.7二、研究思路.7第五节研究内容框架.7第二章科普类网站中动效理论基础与调研.9第一节科普类网站动效概述及历史沿革.9一、科普类网站动效设计的概述.9二、科普类网站中动效的历史沿革.9第二节“1+6+2”设计原则的启示.10一、迎用户初识的欢迎.10二、促用户易用的告知.10三、致用户难忘的细节.11第三节科普类网站中动效案例的调研.12一、调研目的与方法.12v重庆邮电大学硕士学位论文目录二、调研案例内容及结果统计.12三、用户调研总结分析与研究.13第四节科普类网站用户对动效的需求调研.14一、调研目的与方法.14二、调研内容及结果统计.15三、用户调研总结分析与研究.16第三章科普类网站中各类动效设计分析与设计思路.19第一节情景类动效对网站框架的逻辑解读.19一、沉浸：转场过渡中的氛围构建.19二、三维：层级展示中的空间突破.20第二节引导类动效对用户操作的循循善诱.21一、延展：弹性面积中的层次叠加.21二、聚焦：视觉注意中的排他引导.22第三节响应类动效对用户心理的相知相适.23一、编舞：内容呈现中的效果美化.23二、暗示：操作反馈对应的心理期许.24第四节情感类动效的设计升华.24一、信赖：情感层次中的认同归属.25二、达趣：科普传播中的怡情怡趣.25三、基调：品牌塑造中的情感思索.27第四章科普类网站中动效应用实践.28第一节动效中基础图形创意手法的运用.28一、异形同构激发创意火花.28二、矛盾空间与异变玩转视觉游戏.30第二节动效中动画表现技法的融入.32VI重庆邮电大学硕士学位论文目录一、运动规律符合真实性心理需求.32二、动效引发用户在体验过程中的故事性演绎.34第三节动效的产品原型产出.34一、故事板与界面流程的构思与创建.34二、原型方案的设计.36第四节动效设计的测试与评估.37一、用户可用性与满意度测试.37二、方案的用户评估及反馈.38结论.41参考文献.43附录A毕业作品创意书.45附录B毕业作品内容简介.46附录C设计过程图.47附录D 毕业作品效果图.49附录E调查问卷.53附录F毕业作品光盘.55致谢.56攻读硕士学位期间从事的科研工作及取得的成果.57VD重庆邮电大学硕士学位论文第一章绪论第一章绪论第一节国内外研究背景与意义一、国内外研究背景“2018年我国公民达到基本科学素质标准的比例达到8.47%,2020年我国公 民拥有基本科学素质的公民百分比设定的目标是接近10%。”但这仍远远低于欧 美等发达国家，由此表明我国仍需在科普实践中投入更大精力去提高我国公民科学 素质。科普网站作为新媒体服务平台，网站界面中的创新设计理念与设计思维是提 高网站人性化体验的一个关键点。它能够直接影响着新时代网民浏览信息的兴趣。当前网页设计师在设计网页动效时经常用到的软件有Axure、adobe XD、sket ch.principle等，这些软件不强调高难度的代码技术，意在能够清晰表达设计者 的想法，将想法能够清晰且明确的呈现出来。近年来这些软件多用于增加网站的实 用性与趣味性设计实践之中，从而提高网站的用户体验。目前动效设计在国内起步 较晚，其发展水平与国际仍有巨大差距。本研究将在已有的技术与设计标准上研究科普网站内容如何与动效设计相结 合，以求提高科普类网站更人性化的视觉体验。二、研究意义（一）理论价值本研究以提高科普类网站交互界面动效的视觉体验为最终目的，从网页界面设 计规范与人性化设计理论分析出与科普网站内容和动效设计在用户体验原则上的内 在联系，探寻两者之间的相关性及正面促进性。本研究为实现科普类网站交互界面 动效设计进行深入分析与探索，对于改善科普行业重产品、轻服务观念的方式与途 径提供了学理支撑。动效设计是由近年来大量设计工作者通过用户研究得出的一类界面设计新趋 势，它不仅代表了设计工作者在界面设计中动画形式的不倦探索，也代表了设计工 作者永远追求创新与完美的精神，本课题作为创新界面设计的冰山一角，但同样希 1重庆邮电大学硕士学位论文第一章绪论望创新精神的星星之火达到燎原之势，唤起我国设计工作者对创新领域的不断探 索。（二）实际应用价值本研究从以动态化界面设计如何对于科普类网站视觉体验构建的积极作用以及 当前科普文化的传播劣势、服务性差对于科普产业发展的阻碍，探寻提高科普类平 台人性化服务的途径与对策。为切实实现科普类网站运用新媒体技术展现手段实现 动态化界面设计提供一些方法启示和实践方案。为科普网站界面设计者创新设计思 路，转变设计角度，从而创作出更多人性化的优秀科普类网站界面设计提供实际借 鉴价值。同时本研究也对于其他类型网站、媒体平台的人性化动效设计具有一定的 启示与实践参考价值。第二节国内外研究现状一、国外研究现状（一）国外实践应用现状“旧金山探索馆网站，是当今世界上第一个科学博物馆网站。”该网站成立 于1933年，旧金山探索馆的网站已经发展成为一个成熟的技术博览馆。该网站制 作精美，内容丰富，为访问者提供了有效的信息访问平台。英国国家科技艺术基金 会是由国家资助的科学技术和艺术专业组织，其主要目的是帮助英国人培养创新精 神，并在国家科技基金组织下建立一个规模较大的行星科学机构。美国国家航空航 天局（NAS A）成立于1958年，是全球航天局的领导者,该网站扮演着美国国家航空 航天门户的重要角色。此外还有很多著名的科普类网站正在发挥着它们独特的科普 能力，为大众科学文化素质的提高做出了不可小觑的贡献。综上所述，国外科普类网站依附其国家雄厚的背景支持，建立背景与创建时长 都令国内科普类网站望尘莫及。（二）国外科普类网站界面设计艺术理论研究现状当前国内外针对科普类网站中界面设计研究的文献为数不多，由于国内外在艺 术设计领域发展程度存在较大差异，所以优秀的国外网站界面设计见解是值得我们 为之探讨并分析研究的。2重庆邮电大学硕士学位论文第一章绪论从文献研究上来看，国外的网页设计相较于国内的来说，有以下三点优势：1.在色彩搭配方面利用高效的调色工具实现符合大众审美的颜色主题“L ynnette Porter(1996)提出了一种自动交互式网页的新工具。网页自动 的调色板工具是专业和业余网页设计师的必备神器。”它会根据用户提供的彩色引 导图像创建新的颜色主题。”32.在艺术设计基本理论应用方面建立了更加贴近实践的可用性理论Blackmon(2002)从认知心理学和认知神经科学的角度出发，建立了一个初 步的相似性选择理论，即在复杂信息网站完成搜索任务时，人们如何在信息补丁上 分配注意力。“Pee(2017)考虑到网站界面是与网站用户接触的主要点，用户 往往试图通过良好的网站界面设计来确保信息传达的准确性，进而反应出企业用户 至上的态度,通过用户调查可建立用户对网站好感度的影响模型。”3.在技术与艺术设计融合探索方面明确了设计思路Bolter(2003)的书中对设计的观点是设计不需要传递信息，将自己从意识 中抹去，设计是可以让我们参与形式和内容的一种互动体验。”二、国内研究现状(一)国内实践应用现状由于地方政府越来越重视科学普及，他们对科普类网站的人力与物力、财力支 持都越来越多。目前，各地已建和在建的科普网站大体遵循以下四种模式：”热点 跟踪的新闻性传播模式、兴趣体验的知识性传播模式、科学权威的发布性传播模 式、兴趣聚友的探讨性传播模式。”这四种模式各具特色。但在内容上未能使用 户产生“由下而上”的主动传播。在互动参与、策划推广方面做得还不够新颖、大 胆、有趣，因此，导致用户参与程度不强、未能产生更为强大的社会效益。(二)国内科普类网站界面设计艺术理论研究现状由中国知网数据资源库2019年1月22日关键词“科普网站”搜索出的300篇 文献来看，每年发表文献的数目都有一定波动。近两年来总体文献研究较2013年 以来呈逐步下降趋势，如图1所示。3重庆邮电大学硕士学位论文第一章绪论I-I0OOO 4 3 2 1.发表年度趋势图1“科普网站”关键字年度文献发表总体趋势分析统计1.科普类网站界面设计艺术理论研究流于表面“南京理工大学硕士王向云(2017)提出增添科普网站趣味性、凸显科普网站 个性是创新科普网站呈现形式的重要环节。”“河北工业大学刘国丽(2015)提 出科普网站在表现形式上宜教于乐，增强参与性，实现多方面互动。”“大连理 工大学崔银河(2016)对我国科普网站设计现状问题方面提出了当前国内众多科普 网站传播方式单调，互动性差的诟病。”阿2.网站交互界面动效设计文献总体技重艺薄从宏观网站界面设计来看国内网站中的动效设计起步较晚，就目前所查询到的 文献来看，针对本研究相关性较强的文献虽然较前几年有所增加，但总体基数依旧 较少，由中国知网数据资源库2019年1月22日关键词“网站设计”搜索结果110 11篇文献数据来看近年来文献研究呈下降趋势，如图2所示。主要分为技术实现 类与艺术设计理论类。但归属于网页设计领域下的“网页动画”关键词检索结果总 数的124篇中，年度文献发表数目并没有逐步上升趋势，呈现出起伏不定的状态，如图3所示。“网页动画”关键词搜索结果主题分布情况与主题比较来看，如图 4、图5所示，我国对于网页动画研究的技术实践上的探讨远远高于理论研究，忽 视了网页浏览者的用户体验。发裹年度趋势()箕1,000-图2“网站设计”关键字文献发表年度趋势分析4重庆邮电大学硕士学位论文第一章绪论发表年度趋势()以翼图3“网页动画”关键词年度文献发表趋势图4“网页动画”关键词搜索结果主题分布图5“网页动画”中主题趋势比较就研究现状而言，国内对网站界面设计的研究主要有以下特征：第一，在网站界面设计理论领域逐渐细化。“北京印刷学院杨旺功(2016)分析了动效设计在用户界面设计中的影响因 素，追溯了动效设计的概念和渊源，并分析了动效设计在移动界面设计的使用的理 论，阐述动效设计对用户体验的影响，最后提出了影响动效设计对用户注意力影响 程度的维度。”口口”安徽工程大学刘梦琪(2015)对网页设计中的动画创意提出原 则性思考：第一，动画需要符合不同的信息主题，第二，动画需要利用更多的艺术 手法来展现网页的趣味性，以及满足浏览者的审美需求。第三，动画中的一些角色 形象，还应具有一定的区域化和民族化特征。”“湖南师范大学吴希(2014)阐 5重庆邮电大学硕士学位论文第一章绪论述网页内容的设计与制作正在逐步形成独特的制作手法和风格，尤其像区别于一般 媒体的角度和功能性上更加独具一格。网页设计正在逐渐形成为一个新学科，其制 作方法、概念和技巧也正在快速转变，以往单调的平面素材将被更多表现形式所替 代。”13第二，在网站动效设计领域逐步向提高用户体验方向靠拢。广西艺术学院设计学院动画专业教师邵俊翔（2016）认为：“针对目前的流行 趋势，探析视觉传达设计的交互动效制作手法和特点。”,“白银矿冶职业技术学 院讲师梁银妮（2016）探讨了 FL AS H技术，分析研究了动态网页与FL AS H技术的结 合运用。”I，“滇西科技师范学院教师谭庭俊（2017）就网页设计中计算机多媒体技 术的应用进行分析。”综上所述，国内学者在相关领域的研究依旧不是很多且没有日渐好转的趋势。但现有的文献基础依旧为本研究做了 一定的理论基础。我将在此基础上立足于科普 类网站交互界面动效设计对网页动效进行更深入地探索。第三节创新点与难点一、研究创新点（一）应用创新点以经典设计构成理论为基础，运用创新的网页UI设计理念与符合用户体验的 设计思路，结合实践应用案例为网页动效设计与科普类网站文化、内容等有效融合 提供合理的方案构思。（二）理论创新点在动效设计方面，该课题为网页动效设计的定制化网站界面设计提出相关的方 法与研究思路，为网页动效的发展与应用探索出更多的实践路径。科普传播受各种因素的影响，如市场背景、营销模式等等，本课题在科普传播 方面，拓展了间接影响科普传播的因素，如网页的界面设计。提醒广大科普研究者 多拓展思维，才能找到更多有效、高效的科普传播措施。6重庆邮电大学硕士学位论文第一章绪论二、研究难点现阶段学术界针对科普类网站的视觉界面设计的研究总体来讲不够深入、完 善，各个科普类网站的动效设计案例并不多见，这给研究工作的前期资料收集与调 研带来了一定的影响。需要旁征博引设计观点来据理论证研究观点，认真观察并研 究动效案例，运用多种研究方法促进研究工作顺利开展。第四节研究方法与研究思路一、主要研究方法本研究将以科普类网站中动效设计的相关研究成果和调查资料为依据，开展科 普类网站动效设计的相关工作。主要的研究方法为：文献研究法：通过阅读大量的文献来掌握目前对本研究相关领域的研究进度，避免研究重复内容和导致研究缺乏理论支撑。问卷调查法：通过大量的用户调查，总结出用户真实的使用意愿。以此作为设 计科普类网站的界面的参考。综合实践法：本研究的创新性不仅在于理论的创新，更是设计应用领域的尝 试，通过实践可以轻松发现问题并逐步寻找出解决方案。应用实践也可以进一步反 馈与完善理论体系，从而达到理论与实践的共同促进。二、研究思路笔者以科普类网站与动效设计的理论基础入手，将什么样的动效是符合科普类 网站用户的需求标准、科普类网站需要什么样的动效设计的研究工作从理论研究逐 步过渡到实践应用。第五节研究内容框架首先侧重对研究对象的背景与相关理论进行总结与分析，寻找出科普类网站与 动效之间的关联特征，总结出科普类网站动效设计的特殊性与创新性，为后续的实 践研究作理论支撑。7重庆邮电大学硕士学位论文第一章绪论第二步从调研工作入手，了解当今科普类网站用户对于动效的需求，并结合已 有的设计评价理论创建科普类网站中动效的评估模型，用于评测现有案例的动效设 计水平，并以此作为调研基础，为动效的设计与应用确定方向。第三步针对科普类网站中动效的应用设计划分不同的交互层次，研究不同层次 间动效的表现对于用户体验提升的影响，并基于不同层次的交互行为采用不同的动 效设计表现去协调网站建设者的商业、公益目的与科普类网站用户的交互体验提升 目的。第四步主要阐述科普类网站中动效设计的工作流程。将动效设计工作具体化、流程化实施，笔者结合毕业设计的制作给予读者一个科普类网站的动效设计应用方 案。8重庆邮电大学硕士学位论文第二章科普类网站中动效理论基础与调研第二章科普类网站中动效理论基础与调研第一节科普类网站动效概述及历史沿革一、科普类网站动效设计的概述“科普类网站是指以网站为传播平台，由专门的组织机构或个人在网站上开展 的以科普网民为对象科普活动。”科普类网站主要分为两大类别：专门科普网站 和非专门科普网站。前者包括科协、科研院所、企业、政府、媒体、个人等主办的 以科普为主要内容的网站和综合门户网站的科普频道。”后者包括存在于搜索引 擎、网络视频、博客、数字图书馆、在线文献数据库等网络形态之中的与科普有关 的信息和内容。”网动效设计被称为运动图形设计，也有人称其为动态设计。运动 图形设计遵循平面设计和图形运动语言的双重标准，是一种变化丰富的艺术设计表 现形式，动效配合静态页面布置比单纯的静态图形界面更能有沉浸式表现效果。科 普类网站界面中的动效设计通常是为了促进网站的用户体验，让科普过程更加轻 松、有趣。二、科普类网站中动效的历史沿革一般大众能够见到并感受动效带来的体验是在动效设计并植入于程序或相关网 页代码之后，用户在与动效见面之前，如果技术达不到，设计师的草图中的动效设 计得再为精美无法植入程序中，那这些匠心独运的想法也将白费。所以动效的设计 发展也有部分取决于科学技术的发展与普及。在早期应用程序中并没有动效的体 现，动效设计起源于20世纪50年代，因其实践性较强，表现形式丰富，又是与其 他模块相互交叉配合产生的，所以在分类上有多种多样的规则划定，分类标准尚不 统一。其内容形式广泛，视觉效果变化多端，这是动效受大众大为喜爱的原因之O到了 1984年，科学技术有了改善与提升，才将一些简单的动效在应用程序中 植入，具有代表性的有苹果公司设计的mac电脑。20世纪80年代后，动效设计发 展迅速，制作与表现形式也愈发多样，到了 2007年，改变人类的产品苹果手机问 9重庆邮电大学硕士学位论文第二章科普类网站中动效理论基础与调研世了，其中动效的植入使用户在操作呢体验上得到了极大的提升。而后随着html 5、CS S 3、Java script等网页代码技术的飞速发展，他们所编写出来的动效表现 效果也越来越惊艳、美妙、复杂、精细。第二节“1+6+2”设计原则的启示前人总结出来的设计原则往往经受了时间的打磨与众人的考验。了解动效的相 关设计原则可以帮助我们对动效的掌握更加全面，正确避免踩坑。”一个系列单元 的欢迎动效加六个左右的引导动效加一到两个让人愉悦、轻松并产生惊喜感的细节 性动效”M是Ben Johnson在Alt WWDC上给出的应用程序内动效的基本公式。虽 然这套动效设计原则基于APP平台，但是其中的很多设计思路与设计理念同样也适 用于网页动效。对于科普类网站中的动效设计可在“1+6+2”设计原则的基础上结 合实际做适当的调整与革新，才能创造更好的用户体验效果。一、迎用户初识的欢迎欢迎动效适用于初次接触产品的用户，在用户不了解该产品时告知用户一些该 产品的主要信息，让用户知道这是一款什么样的产品，用后会产生怎样的效果，它 会给生活带来怎样的改变等等。科普类网站一般需要用户读取大量的科普知识，从 而达到充实自身科学素质的目的，枯燥乏味的学习环境本身就会令用户体验大打折 扣。优秀的欢迎动效会直接明了地让用户在最短时间内了解该产品。并让用户在短 时间内有信息输入，降低了无聊感、增强了趣味性。而在欢迎页的加载过程中出现 的加载动效加强了产品与用户之间的沟通，持续的沟通有助于缓解用户的焦虑情 绪，对产品信任感增加。在科普类网站中，这类动效的植入会让用户好感倍增，有 效留住初来乍到的人群，增加科普传播的用户群体。二、促用户易用的告知一个网站诞生后需要用户使用来发挥它强大的功能与作用，这时就需要网站特 有的“教学方式”让用户学会使用这个网站，不论何种的教学方法，用户的学习感 受直接影响到他对该网站的好感度。教学过程越是不易察觉，越能让用户感觉到轻 10重庆邮电大学硕士学位论文第二章科普类网站中动效理论基础与调研松自在，用户体验舒适了，自然对网站的评价提高。但学习类的动效不宜过多，像 前面所说的六个左右的引导动效是在多次测试与评估后得出的结论。科普类网站本 身具备的学习特性使得引导类动效的数量应该更少，这样一来，才能平衡多方面的 学习压力给用户带来的心里焦虑与困惑感。三、致用户难忘的细节动效本身的时间延伸属性满足了用户操作过程中的过渡需求，缓解了操作后的 生硬感受。一些细微的动效设置往往会令用户记忆深刻，从而影响到用户对整个网 站的好感度增加。比如移动端QQ信息列表内的红色信息提示气泡的动效，轻轻的 手指拖拽提示警示就会消除，一系列连贯的气泡消失动效模拟了现实真实感，减轻 用户的操作复杂性，也增强了手势操作的趣味性，这种反馈动效直观而又贴近真 实。此外QQ下部导航中的联系人图标会根据跳转的页面显示不同的头像转向，模 拟真实的人物视觉关注方向，这一动效在视觉表现上并不突出，不仔细观察还不易 被发现，但是这一动效的设置给页面增加了更多的趣味性，细节之处独具匠心。再 比如苹果官网中iMac pro介绍页面，页面随着鼠标滚轮的上下翻动可控制iMac P ro产品的整体外观的动图展示进度，如图6所示。配合产品动图中屏幕视频的同步播放。动效形式新颖，用户在浏览过程中参与度也非常高。图6苹果官网中iMac Pro展示页面整体外观的动图展示部分截图11重庆邮电大学硕士学位论文第二章科普类网站中动效理论基础与调研第三节科普类网站中动效案例的调研一、调研目的与方法（一）调研目的设计师的每一项设计都要先经过周密的考量与规划，争取做到每一个设计都有 理有据、具有极强的效用与说服力。本调研工作是科普类网站中动效设计实践的前 期工作，旨在评估动效在科普类网站中的应用现状及所存在的问题。为后期科普类 网站的视觉界面优化与动效方案的设计提供充足、完善的数据支撑。（二）调研方法研究者本人和受邀的各个年龄段、行业领域人群总计50人对选定的科普类网 站逐一浏览观察，并做详细的浏览记录，每人在指定的每个网站存留时间不低于3 0分钟，以确保观察数据的完整性。此次网站调研主要是为了分析不同科普网站的 整体网站层级框架、动效的设置效果。二、调研案例内容及结果统计我国科普类网站种类和数量繁多，在这些科普类网站中选取具有典型性、代表 性的网站及其动效案例进行分析。“本次调研选取2018中国科普网站排行榜靠前名 次且存在动效的科普类网站进行具体动效案例的调研。”加排行榜是根据中文网站 排名、百度权重、PR值、社会影响四项指标作为评价指标对中国境内合法科普网 站的综合影响力进行排名，排行数据具有一定的客观、权威性。因可能会出现网站 界面设计版本迭代，所以仅选取2018年H月10-20日统一进行动效调研。具体调 研数据，如表1所示。表1科普类网站具体动效案例调研网站属性网站名称动效模块动效类别企业果壳网导航下拉菜单情景类层级展示动效事业单位中国数字科技馆导航下拉菜单情景类层级展示动效事业单位中国数字科技馆原创推荐模块响应类操作反馈动效12重庆邮电大学硕士学位论文第二章科普类网站中动效理论基础与调研事业单位中国数字科技馆搜索模块情景类过渡动效企业科普中国网首页banner情景类过渡动效企业科普中国网问卷调查模块图标引导类焦点关注动效企业科普中国网辟谣联盟模块引导类焦点关注动效企业科普中国网精品策划模块响应类内容呈现动效企业中国国家地理网首页导航引导类空间拓展动效企业中国国家地理网焦点模块侧边栏响应类内容呈现动效企业中国国家地理网内容展示区引导类空间拓展动效事业单位中国天文科普网首页热门区情景类过渡动效事业单位蝌蚪五线谱微店广告引导类焦点关注动效事业单位蝌蚪五线谱返回顶部图标响应类内容呈现动效政府机关中国科普网首页banner情景类过渡动效企业微科普首页banner情景类过渡动效政府机关中国科学技术馆重点推荐模块banner情景类过渡动效政府机关中国科学技术馆微信、微博图标响应类内容呈现动效事业单位学生科技网新闻动态模块情景类过渡动效事业单位学生科技网精彩视频模块引导类焦点关注动效三、用户调研总结分析与研究（一）动效设置量较少大多数科普类网站界面设计中都鲜有动效的出现，即使是存在动效的科普类网 站，其中的动效设置量也并不丰富。出现这种情况的原因可能是由于网站建设者把 更多的精力投入到了具体科普内容上面，也可能他们认为现有的静态视觉界面在信 息的传达上已能够满足用户对网站的认知需求。但是对干竞争者而言，动效的加入 可让科普类网站的视觉界面更加新颖且表现力更强，界面设计中涉及到的界面版式 表达也会因为动效的加入不在拘泥于界面本身的面积而变得伸缩自如；对于用户群 体而言，优秀的动效设计可以提升他们在浏览科普类网站时的用户体验，带来浏览 舒适感。13重庆邮电大学硕士学位论文第二章科普类网站中动效理论基础与调研（二）动效设计类别单一动效本身类型多样，每种类型赋予动效不同功能的表现，根据调研结果可以看 出科普类网站在动效设计方面通常仅仅在某些鼠标手势、点击的触发形式略有体 现，形式也较为单一，多数仅仅停留在缓动缓出的效果上。只是把元素出现的时间 线拉长了，缓解了页面反馈的生硬感与由此引发的不适感。但是单一的动效设置会 让动效的设计显得过于粗糙，缺乏多样性与趣味性。网站中的动效设计虽然在使用 上相比移动端APP少了手指交互，但是鼠标的触发机制也是多种多样，比如当网页 打开时鼠标会一直停留在屏幕这一二维空间中，这与只有做手势才会与屏幕接触的 移动端APP动效有所不同。科普类网站的动效在鼠标手势交互的多样性也较为缺 乏，这也给我们对网页动效的设计留存了巨大的设想空间。（三）缺乏独特性动效的独特性能够促进网站本身与其他网站差异化提升，在融入了企业内涵与 文化理念的动效个性化表现能够彰显出科普类网站品牌独特性，完善品牌形象的塑 造。但从调研结果来看大多数动效的设计完全是模式化流程，对于动效元素在位 移、旋转、缩放、透明度上都有种似曾相识的感觉，虽然给网站开发者减轻了压 力，但并不能带给用户视觉浏览上的惊喜，更无法将网站本身的品牌独特性传达给 用户。本研究是基于科普类网站平台来设计动效，如果动效的设置与科普类网站这 一指定的实践平台毫不相关则失去了动效在平台上实践的独特性，好比制作了一个 可以拷贝的模版，换做其他任何一个平台均能表现，其价值与实践意义大打折扣。原创性与品牌效应的创造是成功动效设计的重要体现，所以动效的设计在与科普网 站本身的相关性方面一定要深度揣摩。第四节科普类网站用户对动效的需求调研一、调研目的与方法（一）调研目的网站最终设计出来的效果是要能够令用户满意，用户是评判设计作品的忠实考 官，所以网站的动效设计依然要遵循用户的需求。对科普类网站的动效设计工作中 14重庆邮电大学硕士学位论文第二章科普类网站中动效理论基础与调研与用户相关的测试与评估工作是最后工作的重中之重，做好前期的用户需求调研是 为了把握正确的用户心理，做好知彼工作有助于该动效实践工作中有明确的用户需 求，在工作完成时的测试环节中收获满意评估与反馈效果。（二）调研方法用户调研采取线上线下同步进行，目标群体全方位覆盖，不仅涉及各个年龄 段、各个行业目标用户，还包括目前不是科普网站用户的潜在用户群体。调研方式 主要为线上及线下的调查问卷以及线下专门的用户访谈活动。二、调研内容及结果统计综合此前研究者对于设计的评估标准，结合网站平台与动效的使用场景与特 性，本人认为科普类网站中动效的评估标准包括功能价值、视觉美感、令人愉悦程 度、引人注目程度、流畅性、简洁性、表意清晰程度。根据这七点设计评价标准设 计用户调查问卷。在经过半个月持续的问卷调查后，笔者针对收集来的问卷做了细密的筛选，对 没有长期使用科普网站经历的被调研者填写的问卷、填写不规范、不完整的问卷以 及填写时间小于2分钟问卷被全部剔除（时间过短的原因可能是没有认真审题或者 思考）。经过系统归总，共有合格问卷428份，合格率为87.3%,如表2所示，符 合本课题的研究需求。表2样本数据收回情况表发放方式发放/回收渠道收回数量线上社交媒体链接323份线上邮件链接34份线上问卷星21份线下在校学生39份线下不同来源受访者73份15重庆邮电大学硕士学位论文第二章科普类网站中动效理论基础与调研三、用户调研总结分析与研究因科普类网站是借助于互联网平台公开供人们浏览使用的，所以本人把调研目 标主要集中在互联网用户上，调研方式也主要以在问卷星调研问卷网站上编辑并广 泛分享的问卷调研为主，但其中不乏没有调研到的很多互联网用户，所以为获得更 多的调研数据部分调研采取了线下问卷派发并填写收集的问卷。前面提到受访者群体不仅涉及各个年龄段、各个行业人群，所以其中不免集合 了一些目前不是科普网站忠实用户的潜在用户群体。通过调研发现的结果可总结为 以下几点：第一，性别不是用户浏览科普类网站的影响因素用户性别统计中男性和女性所占的比例分别为56.1%和43.9%,男性人数略微 多于女性，但因国内男性数量也是略多于女性，可以说明科普类网站的用户中性别 影响因素较少。第二，年轻化的互联网用户喜好对科普类网站设计有指导意义在众多受访者中发现对科普类网站感兴趣且频繁浏览科普类网站的用户年龄段 多集中于年轻一族。18至30岁的受访者占总受访者数的51.87%,这一年龄段的用 户是互联网平台的活跃用户，这表明科普网站用户群体较为年轻化。也说明互联网 平台的活跃用户的诸多用户习惯与喜好都可能对科普类网站的设计有着潜在的指导 意义。第三，教育基础在一定程度上影响了用户对知识的渴求在喜爱浏览科普类网站的受访者中拥有本科学位的人数最多，占调研总人数的 比例为78.5%。由此可见，科普网站的使用者普遍具有一定的教育基础。第四，科普类网站的忠实用户对动效的需求更为明显在分析用户浏览网站频率与动效需求的相关性时，笔者发现浏览科普网站频率 越高的用户对动效的设计需求与要求越大，所以研究科普类网站中动效的设计十分 必要。笔者对科普类网站中动效的设计需求分析时发现，用户对不同的设计标准有着 强弱不同的需求程度。”调查问卷中用户对网站中动效的设计需求描述分析如图7 所示，描述分析通过平均值或中位数描述数据的整体情况。从图中可以看出：16重庆邮电大学硕士学位论文第二章科普类网站中动效理论基础与调研用户对科普类网站动效设计需求中