基于智慧校園背景下的界面信息可視化設計研究

唐若涵 徐國鋒 漢田 王鵬

[摘 ? ? ? ? ? 要] ?大數據時代背景下，勢必要進一步推進智慧校園建設。信息可視化可以驅使用戶的視覺感知，增強用戶對數據更深層次的認知，同時也為智慧校園的發展創造了有利條件。網站建設是高校信息化建設的重點，也是承載高校信息的重要平臺，而網站界面既是高校形象定位、辦學特色的首要體現，也是信息傳遞與視覺傳達的媒介。以提升教育信息化水平、優化高校網站界面為目的，將信息可視化設計作為研究的切入點，繼而探究其在高校網站界面設計中的應用原則。

[關 ? ?鍵 ? 詞] ?智慧校園;信息可視化;高校網站;界面設計

[中圖分類號] ?G434 ? ? ? ? ? ? ? [文獻標志碼] ?A ? ? ? ? ? ?[文章編號] ?2096-0603（2021）09-0190-02

高校肩負著人才培養的重要使命，智慧校園的提出有助于高校實現綜合辦校育人。在這一背景下，智慧校園建設也對高校網站提出了更高的要求。科學、合理的網站能夠構建高效、統一、穩定的綜合信息服務平臺，為智慧校園建設提供不同維度的有力保障。而網站界面作為高校網站的一張名片，既是充分發揮網站功能的前提，又是解決網站建設與網站使用之間矛盾的關鍵。那在界面設計中如何協調網站特色與信息資源之間的關系，如何避免“重形式，輕應用”等問題的產生，這就需要將網站信息與用戶進行有效互聯，而可視化設計能夠進一步解決這一問題。信息可視化與界面設計的有機結合能夠構建出合理的信息空間與智慧化運行環境，從而為教學、科研、管理提供更為高效、便捷的服務。

一、信息可視化與智慧校園的關系

在構建和諧穩定、便捷安全、可持續發展的智慧校園中，信息可視化是必不可少的環節。具體而言，在智慧校園這種新的校園態勢下，信息可視化能夠將紛雜的數據資源進行篩選與提取，并利用簡潔的圖形化語言予以直觀表達，有效避免信息冗余所造成的視覺負擔。一方面，信息可視化改變了以往傳統的數據表達方式，提高了校內數據資源的利用效率，優化了交互方式和受眾體驗;另一方面，信息可視化便于高校智慧應用服務的進一步發展，能夠使師生群體享受到更為安全、可靠、人性化的智慧服務，有助于泛在化學習的實現與高校的全面變革。

二、信息可視化與界面設計有機結合的重要意義

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

三、信息可視化在高校網站界面設計中的應用原則

（一）明確高校網站建設的功能與意義

1.把握高校的風格定位

高校網站既是信息化教學、管理、科研、服務的網絡平臺，又是高校形象宣傳的窗口，兼具綜合性、專業性與規范性。界面則是高校網站信息資源配置的直觀表達，其設計風格應與高校的形象定位與辦學特色相聯系，與高校的信息化水平相適應。因此，在進行界面設計時，既要充分考慮高校網站信息資源的統籌與分配，加強對外宣傳、對內服務的功能建設，又要在突出基本辦學情況與特色的同時，不斷強化其與軟硬件設備的深度融合，完善高校網站界面的導向性與可視化。

2.完善網站的功能表達

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

（二）明確高校網站基本模塊的設置與優化

1.符合用戶的需求定位

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

2.遵循科學的視覺原理

遵循科學的視覺原理能夠進一步強化師生群體與高校網站信息資源之間的相互作用關系，為界面可視化設計提供科學的理論依據。基于認知心理學的基本原理，在界面可視化設計中進行合理、有序的信息處理，能夠有效引導受眾的視覺注意力，讓高校網站界面更符合師生群體的視覺審美需求。

認知心理學中的視覺流程、視覺結構、視覺經驗，都對界面的可視化設計具有一定的指導作用。利用視覺流程可以引導受眾視線的移動和變化，構建符合視覺生理閱讀習慣的界面布局和視覺層次。其中，單向視覺流程往往比多向視覺流程傳達信息更為簡潔、快捷;傾斜的視覺流程則比垂直和水平的編排方式更富有動感。而界面中的留白，則能夠與界面信息形成一種對比空間，在視覺流程中劃分出合理的視覺層次。此外，利用視覺結構原理能夠將界面內容進行有序分組的結構化處理，以此增強信息的可讀性。基于視覺經驗，在界面標題欄、功能項等布局上通常會固定于幾種常見的版式，這些視覺經驗對界面可視化設計提出了具有指導性的視覺感知規律。

3.構建合理的視覺層次

在進行高校網站界面的可視化設計時，要從師生群體的需求出發并以科學的視覺原理為依據，通過合理配置文字、圖形、色彩等視覺元素的相互作用關系，優化可視化的應用效果，從而構建出合理的視覺層次，進一步營造和諧的界面視、知覺氛圍。

（1）提高文字的易讀性

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

（2）增強圖形的可視性

圖形的合理應用能夠增強界面信息的可視化。圖形是對文字的視覺描述，能夠通過不同的視覺形象去傳達界面信息。在界面設計中，圖形的形態、面積和位置等都會對界面版式產生重要影響，同時也會影響到界面信息的傳達。圖形的恰當使用與科學處理能夠使界面具有明顯的主次關系和節奏感，既能帶給瀏覽者更為直觀的心理暗示與視覺引導，又能進一步渲染界面風格，吸引用戶的視覺關注。

（3）注重色彩的導向性

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

四、結論

高校網站是智慧校園建設的重要組成部分，蘊含著豐富的信息資源。而網站界面設計兼具藝術性與功能性，也是網站優化的重點。在界面設計中增強信息可視化既能夠實現準確、高效的信息引導和信息傳遞，改善用戶的視覺體驗，又能不斷強化智慧校園中知識共享化、管理一體化、服務一戰式的模式，實現綜合辦校育人。

參考文獻：

[1]張乃恒.網頁界面設計風格多樣化研究[D].南京：東南大學，2015.

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

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

編輯 劉莉琴