高校官網(wǎng)UI構(gòu)建與實現(xiàn)
——以安徽藝術(shù)學(xué)院為例

丁雅晴，米春暉

（1.安徽藝術(shù)學(xué)院美術(shù)設(shè)計系，安徽合肥230009；2.科大訊飛股份有限公司，安徽合肥230088）

UI中文解釋為用戶界面（User interface，簡稱UI），是系統(tǒng)和用戶之間進行交互和信息交換的媒介[1]。一個美觀合理的界面會給人帶來舒適的視覺享受，加深用戶對企業(yè)的好感度，所以門戶網(wǎng)頁的建立和設(shè)計成為各個行業(yè)的首要工作。高校官網(wǎng)建設(shè)是高校對內(nèi)信息化建設(shè)和校園精神文明建設(shè)中不可或缺的重要部分，其對外又有著關(guān)乎學(xué)校聲譽和樹立良好形象的重要使命[2]。進入21世紀(jì)以來，我國幾乎所有的高校包括二級學(xué)院都擁有了自己的網(wǎng)絡(luò)平臺，但是發(fā)展卻較為遲緩。筆者通過瀏覽國內(nèi)外高校網(wǎng)站發(fā)現(xiàn)，各高校網(wǎng)站特別是國內(nèi)高校官網(wǎng)，模式單一、界面設(shè)計水平參差不齊，用戶體驗感較差。一個符合學(xué)院文化、形象的主頁設(shè)計不僅能夠反應(yīng)出學(xué)校的文化內(nèi)涵，更能突出院校的深厚底蘊。安徽藝術(shù)學(xué)院作為安徽省唯一的一所藝術(shù)類本科院校，無論是從校園文化還是學(xué)院主頁，都應(yīng)當(dāng)體現(xiàn)出濃厚的地域特色與藝術(shù)氛圍。本文將以安徽藝術(shù)學(xué)院門戶網(wǎng)站為研究主體進行實例設(shè)計，針對原先官網(wǎng)界面所存在的問題完成了對官網(wǎng)的界面設(shè)計改造，希望通過本次研究可以促進高校校園網(wǎng)站對內(nèi)對外的傳播作用，提高網(wǎng)站使用率，擴大高校的影響力。

1 網(wǎng)站建設(shè)背景

安徽藝術(shù)學(xué)院（申報設(shè)置前為“安徽大學(xué)藝術(shù)與傳媒學(xué)院”）網(wǎng)站于2014年上線運行，到目前為止沒有改版，原有版面已持續(xù)5年。6月10日，教育部致函安徽省人民政府，同意設(shè)置安徽藝術(shù)學(xué)院。作為安徽省唯一藝術(shù)類本科院校，目前的門戶網(wǎng)站不論是視覺形象還是功能設(shè)計方面都存在著許多不足，筆者根據(jù)安徽藝術(shù)學(xué)院辦學(xué)特色，以及教育部文件要求，依據(jù)其地理位置、專業(yè)特色兩大特色將網(wǎng)頁整體的視覺形象進行提升。

1.1 地理位置

安徽藝術(shù)學(xué)院坐落于合肥市新站區(qū)高教基地，占地556畝。學(xué)院的校園規(guī)劃及建筑由同濟大學(xué)建筑設(shè)計研究院設(shè)計，充分體現(xiàn)了徽派元素的建筑風(fēng)格。根據(jù)地域特色，徽文化元素及特點應(yīng)當(dāng)體現(xiàn)在門戶網(wǎng)站的設(shè)計當(dāng)中。

圖1 安徽藝術(shù)學(xué)院校園風(fēng)光

1.2 專業(yè)特色

安徽藝術(shù)學(xué)院定位于應(yīng)用型高等學(xué)校，主要培養(yǎng)適應(yīng)區(qū)域新興產(chǎn)業(yè)發(fā)展需要的應(yīng)用型藝術(shù)類人才。學(xué)校本科專業(yè)首批設(shè)置音樂表演、表演、繪畫、播音與主持藝術(shù)4個本科專業(yè)。學(xué)院著力培養(yǎng)“高素質(zhì)、強能力、精才藝、善應(yīng)用”的高級藝術(shù)專門人才，重點培養(yǎng)一線演藝、傳媒人才及適應(yīng)新興文化產(chǎn)業(yè)急需的專門人才，為安徽文化強省建設(shè)服務(wù)。在考慮校園文化建設(shè)同時，也要考慮其專業(yè)特色，將藝術(shù)元素融入門戶網(wǎng)站的設(shè)計當(dāng)中。

