响应式设计在图书馆门户网站的应用

导语：响应式设计在图书馆门户网站的应用一文来源于网友上传，不代表本站观点，若需要原创文章可咨询客服老师，欢迎参考。

1背景

高校图书馆门户网站是读者获取馆藏资源最主要的窗口,用户体验及美工设计直接影响图书馆信息服务的质量,其建设水平与高校图书馆的信息服务体系规划、管理者理念、技术馆员能力及读者浏览习惯等相关。由于受自身设计理念、技术水平及开发能力限制,高校图书馆普遍采用外包途径建设门户网站,虽然省时省力,对技术馆员的能力要求也相对较低,但由于源代码版权受限,导致扩展性极差,一个微小的变化或功能扩展都要寻求外包公司的帮助,给后期维护带来极大不便。当前,扁平化设计、响应式布局以其简约的画面、整洁的布局、流畅的加载速度及兼容多种设备屏幕等优势逐渐成为网站前端设计的主流。随着网站前端技术的发展,用户浏览媒体也经历了巨大的变化。目前,智能手机、平板电脑等都已普及,图书馆的门户网站设计应充分考虑移动端用户的访问需求,使他们能够在各种浏览设备上都有良好的浏览体验。在这种需求背景下,响应式网站设计应运而生,我国高校图书馆在响应式门户网站建设方面进行了一些尝试,如:钟远薪对图书馆移动服务技术进行对比分析后认为响应式Web设计是图书馆移动服务的一个新方向;云南大学图书馆率先建设了响应式门户网站[1-2];北京大学利用Drupal框架及HTTPS技术构建的安全性极高的门户网站,前端也采用了响应式设计。以辽宁师范大学图书馆为例,该馆2015年通过外包方式建设了Metro风格的门户网站,由于未取得源代码授权,后期扩展和维护极其困难,且不支持移动媒体的兼容性浏览,因此运行两年后决定改版。改版的目的是解决门户网站跨平台和终端依赖性问题,同时可任意扩展和修改网站功能及内容。笔者调研了我国高校图书馆门户网站建设的现状,在分析读者浏览辽宁师范大学图书馆门户网站的行为数据基础上,提出了一种基于扁平化设计、采用响应式框架建设门户网站的技术路线,应用于辽宁师范大学图书馆的门户网站建设。经过2个月的自主开发,辽宁师范大学图书馆的新版门户网站于2017年9月10日顺利上线运行。

2高校图书馆门户网站建设现状

2.1高校图书馆门户网站设计风格。为全面了解我国高校图书馆的网站建设现状,笔者在2017年5月至6月期间分别通过台式电脑、平板电脑、手机端等对部分高校图书馆的门户网站进行了访问,并对其建设风格进行归类整理,调研结果见表1。2.1.1传统设计风格。传统设计风格的高校图书馆网站数量最多,设计以图文信息为主,适合PC端浏览,若通过平板电脑或手机浏览会出现滚动条或网页元素显示错位,影响显示效果。采用传统设计风格的高校图书馆网站一般还会专门建设适合移动设备浏览的移动版网站。2.1.2Metro设计风格。Windows8推出了一个专为触摸设计服务的最新Metro风格界面,Metro设计风格以简洁的版式为基础,将内容本身作为组织和分组排版的方式,删除了多余的线条和框架[3]。我国部分高校图书馆采用的是这种设计风格,但总体数量不多。2.1.3扁平化设计风格。扁平化设计风格使用简洁风格的元素和图标,配色大胆、丰富且明亮,是一种尽量减少装饰的极简设计[4]。本次调研中采用扁平化设计风格的高校图书馆有13家。2.1.4响应式网站。响应式Web设计(ResponsiveWebDesign)理念认为网站页面的设计与开发应根据设备环境(如屏幕尺寸、屏幕定向、系统平台等)以及用户行为进行相应的响应和调整[5]。响应式网站只需开发一次就可为所有移动终端提供服务,使图书馆门户网站更加高效、专业、美观。目前,我国已有5所高校图书馆的门户网站实现了响应式布局。2.2响应式。Web设计的核心技术当用户浏览页面时,浏览设备的屏幕分辨率、浏览器类型、浏览窗口的大小及浏览器模式(如极速模式、兼容模式)等因素都会影响浏览效果,而响应式Web设计利用媒体查询、弹性视觉媒体和流动布局等核心技术可保障用户在浏览页面时将这些因素的影响降到最低[6]。媒体查询根据媒体类型、屏幕宽度、屏幕比例、设备方向等各种功能特性改变页面布局;流动布局实现可缩放、可流动的弹性版式,确保在媒体查询未切换样式期间布局能适应视窗改变;弹性视觉媒体适应版式布局的变化,可使特定媒体按照规定的布局实现动态调整,三者共同构成了响应式Web设计的核心技术。2.3Bootstrap响应式前端框架。Bootstrap是一种响应式Web设计框架,专门应用于开发响应式布局、移动设备优先的Web项目。Bootstrap框架的核心是栅格系统,其工作原理如下:栅格系统通过一系列行(Row)与列(Column)的组合创建页面布局,内容应当放置在“列(Column)”内,只有“列(Column)”可以作为“行(Row)”的直接子元素。列(Column)通过指定1到12的值表示内容跨越屏幕的范围。栅格系统通过定义容器大小平分12份,再调整内外边距,最后结合媒体查询就可以制作出强大的响应式栅格系统。

