视觉传达设计视角下响应式协同育人平台设计与实现

李婉茹 余杨奎

摘  要： 让学习者能高效地从Web中提取有效知识，是长期以来互联网领域不断探索的重要内容。以视觉设计为研究对象，对平台的视觉设计要素进行分析，以视觉信息传达为主题，结合平台界面設计的基本原则，从主题、色彩、文字等方面研究视觉信息传达对平台界面设计的重要作用，强调合理设计界面中的主题、色彩、文字等信息，将平台界面设计得更加有条理，通过响应式技术完成协同育人平台的前端设计。

关键词： 协同育人; 视觉传达设计; 响应式; 平台

中图分类号：TP311.1          文献标识码：A     文章编号：1006-8228（2021）08-63-04

Design and implementation of responsive collaborative education platform

with visual communication design

Li Wanru1， Yu Yangkui2

（The Open University of Guangdong， Zhanjiang， Guangdong 524003， China）

Abstract： It has been an important research content in the field of Internet for a long time that learners can efficiently extract effective knowledge from webs. Taking visual design as the research object， this paper analyzes the visual design elements of the platform， taking visual information communication as the theme， combining with the basic principles of platform interface design， studies the important role of visual information communication in platform interface design from the aspects of theme， color， text， etc.， and emphasizes the reasonable design of theme， color， text and so on in the interface， to design a more order platform interface， and complete the front-end design of collaborative education platform with the responsive technology.

Key words： collaborative education; visual communication design; response; platform

0 引言

在信息时代，人们生活水平逐渐提高，对生活的品质和要求也更高。从艺术品到日常生活用品，人们总是在追求更舒适的生活条件和学习习惯。

视觉传达设计涵盖的领域十分广阔，在人们生活和学习中无处不在。

随着网络技术和通信技术不断完善与发展，视觉传达设计又开辟了一个全新的舞台，例如网页界面中的主题、颜色、文字等信息，设计者通过字体设计、版面改进、动画插入、颜色调整等方式，向学习者传达学习内容的内涵，激发学习者的学习兴趣。然而，传统平台只适合在台式电脑和手提电脑上操作，在手机或平板电脑上观看时会出现页面比例失调、显示缓慢等问题。为了适应不同的设备，“响应式Web设计”应运而生。基于响应式Web设计的平台能够实现自动切换分辨率、改变图片尺寸和相关脚本功能。

随着移动网络的快速普及，人们选择使用手机、平板等移动设备随时随地的获取信息。因此，在移动设备多元化的背景下，需要在不同设备上呈现给用户同样的Web网页。

本文在视觉传达设计视角下，论述响应式Web设计的概念，构建协同育人平台，通过基于页面赋权的Web内容提取方法中提出的Web网页带权搜索策略和基于模板算法Web具体内容提取方式，能在Internet中快速精准的定位网页，提取网页内容，重构开放性、可扩展的协同育人平台数据库，完成对协同育人平台的设计[1]。实现了各主体之间的即时沟通和同步合作，促进数字化教学的开展。基于响应式Web设计协同育人平台能够实现多方的在线沟通，具有可靠、及时、互动的功能。将视觉传达设计与响应式Web设计结合起来，这显得特别重要，使Web页面变得引人注意，让学习者更加容易从中获取知识。

1 响应式Web设计的概念

目前，有很多Web设计采用的是固定宽度的方式，可以为所有的终端提供一致的用户界面，不过只能在电脑屏幕中正常显示，在移动终端的小屏幕中，页面布局不能自适应调整。传统的Web设计不能满足用户的浏览需求，针对这一问题，设计人员根据用户显示屏尺寸设计多个版本的网页，以满足不同设备的用户浏览。不过，这也会增加网站的负担和增加网站投入的费用。而且，先进技术和设备的发展非常快，未来会有更加新型的移动设备充斥市场，单独设计网页版本显然是不切实际[2]。

响应式Web设计可以很好的解决以上问题，设计人员针对联网设备的多样性，设计一个能够自动适应用户终端设备的网站，让网页能够根据用户的浏览需求和设备环境作出响应和调整。响应式Web设计是一次性开发出来的网页，能够根据不同的终端设备自动调整页面尺寸，既省钱又省力。

2 协同育人平台的关键技术分析

2.1 技术要求

⑴ 方便

设计人员在设计协同育人平台时应该从操纵时间和地点上考虑，使用响应式的设计思路使页面更加有彈性，自动调整图片的尺寸，保证页面可以不受时间、地点和终端设备屏幕大小的限制，操作方便。

⑵ 稳定

使用先进的MYSQL数据库，运用成熟的B/S开发模式、SSH加密保护以及强大的系统容错机制，能够保证系统稳定、可靠地运行。

⑶ 先进

在协同育人平台设计中采用架构技术，运用先进的软件平台开发工具，保证系统具有扩展性。

⑷ 可维护

系统管理员将平台的维护集中在数据库服务器和Web服务器上，使得系统维护更加的方便、省力[3]。

