响应式Web设计档案移动信息服务新方式

赵宇

摘 要：档案移动信息服务存在部分WAP网站用户体验不佳、APP开发运营成本与利用效益的反差、微平台侧重于宣传与普惠档案服务的局部发展、档案移动应用建设困于成本高、技术难、资源共享难的问题之中。应用响应式Web设计技术可提升用户体验、增加利用效益、传递全方位信息、助力解决“钱、技、共享”难题等。应用此技术档案馆也将面临开发成本资金筹措、技术合作、浏览器等问题，并提出众筹助力解决开发成本、“产学研”为导向与高等学校技术合作，鼓励用户更新浏览器等解决方法。

关键词：响应式Web设计；移动信息服务；移动档案馆

基于移动终端搜索引擎，开发响应式网页，来适应各种尺寸移动终端设备访问或获取档案信息资源。目前档案馆缺乏在移动终端中，基于搜索引擎的档案信息移动服务方式以及实现的具体方法。为此笔者提出开发响应式Web设计来解决这一问题。

1 档案移动信息服务的主要方式及面临的问题

1.1 档案移动信息服务的主要方式。档案移动信息服务方式主要经历了短信、WAP、APP、微平台几个阶段。微平台指微信、微博、社交网站等社交平台。因微信、微博普及面更广、使用持续度高，所以主要论述这两种服务。现行阶段基本是多种方式同时运行。

国内档案移动信息服务兴起于2002年左右，开始探索基于GPRS的移动信息服务，2006年后进入集中发展时期。韩义义（2006）报道贵州省档案馆宣布可通过短信查询档案和现行文件目录业务，成为首个通过短信提供档案服务的档案馆[1]。瞿英和王晓凤（2007）依据国内缺乏针对档案系统的WAP应用的现状，对基于WAP的高校综合档案查询系统进行了详细分析，设计出了可行的系统方案[2]。短信和WAP在2006-2009年为档案移动信息服务主要服务方式。武汉市档案馆在2013年国际档案日上，启动数字化档案馆手机档案信息文化推送系统，被誉为全国首个“手机档案馆”[3]。此后档案APP开始兴起，但只有少数档案馆应用。黄永勤等人（2014）指出新浪微博作为国内首家微博平台，于2009年8月推出，仅有14%的档案学人在2009年注册并发布第一条微博[4]。王潇与黄新荣（2013）调查了截至2013年1月23日微信公众号，实际档案部门注册数为0[5]。胡晶（2013）报道十堰市档案局于2013年9月5日推出手机微信查询开放档案和现行文件业务[6]。2009-2016年，在社交媒体热浪的席卷之下，微博在档案移动信息服务中被广泛应用，而从2014年开始微信在档案移动信息服务中掀起了新浪潮。

1.2 档案移动信息服务面临的问题。

1.2.1 部分WAP网站用户体验不佳。WAP（Wireless Application Protocol，无线应用协议）以智能信息传送的方式在移动终端实现互联网和高级数据业务的引入和互操作，实质是为移动用户提供浏览网页等网络服务[7]。笔者访问部分档案信息网的WAP网站，其中有的档案网站，如安徽省档案信息网，用户体验较好，有的档案网站体验不佳：第一，内容纷繁复杂，界面冗长。界面垂直排列的网页内容可说为丰富，也可形容为“过重”，它实际上是将PC端的网页进行缩放。第二，字体太小，需手动放大。打开页面无法看清字体及内容，一眼实难观尽。第三，操作不便。想要找到某一栏目，除了不停的放大页面外，还需操作谨慎，稍有不慎点击到非目标栏目，就需重新返回，再次缩放点击，操作耗时。

