扁平化設(shè)計在高職院校校園網(wǎng)站建設(shè)中的應(yīng)用

扁平化設(shè)計在高職院校校園網(wǎng)站建設(shè)中的應(yīng)用扁平化設(shè)計在高職院校校園網(wǎng)站建設(shè)中的應(yīng)用

中圖分類號：TP311文獻標識碼：A文章編號：1009-3044〔2022〕07-0201-02

ApplicationofFlatDesignintheConstructionofCampusWebsiteinHigherVocationalColleges

CHENMei-hong

〔ShanghaiJianfengVocationalTechnicalCollege，Shanghai202200，China〕

Abstract：theconceptofflatdesigninrecentyears，asaresultofsomeLargeFirmandorganizationsinthewebdesignwillbethestyleofit，sotheflatdesignhasbeenahugepopular.Nowthedesignofthepopularwindhasblownintothecampus.WiththedevelopmentofInternettechnologyandinformationtechnologyinhighereducation，collegesanduniversitieshavepaidmoreandmoreattentiontotheconstructionofcampuswebsite.Thedesignofthevocationalcollegecampussitebeforeandaftertherevisionofanalysis，expoundstheconcreteapplicationoftheflatdesign，providessomesuggestionsandideasforotherhighervocationalcollegescampuswebsiteinterfacedesign.

Keywords：flat；collegewebsite；website；design；construction

如果問時下網(wǎng)頁設(shè)計的流行趨勢，都能聽到扁平化設(shè)計〔flatdesign〕這個概念。所謂“扁平化設(shè)計〞所指的是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺效果，從而打造出一種看上去更“平〞的界面。善于用顏色去激勵用戶探索。它是極簡主義的直系親屬，不過更復雜和多樣化一些，既兼顧了極簡主義的原那么又可以應(yīng)對更多的復雜性；通過去掉三維效果，將銳度和清晰度融為一體。如今這股設(shè)計流行風也吹進了校園。本文通過對筆者所參與的“上海建峰職業(yè)技術(shù)學院〞官方網(wǎng)站改版前后工程的分析，簡述扁平化設(shè)計在高職院校校園網(wǎng)站建設(shè)應(yīng)用中的優(yōu)勢，為今后高職院校網(wǎng)站的設(shè)計提供一些有益的思路。

1高校校園網(wǎng)站的開展概述

在互聯(lián)網(wǎng)絡(luò)高速開展的今天也帶動了高校信息化教育的開展，而高校網(wǎng)站建設(shè)那么是學校教育信息化建設(shè)的重要方面。高校網(wǎng)站是學校對外交流與宣傳的窗口，是學校進行形象展示、信息發(fā)布、交流溝通、招生就業(yè)的重要陣地，也是教學、科研、管理的重要途徑。早期的高校校園網(wǎng)站主要是起到信息發(fā)布的作用，但存在著布局單一、填塞信息內(nèi)容過滿；不重視色彩搭配；不足人性化設(shè)計等各方面的問題，可喜的是隨著高校網(wǎng)站建設(shè)的開展，涌現(xiàn)出了一批諸如清華大學，北京大學等制作精良的高校校園網(wǎng)站。這些極具特色、制作優(yōu)美的高校網(wǎng)站也引領(lǐng)了其他高校校園網(wǎng)站的建設(shè)與開展。

高職院校的校園網(wǎng)站開展總體滯后于本科院校，這與領(lǐng)導的重視程度，專業(yè)設(shè)計人才的匱乏等各種因素有關(guān)，隨著高職院校招生宣傳力度的加強，高職院校在學院網(wǎng)站這塊也漸漸重視，不斷進行改版，近些年一大批優(yōu)秀的高職院校網(wǎng)站異軍突起。通過分析發(fā)現(xiàn)，這些優(yōu)秀的網(wǎng)站幾乎都應(yīng)用了扁平化的設(shè)計格調(diào)，筆者所在的高職院校官網(wǎng)也是應(yīng)這股潮流而進行了大幅度的改版。

