馮貴蘭，李正楠

（1.中國民航飛行學(xué)院現(xiàn)代教育技術(shù)中心，廣漢618307；2.中國民航飛行學(xué)院航空工程學(xué)院，廣漢618307)

扁平化風(fēng)格在高校門戶網(wǎng)站設(shè)計(jì)中的應(yīng)用研究

馮貴蘭1，李正楠2

（1.中國民航飛行學(xué)院現(xiàn)代教育技術(shù)中心，廣漢618307；2.中國民航飛行學(xué)院航空工程學(xué)院，廣漢618307)

隨著近年來扁平化設(shè)計(jì)風(fēng)格在各個領(lǐng)域的應(yīng)用，其極簡和符號化的設(shè)計(jì)特點(diǎn)也被越來越多的大眾所接受。各種社交網(wǎng)站、App應(yīng)用都采用這種風(fēng)格，扁平化風(fēng)格已成為一種流行趨勢。現(xiàn)在高校門戶網(wǎng)站設(shè)計(jì)也順應(yīng)這種流行趨勢。以高校門戶網(wǎng)站設(shè)計(jì)為例，闡述扁平化風(fēng)格在高校網(wǎng)站設(shè)計(jì)中版式布局、導(dǎo)航欄、色彩搭配、文字選擇和極簡圖標(biāo)的應(yīng)用，旨在為師生員工提供一個滿足需求的門戶網(wǎng)站。

扁平化；高校網(wǎng)站；網(wǎng)站

0 引言

隨著高校信息化的發(fā)展，高校門戶網(wǎng)站越來越重要，它是為師生員工提供學(xué)校要聞、通知公告、招生就業(yè)信息的重要平臺。扁平化設(shè)計(jì)給高校門戶網(wǎng)站帶來了全新的設(shè)計(jì)理念，它的核心理念是去除冗余、厚重和繁雜的裝飾效果，具體做法是去除不必要的透視、陰影、3D立體效果等，讓信息本身展現(xiàn)出來。高校門戶網(wǎng)站應(yīng)用扁平化設(shè)計(jì)能夠使學(xué)校新聞、通知傳達(dá)更清晰、應(yīng)用系統(tǒng)使用更便捷。本文通過筆者所參與的“中國民用航空飛行學(xué)院門戶網(wǎng)站改版”項(xiàng)目的設(shè)計(jì)和分析，闡述了扁平化設(shè)計(jì)在高校網(wǎng)站設(shè)計(jì)中版式布局、導(dǎo)航欄、色彩搭配、文字選擇和極簡圖標(biāo)的應(yīng)用，為師生員工提供一個滿足需求的門戶網(wǎng)站。

1 扁平化設(shè)計(jì)

扁平化設(shè)計(jì)是谷歌公司在2008年提出來的，它的核心思想是拋棄擬物設(shè)計(jì)理念，在設(shè)計(jì)時不再考慮漸變、陰影、透視等物體視覺效果，由簡單的點(diǎn)、線、面組成，構(gòu)造一個看起來更平的界面[1]。在設(shè)計(jì)元素上，通常使用純色塊和簡單的圖形元素相結(jié)合的設(shè)計(jì)，從而呈現(xiàn)直觀明了的視覺效果。所以扁平化設(shè)計(jì)是一個運(yùn)用簡易圖形、簡潔文字、簡單色彩相互搭配的極簡設(shè)計(jì)方法。這種設(shè)計(jì)不僅新穎美觀，而且直觀地展示了網(wǎng)站信息，因此深受人氣網(wǎng)站（如Google、Facebook）的喜愛。

網(wǎng)站設(shè)計(jì)應(yīng)用扁平化設(shè)計(jì)具有以下優(yōu)勢：

（1）視覺界面更加清晰