1.2.2 APP开发运营成本与利用效益的反差。调查看来，极少数档案馆已上线运营档案APP，如浙江省档案馆、广西壮族自治区档案馆等。虽档案APP初有发展，但笔者认为部分档案馆研发档案APP还需三四而后行。首先，档案APP的研发成本高，周期较长。需开发iOS、Android、Windows phone等多个版本，以适应使用不同操作系统移动终端的人群使用。其次，不断的更新新内容、运维。APP上线后的后期任务接踵而至，完成这些“任务”的人财物消耗大。最后，用户对档案APP的利用频次、粘性程度较低。有着档案素养和档案兴趣高的少数人群，使用APP的时间和目的会较多，而仅在必要时才利用的广大普通民众，其利用档案的迫切必要性相对较少，用户利用粘性低。

1.2.3 微平台侧重于宣传与普惠档案服务的局部发展。目前档案微平台活跃并广泛开展，开通微博的档案馆及档案学人数量大，微信公众号也已上百。但其提供的内容以信息发布和指导性文件这一系列的休闲档案为主，譬如，业内动态、照片珍藏、网上展览、查档须知、法律法规等；查询上大多只能做到预约查档。档案微平台服务的内容还较为同质化和狭窄，缺少特色服务，全方位的档案信息服务。

1.2.4 档案移动应用建设困于成本高、技术难、资源共享难的问题之中。第一，成本上，存在着移动服务开发门槛较高、移动用户利用成本较高[8]。开发门槛即意味着平台系统开发所需的经费及技术，用户利用成本体现在流量的损耗和利用档案所必要支付费用等。第二，技术上，体现在多种技术联合和访问网络的安全上。需要数字技术、信息技术、互联网技术等技术的共同作用。移动设备的无线信号强弱受制于各种外界因素如信号发射的强弱、建筑物的阻挡、金属物的屏蔽、气候的变化等等，一旦无线信号减弱，则会影响到数字档案的传递和利用[9]。第三，资源共享问题。APP生成的原生性和管理的碎片化使得档案信息资源在各自APP中孤立封闭，形成了一个个的信息孤岛[10]。移动应用上的档案信息，是由档案馆挑选出部分信息加以发布的，挑选信息本身就阻碍了信息的完整共享，同时挑选出的信息未必与档案利用者需求相切合，档案信息资源共享互动率低。

2 响应式Web设计的特点、开发应用及优势

2.1 响应式Web设计的含义及特点。2010年5月Ethan Marcotte最先提出响应式Web设计（Responsive Web design），这一理念源于建筑领域中的响应式设计，即根据各个客户设计不同的物理空间。由此引发了Web设计同样也可和响应式建筑相似，做到根据不同设备环境自动响应及调整的思考。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。响应式Web设计的理念是页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整[11]。其基本特点，一是基于搜索引擎，无须下载。二是响应多种设备，适配多种尺寸。

2.2 响应式Web设计的开发与应用。响应式Web设计开发的原理涉及到调整分辨率、赋予弹性化、重构布局、调整样式等[12]。其中关键技术：一是流动布局。传统的的固定布局都为网页设置了一个固定宽度的外包裹，且这个外包裹的元素不能移动，无论访问者移动终端屏幕的分辨率是多少，网页都显示为和其它访问者相同的宽度。这样需在移动终端上缩放界面。而流动布局则是用相对单位百分比，访问时可自适应用户的分辨率，无需缩放界面，网页显示具有可变性。二是弹性图片和媒体。在响应式Web设计中通过使用一些CSS技巧，使图像和媒体比例限制在其父元素范围之内，相应于布局的其他部分按比例缩放，以适应其设备的大小[13]。三是CSS3媒体查询技术。是响应式Web设计最核心的技术，其允许设计人员基于各种不同的设备属性（比如屏幕宽度、分辨率、方向等）来确定目标样式。媒体查询访问终端的分辨率小于或大于设定范围，则自动适应访问端的尺寸。

应用上，可利用开源的响应式Web设计前端开发框架，如UIKit、Bootstrap，进一步适应性设计应用。国内云南大学图书馆在使用PHP语言编写的开源内容管理框架Drupal平台上，成功开发了基于响应式Web设计技术的图书馆移动门户网站。并采用CSS Hack，针对不同浏览器编写不同CSS样式，解决响应式网页在IE6、IE7、IE8中样式乱的问题[14]。