2扁平化設(shè)計在高職院校校園網(wǎng)站設(shè)計中的運用

在設(shè)計之初參考了眾多國內(nèi)高職院校網(wǎng)站，結(jié)合學院的自身特色，與相關(guān)技術(shù)人員的配合，最終完成了整個改版工作。該網(wǎng)站于2022年1月正式運行，視覺效果較好，得到了用戶的肯定〔http：///webSite/〕。改版前后的網(wǎng)站如圖所示1和圖2：

整個頁面采取扁平化設(shè)計，具體設(shè)計體現(xiàn)如下：

1〕布局

扁平化設(shè)計是一種極簡主義的美術(shù)設(shè)計格調(diào)，所以在排版上尤為重要，講究整齊有序、條理清晰，擯棄復雜的排版結(jié)構(gòu)。原來的信息堆積，布局過分豐滿、凌亂，重點不突出。所以網(wǎng)站在布局上精簡，將原來復雜的“國〞字形結(jié)構(gòu)改為簡單的三分欄，用大的顏色塊來布局，改版之后將原來“快訊〞、“公告〞之類的欄目劃到統(tǒng)一的中間信息欄下，一目了然。

2〕中性之美和鮮明的比照

在扁平化設(shè)計中，色彩的應(yīng)用極為重要。由于拋棄了擬物化設(shè)計格調(diào)的漸變、高光等特效，只能使用純色塊來進行設(shè)計，則在色彩的搭配和選擇上就極有講究。為了能讓使用者舒適的閱讀，不造成眼睛疲勞或者其他不適感，設(shè)計師應(yīng)盡量選擇中性的顏色。也就是說，要防止使用飽和度過高的純色，比方純紅、純綠、純藍等顏色，因為這些顏色在展示的時候會非常刺眼，嚴重影響使用者的視覺體驗。在色彩的應(yīng)用中，要注意顏色之間的比照，只有通過鮮明的顏色比照，才能迅速抓住使用者的眼球，讓設(shè)計師的意圖表現(xiàn)的更加明確，通常是通過亮度、色溫、比照色、互補色等等伎倆來實現(xiàn)顏色的比照，應(yīng)盡量防止使用參數(shù)相近的顏色，這樣的顏色搭配會使閱讀困難，甚至會造成使用者的極度不適。在新版的設(shè)計中，整個網(wǎng)站的主色調(diào)采用了飽和度低的藍色，這種冷色調(diào)不刺眼，方便閱讀。同時在一些小面積的地方諸如角色登陸的“教師〞、“學生〞等小圖標用綠色、橙色等暖色系的色彩與主色形成比照，迅速抓住閱覽者的眼球，使得頁面活躍靈動。3〕極簡貼切的圖標

扁平化設(shè)計追求的是一切極其的簡潔、簡單，反對使用復雜的、不明確的元素。在設(shè)計扁平化格調(diào)界面時，特別是在圖標的設(shè)計時，應(yīng)該遵循極簡原那么。復雜的、含義含糊的元素將會造成使用者的困擾，這與扁平化設(shè)計格調(diào)直觀、簡潔的總原那么是相違背的。只有采用足夠簡約的設(shè)計元素，才能到達最好的展示效果。改版網(wǎng)站在諸如微博、等圖標上都采取群眾化的標識，一目了然。

4〕更多的圓角

在扁平化設(shè)計中，設(shè)計師經(jīng)常會采用圓角設(shè)計，以避免在產(chǎn)品使用過程中對使用者造成傷害，這種人性化的設(shè)計深受使用者的歡迎。同樣在用戶界面設(shè)計過程中，使用一些圓角圖案，不但會使設(shè)計更具親和力，也會讓使用者更容易接受設(shè)計者的設(shè)計意圖。這也合乎群眾追求圓潤、圓滿的心理需求。改版網(wǎng)站在一些小細節(jié)諸如“學生事務(wù)〞的圖標上就充沛體現(xiàn)了這一圓角設(shè)計的原那么，這種更具親和力的設(shè)計使學生瀏覽網(wǎng)站的時候更容易拉近與學生的距離。

