李婉茹 余楊奎

摘 ?要： 讓學習者能高效地從Web中提取有效知識，是長期以來互聯(lián)網(wǎng)領(lǐng)域不斷探索的重要內(nèi)容。以視覺設(shè)計為研究對象，對平臺的視覺設(shè)計要素進行分析，以視覺信息傳達為主題，結(jié)合平臺界面設(shè)計的基本原則，從主題、色彩、文字等方面研究視覺信息傳達對平臺界面設(shè)計的重要作用，強調(diào)合理設(shè)計界面中的主題、色彩、文字等信息，將平臺界面設(shè)計得更加有條理，通過響應式技術(shù)完成協(xié)同育人平臺的前端設(shè)計。

關(guān)鍵詞： 協(xié)同育人; 視覺傳達設(shè)計; 響應式; 平臺

中圖分類號：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 引言

在信息時代，人們生活水平逐漸提高，對生活的品質(zhì)和要求也更高。從藝術(shù)品到日常生活用品，人們總是在追求更舒適的生活條件和學習習慣。

視覺傳達設(shè)計涵蓋的領(lǐng)域十分廣闊，在人們生活和學習中無處不在。

隨著網(wǎng)絡技術(shù)和通信技術(shù)不斷完善與發(fā)展，視覺傳達設(shè)計又開辟了一個全新的舞臺，例如網(wǎng)頁界面中的主題、顏色、文字等信息，設(shè)計者通過字體設(shè)計、版面改進、動畫插入、顏色調(diào)整等方式，向?qū)W習者傳達學習內(nèi)容的內(nèi)涵，激發(fā)學習者的學習興趣。然而，傳統(tǒng)平臺只適合在臺式電腦和手提電腦上操作，在手機或平板電腦上觀看時會出現(xiàn)頁面比例失調(diào)、顯示緩慢等問題。為了適應不同的設(shè)備，“響應式Web設(shè)計”應運而生?；陧憫絎eb設(shè)計的平臺能夠?qū)崿F(xiàn)自動切換分辨率、改變圖片尺寸和相關(guān)腳本功能。

隨著移動網(wǎng)絡的快速普及，人們選擇使用手機、平板等移動設(shè)備隨時隨地的獲取信息。因此，在移動設(shè)備多元化的背景下，需要在不同設(shè)備上呈現(xiàn)給用戶同樣的Web網(wǎng)頁。

本文在視覺傳達設(shè)計視角下，論述響應式Web設(shè)計的概念，構(gòu)建協(xié)同育人平臺，通過基于頁面賦權(quán)的Web內(nèi)容提取方法中提出的Web網(wǎng)頁帶權(quán)搜索策略和基于模板算法Web具體內(nèi)容提取方式，能在Internet中快速精準的定位網(wǎng)頁，提取網(wǎng)頁內(nèi)容，重構(gòu)開放性、可擴展的協(xié)同育人平臺數(shù)據(jù)庫，完成對協(xié)同育人平臺的設(shè)計[1]。實現(xiàn)了各主體之間的即時溝通和同步合作，促進數(shù)字化教學的開展。基于響應式Web設(shè)計協(xié)同育人平臺能夠?qū)崿F(xiàn)多方的在線溝通，具有可靠、及時、互動的功能。將視覺傳達設(shè)計與響應式Web設(shè)計結(jié)合起來，這顯得特別重要，使Web頁面變得引人注意，讓學習者更加容易從中獲取知識。

1 響應式Web設(shè)計的概念

目前，有很多Web設(shè)計采用的是固定寬度的方式，可以為所有的終端提供一致的用戶界面，不過只能在電腦屏幕中正常顯示，在移動終端的小屏幕中，頁面布局不能自適應調(diào)整。傳統(tǒng)的Web設(shè)計不能滿足用戶的瀏覽需求，針對這一問題，設(shè)計人員根據(jù)用戶顯示屏尺寸設(shè)計多個版本的網(wǎng)頁，以滿足不同設(shè)備的用戶瀏覽。不過，這也會增加網(wǎng)站的負擔和增加網(wǎng)站投入的費用。而且，先進技術(shù)和設(shè)備的發(fā)展非常快，未來會有更加新型的移動設(shè)備充斥市場，單獨設(shè)計網(wǎng)頁版本顯然是不切實際[2]。

