扁平化風格在高校門戶網站設計中的應用研究

馮貴蘭，李正楠

（1.中國民航飛行學院現代教育技術中心，廣漢618307；2.中國民航飛行學院航空工程學院，廣漢618307)

扁平化風格在高校門戶網站設計中的應用研究

馮貴蘭1，李正楠2

（1.中國民航飛行學院現代教育技術中心，廣漢618307；2.中國民航飛行學院航空工程學院，廣漢618307)

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

扁平化；高校網站；網站

0 引言

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

1 扁平化設計

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

網站設計應用扁平化設計具有以下優勢：

（1）視覺界面更加清晰

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

（2）信息傳遞更加直觀

扁平化設計有利于展示主要內容，凸顯網站信息，讓網站以更直觀的方式把信息傳遞給瀏覽用戶[3]。除此之外，傳統網頁設計所采用的樹狀信息組織機構，扁平化的網頁設計將底層信息上移，減少了中間類目的標簽，信息展示一目了然。

（3）用戶交互更加流暢

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

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

2 扁平化在高校網站設計中的應用

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

（1）版式布局

扁平化設計是一種簡單到極致的藝術設計風格，布局尤為重要，它強調有序、整齊、一氣呵成，放棄復雜的布局結構。所以改版后的網站在布局上精簡，從上到下將結構分為簡單的三欄，分別是頭部、內容和尾部，這三欄用大的顏色塊來布局。中間的內容欄又分為信息欄和鏈接欄，用不同的底色進行區別。網站的新聞展示內容統一放在到中間信息欄，一目了然。

（2）導航欄

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

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

（3）色彩搭配

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

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

（5）極簡圖標

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

3 結語

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

[1]張巖.網頁設計中扁平化設計的趨勢[J].美術大觀,2014(5):132-132.

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

[3]呂思思,焦金金.扁平化設計在高校網站建設中的應用研究[J].軟件導刊,2015,14(9):132-134.

[4]何夢楠.扁平化在社交網站界面設計中的應用研究[D].陜西科技大學,2015.

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

[6]陳美紅.扁平化設計在高職院校校園網站建設中的應用[J].電腦知識與技術:學術交流,2016,12(3):201-202.

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

[8]葉成聞.扁平化設計的極簡特性及其在電子商務網頁中的應用[J].現代裝飾:理論,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

中國民航飛行學院青年基金項目（No.Q2014-118）

馮貴蘭（1988-），女，四川自貢人，碩士，工程師，研究方向為云計算、信息安全

李正楠（1985-），男，四川綿陽人，學士，助理研究員，研究方向為學生管理