李婉茹 余杨奎

摘  要： 让学习者能高效地从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设计的平台能够实现自动切换分辨率、改变图片尺寸和相关脚本功能。

随着移动网络的快速普及，人们选择使用手机、平板等移动设备随时随地的获取信息。……