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

陳美紅

摘要：扁平化設(shè)計這個概念興起于近幾年，由于一些大型公司和組織在網(wǎng)頁設(shè)計上都將風(fēng)格偏向了它，所以扁平化設(shè)計獲得了巨大的流行。如今這股設(shè)計流行風(fēng)也吹進了校園。隨著互聯(lián)網(wǎng)技術(shù)以及高校教育信息化技術(shù)的發(fā)展，各高校也逐漸重視了校園網(wǎng)站的建設(shè)。文章通過對筆者所在高職院校校園網(wǎng)站改版前后的設(shè)計進行分析，闡述了扁平化設(shè)計的具體運用，給其他高職院校校園網(wǎng)站的界面設(shè)計提供了一些建議與思路。

關(guān)鍵詞：扁平化；高校網(wǎng)站；網(wǎng)站；設(shè)計；建設(shè)

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）07-0201-02

Application of Flat Design in the Construction of Campus Website in Higher Vocational Colleges

CHEN Mei-hong

（Shanghai Jianfeng Vocational Technical College， Shanghai 201900， China）

Abstract： the concept of flat design in recent years， as a result of some Large Firm and organizations in the web design will be the style of it， so the flat design has been a huge popular. Now the design of the popular wind has blown into the campus. With the development of Internet technology and information technology in higher education， colleges and universities have paid more and more attention to the construction of campus website. The design of the vocational college campus site before and after the revision of analysis， expounds the concrete application of the flat design， provides some suggestions and ideas for other higher vocational colleges campus website interface design.

Key words： flat； college website； website； design； construction

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

1 高校校園網(wǎng)站的發(fā)展概述

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

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

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

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

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

1）布局

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

2）中性之美和鮮明的對比

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

3）極簡貼切的圖標

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

4）更多的圓角

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

5）字體的選擇

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

6）善用灰色、白色

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

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

對于原有的擬物設(shè)計風(fēng)格，如果要向扁平化設(shè)計轉(zhuǎn)型，那么只需要將原來設(shè)計風(fēng)格逐一拋棄，分別去除描邊、陰影、漸變、高光等等特效，讓設(shè)計回歸本原，用最簡潔的幾何圖形和最清晰的顏色來表達設(shè)計者的靈感。在舊版網(wǎng)站中尤其是菜單欄的設(shè)計即是擬物化設(shè)計風(fēng)格的重要體現(xiàn)，加了諸多的陰影、高光等按鈕樣式效果。繁多的樣式讓網(wǎng)站的加載時間變長，在新版網(wǎng)站中則擯棄了這一設(shè)計，采用了扁平化設(shè)計之后，所有 的圖標，菜單等欄目在設(shè)計時均將這些風(fēng)格全部拋棄，經(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)在諸如“快速通道”、“公共服務(wù)”等小圖標上，當點擊這些小圖標的時候，小圖標會進行旋轉(zhuǎn)，這種簡單有趣的人機小互動增加了頁面的友好與活潑性。

3 總結(jié)

扁平化設(shè)計統(tǒng)一了簡約設(shè)計和擬物主義的設(shè)計目的，有自己獨特的可用性思想，它脫去了冗余的形式，代碼簡潔且有高適用性，適用于快速加載的網(wǎng)站。它在每一類應(yīng)用上都能展現(xiàn)自己的美，不論是桌面還是手機屏幕，都能保持一如既往的清晰和適應(yīng)，使用戶在使用過程中減少犯錯，提高了用戶體驗。

參考文獻：

[1] 陳冠軍，張阿維.扁平化設(shè)計風(fēng)格在網(wǎng)頁設(shè)計中的優(yōu)勢[J].科技視界，2015（15）：65.

[2] 孫榮.淺論高校校園網(wǎng)站界面設(shè)計的視覺創(chuàng)意[J].常州工學(xué)院學(xué)報，2007，20（4）：8-11.

[3] 張蕓.扁平化設(shè)計在網(wǎng)頁上應(yīng)用的優(yōu)勢[J].藝術(shù)科技，2013，26（6）：229-230.