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

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

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

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

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

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

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

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

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

1〕布局

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

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

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

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

4〕更多的圓角

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

5〕字體的選擇

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

6〕善用灰色、白色

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

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

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

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

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