5〕字體的選擇

在扁平化設(shè)計格調(diào)中，因為追求極致的簡潔，力求最快速、最直觀的敘述設(shè)計者的意圖，所以在字體選擇上也是以簡潔、清爽為規(guī)范。應(yīng)采用通用的、筆畫清晰的字體，防止使用字跡不清的字體，比方草書，特殊字體等，也應(yīng)該防止使用已經(jīng)不再流通的字體，比方古代甲骨文、篆體字等等〔特殊用途除外〕。對于中文字體來說，諸如雅黑、幼圓或者細黑等字體都是不錯的選擇，英文字體也是同樣的道理。新改版網(wǎng)站菜單主要以宋體和微軟雅黑字體為主，字體顏色那么采取最簡單又最突出的黑與白兩色，使得網(wǎng)站的文字閱讀起來清爽，不費勁。

6〕善用灰色、白色

黑色、白色和灰色在扁平化設(shè)計中至關(guān)重要，由于采用了大量的色塊，難免給用戶以眼花繚亂的感覺。所以在有的時候，設(shè)計師為了突出重點，可減少色塊的使用，而轉(zhuǎn)由使用一種或者二種主要的顏色來突出主體，其他部門那么通過灰色來敘述。由于灰色與任何顏色都不沖突，所以在設(shè)計時，巧妙的使用灰色，將起到意想不到的效果。正確的使用灰色，將使主體更明確和突出，更容易被使用者接受。白色干凈整潔，是最普遍的背景色，運用好白色可以提高整個網(wǎng)頁的檔次。改版后的網(wǎng)站在諸如“快速通道〞、“公共效勞〞等小圖標上未點擊瀏覽時呈現(xiàn)灰色，而鼠標點擊的時候那么呈現(xiàn)與主色調(diào)藍色的近似色，與主色調(diào)遙相照應(yīng)。而整個頁面的背景色通過灰、白、虛圖等方式淡雅的點綴，這些點綴不但沒有喧賓奪主，反而將視覺點更加有效集中在屏幕中間，整個網(wǎng)站到達了和諧統(tǒng)一的比照。同時整站的設(shè)計也非常注重留白的運用，給瀏覽者充沛的呼吸空間。

7〕擬物設(shè)計的轉(zhuǎn)型

對于原有的擬物設(shè)計格調(diào)，如果要向扁平化設(shè)計轉(zhuǎn)型，則只需要將原來設(shè)計格調(diào)逐一拋棄，分別清除描邊、陰影、漸變、高光等等特效，讓設(shè)計回歸本原，用最簡潔的幾何圖形和最清晰的顏色來敘述設(shè)計者的靈感。在舊版網(wǎng)站中尤其是菜單欄的設(shè)計即是擬物化設(shè)計格調(diào)的重要體現(xiàn)，加了諸多的陰影、高光等按鈕樣式效果。繁多的樣式讓網(wǎng)站的加載時間變長，在新版網(wǎng)站中那么擯棄了這一設(shè)計，采用了扁平化設(shè)計之后，所有的圖標，菜單等欄目在設(shè)計時均將這些格調(diào)全部拋棄，經(jīng)過測試頁面優(yōu)化達40%以上，加載時間大大縮小。

8〕擬物設(shè)計和簡約設(shè)計的和諧統(tǒng)一

扁平化設(shè)計取得了簡約設(shè)計和擬物設(shè)計的精華，并將這些元素融合為一體，看起來既友好又親切。通過展現(xiàn)清晰動人的界面來實現(xiàn)界面的友好性，類似于簡約主義，扁平設(shè)計脫去了富麗的虛擬元素，只展現(xiàn)必要的功能。但它沒有簡約主義那樣嚴格，所以合理得當?shù)难b飾與交互是必要的。在新版網(wǎng)站中，這種設(shè)計體現(xiàn)在諸如