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

摘 要：近年来，随着计算机、互联网等现代科技发展，信息化时代已然成形，并在很大程度上影响着人们的生产生活。尤其是移动互联技术的开发，更是为人类信息交互提供了新的通道，便捷性功能表现更为突出。基于庞大的移动终端用户数量，图书馆门户网站必须进行积极的创新变革，以用户体验为中心，优化设计，实现更大范围内的知识信息友好交互。本文基于对响应式图书馆门户网站设计发展需求的定位与论述，就其实现相关进行了探究。

关键词：图书馆门户网站;响应式设计;技术;发展

时至今日，移动设备已然成为了现代人生活中的标配，如手机、电脑等，加速着移动图书馆的发展，并积累了庞大的用户群体。基于响应式设计的高校图书馆门户网站建设，改变了传统的网站页面布局模式，以独特、多变的风格提升了视觉印象，满足了用户的个性化需求，对增强读者黏性有着重要的现实意义，相关方面的课题研究备受关注和热议。

一、发展需求

知识经济时代，面对愈加激烈的社会竞争格局，人们的知识渴求度急速攀升，图书馆作为重要的知识资源输出阵地，由此迎来了巨大的发展机遇。同时，宏观信息化生态下，互联网技术应用普及，为信息交互创造了诸多便捷性操作条件，且种类构成多样，日渐积累了十分庞大的受众群体，成为了图书馆服务输出的主阵地之一。因此，越来越多的图书馆开始着手信息化建设，并朝着“移动”的领域迈进，以迎合社会主流需求。目前，师生使用手机、笔记本、PAD等移动终端越来越多，传统网站建设并未考虑移动设备的显示和兼容问题，直接影响了用户体验。一般来讲，对于上述问题的解决，需要设计多套网页，从而为各种设备匹配不同的版本，是真正实现以用户体验中心的图书馆服务发展关键举措。在现实的操作中，由于图书馆自身的技术研发能力有限，移动服务输出主要依靠第三方平台，导致同质化现象严重，个性化定制内容稀缺等系列问题突出。而响应式图书馆门户网站设计，则很好地适配了各种尺寸设备，上述问题迎刃而解。所谓响应式网页设计，率先由美国知名网站设计师Ethan Marcotte提出，是指可以自动识别屏幕宽度，并做出相应调整的网页设计，因而能够兼容更多尺寸规格的设备，得到了用户的广泛青睐。相较于其他网站设计技术，响应式设计的开发成本低，且不涉及安装成本，可进行重要和重复数据的本地保存，跨平台终端无需分配子域，保证了访问地址的唯一性，有助于个性化定制服务输出，是图书馆门户网站建设的未来方向。

二、遵循原则

响应式网页设计开通了新的设计思维领域，通过集中创建页面的内容排版设计，使之能够智能地根据用户行为及其使用的设备环境进行对应布局，包括系统平台、屏幕定向以及屏幕分辨率等。友好的用戶体验是响应式图书馆门户网站设计的初衷所在，并使之功能优势得到了最大释放。为了更好地推动该项技术发展与应用，QA公司首席技术专家David Walker从实际开发层次总结了响应式网站设计的原则，包括建立流动布局、使用CSS3、使用自适应图片。其中，建立流动布局要求所有容器的宽度必须定义成浏览器的百分比。使用CSS3则要求根据媒体类型及参数的不同，采取不同的样式设计。使用自适应图片要求图片不得超过最大显示宽度。事实上，布局适配小屏幕时的图片显示是相当清楚的，并随着分辨率提高，设计逐步增强。目前来讲，台式开发技术的发展已然相当成熟，移动互联网时代背景下，移动终端设备的应用愈加广泛，是未来响应式图书馆门户网站设计的关重点所在。除此之外，业内公认的响应式网站设计还需遵循宏观性原则和弹性化原则。具体而言，宏观性原则要求在响应式网站设计之初，就需衡量不同类型用户的需求，选择一种网页尽可能保证其在各种设备上的显示效果，并做到合理取舍，从而提升多数用户的体验。弹性化原则作为响应式网站设计的基本遵循，亦是其功能优势的关键体现，以媒体查询技术为依托，在不同尺寸的设备上呈现出流动式的不同显示效果，并能够根据视口大小自动调整显示位置，尽量做到简洁、可视的页面布局。

三、核心技术

