网页设计构建高校门户网站设计研究

摘要:随着科学技术和计算机互联网技术的一步步发展，为了满足我们生活中的便利和需要，像平板电脑、手机等新兴的电子产品逐渐的普及于我们的日常生活当中。对于广大的师生群体而言，他们似乎更乐意于使用便携的移动端设备从网络中获取自己所需的学校信息。由于我们传统的网页设计都是基于大屏幕的PC端口来设计的，这种设计并不能随着设备窗口尺寸大小的改变而改变。而响应式网页的设计可以识别屏幕的大小，自动做出相对应的页面调整，实现了一个网站对于多种设备的兼容，越来越多的高校门户网站在使用响应式网页设计，为师生带来更好的用户体验。

关键词:响应式网页;高校门户网站;设计要素

1响应式网页的概念

响应式网页设计(ResponsiveWebsiteDesign)的概念是有EthanMarcotte在2010年5月所提出。通俗的讲，就是一个网站可以兼容不同的终端，无论我们的用户使用的是笔记本、平板还是手机，我们的页面都可以自动切换分辨率，图片的尺寸，文字的大小以及相关的脚本功能，用来适应不同的设备。

2响应式设计对于高校门户网站的设计需求

2．1校内学生的用户体验需求随着高校的不断发展，学校里的设施建设不断的丰富完善。现在的高校学生并不像以前那样寝室－教室－图书馆“三点一线”式的生活方式了，从前的“宅男宅女”们现在更乐意走出寝室，到校园的咖啡厅，实验室，学习交流空间，休闲娱乐地点等各式各样的场所丰富自己的校园学习生活。如此一来，使用电脑的概率大大地减少，平板设备的使用率大为提高。高校的学生可能随时需要登陆学校的门户网站去获取学校新闻、学习资源信息、学校活动信息、学生服务资讯等重要信息。响应式的网页设计能够很好的解决传统网页“操作繁琐、重点不突出”的弊端，在给予良好的视觉体验的同时，可以帮助学生“更清晰，更方便，更准确”的操作用户体验。

2．2高校教师的用户体验需求高校官网中的教务系统、教学管理系统、科研系统、薪酬福利、校园服务、教育心理资讯等板块与教师的生活和教学息息相关，学校官网已经成为高校教师教学生活中密不可分的一部分。响应式的网页设计不但可以在移动设备中提高视觉效果和观看质量，还能通过其流动式的弹性布局，给予教师在网页上进行教学办公的一体化操作。

3响应式设计构建高校门户网站的设计要素

3．1页面的布局设计高校门户网站的设计需要符合高校的形象塑造，其内在设计需要使代码和功能可以灵活的适应响应式设计的需求。由于PC端的屏幕窗口大，移动端的移动窗口小。因此，高校门户网站的响应式设计不是在于对PC端的网页进行删减或压缩，而是在UI界面的布局上进行层次化、板块化的移动转变。在网页的头部，传统的PC端网页更倾向于横向来设计打造导航。响应式设计针对于网页的导航可进行楼层式的显示处理，我们得创建能够轻易压缩以适应纵向规格的导航，这使原本PC端长长的导航栏，在移动端中自动变小或浓缩至顶部，甚至是浓缩为“汉堡包”式的按钮点击进行“popup”的跳出式显示以及设置下拉菜单。在网页的body部分的板块内容，分别以列为板块。随着屏幕的变小，每一列的板块在网页的显示中依次自动进入下一栏进行显示，故以三列变两列，两列变一列。使得每一个网页中的板块在移动端进行自上而下的依次布局。

3．2页面的设计模式显示网页的设备与网页本身的内容是构建响应式设计的重点。基于设备和内容优先，是响应式设计的两种基本模式。由于之前的传统网页基本上都是在PC端进行显示，因此，传统网页中基本上都是采用基于设备的模式，因为当时屏幕种类较少，且有标准屏幕之说。设计师无需考虑显示网页的宽度变化，所有的网页页面都是固定的宽度，显示在PC端的屏幕内。如今，标准屏幕已经不复存在。因此，内容优先是一种不错的选择。在构建江西省高校门户网页中，采用内容优先这一模式，对于提高用户体验来说，是极其有利的。

3．3流式布局为了实现页面的灵活设计，匹配网页在不同的视口中完美显示，需要使用灵活的百分比布局，其也被称之为“流式布局”。这样才能让网站页面根据视口大小在不同的设备或者是显示空间之间灵活伸缩修正样式。而“流式布局”的构建就是将固定像素宽度(width)转换对应的百分比宽度。由于网页在PC端中的显示空间很大，移动端中的显示相对较小。因此，网页的文字和图片在响应式页面中的显示会根据屏幕大小的不同进行相对应的显示变化。由于移动端的屏幕窗口较小，图片和文字在传统PC端“大融合”式的布局，在移动端会在单独的一栏中以“铺满”的方式显现出来，在CSS中针对于img的max宽度设置为100%这可以实现网页的图片随着流动布局相应缩放。

3．4图片与文字的选择和处理网页的内容主要是以文字、图片、视频三种形式展示的。图片和文字在网页设计中是至关重要的，由于响应式设计需要匹配不同的屏幕设备。因此，与传统的仅展现在PC端的传统网页设计不同，在响应式设计网页中，随着移动端设备屏幕的变小，图片和文字也会相应的进行等比缩放，变得更小。图片与文字会随着屏幕的变化而改变他们的形状与展现方式。在文字的选择中，我们得选用不同标题尺寸和多种文字大小。在图片的选择中，确保窗口尺寸变化时，大幅摄影图片不会有任何裁切，保证图片的加载速度快以及清晰的分辨率。

4结束语

随着响应式网页设计的兴起，主流网站都已经借助响应式进行网页的设计。面对高校门户网站这一特殊的设计对象，我们必须对症下药，具有针对性的去解决一些在响应式网页中设计上的不足。俗话说:“文无第一，武无第二”，响应式的网页在设计上的要求会越来越高，咱们必须在网页设计中不断的总结经验，归纳要素，才能使响应式的网页设计越来越优化。

参考文献:

［1］曹世雄．浅析响应式在高校网站网页设计中的应用．

［2］汪玉琼．浅析响应式趋势下网页界面设计的变化．

［3］黄莉婷．响应式网页设计在伯乐相马网的应用．

作者:胡兆威 单位:江西工业职业技术学院