2.3 应用优势。

2.3.1 优化界面 提升用户体验。第一，内容简明。因定制式的响应，界面根据不同设备屏幕分辨率大小可自适应显示。第二，字体清晰。显示效果清晰，不用手动放大、缩小，可随意翻阅穿梭于各个页面之间。第三，操作简便。减去不停手动缩放界面的步骤，某些由于界面限制而被隐藏的栏目也易找到。

2.3.2 降低成本 增加利用效益。一是响应式Web设计满足高需求而维护成本低。在开发成本上，响应式Web设计与APP相比没有多少优势可言，但其在后期的运营与维护上则有着巨大的优势。在维护上，响应式网站服务端统一升级维护，自动更新。档案馆不用面对不同的设备维护多个版本，可不需特定的人维护移动网页。同时提升利用者的“享受”程度，增加用户黏性，实现较好的利用效益。二是减少内容多次分发负担。档案馆不再需要对APP、WAP、微平台等不同移动信息服务渠道分发内容，集中处理优化响应式网站内容即可，减少内容上的更新和营运维护成本。

2.3.3 打破限制 传递全方位信息。移动终端的响应式网页，可提供与PC端网页一致的内容，无须删减，表现力一致。如此，极大地避免挑选档案信息发布，及“挑选”档案信息进行二次发布的时间消耗。这也是档案馆从供给侧的一方改革，提供移动终端可查询全部相关档案信息的移动信息服务新方式，满足用户对信息多样性、丰富性的浏览需求。

2.3.4 助力解决“钱、技、共享”难题。首先“钱”的难题上。相较于档案馆微信公众号、档案APP，其最大的赢点在于较少的运营成本。网络技术的飞速发展，档案用户在“流量”和“时间损耗”上的利用成本也会降低。其次“技”的难题上。国家层面极力提倡互联网与传统行业的链合发展，互联网普及广，技术发展快。移动通信的无线通信技术也在不断的更新换代，信号和速率增强，抗干扰和便民程度不断增强。最后“共享”的难题上。可将PC端已上线运行的由国家档案局档案科学技术研究所启动的“国家开放档案信息共享平台”，进一步改造为响应式网站，合理利用已有的档案信息聚合共享渠道和平台。

3 面临的困境

3.1 响应式Web设计开发成本资金筹措问题。我国档案馆早已冠以“清水衙门”的头衔：一是内部资金缺乏，我国档案工作实行统一领导、分级管理的原则，其运行经费都源于中央审批拨款；二是缺少外部资金来源，2013年财政部、发展改革委公布取消和免征 一批行政事业性收费，其中包括利用档案的收费。三是内部资金消耗大，目前档案馆在数字档案馆构建中投入了巨大资金，在经费运转上绝大部分档案馆应是“步履蹒跚”了。由于经费不足，开发成本筹措不定而使部分档案馆开发响应式Web设计望而却步。

3.2 响应式Web设计技术合作问题。大多数档案馆的工作人员是没有更多的时间、精力或学识担当开发重任。那么档案馆开发响应式Web设计，则面临着技术合作问题，其需与外界合作共力，譬如档案馆与档案馆之间，档案馆与外部专业机构，共同或外包共建来实现档案网站的响应式Web设计。

3.3 部分浏览器响应问题。响应式Web设计需要浏览器有较高支持能力，一般在Chrome、Firefox和Safari上支持较好，而在IE8及其以下的旧版本IE浏览器上支持率极低。主要原因是IE8及其以下的旧版本IE浏览器并不支持CSS3。媒体查询功能是响应式网页设计的核心，是CSS3带来的功能，所以只有支持CSS3的浏览器才能实现响应式设计[15]。

4 解决方法

4.1 众筹助力解决开发成本问题。众筹指通过互联网方式发布筹款项目并募集资金[16]。为解决档案馆开发响应式Web设计所需的资金，档案馆可在专业相关性较高的网站或众筹网上，发起响应式Web设计开发资金众筹项目，通过互联网合理合法募集社会资金。目前，国内优酷众筹取得较大成功，在规定募集时间长短和目标金额前提下，募得资金，完成众筹项目。