2.2 采用的关键技术

⑴ 响应式Web技术

响应式Web设计是网站开发和设计中运用的一种技术方式，响应式Web技术可以提高网站的自适应性，使系统内容布局能够根据用户的使用显示器不同进行调整，适应于各种设备。响应式Web技术能够让原本1292像素宽，四栏的内容显示在1025像素宽的显示屏上，简化成二栏的内容。响应式Web设计是一种全新的思维模式，随着移动设备的不断更新，响应式设计也随着发生着各种改变。

⑵ 安卓开发环境

安卓系统是一些手机或平板电脑等终端的操作系统，是一种手机智能平台，在智能手机中的应用较为广泛。安卓手机操作系统基于Linux开放性内核，由操作系统、中间件、应用软件和用户界面等四部分组成。安卓系统不仅适用于手机中，还延伸到了其他便携式、嵌入式设备（电子书、平板电脑、上网本、高清电视等）中，具有很好的发展前景。

⑶ SSH技术

SSH是目前市场中较为流行的Web应用程序开源框架，集成框架SSH系统在职责上可以分为表示层、业务逻辑层、域模块层、数据持久层等四层，帮助人们快速地开发结构清晰、可复用性好和方便维护的Web应用程序[4]。

3 协同育人平台的系统设计

3.1 系统设计原则

协调育人平台的系统设计原则主要有合适性原则、结构稳定性原则、可扩展性原则和可复用性原则等。具体内容主要有：①遵循合适性原则使用归纳和推理的方法设计出合适的体系结构，满足系统的功能性需求和非功能性需求。体系结构在设计完成之后会在一段时间内保持稳定不变，按照结构稳定性原则需要在详细设计阶段对数据库、模块、数据结构和用户界面等进行设计。②可扩展性原则是软件扩展新功能的容易程度，扩展功能越好，软件适应变化的能力越强。软件的可扩展性与稳定性不存在冲突，可扩展性保证系统结构稳定的基础条件，遵循可扩展性原则对体系结构进行分层开发，并不会破坏原有结构的稳定性。③可复用性原则，在设计过程中重复利用已经存在的东西。协同育人平台中的大部分内容都是相当成熟，还有一小部分内容是创新的。在新产品的使用中延用上个产品的体系结构，可以降低新产品的风险和研发成本。基于可复用性原则设计出的系统具有通用性，能够重复使用。

3.2 系统安全设计

在移动终端和系统中配置杀毒软件和防火墙，避免因遭到恶意攻击而使系统中的文件信息被破坏、更改和泄露。系统安全设计包括：完整性、真实性、保密性和安全性。常用的系统安全设计如下。

⑴ 物理安全设计

设计人员在设计协同育人平台时应该按照电子信息系统机房的相关设计规范，在2-4的建筑内选择机房场地时，应该避开雨水渗漏位置和用水设备，选择的物理位置要能够抵御6级地震和8级台风。机房供电选择“市电+柴油发电机+UPS”的供电方式，这种电力供应方式比较安全可靠[5]。在机房内安装报警设备和监控系统，将主机和服务器等重要设备放置在主机房内，将主要设备与部门固定在地板上，通信线缆铺设在地下。

⑵ 网络安全设计

在此次设计中采用安全套接层协议SSL，作用于应用层和传输层之间。该协议由SSL警报协议、SSL记录协议、SSL握手协议组成，SSL警报协议是在服务器和客户之间传输错误信息的，SSL 记录协议是SSL握手协议的参数，可以对应用层传输过来的数据进行加密、压缩，然后通过网络传输层进行信息传输。在协同育人平台系统中使用分级管理的方式，启用 必要的访问控制设备与功能，对登录平台的用户进行身份鉴别，设置登录口令，需要为8位数以上的字母与组合，然后定期更换。设置防火墙和入侵检测监视攻击行为，对网络系统中的内部和外部进行实施监测，及时发现系统中存在的攻击风险，然后发出警报提醒工作人员[6]。记录攻击来源，加强防范，出具具体的检查结果，为安全性分析报告提供可靠依据，提高网络的安全整体水平。

⑶ 主机安全设计

对登录操作系统和数据库的用户设置身份鉴别，用户身份是唯一性的。用户输入口令后才能够登录，每次登录失败后用结束会话框进行提醒。用户网络登录连接超时或长时间没有操作时，就会自动退出系统。使用加密和防窃听的保护措施，防止修改、恶性删除和覆盖信息。在重要的服务器内设置防火墙，采用防范病毒和入侵检测等产品监控，预防可能会出现的攻击行为。设置升级服务器，每周更新病毒库，升级更新系统补丁。

3.3 系统设计方法

在此次研究中，笔者采取了结构化系统分析的方法，根据用户至上的原则系统化、结构化、模块化的对信息系统进行开发和设计，基本思想是使用系统的思想、系统的方法自顶向下的实现系统的分析[7]。

4 协同育人平台的实现