響應式Web設(shè)計可以很好的解決以上問題，設(shè)計人員針對聯(lián)網(wǎng)設(shè)備的多樣性，設(shè)計一個能夠自動適應用戶終端設(shè)備的網(wǎng)站，讓網(wǎng)頁能夠根據(jù)用戶的瀏覽需求和設(shè)備環(huán)境作出響應和調(diào)整。響應式Web設(shè)計是一次性開發(fā)出來的網(wǎng)頁，能夠根據(jù)不同的終端設(shè)備自動調(diào)整頁面尺寸，既省錢又省力。

2 協(xié)同育人平臺的關(guān)鍵技術(shù)分析

2.1 技術(shù)要求

⑴ 方便

設(shè)計人員在設(shè)計協(xié)同育人平臺時應該從操縱時間和地點上考慮，使用響應式的設(shè)計思路使頁面更加有彈性，自動調(diào)整圖片的尺寸，保證頁面可以不受時間、地點和終端設(shè)備屏幕大小的限制，操作方便。

⑵ 穩(wěn)定

使用先進的MYSQL數(shù)據(jù)庫，運用成熟的B/S開發(fā)模式、SSH加密保護以及強大的系統(tǒng)容錯機制，能夠保證系統(tǒng)穩(wěn)定、可靠地運行。

⑶ 先進

在協(xié)同育人平臺設(shè)計中采用架構(gòu)技術(shù)，運用先進的軟件平臺開發(fā)工具，保證系統(tǒng)具有擴展性。

⑷ 可維護

系統(tǒng)管理員將平臺的維護集中在數(shù)據(jù)庫服務器和Web服務器上，使得系統(tǒng)維護更加的方便、省力[3]。

2.2 采用的關(guān)鍵技術(shù)

⑴ 響應式Web技術(shù)

響應式Web設(shè)計是網(wǎng)站開發(fā)和設(shè)計中運用的一種技術(shù)方式，響應式Web技術(shù)可以提高網(wǎng)站的自適應性，使系統(tǒng)內(nèi)容布局能夠根據(jù)用戶的使用顯示器不同進行調(diào)整，適應于各種設(shè)備。響應式Web技術(shù)能夠讓原本1292像素寬，四欄的內(nèi)容顯示在1025像素寬的顯示屏上，簡化成二欄的內(nèi)容。響應式Web設(shè)計是一種全新的思維模式，隨著移動設(shè)備的不斷更新，響應式設(shè)計也隨著發(fā)生著各種改變。

⑵ 安卓開發(fā)環(huán)境

安卓系統(tǒng)是一些手機或平板電腦等終端的操作系統(tǒng)，是一種手機智能平臺，在智能手機中的應用較為廣泛。安卓手機操作系統(tǒng)基于Linux開放性內(nèi)核，由操作系統(tǒng)、中間件、應用軟件和用戶界面等四部分組成。安卓系統(tǒng)不僅適用于手機中，還延伸到了其他便攜式、嵌入式設(shè)備（電子書、平板電腦、上網(wǎng)本、高清電視等）中，具有很好的發(fā)展前景。

⑶ SSH技術(shù)

SSH是目前市場中較為流行的Web應用程序開源框架，集成框架SSH系統(tǒng)在職責上可以分為表示層、業(yè)務邏輯層、域模塊層、數(shù)據(jù)持久層等四層，幫助人們快速地開發(fā)結(jié)構(gòu)清晰、可復用性好和方便維護的Web應用程序[4]。

3 協(xié)同育人平臺的系統(tǒng)設(shè)計

3.1 系統(tǒng)設(shè)計原則

