基于智慧校園背景下的界面信息可視化設(shè)計(jì)研究

唐若涵 徐國鋒 漢田 王鵬

[摘 ? ? ? ? ? 要] ?大數(shù)據(jù)時(shí)代背景下，勢必要進(jìn)一步推進(jìn)智慧校園建設(shè)。信息可視化可以驅(qū)使用戶的視覺感知，增強(qiáng)用戶對數(shù)據(jù)更深層次的認(rèn)知，同時(shí)也為智慧校園的發(fā)展創(chuàng)造了有利條件。網(wǎng)站建設(shè)是高校信息化建設(shè)的重點(diǎn)，也是承載高校信息的重要平臺，而網(wǎng)站界面既是高校形象定位、辦學(xué)特色的首要體現(xiàn)，也是信息傳遞與視覺傳達(dá)的媒介。以提升教育信息化水平、優(yōu)化高校網(wǎng)站界面為目的，將信息可視化設(shè)計(jì)作為研究的切入點(diǎn)，繼而探究其在高校網(wǎng)站界面設(shè)計(jì)中的應(yīng)用原則。

[關(guān) ? ?鍵 ? 詞] ?智慧校園;信息可視化;高校網(wǎng)站;界面設(shè)計(jì)

[中圖分類號] ?G434 ? ? ? ? ? ? ? [文獻(xiàn)標(biāo)志碼] ?A ? ? ? ? ? ?[文章編號] ?2096-0603（2021）09-0190-02

高校肩負(fù)著人才培養(yǎng)的重要使命，智慧校園的提出有助于高校實(shí)現(xiàn)綜合辦校育人。在這一背景下，智慧校園建設(shè)也對高校網(wǎng)站提出了更高的要求?？茖W(xué)、合理的網(wǎng)站能夠構(gòu)建高效、統(tǒng)一、穩(wěn)定的綜合信息服務(wù)平臺，為智慧校園建設(shè)提供不同維度的有力保障。而網(wǎng)站界面作為高校網(wǎng)站的一張名片，既是充分發(fā)揮網(wǎng)站功能的前提，又是解決網(wǎng)站建設(shè)與網(wǎng)站使用之間矛盾的關(guān)鍵。那在界面設(shè)計(jì)中如何協(xié)調(diào)網(wǎng)站特色與信息資源之間的關(guān)系，如何避免“重形式，輕應(yīng)用”等問題的產(chǎn)生，這就需要將網(wǎng)站信息與用戶進(jìn)行有效互聯(lián)，而可視化設(shè)計(jì)能夠進(jìn)一步解決這一問題。信息可視化與界面設(shè)計(jì)的有機(jī)結(jié)合能夠構(gòu)建出合理的信息空間與智慧化運(yùn)行環(huán)境，從而為教學(xué)、科研、管理提供更為高效、便捷的服務(wù)。

一、信息可視化與智慧校園的關(guān)系

在構(gòu)建和諧穩(wěn)定、便捷安全、可持續(xù)發(fā)展的智慧校園中，信息可視化是必不可少的環(huán)節(jié)。具體而言，在智慧校園這種新的校園態(tài)勢下，信息可視化能夠?qū)⒓婋s的數(shù)據(jù)資源進(jìn)行篩選與提取，并利用簡潔的圖形化語言予以直觀表達(dá)，有效避免信息冗余所造成的視覺負(fù)擔(dān)。一方面，信息可視化改變了以往傳統(tǒng)的數(shù)據(jù)表達(dá)方式，提高了校內(nèi)數(shù)據(jù)資源的利用效率，優(yōu)化了交互方式和受眾體驗(yàn);另一方面，信息可視化便于高校智慧應(yīng)用服務(wù)的進(jìn)一步發(fā)展，能夠使師生群體享受到更為安全、可靠、人性化的智慧服務(wù)，有助于泛在化學(xué)習(xí)的實(shí)現(xiàn)與高校的全面變革。

二、信息可視化與界面設(shè)計(jì)有機(jī)結(jié)合的重要意義

在界面設(shè)計(jì)中，信息資源按照視覺原理加以布局，經(jīng)過藝術(shù)性加工能夠形成可視化的視覺構(gòu)成，在用戶和原始數(shù)據(jù)資源之間搭建起一個(gè)信息傳遞的橋梁，從而實(shí)現(xiàn)界面信息——用戶的有效人機(jī)交互（如下圖）。因此，通過可視化設(shè)計(jì)去實(shí)現(xiàn)界面信息的合理配置，能夠更加直觀地整合校內(nèi)信息資源，完善高校網(wǎng)站建設(shè)，在界面中構(gòu)建出合理的視覺層次，進(jìn)一步解決 “信息孤島”和資源浪費(fèi)等問題，強(qiáng)化人機(jī)交互的過程，優(yōu)化人機(jī)交互的體驗(yàn)，從而實(shí)現(xiàn)環(huán)境全面感知、網(wǎng)絡(luò)無縫互通、全息立體大數(shù)據(jù)支撐的智慧校園資源共享。