1.3 網(wǎng)站定位

校園網(wǎng)站的構(gòu)建不同于大眾傳媒，高校門戶網(wǎng)站承擔(dān)著高校對外宣傳、對內(nèi)服務(wù)的任務(wù)，其所呈現(xiàn)在用戶面前的視覺效果在一定程度上反映出一個學(xué)校的辦學(xué)理念與管理水平。首先，它集成了大量業(yè)務(wù)服務(wù)與龐大的信息數(shù)據(jù)。其次，校園網(wǎng)的用戶以教職工、學(xué)生、考生、家長和校友為主，文化水平普遍較高，用戶群體比較固定。再者，高校作為人才培養(yǎng)和學(xué)術(shù)研究的最高殿堂，同時還肩負著服務(wù)社會和文化傳承的重要使命，因此高校門戶網(wǎng)站有突出的教育性和學(xué)術(shù)性[3]。

1.4 界面設(shè)計對學(xué)校官網(wǎng)的重要性

互聯(lián)網(wǎng)已經(jīng)成為各行各業(yè)溝通的橋梁，必須要不斷提高審美才能適應(yīng)大眾的視覺需求。擁有良好視覺形象的高校門戶網(wǎng)站，可以幫助高校建立社會認同感以及國際形象。對于在校師生來說，可以通過安藝官網(wǎng)快速了解校內(nèi)新聞、行業(yè)資訊、學(xué)術(shù)動態(tài)。對于畢業(yè)生和家長來說，校園網(wǎng)是他們了解安藝第一印象的媒介。如果想要在眾多高校官網(wǎng)中脫引而出，學(xué)校應(yīng)當(dāng)重視用戶的交互體驗感，除了為用戶提供快捷、準(zhǔn)確的信息外，還需提升網(wǎng)頁的形象設(shè)計，加深用戶對于網(wǎng)站的黏著度。

2 網(wǎng)站現(xiàn)狀

2.1 用戶體驗評價

筆者使用“問卷星”網(wǎng)站作為調(diào)研平臺，通過班會、微信、QQ等傳播途徑發(fā)放“安徽藝術(shù)學(xué)院（后簡稱為“安藝”）官網(wǎng)界面設(shè)計調(diào)查問卷”，對安藝網(wǎng)站的目標(biāo)用戶展開調(diào)查分析，盡可能的保證不同類型用戶問券發(fā)放比例相同，以減少因為不同類型用戶造成的主觀誤差。共回收有效問卷258份，數(shù)據(jù)真實有效。通過問卷所得數(shù)據(jù)分析，結(jié)果如下：35位受訪者認為在校園網(wǎng)查找信息非常方便，62人覺得方便，93人認為一般，68位受訪者表示不方便；37%的受訪者認可目前學(xué)校官網(wǎng)的布局；70%的受訪者希望頁面中能增加圖片的比重；受訪者認為網(wǎng)站設(shè)計重要的因素是整體色調(diào)（61%）、版式布局（82%）以及功能（64%）。

圖2 受訪者使用學(xué)校官網(wǎng)情況統(tǒng)計

在瀏覽安藝網(wǎng)頁的方式調(diào)查中，大部分用戶表示提出在外手機處理工作會更為方便快捷；而在受訪者給出的網(wǎng)頁改進建議中，整體色調(diào)、版式、功能這幾個方面被多次提及，說明用戶在瀏覽網(wǎng)頁過程中對這些是十分在意的；并且相當(dāng)一部分受訪者認為應(yīng)當(dāng)突出地域特色。

2.2 評價結(jié)果分析

通過分析問券調(diào)查的數(shù)據(jù)，以及查閱近50所國內(nèi)外排名靠前的學(xué)校官網(wǎng)，將目前安藝官網(wǎng)界面設(shè)計（圖3）所存在的問題進行歸納整理。

圖3 改造前的安藝官網(wǎng)首頁

2.2.1 字體排列雜亂 筆者打開安藝官網(wǎng)首頁，發(fā)現(xiàn)界面上使用字體超過了三個，banner部分和標(biāo)題欄采用藝術(shù)字體進行加粗處理，略顯雜亂。二級頁面段落文字使用的是有襯線字體宋體，不利于閱讀。高校官網(wǎng)應(yīng)當(dāng)限定頁面字體不能超過兩種，標(biāo)題通過加粗變色的手法做區(qū)分，每一個鏈接行之中都有著固定的盒子區(qū)域，之間的點元素形成的面相互支撐，方便用戶輕松瀏覽。