在視覺界面，扁平化設(shè)計(jì)只采用相對簡單的形狀（如矩形、圓形），消除多余的裝飾效果，不打造物體立體效果。在界面設(shè)計(jì)時，每個元素或圖片都不加邊緣修飾或陰影，由于簡化圖形，使整個網(wǎng)站界面更清晰[2]。

（2）信息傳遞更加直觀

扁平化設(shè)計(jì)有利于展示主要內(nèi)容，凸顯網(wǎng)站信息，讓網(wǎng)站以更直觀的方式把信息傳遞給瀏覽用戶[3]。除此之外，傳統(tǒng)網(wǎng)頁設(shè)計(jì)所采用的樹狀信息組織機(jī)構(gòu)，扁平化的網(wǎng)頁設(shè)計(jì)將底層信息上移，減少了中間類目的標(biāo)簽，信息展示一目了然。

（3）用戶交互更加流暢

扁平化設(shè)計(jì)通過合理的信息布局和多級導(dǎo)航，成功地避免了用戶重復(fù)切換網(wǎng)頁，縮短信息傳輸時間間隔，提高信息傳遞效率，讓用戶交互更加流暢。扁平化圖形幾何特征，識別度高，容易閱讀，用戶使用方便。

奈斯的生態(tài)自我實(shí)現(xiàn)需要人類的精神有種進(jìn)一步的成熟成長和一種超越人類的包括非人類世界的確證，這種思想深受印度民族解放運(yùn)動思想家甘地的影響，甘地認(rèn)為當(dāng)一個人尋求神的真理時，惟一必要的手段就是愛，即非暴力，神就是愛。人們可以通過愛來感化別人。[9]33

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

筆者在參與建設(shè)的“中國民用航空飛行學(xué)院門戶網(wǎng)站改版”項(xiàng)目中，以紅色作為主色，應(yīng)用了扁平化風(fēng)格。該項(xiàng)目在開始設(shè)計(jì)時參考了多個大學(xué)網(wǎng)站（如：北京大學(xué)、清華大學(xué)），結(jié)合學(xué)校本身的飛行特色，與網(wǎng)站研發(fā)人員不斷修改、調(diào)整，最終完成了學(xué)校門戶網(wǎng)站的改版工作。該網(wǎng)站在2017年1月開始啟用，信息展示明了、視覺效果良好，收到了師生員工的肯定。門戶網(wǎng)站地址為（http://www.cafuc.edu.cn/），新網(wǎng)站從以下五個方面體現(xiàn)了扁平化的設(shè)計(jì)理念：

（1）版式布局

扁平化設(shè)計(jì)是一種簡單到極致的藝術(shù)設(shè)計(jì)風(fēng)格，布局尤為重要，它強(qiáng)調(diào)有序、整齊、一氣呵成，放棄復(fù)雜的布局結(jié)構(gòu)。所以改版后的網(wǎng)站在布局上精簡，從上到下將結(jié)構(gòu)分為簡單的三欄，分別是頭部、內(nèi)容和尾部，這三欄用大的顏色塊來布局。中間的內(nèi)容欄又分為信息欄和鏈接欄，用不同的底色進(jìn)行區(qū)別。網(wǎng)站的新聞?wù)故緝?nèi)容統(tǒng)一放在到中間信息欄，一目了然。

（2）導(dǎo)航欄

扁平化設(shè)計(jì)倡導(dǎo)“Less is more”理念[4]，它的導(dǎo)航欄展示非常精煉。改版后的網(wǎng)站導(dǎo)航設(shè)計(jì)，只使用了白色和簡單方塊，一方面淺色調(diào)白色對比了主色調(diào)紅色，另一方面凸顯了導(dǎo)航欄的文字。導(dǎo)航欄的“選中”和“未選中”兩個狀態(tài)分別用紅色色塊和灰色色塊來表示，既能明確向用戶指示當(dāng)前狀態(tài)，又顯得頁面干凈大方。