4.1 用户界面

协同育人平台的系统界面包括：用户登录页面（输入了登录指令后的合法用户能够登录界面进入系统）、管理员登录系统后台（机房管理员才能够登录系统后台界面对系统进行管理和监测）、管理员发布公告页面（管理员在系统中发布公告信息）、更改密码（用户登录后可以随时修改密码，避免账号被他人盗取，影响系统正常使用。在更改密码的页面，系统会进行提示，先输入原密码、然后输入两次新密码，进行确认就可以了）。平台界面设计离不开视觉传达设计的指导，从文字、色彩、图片、动画等多维度、多视角、多层次对平台进行包装，从而吸引受众的注意力，达到预期效果。

4.2 业务逻辑层的功能

Public Collection queryato：封装了查询的方法。

Public Course getCourse（string ID）：返回指定ID的课程。

Public static void addCourse：添加一门新的课程。

Public static void deleteCourse（stering id）：删除指定ID

的课程。

Public Collection getCourse：返回所有课程信息。

Public int getMessage Count：返回留言总数。

Public void addMessage：添加留言。

Public voiddeleteMessage：删除留言。

Public vector getResult：返回查询结果。

4.3 工程构建

工程构建是协同育人平台设计的重要环节，设计人员可以使用SSH技术实现工程构建。SSH框架是最常用的框架之一，SSH分别是Struts、Spring、Hibernate是一个MVC框架，能够拦截前端的请求;Spring可以使代码更容易维护;Hibernate是对象数据库，能够实现数据交互[7]。MVC（Model-View-Controller）把数据处理、数据表示及程序输入输出控制进行分离，对不同部分对象间的通信方式进行了描述，使其不受其他数据模型及其方法的影响，从而让程序结构更加清晰并具有灵活性[8]。MVC作为一种开发模式在解决大型Web项目问题上发挥了重要作用[9]。MVC把应用程序的输入、输出、处理强行分离，MVC的应用程序分为模型、控制器及视图三个部件[10]。在平台构建方面，数据库构建是一项重要课题，通过本课题提出的基于页面赋权的网页内容提取技术，重构开放性、可扩展的Hibernate对象数据库为平台做好资源支撑，完成协同育人平台的实现。

5 结束语

基于视觉传达设计视角下响应式Web的协同育人平台在设计中将视觉传达设计与响应式web设计有机结合起来，运用了相关先进技术，完成了系统实体构建，实现了系统后台的多个登录页面。在协同育人平台中教育者、学习者和企业能够修改和查看信息，为教学管理和受众学习提供了很大的便利。响应式协同育人平台的构建实现了网络教育中整合资源的目的，方便多方机构、主体即时交流，巩固校企合作，增强终身教育对社会的正面影响。随着新技术的不断研发，协同育人平台的功能会日趋完善，设计人员遵循相关设计原则，对系统运行中存在的问题进行分析和调整，会提升协同育人平台的使用效果。

响应式协同育人平台目前缺陷在于不同的终端需要用不同的CSS样式来控制界面，在样式调用过程中容易出错，导致界面不协调的问题，同时也增加了管理员维护开销。

参考文献（References）：

[1] 余杨奎.《计算机教育教学改革与实践》下的食品专业计算机应用课程教学改革研究[J].食品工业，2020.41（12）：413-414

[2] 臧进进，鄂海红.基于响应式Web设计的网页生成系统研究与实现[J].软件，2015.6：37-41

[3] 贝岩.响应式 Web 设计实现方法研究[J].渤海大学学报（自然科学版），2014.2：170-172

[4] 席先杰.基于響应式Web设计在线学习资源系统设计与实现[J].林区教学，2017.1：94-95

[5] 张幸芝，徐东东，贾菲.基于响应式Web设计的教务系统移动平台研究与建设[J].软件，2013.6：5-7

[6] 王永臣.绥芬河市职教中心网络教学平台系统的设计与实现[D].电子科技大学，2014.

[7] 陈倬.基于Web技术的学生学习平台开发[D].电子科技大学，2013.

[8] 王爱刚.基于Web的职业院校网络办公系统的设计与实现[D].黑龙江大学，2015.

[9] 滕文.基于MVC模式的PHP程序开发[J].科技视界，2012.28：262

[10] 余杨奎.基于MVC模式下的开发框架建设与改进[J].海峡科技与产业，2017.5：98-100

[11] 吕智强.基于MVC模式的PHP框架设计[J].科技视界，2013.24

收稿日期：2021-02-26

*基金项目：2020年度广东远程开放教育科研基金项目“视觉传达设计视角下构建协同育人平台创新研究”（YJ2009）; 2019年度湛江开放大学系统科研项目“基于页面赋权的网页内容提取方法研究”（X201901）

作者简介：李婉茹（1994-），女，山西太原人，本科，助教，主要研究方向：视觉传达设计。

通讯作者：余杨奎（1983-），男，安徽安庆人，本科，讲师，主要研究方向：计算机应用开发。