3基于响应式Web设计的高校图书馆门户网站建设

3.1用户需求分析。高校图书馆通过第三方数据统计插件可获取读者浏览行为数据,从读者使用终端类型、终端分辨率和终端浏览器等三个维度了解读者的浏览行为,为网站界面设计、布局选择及浏览设备兼容性提供了依据。相关数据显示,使用非移动设备和移动设备访问图书馆门户网站的用户分别占76.77%和23.23%。普通台式电脑的分辨率大多为1440×960,笔记本电脑多为1366×768,随着电脑显示器越来越大,1920×1080分辨率的终端也越来越多;移动终端的分辨率大多为360×780,平板电脑分辨率多为1280×800,详见图1。终端浏览器方面,读者多习惯使用360浏览器、Safari浏览器,以及微信、百度、QQ等App内嵌的浏览器等,详见图2。3.2建设目标及思路。高校图书馆门户网站采用扁平化设计风格,使用Bootstrap响应式前端框架,可通过ASP.net+SQLServer2008完全自主设计开发,内容设计应突出资源和服务,注重精美与高效,以提升图书馆的形象;框架编排、色彩搭配及图片选择都应恰到好处,使网站在保证功能的前提下为读者带来良好的视觉享受和时代动感。高校图书馆还应注重网站的安全性和稳定性,通过网络安全、系统登录安全、服务器防火墙策略等多种方式确保门户网站安全运行;在网站维护和后续扩展方面提供源代码的详细注释,开发专门的平台维护网站;充分考虑网站的扩展性,提供视图、WebService接口等与其他系统对接;静态和Flash展示的页面可采用手工方式维护。3.3网站技术解决方案。高校图书馆可在虚拟化系统中配置两台高性能服务器,一台用于备份,一台运行网站主程序,数据库服务器和Web服务器共用一台虚拟化服务器。高校图书馆的开发环境可选择VisualStudio2012+SQLServer2008,选用Bootstrap框架实现网站的跨平台浏览,采用HTML5+DIV+CSS3方式布局页面,自行规划设计界面风格及样式,同时利用jQuery实现页面的下拉菜单、轮播图片等效果,通过Json传递网站后台和前台间的数据。门户网站建设完成后,可使用宽屏台式电脑、笔记本电脑、平板电脑、手机等浏览设备进行测试,确保网站能够跨平台浏览及与主流浏览器(如IE浏览器、火狐浏览器等)相兼容。3.4内容规划、版式设计及页面布局。3.4.1内容规划。高校图书馆门户网站的内容规划要突出资源和服务,主界面内容应充实而不繁杂,既能体现本站特色,又能满足用户需要。3.4.2版式设计。高校图书馆门户网站的整体风格应力求简洁清爽,选取蓝色为主色调,版式设计应突出资源检索、活动公告及最新馆藏资源等板块,并设置快速链接板块,以图标的形式将读者最常用的功能显示出来。高校图书馆门户网站主页版式设计详见图3。3.4.3页面布局。高校图书馆可采用Bootstrap响应式框架布局页面,其中快速导航栏、横幅动画、专题网站、网站页脚版权等栅格数值设置为12;新闻中心、快速链接、馆藏资源、读者服务等栅格数值设置为6。查询媒体定义为四种分辨率,分别为适合屏幕宽度小于768px的手机浏览器、屏幕宽度大于768px小于1000px的平板电脑浏览器、屏幕宽度大于1000px小于1440px的笔记本电脑浏览器,以及屏幕宽度大于1440px的宽屏台式电脑浏览器;使用360、Safari、Chrome和IE等主流浏览器测试其兼容性。

4结语

辽宁师范大学图书馆响应式网站自上线运行以来,较好地解决了多种浏览设备的兼容性问题,同时保证了网站良好的扩展性,目前已陆续增加了信息素养教育、OA资源、投稿指南等服务功能,以及课程资源网、馆员论坛等专题网站,为提高该馆的信息服务水平提供了有力的技术支持。高校图书馆建设响应式门户网站能最大限度地契合读者浏览设备的性能与规格属性,不仅能够解决浏览媒体的跨平台问题,还使用户能够获得与设备相匹配的良好视觉体验。因此,高校图书馆应将门户网站建设作为一项长期工程,在注重日常维护和持续开发的基础上不断提升自主开发能力,打造高水平技术馆员队伍,在高校图书馆与读者之间架起一座沟通的桥梁。

参考文献:

[1]钟远薪.响应式Web设计:图书馆移动服务新方向[J].图书馆论坛,2015(7):93-97.

[2]毕剑,刘晓艳,张禹.使用响应式网页设计构建图书馆移动门户网站:以云南大学图书馆为例[J].现代图书情报技术,2015(2):97-102.

[3]李杰旻,张继晓.视觉、交互和功能:以Metro风格设计分析互联网产品设计[J].设计,2013(11):113-114.

[4]王梓潇.“扁平化”设计风格在图书馆网站设计上的应用[D].沈阳:沈阳师范大学,2015.

[5]刘德山,章增安,林彬.HTML5+CSS3:Web前端开发技术(第2版)[M].北京:人民邮电出版社,2018:329-347.

[6]赵建保.响应式Web设计关键技术及设计流程[J].电脑知识与技术,2014(5):1066-1068.

作者:章增安 单位:辽宁师范大学图书馆