主頁面的一級導(dǎo)航采用水平狀導(dǎo)航欄，放在頁面的頂部，確保師生員工能第一時間看到它。二級頁面的導(dǎo)航欄則采用側(cè)邊導(dǎo)航欄，符合用戶從左到右的閱讀順序，起到很好的導(dǎo)航作用。

（3）色彩搭配

色彩搭配是扁平化設(shè)計(jì)中不可或缺的視覺元素，特別是設(shè)計(jì)中放棄了擬物設(shè)計(jì)的漸變、高光等特效，只能使用純色塊設(shè)計(jì)，在色彩選擇和搭配上就必須慎重。在新版的設(shè)計(jì)中，整個網(wǎng)站以暖色調(diào)紅色為主色，給人以熱烈激情的感覺。同時在左下處“快速導(dǎo)航”那里（如綿陽分院、遂寧分院）采用低飽和度的淡藍(lán)色、天藍(lán)色等冷色調(diào)與主色調(diào)遙相呼應(yīng)，吸引瀏覽者的注意力，平衡頁面色溫。同時又因?yàn)樵陧撁嬷惺褂昧溯^多的顏色，如五個分院處就使用了五種色塊，為了不讓用戶產(chǎn)生眼花繚亂的感覺，還加入了白色、灰色等淺色調(diào)進(jìn)行協(xié)調(diào)。“學(xué)校要聞”欄目的底色采用了白色，與黑色的新聞標(biāo)題相互照應(yīng)?！翱焖賹?dǎo)航”、“專題網(wǎng)站”欄目的底色采用了灰色，使得主體更為突出。網(wǎng)站背景通過灰色、白色和虛化圖等方式進(jìn)行修飾，這些修飾有助于吸引瀏覽者目光集中在網(wǎng)站主要內(nèi)容上，從而制造出融合統(tǒng)一的頁面效果。

文字是門戶網(wǎng)站內(nèi)容最重要的構(gòu)成元素之一，扁平化設(shè)計(jì)的門戶網(wǎng)站偏愛字體簡潔、排版大方的風(fēng)格[4]。在字體的選擇上，需要考慮三點(diǎn)：筆畫清晰、體態(tài)優(yōu)美、便于閱讀。中國民用航空飛行學(xué)院網(wǎng)站采用了宋體，沒有使用草書、隸書等特殊字體，用通用、字型清晰的字體讓用戶能快速獲取到信息。字體顏色選擇了黑色和白色，符合人們白紙黑字的閱讀習(xí)慣，讓網(wǎng)頁文字閱讀起來流暢自然。字體大小則采用14px字號，大小適中，可讀性比較高。

（5）極簡圖標(biāo)

在設(shè)計(jì)扁平化風(fēng)格網(wǎng)站頁面時，尤其是圖標(biāo)設(shè)計(jì)，應(yīng)遵循簡約到極致的原則，不要使用復(fù)雜和模棱兩可的圖標(biāo)。改版網(wǎng)站在微博、微信、蘋果、Android等圖標(biāo)都采用標(biāo)志性圖片，直觀明了。圖標(biāo)設(shè)計(jì)時，傾向于選擇圓角設(shè)計(jì)，看起來更漂亮吸引人。在“學(xué)校要聞”、“通知公告”、“快速導(dǎo)航”和“專題網(wǎng)站”等欄目前面的圖標(biāo)設(shè)計(jì)中，采用了圓形小圖標(biāo)，使網(wǎng)站看起來更圓潤，更有親和力。在“院報網(wǎng)絡(luò)版”、“單位信箱”等欄目的圖標(biāo)使用了圓角設(shè)計(jì)，使學(xué)生訪問網(wǎng)站時，拉近與學(xué)生的距離。

3 結(jié)語