2.2.2 色彩搭配單調(diào) 官網(wǎng)主色調(diào)是紅色，僅僅是明度純度有變化，并且主要顏色在網(wǎng)頁中占比較小，網(wǎng)頁背景空白較多，缺乏識別性。將大多數(shù)中國高校的網(wǎng)頁截圖放在一起對比，就會發(fā)現(xiàn)在國外很多知名大學(xué)校園門戶網(wǎng)站中，都有著獨立的配色，如劍橋大學(xué)使用“7466c孔雀藍”，加州大學(xué)使用“golden blue”，獨特的配色成為大學(xué)的某種標(biāo)志。用戶打開網(wǎng)頁時最先感受到色彩的沖擊，良好的色彩搭配可以帶給用戶舒適的視覺體驗。在設(shè)計高校網(wǎng)頁時，做到有針對性的用色是相當(dāng)重要的，這也正是國內(nèi)校園門戶網(wǎng)站所缺乏的。

2.2.3 圖像形式單一 圖像在網(wǎng)頁中的首要作用為裝飾，高質(zhì)量的攝影圖像可以迅速抓住用戶的眼球。雖然安藝網(wǎng)站banner部分使用了圖像，但是像素質(zhì)量普遍較低，圖像面積小，未能按照預(yù)期效果給用戶帶來視覺上的良好體驗。從設(shè)計趨勢來看，具象、抽象圖形以及信息可視化圖形的運用較國外高校官網(wǎng)來說差距較大。

2.2.4 動態(tài)效果簡單 動效是指網(wǎng)頁中包含的各種動態(tài)效果，我們經(jīng)常在網(wǎng)絡(luò)中看到的一些動態(tài)圖片、視頻，都屬于網(wǎng)頁動態(tài)效果。安藝網(wǎng)頁采用的還是傳統(tǒng)的硬性布局，Banner部分的動態(tài)效果僅依賴于flash或者鏈接轉(zhuǎn)跳，也沒有設(shè)置宣傳視頻播放。國內(nèi)高校門戶網(wǎng)站動態(tài)效果簡單是多方面因素造成的，首先，高校主管領(lǐng)導(dǎo)和相關(guān)工作人員對學(xué)校官網(wǎng)建設(shè)重視程度不夠，高校缺乏專業(yè)的網(wǎng)頁設(shè)計師去運營網(wǎng)絡(luò)，而且網(wǎng)絡(luò)維護意識也不強。

2.2.5 版式布局保守 版式是網(wǎng)站的骨骼，它支撐起整個網(wǎng)站的布局、內(nèi)容、風(fēng)格。出色的版式布局設(shè)計可以將用戶直接引導(dǎo)像他想要獲取的頁面。對比國外高校門戶的網(wǎng)站排版布局就會發(fā)現(xiàn)，安藝官網(wǎng)的版式布局非常保守，需要表達的信息繁瑣龐大，并且主次不容易區(qū)分。二級界面采用文字與圖片交叉分布，不管是在用戶體驗還是風(fēng)格簡化方面都還有很大的進步空間。網(wǎng)站在構(gòu)建時不注重交互設(shè)計直接導(dǎo)致用戶對網(wǎng)站的滿意度降低，這一點從調(diào)查數(shù)據(jù)中直觀體現(xiàn)出來。

2.2.6 未考慮響應(yīng)式設(shè)計 根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）第43次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》結(jié)果顯示（如圖4），截至2018年12月，我國手機網(wǎng)民中使用手機上網(wǎng)人群的占比為98.6%，預(yù)計2019年我國網(wǎng)民中使用手機上網(wǎng)人群的占比將提升至99.1%。響應(yīng)式網(wǎng)站成了近幾年企業(yè)建站的一個主流。目前安藝網(wǎng)站并未采用前沿的響應(yīng)式設(shè)計，這導(dǎo)致很多人在外沒有辦法及時處理工作以及查閱信息，功能性大大削減。

圖4 2012-2018年中國網(wǎng)民規(guī)模及互聯(lián)網(wǎng)普及率

3 安徽藝術(shù)學(xué)院官網(wǎng)設(shè)計實現(xiàn)

3.1 設(shè)計目標(biāo)