協(xié)調(diào)育人平臺的系統(tǒng)設(shè)計原則主要有合適性原則、結(jié)構(gòu)穩(wěn)定性原則、可擴展性原則和可復用性原則等。具體內(nèi)容主要有：①遵循合適性原則使用歸納和推理的方法設(shè)計出合適的體系結(jié)構(gòu)，滿足系統(tǒng)的功能性需求和非功能性需求。體系結(jié)構(gòu)在設(shè)計完成之后會在一段時間內(nèi)保持穩(wěn)定不變，按照結(jié)構(gòu)穩(wěn)定性原則需要在詳細設(shè)計階段對數(shù)據(jù)庫、模塊、數(shù)據(jù)結(jié)構(gòu)和用戶界面等進行設(shè)計。②可擴展性原則是軟件擴展新功能的容易程度，擴展功能越好，軟件適應變化的能力越強。軟件的可擴展性與穩(wěn)定性不存在沖突，可擴展性保證系統(tǒng)結(jié)構(gòu)穩(wěn)定的基礎(chǔ)條件，遵循可擴展性原則對體系結(jié)構(gòu)進行分層開發(fā)，并不會破壞原有結(jié)構(gòu)的穩(wěn)定性。③可復用性原則，在設(shè)計過程中重復利用已經(jīng)存在的東西。協(xié)同育人平臺中的大部分內(nèi)容都是相當成熟，還有一小部分內(nèi)容是創(chuàng)新的。在新產(chǎn)品的使用中延用上個產(chǎn)品的體系結(jié)構(gòu)，可以降低新產(chǎn)品的風險和研發(fā)成本?；诳蓮陀眯栽瓌t設(shè)計出的系統(tǒng)具有通用性，能夠重復使用。

3.2 系統(tǒng)安全設(shè)計

在移動終端和系統(tǒng)中配置殺毒軟件和防火墻，避免因遭到惡意攻擊而使系統(tǒng)中的文件信息被破壞、更改和泄露。系統(tǒng)安全設(shè)計包括：完整性、真實性、保密性和安全性。常用的系統(tǒng)安全設(shè)計如下。

⑴ 物理安全設(shè)計

設(shè)計人員在設(shè)計協(xié)同育人平臺時應該按照電子信息系統(tǒng)機房的相關(guān)設(shè)計規(guī)范，在2-4的建筑內(nèi)選擇機房場地時，應該避開雨水滲漏位置和用水設(shè)備，選擇的物理位置要能夠抵御6級地震和8級臺風。機房供電選擇“市電+柴油發(fā)電機+UPS”的供電方式，這種電力供應方式比較安全可靠[5]。在機房內(nèi)安裝報警設(shè)備和監(jiān)控系統(tǒng)，將主機和服務器等重要設(shè)備放置在主機房內(nèi)，將主要設(shè)備與部門固定在地板上，通信線纜鋪設(shè)在地下。

⑵ 網(wǎng)絡安全設(shè)計

在此次設(shè)計中采用安全套接層協(xié)議SSL，作用于應用層和傳輸層之間。該協(xié)議由SSL警報協(xié)議、SSL記錄協(xié)議、SSL握手協(xié)議組成，SSL警報協(xié)議是在服務器和客戶之間傳輸錯誤信息的，SSL 記錄協(xié)議是SSL握手協(xié)議的參數(shù)，可以對應用層傳輸過來的數(shù)據(jù)進行加密、壓縮，然后通過網(wǎng)絡傳輸層進行信息傳輸。在協(xié)同育人平臺系統(tǒng)中使用分級管理的方式，啟用 必要的訪問控制設(shè)備與功能，對登錄平臺的用戶進行身份鑒別，設(shè)置登錄口令，需要為8位數(shù)以上的字母與組合，然后定期更換。設(shè)置防火墻和入侵檢測監(jiān)視攻擊行為，對網(wǎng)絡系統(tǒng)中的內(nèi)部和外部進行實施監(jiān)測，及時發(fā)現(xiàn)系統(tǒng)中存在的攻擊風險，然后發(fā)出警報提醒工作人員[6]。記錄攻擊來源，加強防范，出具具體的檢查結(jié)果，為安全性分析報告提供可靠依據(jù)，提高網(wǎng)絡的安全整體水平。