4.2 “产学研”为导向 与高等学校技术合作。产学研通常指以企业为技术需求方，与以科研院所或高等学校为技术供给方之间的合作，其实质是促进技术创新所需各种生产要素的有效组合[17]。档案馆在此处姑且充当“企业”，发出对响应式Web设计这一技术需求，而科研院所或高等学校则研发相应的技术，从而实现学、研、产的有效递进，达到共赢的功效。

4.3 尽量支持旧版本IE 鼓励用户更新浏览器。一是国内97.45%的Windows Phone用户使用移动版IE浏览器[18]，IE浏览器用户决定了响应式Web设计应尽量支持IE。对于那些不支持媒体查询功能的浏览器，可以通过加载media-queries.js或者html5.js的方法来解决。对于IE6浏览器，很多样式都不兼容，本站采用了弹出窗口提示升级浏览器的方法[19]。二是国外数据公司Gadget Lab发布了2015年全球移动浏览器份额的数据，中国市场份额中安卓类浏览器占37.63%、Safari占35.82%、Chrome占19.19%、Firefox占4.41%[20]。这些被广泛使用的移动浏览器，几乎都支持响应式网页，按照使用需求，大众用户都可选择性地更新使用支持响应式网页的浏览器。

参考文献：

[1]韩义义.贵州手机短信可查档案目录[N].中国档案报，2006-06-08（1）.

[2]瞿英，王晓凤.基于WAP的高校档案查询系统的设计[J].兰台世界，2007（15）：37.

[3]武汉建全国首个“指尖上的档案馆”[EB/OL].[2016-04-15].http：//news.xinhuanet.com/info/2013-06/10/c_132446105.htm.

[4]黄永勤，黄丽萍，王兰成.档案学人微博的调研与分析[J].档案学通讯，2014（6）：31-35.

[5]王潇，黄新荣.微信公众平台开启档案利用新时代[J].陕西档案，2013（2）：26-28.

[6]胡晶.十堰市档案馆开通手机微信查档业务[J].湖北档案，2013（9）：16.

[7]赵屹，汪艳.档案利用服务的移动化形式与泛在化趋势[J].档案与建设，2015（10）：4-7.

[8][10]王协舟，王露露.Light APP在档案移动信息服务中的应用研究——基于档案机构微信公众号的调查[J].档案学研究，2016（1）：38-43.

[9]徐一男，李禾.数字档案移动实现模式探析[J].兰台世界，2013（26）：35-36.

[11]百度百科.响应式网页技术[EB/OL].[2016-04-10].http：//baike.baidu.com/link？url=ueD8gHtke0CJkNDS27oONzoJmf_YG2kf5MXBgA5h1p8FO_0D_84_ImgoTSInf8WUqRetnjjd1BBYRDXDJUvq0q.

[12][14][15][19]毕剑，刘晓艳，张禹.使用响应式网页设计构建图书馆移动门户网站——以云南大学图书馆为例[J].现代图书情报技术，2015（2）：97-102.

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

[16]百度百科.众筹[EB/OL].[2016-04-22].http：//baike.baidu.com/link？url=R6rStAIxI4xGlQ6TzZiB_dNU5bsJbrc8IVQ8TpxX6feppXkHgVOnrh7AbxyVWsAvv8oSOf0Ta5mVbUK5WwcXlK.

[17]百度百科.产学研[EB/OL].[2016-04-25].http：//baike.baidu.com/link？url=vRIE5MJuCcvxsVSGDKrNaweyAhSE-HHLFsBHOi_b8NPcjQphdWtecLM6d-RVqUhiQD-TUqEHcdgkVcDduXKC8a.

[18][20]移动浏览器全球份额数据出炉，你喜欢哪一款？[EB/OL].[2016-04-25].http：//wp.msn.com.cn/news/413476.shtml.

（作者单位：上海大学图书情报档案系 来稿日期：2016-08-06）