（1）由于安藝官網(wǎng)使用的網(wǎng)頁框架較早，除了整體的視覺形象設(shè)計需要提升，在近興起的H5頁面、聯(lián)想搜索、分層級標(biāo)題都有升級空間，并且以上功能已經(jīng)成為主流的設(shè)計規(guī)范。當(dāng)前的網(wǎng)頁設(shè)計不止停留在視覺審美，辦公等功能更加需要優(yōu)化流程，把提高效率放在更加重要的位置。

（2）整合二級界面、三級界面，以用戶體驗感為目標(biāo)更加注重交互設(shè)計，提升網(wǎng)站流量和轉(zhuǎn)化率，在后臺設(shè)置模板，降低維護成本。

（3）改版后的網(wǎng)頁界面擬采用現(xiàn)代化簡約的設(shè)計風(fēng)格，以點線面為基礎(chǔ)，用線條和大面積色塊來劃分版面，并且用優(yōu)質(zhì)圖片去取代文字，使整個界面更加符合用戶的審美標(biāo)準(zhǔn)。

（4）建立響應(yīng)式設(shè)計。對電腦客戶端進行優(yōu)化，在后臺安裝程序為響應(yīng)式設(shè)計做鋪墊，滿足用戶不同渠道的瀏覽途徑。

3.2 設(shè)計實現(xiàn)

在設(shè)計規(guī)范方面將采用谷歌于2018年7月發(fā)布的設(shè)計規(guī)范，適合屏幕的UI元素比例規(guī)定在16：9；3：2；4：3；1；1；3：4；2：3，為了保證信息的密度和可用性與平衡性，主要區(qū)域邊緣至少預(yù)留48DP（圖5）。國內(nèi)設(shè)計規(guī)范大多使用原創(chuàng)或者金山等公司的設(shè)計規(guī)范，本次設(shè)計使用谷歌設(shè)計規(guī)范是因為其更加具備實用性。對于一個需要在數(shù)秒內(nèi)就尋找到自己想要內(nèi)容的網(wǎng)站來說，適合的設(shè)計規(guī)范顯得格外重要。

圖5 安藝官網(wǎng)元素布局比例圖（圖片來源：筆者自繪）

設(shè)計草圖，在設(shè)計初稿階段使用Adobe XD對內(nèi)容進行草圖繪制，建立初步的設(shè)計框架，對內(nèi)容區(qū)域進行分級處理。本次官網(wǎng)界面更新以現(xiàn)代簡約風(fēng)格為主，用大面積色塊和圖文來劃分版面（圖6），導(dǎo)航清晰便捷，提高用戶體驗感。網(wǎng)頁在編寫過程中每行代碼之間都設(shè)置詳細內(nèi)容標(biāo)記，包括了網(wǎng)絡(luò)內(nèi)容、首頁活動海報、圖片、地址頁面。這樣做的目的是在之后的維護中，方便其它專業(yè)教師能參照模板在短時間內(nèi)靈活上手，快捷編輯內(nèi)容。

圖6 安藝官網(wǎng)設(shè)計草圖（圖片來源：筆者自繪）

在設(shè)計草稿完成之后進行內(nèi)容的填充，圖標(biāo)的選擇和字體顏色確定根據(jù)用戶視覺產(chǎn)生的主次區(qū)分。文字的使用對用戶的閱讀效率、質(zhì)量、閱讀體驗有著密不可分的關(guān)系，所以字體的選擇必須符合高校門戶網(wǎng)站的校園風(fēng)格學(xué)術(shù)氛圍。網(wǎng)站字體的選擇，還要考慮分辨率的影響。常規(guī)的帶有筆鋒的字體，在低配置顯示器中會有模糊、鋸齒現(xiàn)象。所以本次設(shè)計使用思源黑體為主，宋體為輔。思源黑體（如圖7）的特點是粗細均勻、筆畫光滑，適配于各類顯示器，擁有更高的辨識度，是現(xiàn)在設(shè)計師在界面設(shè)計中首選字體之一。

圖7 思源字體

標(biāo)準(zhǔn)的規(guī)范制作結(jié)束后，進入根據(jù)網(wǎng)站特點設(shè)計網(wǎng)頁的特殊階段。顏色的選擇依據(jù)安徽藝術(shù)學(xué)院形象識別系統(tǒng)手冊中的色彩系統(tǒng)，網(wǎng)站以中國紅（#d80c18）為主色調(diào)（圖8），多用于附屬頁面有明確等級區(qū)分的頁面中?？紤]到紅色對于用戶瀏覽內(nèi)容信息過程中容易產(chǎn)生疲勞，所以在主頁中不采用大面積的紅色，而是用象征徽派建筑的安藝灰（#dcdddd）作為點綴，給用戶提供一個良好的閱讀舒適度。圖標(biāo)的使用與新聞類的網(wǎng)頁相同，使用最直觀、簡潔的圖標(biāo)風(fēng)格，讓用戶第一時間就清楚圖標(biāo)所代表的含義，從而提高瀏覽效率。

