扁平化风格在高校门户网站设计中的应用研究

冯贵兰，李正楠

（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-），男，四川绵阳人，学士，助理研究员，研究方向为学生管理