三、信息可視化在高校網(wǎng)站界面設(shè)計(jì)中的應(yīng)用原則

（一）明確高校網(wǎng)站建設(shè)的功能與意義

1.把握高校的風(fēng)格定位

高校網(wǎng)站既是信息化教學(xué)、管理、科研、服務(wù)的網(wǎng)絡(luò)平臺，又是高校形象宣傳的窗口，兼具綜合性、專業(yè)性與規(guī)范性。界面則是高校網(wǎng)站信息資源配置的直觀表達(dá)，其設(shè)計(jì)風(fēng)格應(yīng)與高校的形象定位與辦學(xué)特色相聯(lián)系，與高校的信息化水平相適應(yīng)。因此，在進(jìn)行界面設(shè)計(jì)時(shí)，既要充分考慮高校網(wǎng)站信息資源的統(tǒng)籌與分配，加強(qiáng)對外宣傳、對內(nèi)服務(wù)的功能建設(shè)，又要在突出基本辦學(xué)情況與特色的同時(shí)，不斷強(qiáng)化其與軟硬件設(shè)備的深度融合，完善高校網(wǎng)站界面的導(dǎo)向性與可視化。

2.完善網(wǎng)站的功能表達(dá)

界面設(shè)計(jì)與網(wǎng)站建設(shè)緊密相連，網(wǎng)站的合理配置有利于界面信息資源的進(jìn)一步優(yōu)化。因此，在智慧校園建設(shè)中，應(yīng)不斷進(jìn)行校園網(wǎng)站的改造與升級，不斷完善網(wǎng)站功能，建立集成、快捷、多元化的信息交互一體化平臺，不斷強(qiáng)化信息傳遞的整合化與模塊化，進(jìn)一步營造良好的校園文化氛圍，促進(jìn)不同學(xué)科背景師生群體的線上交互。同時(shí)，還要加強(qiáng)服務(wù)個(gè)性化平臺建設(shè)，增設(shè)信息交互欄目，充分利用網(wǎng)絡(luò)這一快捷方便的渠道，加強(qiáng)溝通，實(shí)現(xiàn)民主治校。

（二）明確高校網(wǎng)站基本模塊的設(shè)置與優(yōu)化

1.符合用戶的需求定位

高校網(wǎng)站界面的可視化設(shè)計(jì)要從師生群體的觀點(diǎn)和立場出發(fā)，并注重其心理經(jīng)驗(yàn)與視覺感知，從而選擇合理、有效的方式去完善界面功能的表達(dá)。一般來說，界面的整體設(shè)計(jì)要求簡潔明了，且符合受眾的心理經(jīng)驗(yàn)，這就要求在進(jìn)行可視化設(shè)計(jì)時(shí)必須從宏觀上把握界面的比例尺寸、空間層次、主從關(guān)系、視覺秩序以及邏輯條理性等，綜合考慮界面的布局、大小、色調(diào)、位置、形態(tài)變化、可操作性等因素，并在此基礎(chǔ)上權(quán)衡界面信息與視覺元素的關(guān)系，實(shí)現(xiàn)界面功能性與美觀性的統(tǒng)一。

2.遵循科學(xué)的視覺原理

遵循科學(xué)的視覺原理能夠進(jìn)一步強(qiáng)化師生群體與高校網(wǎng)站信息資源之間的相互作用關(guān)系，為界面可視化設(shè)計(jì)提供科學(xué)的理論依據(jù)?；谡J(rèn)知心理學(xué)的基本原理，在界面可視化設(shè)計(jì)中進(jìn)行合理、有序的信息處理，能夠有效引導(dǎo)受眾的視覺注意力，讓高校網(wǎng)站界面更符合師生群體的視覺審美需求。

認(rèn)知心理學(xué)中的視覺流程、視覺結(jié)構(gòu)、視覺經(jīng)驗(yàn)，都對界面的可視化設(shè)計(jì)具有一定的指導(dǎo)作用。利用視覺流程可以引導(dǎo)受眾視線的移動(dòng)和變化，構(gòu)建符合視覺生理閱讀習(xí)慣的界面布局和視覺層次。其中，單向視覺流程往往比多向視覺流程傳達(dá)信息更為簡潔、快捷;傾斜的視覺流程則比垂直和水平的編排方式更富有動(dòng)感。而界面中的留白，則能夠與界面信息形成一種對比空間，在視覺流程中劃分出合理的視覺層次。此外，利用視覺結(jié)構(gòu)原理能夠?qū)⒔缑鎯?nèi)容進(jìn)行有序分組的結(jié)構(gòu)化處理，以此增強(qiáng)信息的可讀性?；谝曈X經(jīng)驗(yàn)，在界面標(biāo)題欄、功能項(xiàng)等布局上通常會(huì)固定于幾種常見的版式，這些視覺經(jīng)驗(yàn)對界面可視化設(shè)計(jì)提出了具有指導(dǎo)性的視覺感知規(guī)律。

