扁平化设计在高职院校校园网站建设中的应用
中图分类号：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
如果问时下网页设计的流行趋势，都能听到扁平化设计（flat design）这个概念。所谓“扁平化设计”所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更“平”的界面。善于用颜色去鼓励用户探索。它是极简主义的直系亲属，不过更复杂和多样化一些，既兼顾了极简主义的原则又可以应对更多的复杂性；通过去掉三维效果，将锐度和清晰度融为一体。如今这股设计流行风也吹进了校园。本文通过对笔者所参与的“上海建峰职业技术学院”官方网站改版前后项目的分析，简述扁平化设计在高职院校校园网站建设应用中的优势，为今后高职院校网站的设计提供一些有益的思路。
1 高校校园网站的发展概述
在互联网络高速发展的今天也带动了高校信息化教育的发展，而高校网站建设则是学校教育信息化建设的重要方面。高校网站是学校对外交流与宣传的窗口，是学校进行形象展示、信息发布、交流沟通、招生就业的重要阵地，也是教学、科研、管理的重要途径。早期的高校校园网站主要是起到信息发布的作用，但存在着布局单一、填塞信息内容过满；不重视色彩搭配；缺乏人性化设计等各方面的问题，可喜的是随着高校网站建设的发展，涌现出了一批诸如清华大学，北京大学等制作精良的高校校园网站。这些极具特色、制作优美的高校网站也引领了其他高校校园网站的建设与发展。
高职院校的校园网站发展总体滞后于本科院校，这与领导的重视程度，专业设计人才的匮乏等各种因素有关，随着高职院校招生宣传力度的加强，高职院校在学院网站这块也渐渐重视，不断进行改版，近些年一大批优秀的高职院校网站异军突起。通过分析发现，这些优秀的网站几乎都应用了扁平化的设计风格，笔者所在的高职院校官网也是应这股潮流而进行了大幅度的改版。
2 扁平化设计在高职院校校园网站设计中的运用
在设计之初参考了众多国内高职院校网站，结合学院的自身特色，与相关技术人员的配合，最终完成了整个改版工作。该网站于2016年1月正式运行，视觉效果较好，得到了用户的肯定（http：//www.shjf.edu.cn/webSite/）。改版前后的网站如下图1和图2：
整个页面采取扁平化设计，具体设计体现如下：
1）布局
扁平化设计是一种极简主义的美术设计风格，所以在排版上尤为重要，讲究整齐有序、条理清晰，摈弃复杂的排版结构。原来的信息堆积，布局过分饱满、凌乱，重点不突出。所以网站在布局上精简，将原来复杂的“国”字形结构改为简单的三分栏，用大的颜色块来布局，改版之后将原来“快讯”、“公告”之类的栏目划到统一的中间信息栏下，一目了然。
2）中性之美和鲜明的对比
在扁平化设计中，色彩的应用极为重要。由于抛弃了拟物化设计风格的渐变、高光等特效，只能使用纯色块来进行设计，那么在色彩的搭配和选择上就极有讲究。为了能让使用者舒适的阅读，不造成眼睛疲劳或者其他不适感，设计师应尽量选择中性的颜色。也就是说，要避免使用饱和度过高的纯色，比如纯红、纯绿、纯蓝等颜色，因为这些颜色在展示的时候会非常刺眼，严重影响使用者的视觉体验。在色彩的应用中，要注意颜色之间的对比，只有通过鲜明的颜色对比，才能迅速抓住使用者的眼球，让设计师的意图表现的更加明确，通常是通过亮度、色温、对比色、互补色等等手段来实现颜色的对比，应尽量避免使用参数相近的颜色，这样的颜色搭配会使阅读困难，甚至会造成使用者的极度不适。在新版的设计中，整个网站的主色调采用了饱和度低的蓝色，这种冷色调不刺眼，方便阅读。同时在一些小面积的地方诸如角色登陆的“教师”、“学生”等小图标用绿色、橙色等暖色系的色彩与主色形成对比，迅速抓住阅览者的眼球，使得页面活泼灵动。 3）极简贴切的图标
扁平化设计追求的是一切极其的简洁、简单，反对使用复杂的、不明确的元素。在设计扁平化风格界面时，特别是在图标的设计时，应该遵循极简原则。复杂的、含义模糊的元素将会造成使用者的困扰，这与扁平化设计风格直观、简洁的总原则是相违背的。只有采用足够简约的设计元素，才能达到最好的展示效果。改版网站在诸如微博、微信等图标上都采取大众化的标识，一目了然。
4）更多的圆角
在扁平化设计中，设计师经常会采用圆角设计，以防止在产品使用过程中对使用者造成伤害，这种人性化的设计深受使用者的欢迎。同样在用户界面设计过程中，使用一些圆角图案，不但会使设计更具亲和力，也会让使用者更容易接受设计者的设计意图。这也符合大众追求圆润、圆满的心理需求。改版网站在一些小细节诸如“学生事务”的图标上就充分体现了这一圆角设计的原则，这种更具亲和力的设计使学生浏览网站的时候更容易拉近与学生的距离。
5）字体的选择
在扁平化设计风格中，因为追求极致的简洁，力求最快速、最直观的表达设计者的意图，所以在字体选择上也是以简洁、清爽为标准。应采用通用的、笔画清晰的字体，避免使用字迹不清的字体，比如草书，特殊字体等，也应该避免使用已经不再流通的字体，比如古代甲骨文、篆体字等等（特殊用途除外）。对于中文字体来说，诸如雅黑、幼圆或者细黑等字体都是不错的选择，英文字体也是同样的道理。新改版网站菜单主要以宋体和微软雅黑字体为主，字体颜色则采取最简单又最突出的黑与白两色，使得网站的文字阅读起来清爽，不费力。
6）善用灰色、白色
黑色、白色和灰色在扁平化设计中至关重要，由于采用了大量的色块，难免给用户以眼花缭乱的感觉。所以在有的时候，设计师为了突出重点，可减少色块的使用，而转由使用一种或者二种主要的颜色来突出主体，其他部门则通过灰色来表达。由于灰色与任何颜色都不冲突，所以在设计时，巧妙的使用灰色，将起到意想不到的效果。正确的使用灰色，将使主体更明确和突出，更容易被使用者接受。白色干净整洁，是最普遍的背景色，运用好白色可以提高整个网页的档次。改版后的网站在诸如“快速通道”、“公共服务”等小图标上未点击浏览时呈现灰色，而鼠标点击的时候则呈现与主色调蓝色的近似色，与主色调遥相呼应。而整个页面的背景色通过灰、白、虚图等方式淡雅的点缀，这些点缀不但没有喧宾夺主，反而将视觉点更加有效集中在屏幕中间，整个网站达到了和谐统一的对比。同时整站的设计也非常注重留白的运用，给浏览者充分的呼吸空间。
7）拟物设计的转型
对于原有的拟物设计风格，如果要向扁平化设计转型，那么只需要将原来设计风格逐一抛弃，分别去除描边、阴影、渐变、高光等等特效，让设计回归本原，用最简洁的几何图形和最清晰的颜色来表达设计者的灵感。在旧版网站中尤其是菜单栏的设计即是拟物化设计风格的重要体现，加了诸多的阴影、高光等按钮样式效果。繁多的样式让网站的加载时间变长，在新版网站中则摈弃了这一设计，采用了扁平化设计之后，所有 的图标，菜单等栏目在设计时均将这些风格全部抛弃，经过测试页面优化达40%以上，加载时间大大缩小。
8）拟物设计和简约设计的和谐统一
扁平化设计取得了简约设计和拟物设计的精华，并将这些元素融合为一体，看起来既友好又亲切。通过展现清晰动人的界面来实现界面的友好性，类似于简约主义，扁平设计脱去了华丽的虚拟元素，只展现必要的功能。但它没有简约主义那样严格，所以合理得当的装饰与交互是必要的。在新版网站中，这种设计体现在诸如“快速通道”、“公共服务”等小图标上，当点击这些小图标的时候，小图标会进行旋转，这种简单有趣的人机小互动增加了页面的友好与活泼性。
3 总结
扁平化设计统一了简约设计和拟物主义的设计目的，有自己独特的可用性思想，它脱去了冗余的形式，代码简洁且有高适用性，适用于快速加载的网站。它在每一类应用上都能展现自己的美，不论是桌面还是手机屏幕，都能保持一如既往的清晰和适应，使用户在使用过程中减少犯错，提高了用户体验。