⑶ 主機安全設(shè)計

對登錄操作系統(tǒng)和數(shù)據(jù)庫的用戶設(shè)置身份鑒別，用戶身份是唯一性的。用戶輸入口令后才能夠登錄，每次登錄失敗后用結(jié)束會話框進行提醒。用戶網(wǎng)絡登錄連接超時或長時間沒有操作時，就會自動退出系統(tǒng)。使用加密和防竊聽的保護措施，防止修改、惡性刪除和覆蓋信息。在重要的服務器內(nèi)設(shè)置防火墻，采用防范病毒和入侵檢測等產(chǎn)品監(jiān)控，預防可能會出現(xiàn)的攻擊行為。設(shè)置升級服務器，每周更新病毒庫，升級更新系統(tǒng)補丁。

3.3 系統(tǒng)設(shè)計方法

在此次研究中，筆者采取了結(jié)構(gòu)化系統(tǒng)分析的方法，根據(jù)用戶至上的原則系統(tǒng)化、結(jié)構(gòu)化、模塊化的對信息系統(tǒng)進行開發(fā)和設(shè)計，基本思想是使用系統(tǒng)的思想、系統(tǒng)的方法自頂向下的實現(xiàn)系統(tǒng)的分析[7]。

4 協(xié)同育人平臺的實現(xiàn)

4.1 用戶界面

協(xié)同育人平臺的系統(tǒng)界面包括：用戶登錄頁面（輸入了登錄指令后的合法用戶能夠登錄界面進入系統(tǒng)）、管理員登錄系統(tǒng)后臺（機房管理員才能夠登錄系統(tǒng)后臺界面對系統(tǒng)進行管理和監(jiān)測）、管理員發(fā)布公告頁面（管理員在系統(tǒng)中發(fā)布公告信息）、更改密碼（用戶登錄后可以隨時修改密碼，避免賬號被他人盜取，影響系統(tǒng)正常使用。在更改密碼的頁面，系統(tǒng)會進行提示，先輸入原密碼、然后輸入兩次新密碼，進行確認就可以了）。平臺界面設(shè)計離不開視覺傳達設(shè)計的指導，從文字、色彩、圖片、動畫等多維度、多視角、多層次對平臺進行包裝，從而吸引受眾的注意力，達到預期效果。

4.2 業(yè)務邏輯層的功能

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：返回留言總數(shù)。

Public void addMessage：添加留言。

Public voiddeleteMessage：刪除留言。

Public vector getResult：返回查詢結(jié)果。

4.3 工程構(gòu)建

工程構(gòu)建是協(xié)同育人平臺設(shè)計的重要環(huán)節(jié)，設(shè)計人員可以使用SSH技術(shù)實現(xiàn)工程構(gòu)建。SSH框架是最常用的框架之一，SSH分別是Struts、Spring、Hibernate是一個MVC框架，能夠攔截前端的請求;Spring可以使代碼更容易維護;Hibernate是對象數(shù)據(jù)庫，能夠?qū)崿F(xiàn)數(shù)據(jù)交互[7]。MVC（Model-View-Controller）把數(shù)據(jù)處理、數(shù)據(jù)表示及程序輸入輸出控制進行分離，對不同部分對象間的通信方式進行了描述，使其不受其他數(shù)據(jù)模型及其方法的影響，從而讓程序結(jié)構(gòu)更加清晰并具有靈活性[8]。MVC作為一種開發(fā)模式在解決大型Web項目問題上發(fā)揮了重要作用[9]。MVC把應用程序的輸入、輸出、處理強行分離，MVC的應用程序分為模型、控制器及視圖三個部件[10]。在平臺構(gòu)建方面，數(shù)據(jù)庫構(gòu)建是一項重要課題，通過本課題提出的基于頁面賦權(quán)的網(wǎng)頁內(nèi)容提取技術(shù)，重構(gòu)開放性、可擴展的Hibernate對象數(shù)據(jù)庫為平臺做好資源支撐，完成協(xié)同育人平臺的實現(xiàn)。