3.構(gòu)建合理的視覺層次

在進(jìn)行高校網(wǎng)站界面的可視化設(shè)計(jì)時(shí)，要從師生群體的需求出發(fā)并以科學(xué)的視覺原理為依據(jù)，通過合理配置文字、圖形、色彩等視覺元素的相互作用關(guān)系，優(yōu)化可視化的應(yīng)用效果，從而構(gòu)建出合理的視覺層次，進(jìn)一步營造和諧的界面視、知覺氛圍。

（1）提高文字的易讀性

文字的合理應(yīng)用能夠增強(qiáng)界面信息的易讀性。通過對界面文字字體、大小、間距、位置、顏色、方向等屬性的把握，能夠確立界面視覺層次的主次關(guān)系，驅(qū)動(dòng)瀏覽者對信息關(guān)注度的強(qiáng)弱判斷，增強(qiáng)界面信息傳達(dá)的可讀性;字號、字間距、行高等屬性的合理設(shè)置能夠讓界面文字層次分明，增強(qiáng)界面信息傳達(dá)的明確性。另外，文字編排對界面視覺傳達(dá)效果具有直接影響。在進(jìn)行文字編排時(shí)，需要根據(jù)界面內(nèi)容和視覺原理進(jìn)行合理設(shè)計(jì)，通常可通過局部強(qiáng)調(diào)的方式打破界面格局，增強(qiáng)視覺刺激。

（2）增強(qiáng)圖形的可視性

圖形的合理應(yīng)用能夠增強(qiáng)界面信息的可視化。圖形是對文字的視覺描述，能夠通過不同的視覺形象去傳達(dá)界面信息。在界面設(shè)計(jì)中，圖形的形態(tài)、面積和位置等都會(huì)對界面版式產(chǎn)生重要影響，同時(shí)也會(huì)影響到界面信息的傳達(dá)。圖形的恰當(dāng)使用與科學(xué)處理能夠使界面具有明顯的主次關(guān)系和節(jié)奏感，既能帶給瀏覽者更為直觀的心理暗示與視覺引導(dǎo)，又能進(jìn)一步渲染界面風(fēng)格，吸引用戶的視覺關(guān)注。

（3）注重色彩的導(dǎo)向性

色彩能夠傳達(dá)出強(qiáng)烈的情感，也是界面設(shè)計(jì)必不可少的重要元素。在界面設(shè)計(jì)中，科學(xué)合理的色彩運(yùn)用，能夠形成主次有序的視覺分區(qū)，起到增強(qiáng)視覺效果和強(qiáng)化主題的作用。首先，在色彩的選擇上，應(yīng)注重每種色彩的心理屬性，并將受眾的色彩感知作為依據(jù)，避免色彩誤用導(dǎo)致色彩含義與界面主題風(fēng)格的背離。其次，在色彩的搭配上，還應(yīng)注重色彩的對比與調(diào)和。面積較大的背景一般選用明度高、純度低、對比弱的配色;而面積較小的標(biāo)題欄則通常選用對比較為強(qiáng)烈的配色，進(jìn)而實(shí)現(xiàn)色彩與內(nèi)容、功能、構(gòu)圖的統(tǒng)一。另外，在設(shè)計(jì)中還要考慮高校網(wǎng)站界面視覺顯示終端的色彩呈現(xiàn)等客觀因素，避免色彩輸出產(chǎn)生偏差，影響用戶的視覺體驗(yàn)。

四、結(jié)論

高校網(wǎng)站是智慧校園建設(shè)的重要組成部分，蘊(yùn)含著豐富的信息資源。而網(wǎng)站界面設(shè)計(jì)兼具藝術(shù)性與功能性，也是網(wǎng)站優(yōu)化的重點(diǎn)。在界面設(shè)計(jì)中增強(qiáng)信息可視化既能夠?qū)崿F(xiàn)準(zhǔn)確、高效的信息引導(dǎo)和信息傳遞，改善用戶的視覺體驗(yàn)，又能不斷強(qiáng)化智慧校園中知識共享化、管理一體化、服務(wù)一戰(zhàn)式的模式，實(shí)現(xiàn)綜合辦校育人。

參考文獻(xiàn)：

[1]張乃恒.網(wǎng)頁界面設(shè)計(jì)風(fēng)格多樣化研究[D].南京：東南大學(xué)，2015.

[2]吉涵宇，席濤.大數(shù)據(jù)時(shí)代智慧校園的信息可視化設(shè)計(jì)應(yīng)用研究[J].包裝工程，2017（14）：95-100.

[3]管春艷，管邦寧.基于共享知識庫的智慧校園信息資源平臺設(shè)計(jì)[J].信息化研究，2019（6）：65-70，82.

編輯 劉莉琴