扁平化風(fēng)格的運(yùn)用使得高校門戶網(wǎng)站耳目一新，它很注重網(wǎng)站頁面上的功能，突出展示了學(xué)校要聞、通知公告的具體內(nèi)容。在大數(shù)據(jù)時代，扁平化設(shè)計(jì)使信息內(nèi)容得到了聚集，讓用戶可以快速找到門戶網(wǎng)站中提供的資源，提高了師生員工瀏覽頁面的效率。相比傳統(tǒng)的高校門戶網(wǎng)站設(shè)計(jì)，扁平化設(shè)計(jì)使得高校門戶網(wǎng)站更為簡約，更能突出網(wǎng)站的功能，達(dá)到及時傳遞信息、方便用戶操作的目的。扁平化設(shè)計(jì)以少勝多，化繁為簡，更好地滿足了師生員工的需求，以一種新的設(shè)計(jì)風(fēng)格展示了高校門戶網(wǎng)站，其他高校門戶網(wǎng)站在改版 時也可以考慮這種風(fēng)格的應(yīng)用。

[1]張巖.網(wǎng)頁設(shè)計(jì)中扁平化設(shè)計(jì)的趨勢[J].美術(shù)大觀,2014(5):132-132.

[2]劉思晴.扁平化在校園App中的應(yīng)用[J].科技與創(chuàng)新,2016(14):29-29.

[3]呂思思,焦金金.扁平化設(shè)計(jì)在高校網(wǎng)站建設(shè)中的應(yīng)用研究[J].軟件導(dǎo)刊,2015,14(9):132-134.

[4]何夢楠.扁平化在社交網(wǎng)站界面設(shè)計(jì)中的應(yīng)用研究[D].陜西科技大學(xué),2015.

[5]金燕飛.扁平化設(shè)計(jì)技術(shù)在網(wǎng)頁設(shè)計(jì)中的具體運(yùn)用——以中國民航飛行學(xué)院洛陽分院網(wǎng)站改版為例[J].藝術(shù)科技,2015(6):49-49.

[6]陳美紅.扁平化設(shè)計(jì)在高職院校校園網(wǎng)站建設(shè)中的應(yīng)用[J].電腦知識與技術(shù):學(xué)術(shù)交流,2016,12(3):201-202.

[7]朱兼白.扁平化在高校圖書館門戶網(wǎng)站改版設(shè)計(jì)中的應(yīng)用研究——以浙江機(jī)電職業(yè)技術(shù)學(xué)院為例[J].內(nèi)蒙古科技與經(jīng)濟(jì),2016(14):160-161.

[8]葉成聞.扁平化設(shè)計(jì)的極簡特性及其在電子商務(wù)網(wǎng)頁中的應(yīng)用[J].現(xiàn)代裝飾:理論,2015(3).

Abstract：

With the application of flat design style in various fields in recent years,its minimalist and symbolic design features have been accepted by more and more people.Various social networking sites,App have adopted the flat design style,the flat design style has become a popular trend.Now the design of the popular wind has blown into the campus.Takes the design of university portal as an example,and expounds the application of flattening style layout,navigation bar,color matching,text selection and minimalist icon in the design of university web?site.It aims to provide a portal for teachers and students to meet the needs.

Keywords：

Flat;College Website;Website

Research on the Application of Flat Design in the Design of University Portal Website

FENG Gui-lan1，LI Zheng-nan2
（1.Modern Education Technology Center,Civil Aviation Flight University of China,Guanghan 618307；2.Aviation Engineering Institute,Civil Aviation Flight University of China,Guanghan 618307）

2017-03-09

2017-06-15

1007-1423（2017）18-0049-03

10.3969/j.issn.1007-1423.2017.18.012

中國民航飛行學(xué)院青年基金項(xiàng)目（No.Q2014-118）

馮貴蘭（1988-），女，四川自貢人，碩士，工程師，研究方向?yàn)樵朴?jì)算、信息安全

李正楠（1985-），男，四川綿陽人，學(xué)士，助理研究員，研究方向?yàn)閷W(xué)生管理