5 結(jié)束語

基于視覺傳達設(shè)計視角下響應式Web的協(xié)同育人平臺在設(shè)計中將視覺傳達設(shè)計與響應式web設(shè)計有機結(jié)合起來，運用了相關(guān)先進技術(shù)，完成了系統(tǒng)實體構(gòu)建，實現(xiàn)了系統(tǒng)后臺的多個登錄頁面。在協(xié)同育人平臺中教育者、學習者和企業(yè)能夠修改和查看信息，為教學管理和受眾學習提供了很大的便利。響應式協(xié)同育人平臺的構(gòu)建實現(xiàn)了網(wǎng)絡教育中整合資源的目的，方便多方機構(gòu)、主體即時交流，鞏固校企合作，增強終身教育對社會的正面影響。隨著新技術(shù)的不斷研發(fā)，協(xié)同育人平臺的功能會日趨完善，設(shè)計人員遵循相關(guān)設(shè)計原則，對系統(tǒng)運行中存在的問題進行分析和調(diào)整，會提升協(xié)同育人平臺的使用效果。

響應式協(xié)同育人平臺目前缺陷在于不同的終端需要用不同的CSS樣式來控制界面，在樣式調(diào)用過程中容易出錯，導致界面不協(xié)調(diào)的問題，同時也增加了管理員維護開銷。

參考文獻（References）：

[1] 余楊奎.《計算機教育教學改革與實踐》下的食品專業(yè)計算機應用課程教學改革研究[J].食品工業(yè)，2020.41（12）：413-414

[2] 臧進進，鄂海紅.基于響應式Web設(shè)計的網(wǎng)頁生成系統(tǒng)研究與實現(xiàn)[J].軟件，2015.6：37-41

[3] 貝巖.響應式 Web 設(shè)計實現(xiàn)方法研究[J].渤海大學學報（自然科學版），2014.2：170-172

[4] 席先杰.基于響應式Web設(shè)計在線學習資源系統(tǒng)設(shè)計與實現(xiàn)[J].林區(qū)教學，2017.1：94-95

[5] 張幸芝，徐東東，賈菲.基于響應式Web設(shè)計的教務系統(tǒng)移動平臺研究與建設(shè)[J].軟件，2013.6：5-7

[6] 王永臣.綏芬河市職教中心網(wǎng)絡教學平臺系統(tǒng)的設(shè)計與實現(xiàn)[D].電子科技大學，2014.

[7] 陳倬.基于Web技術(shù)的學生學習平臺開發(fā)[D].電子科技大學，2013.

[8] 王愛剛.基于Web的職業(yè)院校網(wǎng)絡辦公系統(tǒng)的設(shè)計與實現(xiàn)[D].黑龍江大學，2015.

[9] 滕文.基于MVC模式的PHP程序開發(fā)[J].科技視界，2012.28：262

[10] 余楊奎.基于MVC模式下的開發(fā)框架建設(shè)與改進[J].海峽科技與產(chǎn)業(yè)，2017.5：98-100

[11] 呂智強.基于MVC模式的PHP框架設(shè)計[J].科技視界，2013.24

收稿日期：2021-02-26

*基金項目：2020年度廣東遠程開放教育科研基金項目“視覺傳達設(shè)計視角下構(gòu)建協(xié)同育人平臺創(chuàng)新研究”（YJ2009）; 2019年度湛江開放大學系統(tǒng)科研項目“基于頁面賦權(quán)的網(wǎng)頁內(nèi)容提取方法研究”（X201901）

作者簡介：李婉茹（1994-），女，山西太原人，本科，助教，主要研究方向：視覺傳達設(shè)計。

通訊作者：余楊奎（1983-），男，安徽安慶人，本科，講師，主要研究方向：計算機應用開發(fā)。