响应式设计在高校网站界面设计中的可行性探究

张帆

摘要：高校网站多以学生为主要受众群体。学生群体的信息获取方式又以移动智能终端为主，所以传统高校网站设计以电脑为主要浏览界面的形式亟待改变。响应式设计使高校网站界面设计的多设备兼容成为可能。

关键词：高校网站；响应式设计；界面设计；移动终端设备

随着智能移动设备的广泛使用，网站来自移动端的浏览量逐渐增大。高校网站需要面向广大学生，而学生群体更加依赖于手机、平板电脑等移动终端设备，这一受众特点使高校网站面对各类设备的兼容性要求更高。不仅如此，各类便携式智能设备不断推出，例如APPLE WATCH、VR等等，使得网页界面的尺寸产生了更多的变化。网页界面的尺寸产生改变，网页内容也势必要进行相应的调整。若针对如此之多的终端类型，都一一进行相应设计与调整，势必要耗费巨大的人力物力，而响应式设计就在此时应运而生了。响应式设计作为一种新的设计概念，能够使网站针对不同设备环境进行响应和调整，实现一个网站对多种设备终端的兼容。

一、响应式网页界面设计特点

响应式设计的提出者 Ethan·Marcotte 曾经说过，响应式设计不是“为移动设备而设计”，它也不是“为台式机而设计”，它是关于采用灵活的、设备无关的方法来为 Web 进行的设计。响应式设计不是一项新的技术，而是对已有的多项技术的整合。它最初是指网页本身能够自动识别屏幕尺寸，根据其尺寸做出相应的调整，使用户在各种现实屏幕上均能实现对网页内容的流畅阅览。现如今响应式设计的概念扩展为页面的设计与开发应当根据用户的行为以及设备环境，能够进行自动的响应和相应的调整。2014年，万维网公布的HTML5语言，在很大程度上体现了响应式设计的概念，HTML5的设计目的就是为了在移动设备上支持多媒体。可以说HTML5的出现，初步肯定了响应式设计在网站建设上的可实施性。

二、高校网站发展趋势

现如今互联网的高速发展使得高校网站的实用性与以往产生了巨大的区别。前期的网站更多的是承载了对高校的宣传作用，而近年来，无纸化办公的提倡，校内重要信息的网上通知让高校网站的实用性与点击量与日俱增。数据显示，提供这些点击量的至少有一半是由校内师生。校内学生可以通过高校网站进行选课、查询成绩、预缴学费等操作。校内教师可以通过高校网站进行课表查询、调停课、登入学生成绩、审阅学生论文、甚至申报科研项目等操作。可见网络办公在高校网站上已经得以实现。

不仅仅是电脑端，高校网站来自移动端的点击也大幅度增加。单就学生在网上缴纳学费一项来说。可移动支付端的普及使得人们几乎不再随身携带现金，各类买卖平台也均开通了移动支付端的付费通道。学生们更愿意也更习惯用移动设备完成支付行为，而很多高校网站还不能实现流畅的移动端缴费操作。这就使得网站的实用性大打折扣。所以高校网站与移动端的结合，在操作及功能上的与时俱进就显得尤为重要。

三、高校网站响应式设计的可行性

现代社会是一个信息爆炸的高效率社会，前一秒发出的新闻很快就被下一秒爆炸式的消息所掩盖，人们对信息的浏览也越来越趋向于碎片化。自从智能手机开始普及，人们的信息阅读行为从最早的看报、看电视、点击电脑网站集中浏览，转变为现在的随时随地片段式阅读。例如利用等公交的时间，乘坐地铁的时间，吃饭时间，甚至是走路的时间进行信息浏览。移动智能终端无疑是形成这一现象的头号功臣。这种信息浏览模式，趋向于年轻化。也就是说高校网站的重要受众大学生群体，是碎片化浏览信息的主要人群。他们几乎手机不离手，手机阅读甚至成为了他们获取信息的主要方式。高校网站若要真正成为具有使用价值的网站，就不能忽略受众群体当前最迫切的需求——实现在移动端的流畅使用。

在当今科技高速发展的状态下，实现针对某一种移动端的流畅阅览并不难，这也是如今APP泛滥的原因。但近两年多移动终端的出现又对网站的兼容性提出了更高的要求。这就使得高校网站若要实现移动端使用，不再仅仅是制作出一个相关APP就能达到要求的。况且APP在后期维护和更新上将会耗损巨大的人力物力。

响应式设计无疑给这一困境解了围。它适用于多种终端的优良特性使得它被越来越广泛使用。通过对响应式网站的技术操作，网页本身能够在几乎维持原貌的基础上在多尺寸显示器上浏览。Bootstrap框架的出现，让网站界面在响应式状态下的再设计变的非常简单。越来越高的需求与越来越简易的技术操作使得高校网站的响应式设计不再是一个难题。

四、高校网站响应式界面设计的具体办法

对各大高校来说，官方门户网站是其非常重要的形象展示渠道。网站界面上的主要图片、图形、信息等起到了对高校的宣传作用。学校的历史底蕴，校风校训等在其网站上展露无疑。受众通过对高校网站的点击浏览，形成对该高校的初步印象，这些印象甚至能够进而对学校生源、社会声望产生不同程度影响。因此，高校网站在进行响应式设计时既要满足实用功能，又要实现审美价值。

在高校网站版式设计上应更趋于简洁化和弹性化。使用流式布局，让界面不再类似于一张张位图文件，使用固定的像素值，而是设置成为百分比。这样网页将不再局限于屏幕的宽度尺寸，流式布局能够让界面根据屏幕尺寸自动更改显示大小，而界面本身并不会因此出现变形或显示不全的状况。为了适应流式布局，网站界面也注定要删繁就简，尽量以简洁清晰的形式展示高校信息和文化。

在高校网站的装饰风格上，可采用扁平化设计风格。所谓扁平化，就是指图形减少立体感、减少装饰纹样或肌理，以比较纯粹的方式展现形状本身。这种设计风格与流式布局的设计要求较为契合，也能较好的统一网页界面的整体风格。

当版式与风格都趋向于简洁的状态下，界面设计的独特性就显得尤为重要了。在响应式设计大环境下，为了体现高校网站自身的不同，细节的考究和创新就显得尤为重要。例如界面整体颜色的搭配可以较为活泼，或使用高校标志中的专有色。导航栏的设计在响应式界面当中的设计方式较为灵活，同一页面面对不同终端可制作多种导航效果。同时为了活跃版面，等待或刷新界面可以适当加入高校特有图形，以增加网站界面的装饰美感。

结语

移動化浏览是网络发展的必然趋势，甚至在近几年看来，人们已经开始不仅仅满足于智能设备的可移动，还要求设备的便携性，即随时随地都能够浏览到自己所需要的信息。探讨响应式设计在高校网站界面设计上的可行性，相当于是在探讨高校与时代共同进步，共同发展的课题。让更多的受众以更便捷的方式了解高校校园文化，让高校网站以一种全新的面貌为受众提供真正便捷的具有实用价值的服务。