响应式图书馆门户网站设计的核心技术包括媒体查询、弹性视觉媒体和流动布局。其中，媒体查询作为CSS3规范中的重要模块，实现了按设备特性来分级控制的页面布局设计。在该项技术支持下，图书馆门户网站可自动识别用户终端设备的条件语言，并对其物理属性和浏览器属性进行检查，包括宽度、方向等，最终选择性地供应样式表，允许建立使用相同的HTML文件多个布局。现阶段而言，几乎所有的浏览器都支持CSS3媒体查询功能，即使一些较为陈旧的网站浏览器，亦可通过一些替代方案解决媒体查询不支持的问题。与此同时，随着响应式图书馆门户网站浏览器的宽度适配变化，其内容风格、布局及比例等亦会进行相应的变更，最大限度地保证了用户无缝体验。弹性视觉媒体处理是保证响应式图书馆门户网站效果的关键一环，包括文字、图片、视频、动画等。随着5G时代的到来，移动终端设备的带宽得到了很大延展，但仍旧作为其硬伤所在。如果单纯地进行页面布局的响应式处理，手机访问图片还是PC上的大图，势必会消耗较大的流量，且请求时间延长，一定程度上影响了用户阅读兴趣。因此，弹性视觉媒体处理显得至关重要，即根据移动终端设备的屏幕分辨率适配合理的图形，保证了清晰度和请求时间。流动布局则是通过浮动和百分比宽度来实现图书馆门户网页布局的“流动”，动态重组布局区块的同时，减少了创建的断点数，从而保证了呈现效果。在本案研究中，依托bootstrap栅格系统，实现了一系列行与列的组合，并集合了多种创建好的页面布局。

四、实现路径

从技术层次上讲，改造旧式网页的难度较大，而新建网页的开发成本偏高、耗时较长，相比之下响应式图书馆门户网站设计的价值效益更加突出，可以适配电脑或手机等不同设备，灵活性表现更强，能够给用户带来统一的视觉体验，增强了其粘度，是推动图书馆服务持续发展的有效路径。同时，在本案研究中，基于bootstrap框架有机地将HTML、CSS和JavaScript整合在一起，赋予了其CSS动态属性，能够满足不同尺寸设备的显示要求，并且为了减少工作量，采取前端响应式设计，加快了开发进度，相应成本消耗较低。当然，响应式图书馆门户网站设计并非尽善尽美，只兼容IE9以下的浏览器，可在新网站建设中植入判断模块，如果检测到用户浏览器不支持条件，则自动跳转到旧的网站页面，从而有效保障了用户体验。在具体的设计实践中，还需注重个性化定制服务建设，不断丰富功能模块构成，如报名、投票、评论、视频、附件上传等插件，并可设置不同风格的模板，由用户自定义切换，从而满足他们的多样化需求。目前来讲，我国响应式图书馆门户网站设计的发展尚未完全成熟，只有少数高校完成了开发。正是基于师生用户需求考量，加之响应式图书馆门户网站设计的多重功能优势，应当得到院校领导层面的高度重视与支持，紧跟时代潮流，结合自身实际情况，逐步加大相关方面的物力与人才支持，为推动新型图书馆门户发展奠定厚实的基础，实现更高质量的服务输出，最大限度地释放图书馆功能价值，助力高校科研、教学等系列工作的有效展开。

五、结语

综上所述，响应式图书馆门户网站设计，开启了用户移动阅读新的体验方式，更为个性化的版面设计，赢得了广大用户群体的青睐，是图书馆门户网站建设的主流趋势，在实际践行过程中，依托精准的需求定位，遵循宏观性、弹性化等原则导向，充分利用媒体查询、弹性视觉媒体以及流动布局等核心技术优势，实现更高质量的信息服务输出，同时应当得到院校领导的高度重视与支持，实现其功能价值最大化。

参考文献：

[1]王玥琳.基于响应式图书馆网站构建的探讨[J].产业与科技论坛，2016，15（09）：60-61.

[2]曹树金，吴育冰.响应式Web设计及其在图书馆门户网站中的应用——以“211”高校图书馆为例[J].图书情报研究，2016，9（01）：30-34.

[3]冯春英.基于响应式Web设计的新型图书馆门户网站构建[J].图书馆学研究，2015（15）：34-40.

作者简介：李宁（1977—），男，汉族，重庆长寿人，馆员，研究方向：数字图书馆。