圖8 安藝官網(wǎng)主色調(diào)（圖片來源：筆者自繪）

在目前來說，傳統(tǒng)的硬性布局，已經(jīng)不再是當(dāng)下主流的表達形式，現(xiàn)在更多設(shè)計師選用動態(tài)分層的方式來展現(xiàn)作品。主頁banner部分作為安藝新聞專題頁鏈接，主要用來放置專題新聞配圖，使用戶可以第一時間了解學(xué)校近期重大動態(tài)。還可以在banner部分添加動效，將校園活動以一種幽默詼諧的方式傳達給用戶，迅速激發(fā)閱讀興趣。視頻播放使用HTML5播放器（圖9），播放器運行不借助Flash插件，使用JavaScript腳本就可以使視頻打開速度得到大幅提升。

圖9 安藝官網(wǎng)視頻播放技術(shù) （圖片來源：筆者自繪）

在排版方面，校園網(wǎng)一般使用新聞式的排版布局，原因是該布局在準(zhǔn)確獲取頁面信息的效率和準(zhǔn)確性都高于其他排版布局。截至2019年6月，世界最前沿的研究技術(shù)在線眼球軌跡追蹤研究Eyetrackshop平臺對新聞類網(wǎng)站數(shù)據(jù)統(tǒng)計，在雅虎、CNN、福克斯新聞等新聞類網(wǎng)站中，平均用戶的瀏覽時間相比較2018年閱讀時間縮短近10%?？s減體現(xiàn)在次要內(nèi)容中，對于主要內(nèi)容的瀏覽時間與往年相符。在非熱門新聞網(wǎng)站中，部分圖標(biāo)裝飾占用了用戶瀏覽時間（圖10）。

圖10 眼動追蹤研究后的分析圖（圖片來源：Eyetrackshop整理）

由此可見，標(biāo)題內(nèi)的信息需要精而簡。特別是裝飾線條中色彩明度以及對比度的把握要尤為注意，一個要聞版面的功能要做到在最短的時間讓用戶獲得自己想要的信息。安藝官網(wǎng)的二級界面采用瀑布樣式布局，在編輯內(nèi)容中每一個色相的內(nèi)容不會與同色相內(nèi)容過近，這種不規(guī)則的顏色搭配不僅縮短了用戶閱讀時間，還可以減緩視覺疲勞。在部分三級界面適當(dāng)加入信息可視化設(shè)計和交互設(shè)計（圖11），用最少的元素來表達更多的信息[4]，使用戶在瀏覽網(wǎng)頁的同時，擁有良好的體驗從而增加用戶的信賴度。

圖11 安藝官網(wǎng)三級界面PC端、移動端布局（圖片來源：筆者自繪）

在國際流行趨勢的背景下，根據(jù)用戶調(diào)查結(jié)果，按照電腦、平板電腦和手機設(shè)計配套的響應(yīng)式界面（圖12），讓后臺可以主動識別用戶使用的端口設(shè)備，以滿足用戶在外瀏覽網(wǎng)站、處理工作的需要。如針對于教職工和學(xué)生需求專門開發(fā)的手機端在線錄入信息功能，在上傳填寫表格過程中減少不必要流程，用戶可隨時編輯文檔、表格。還有加入個人中心插件，存儲個人文件、查詢歷史記錄、搜索信息、編輯個人資料，這些功能的添加為用戶節(jié)省時間的同時也方便信息溝通。

圖12 安藝官網(wǎng)響應(yīng)式設(shè)計（圖片來源：筆者自繪）

4 結(jié)論

高校官網(wǎng)對校園形象的塑造和文化的傳播有著特殊的意義和作用，各高校管理部門已經(jīng)意識到高校官網(wǎng)形象提升問題，開始采取相關(guān)措施，但是由于在構(gòu)建和使用過程中沒有充分考慮用戶體驗需求，取得效果甚微。如何將技術(shù)與藝術(shù)完美結(jié)合，在提升視覺形象的同時增加網(wǎng)站的實用性，是我們需要思考的問題，也是本文探究的創(chuàng)新點。