自适应设计与图书馆移动服务建设

付跃安

与传统电脑(含台式电脑和手提电脑)不同，移动设备的类型具有多样化的特点，如各种尺寸的手机、平板电脑等，使用的技术也多种多样，如采用视网膜屏幕的iPad、iPad mini、Kindle Fire、Kindle Fire HD、4 寸屏智能手机如iPhone 5、5 寸屏智能手机如三星Galaxy Note 等，且变化带有不可预测性。适用于传统电脑的网站和程序未必适用于手机，适用于手机的网站和程序未必适用于平板电脑。为了使用户拥有良好的使用体验，也为了充分利用设备性能，一些公司除了分别开发针对传统电脑和手机的网站、程序外，还开发了应用于平板电脑的网站和程序。这给开发者的财力、物力和人力造成了压力。网络标准专家Jeffrey Zeldman 认为这是一场“标准噩梦”，“为所有设备都设计精彩的界面，从没有像现在这么令人困惑和富有挑战”[1]。于是，以一种平台应用于多种设备的设计——自适应设计被提出来，引起了IT 界的重视。

1 自适应设计概述

自适应设计(Responsive Design)也被称为响应式设计，是一位名叫Ethan Marcotte 的网站设计师在2010 年的一篇文章中提出来的[2]。在此之前，网站设计采用的是一种称为固定像素的设计模式，没有考虑到浏览器和屏幕尺寸的变化，当网页大于视窗时，页面或者被压缩到整个窗口中，或者被用户放大，但只能看到页面局部。运用自适应设计的网页和程序能根据屏幕尺寸和设备类型，在保证可读、可用的情况下，实现自我调整，达到条件相同，体验相同；条件不同，体验可替代的目的。随着CSS3 与HTML5 的推出，自适应设计开始受到关注。自适应主要通过流式布局、弹性字体、媒体查询、弹性图片等技术实现。设计人员通常设置几个屏幕临界值——断点，这些断点被认为是体验发生变化的关键点，由媒体查询检测用户的设备获得，系统借此应用不同的CSS样式。目前，已开发出了用于自适应设计的CSS架构，如Base、Foundation、Titan、Bootstrap等[3]，CMS 系统Word Press、Drupal 也能对自适应提供支持，另外还出现了自适应建设工具，如“快速自适应网页设计”(Really Quick Responsive Web Design)与“自适应计算器”(The Responsive Calculator)均可以协助设计人员快速计算页面各元素的百分比。

自适应不止是一种技术，更是一种理念。从系统建设的角度讲，它强调系统的可重用，即同一平台可以在多种环境中应用，而不是针对每一种环境设计独立平台。有些网站有多个版本，用户在使用移动设备访问时，系统能探测到用户的设备并将用户定向到移动网站，这不属于自适应，因为它没有实现同一平台的重用。从用户的角度讲，自适应强调不论用户使用何种设备，在何种环境中访问，均能获得所有的信息和功能，并保证一定的使用体验[4]。在自适应产生之前，人们曾用不同概念表达这一理念。早在30 年前，著名计算机专家Alan J.Perlis 就说过：“在一个数据结构上运行100种功能好过在10 种数据结构上运行10 种功能。”[5]世界万维网联盟(W3C)于2008 年起草了研究报告《万维网联盟移动友好基础测试1.0》(W3C MobileOK Basic Tests 1.0)，并推出了在线检测工具MobileOK Checker，用以检测一个网站的移动友好性，尽管W3C 没有说明它是用来检测Web 网站还是移动网站，但国外不少学者都将其作为对Web 网站的移动友好进行检测的工具。另外，也有人提出了可调适设计(Adaptive Design)的概念，基本思路类似。

2 自适应与图书馆移动服务

对图书馆来讲，自适应设计的价值在于可以节约系统开发成本和维护压力。就网站建设而言，图书馆至少要开发和维护两个网站：Web版和移动版，为了使持有平板电脑的用户也能获得良好的使用体验，图书馆也可以像企业那样开发平板网站。然而，作为公益性机构，图书馆很难有足够的经费和人力保障用户的这种精细体验。根据国内学者调查，目前国内只有少量图书馆有能力建设移动网站，而能够建设移动客户端的图书馆更少，因此经费是制约图书馆移动服务的重要因素。采用自适应技术，使图书馆服务平台只需要一次建设，就可以应用于多种环境和不同设备，能有效降低移动服务门槛，使更多的图书馆将自己的资源和服务推广到移动渠道中。这与图书馆对三网融合的诉求在理念上是一致的，在三网没有融合的情况下，为了实现多通道服务，图书馆不得不建设一个个专有业务系统[6]，而在三网融合之后，图书馆就可以以一个业务系统提供多通道服务。从这个意义上讲，自适应平台是继图书馆移动服务的短信模式、WAP模式、客户端模式之后的第四种模式。

对读者来讲，自适应平台的意义在于能方便读者利用移动设备访问Web 平台，这种情况在现实中普遍存在。一方面，虽然移动平台的功能和内容针对移动用户进行了优化设计，许多图书馆在设计之前都会对读者进行调查，设计之后请读者测试，但是一个不容置疑的事实是，移动平台提供的内容和服务是有限的，当读者对移动平台上未提供的信息和服务产生了需求时，只能通过Web 平台获得。随着移动终端性能改善和高速网络的出现，读者对移动应用的要求越来越高，近年来图书馆移动网站中不断增加功能，致使Web 平台与移动平台的界限开始模糊[7]；另一方面，存在着只有移动设备使用的场合，这包括两种情况：一是在移动环境中，读者没有电脑可用；二是对部分弱势群体来说，移动设备或许是他们访问图书馆网站的唯一媒介。通过世界银行提供的统计数据(2011 年)可知，随着人均国民生产总值的降低，每百人互联网用户数和每百人移动蜂窝用户数均呈下降趋势，但前者下降的幅度大于后者。例如，南非的每百人互联网用户数是世界水平的64%，每百人移动蜂窝用户数超过世界平均水平；尽管印度每百人互联网用户数只有全球水平的31%，但每百人移动蜂窝用户数是全球水平的84%；既使人均国民生产总值只有全球水平5%的阿富汗，每百人移动蜂窝用户数也达到了全球水平的63%[8]。因此，经济水平对移动接入的影响较小，弱势群体可能没有电脑，但可能拥有可联网移动的设备。PEW在研究报告中也认为：“传统上在基础互联网接入鸿沟另一侧的群体现在开始使用无线上网。在智能手机用户中，年轻人、少数族群、没有读过大学的人以及低收入阶层要比其他人群更倾向于认为手机是他们访问互联网的主要工具”[9]。

目前国外已有一些图书馆网站采用了自适应设计，Eric Rumsey 在博客中列举了34 个使用这一设计的图书馆网站，高校图书馆占有较大比例，其中包括一些知名大学，如密歇根州立大学、弗吉尼亚大学、耶鲁大学、牛津大学等，于2013 年启动的美国数字公共图书馆(Digital Public Library of America)也采用了自适应设计[10]。经试用发现，这些图书馆主要是对网站自身进行了自适应设计，在调用应用程序或链接到镜像站、第三方平台时，多数无法实现自适应，例如对于书目检索，许多网站都对主页的检索界面进行了自适应设计，但在查看检索结果时，除个别网站如美国数字公共图书馆外，基本不能提供自适应。笔者运用自适应网络设计测试工具(Responsive Web Design Testing Tool，http：//mattkersley.com/responsive/)对国内省级公共图书馆和“985 工程”高校图书馆的网站进行了检测，发现均没有采用自适应设计，只有“国立”台湾图书馆网站的主导航可以实现流式布局，其他仍然是固定模式。

实现图书馆网站的自适应，难点在于如何使同一平台在不同设备和应用环境中均保持可用和易用，即Bohyun Kim 所说的如何使在电脑上显示内容和功能的适当方式也适用于在移动情境下传递内容和功能[11]。正是认识到电脑与移动设备在应用方面的差异，人们才建立了独立的移动网站和客户端，但在自适应设计中，这一问题无法回避。由于电脑和移动设备在性能、显示和交互上的不同，仅仅实现内容的重新布局远远不能解决这一问题。以Sacramento公共图书馆网站和Mc Gill 大学生命科学图书馆网站为例，在小屏幕设备上，系统只是对原Web网站的信息、图标、图片和交互元素进行了重新排列，没有做任何优化处理，导致移动页面的信息拥挤不堪，页面被拉得很长，这显然不利于读者使用。同时，移动环境中用户对信息和功能的应用不同于Web 环境，对平台的要求也不一样。在这种情况下，将平台从Web 应用过渡到移动应用就应考虑采取优化措施，这也是设立屏幕断点，应用不同CSS 样式的原因之一。

3 图书馆网站自适应优化策略

优化的目的是使应用于电脑的平台以适合于移动设备和移动环境的方式为用户提供服务，读者不仅可以获得大部分信息和功能，而且能拥有良好的使用体验。本文根据图书馆业务特点，提出了5 种图书馆网站由Web 到移动的自适应优化策略。

3.1 实现界面的逐步简洁

在信息系统设计中，简洁是一项重要设计原则，大量可用性理论都强调保持界面和交互功能的简洁，“少即是多”是设计领域对简洁原则的传统概括。简洁由于考虑到了人们的认知特点而易于为人们所接受。从传统电脑到平板电脑，再到手机，屏幕逐渐减小，可容纳的信息量也逐渐减少，在PC 屏幕上感觉简洁的页面在移动屏幕上未必会感到简洁，因此从Web 应用到移动应用，系统应能对界面不断重组，通过逐步简洁的方式适应用户的认知和操作需求。逐步简洁是自适应网站最基本的优化策略，它采取重新布局、隐藏、压缩和再组织等措施，实现界面的可用和易用。就整个界面而言，传统电脑中显示的网站可能是三栏架构，但在平板电脑上显示的网站可能变为两栏，而在手机上则调整为一栏。对于页面中的具体元素，需要根据元素类别和重要性采取灵活的简洁措施。在美国数字公共图书馆网站上，主导航有6 个选项，页面顶部也有一个8 个选项的快捷导航，但在移动屏幕上，这两列导航被压缩成了一个红色按钮，点击之后导航选项展开，再次点击收回。虽然宾夕法尼亚州立大学图书馆没有对页面中部的5 个导航选项进行压缩，但在电脑中显示的导航子栏目在移动屏幕中被隐藏。在Notre Dame Hesburgh 大学图书馆的一站式检索中，随着屏幕的缩小，检索选项、帮助链接等不再显示，仅留下一个检索框与检索按钮。虽然简洁是自适应优化的一个基本策略，但简洁并不代表着简化，大部分功能对读者来讲都应该是可获取的，尽管获取的过程没有桌面网站方便和直接。

3.2 保留和凸显重点内容

通过对图书馆网站的使用统计可以发现，读者对不同信息、功能的使用率是不一样的，相对来讲，使用率高的信息和功能对读者比较重要，同时，在桌面环境和移动环境中，读者也存在着不同的使用倾向。在逐步简洁的过程中，哪些信息和功能需要被隐藏或被保留，不是随意决定的。一般情况下，应将对读者重要和使用率高的信息和功能保留下来，而不太重要的信息和功能则通过导航方式逐级呈现。在耶鲁大学图书馆网站中部由左至右分布着3 个区域：研究资源区、服务区与开放时间区，随着屏幕缩小，研究资源区和服务区不再显示，仅保留开放时间区，考虑到可用性研究中关于从左至右显著性依次减弱的观点，这一优化可以看作是设计人员对桌面用户与移动用户在网站使用差异上的考虑。在一些非图书馆网站的优化中，某些信息在PC 屏幕上显示，但在移动屏幕上被隐藏；而另一些信息则相反，在移动屏幕上显示，但在PC 屏幕上被隐藏，这也体现了设计人员对用户在两种环境中需求差异的分析。

与传统电脑相比，用户与移动设备的交互要困难得多。有人对比了正常用户与肢残用户的输入错误，发现正常用户在使用移动设备时出现的错误与肢残用户在使用电脑时出现的错误不相上下[12]，尽管近年来移动设备的性能有较大改善，但交互困难的事实基本上没有改变。在这种情况下，从传统电脑到移动设备，宜将对用户重要的信息和功能放在移动设备上容易获得和操作的地方，而不必完全遵从从左至右、从上至下的顺序调适，各元素之间的位置完全可以根据需要重新布局。在Richland 图书馆主页顶部，自左至右分别排列着“我的账户”(My Account)与“我如何…”(How Do I…)两个按钮，但在小屏幕上，后者位于前者之上，而不是习惯性地将右侧项目居于左侧项目之下。随着宾夕法尼亚州立大学图书馆主页的检索区在小屏幕上被下移，为了方便读者使用，图书馆在页面顶部设置了一个“搜索”按钮，点击之后页面快速移动到检索区，并默认点选搜索框，读者可直接输入检索词。

3.3 对交互过程进行优化

传统电脑与移动设备在交互上存在着差异，一个关键的不同是移动设备没有鼠标，主要通过手指触摸或感应笔点选的方式操作。因此，网站中借助鼠标实现的功能在应用到移动设备上时，应以移动设备可执行的方式调整。鼠标与触摸的一个不同就是鼠标有停留功能，一些自适应系统将PC 屏幕上的鼠标停留功能变成了移动屏幕上的点击功能，并相应调整了页面顺序。Notre Dame Hesburgh 大学图书馆将网站上提供鼠标停留功能的主导航在移动屏幕上凝缩成一个类似检索框的下拉菜单，称为“选择页面”(Select a page)，点击该框，网站以对话框的方式显示一、二级栏目，GrandValley 大学图书馆则采用了点击导航后重新打开一个页面的方式容纳鼠标停留功能所显示的信息。

虽然某些任务在传统电脑与移动设备上均能执行，但由于屏幕大小、设备性能等的差异，在从Web 应用过渡到移动应用时，一些网站也进行了适应性调整，使用户更易于操作。Alvin Sherman 图书馆主页有1 个组合了5 个数据来源的检索区域(图书馆目录、论文、杂志、教辅、Google 学术搜索)，使用统一的检索框和检索按钮，但在移动屏幕上，1 个检索变成了5 个检索，分别提供检索框和检索按钮。美国数字公共图书馆检索结果的细化区和结果区在PC 屏幕上位于一个页面，读者在细化区的筛选条件设定可同步在结果区反映，而在移动屏幕上，细化区变成了按钮，读者点击按钮后进入筛选条件页，设定条件后再重新进入结果页。

3.4 降低系统性能

为了在电脑上达到良好的运行和显示效果，与纯粹的移动网站相比，自适应网站拥有较大的容量，用户通过移动设备访问，虽然可以隐藏一些内容，但一般来讲几乎所有的内容和文件都要被下载到移动设备中，导致下载速度变慢，影响系统运行。网络性能研究专家Guy Podjarny 曾对347 个自适应网站进行了测试，发现既使在最小的屏幕设备上，86%的网站都没有采取降低性能的措施，意味着低性能终端需要与电脑执行同样的任务[13]。同时，服务器对来自移动网络请求的接受和执行滞后期要大于来自有线网络的请求，这也影响了页面在移动设备上的下载[14]。因此，当网站需要在移动设备上运行时，系统要采取性能降低策略，以减小移动网络和移动设备的负担。Jeremy Keith 提出了“条件内容下载”(Conditional Content Loading)的措施[15]，即根据设备不同提供相应的内容版本，一个称为Filamentgroup的组织就利用JavaScript 来决定对于特定设备发送何种版本的图像，但是该解决方案会增加建设者的压力，有向开发独立的移动平台回归的倾向。也有人提出了调适图像(Adaptive Image)的措施，即根据设备类型和屏幕大小，系统自行创建和提供压缩后的图片[16]。除上述思路外，笔者认为，还可以采用基于终端的性能调整策略，即由浏览器对网站内容进行过滤和有选择的压缩，国内搜狗浏览器即具备一定的筛选功能。不过，不论采取何种措施，都要允许用户能请求原始内容。

3.5 实现应用功能创新

当前自适应设计的基本思路是力图使用户借助移动设备达到通过电脑使用网站和程序的效果，但移动设备具有许多新型技术，如加速器、位置探测、重力感应、触摸技术、照/摄像功能等，系统建设者要考虑如何利用这些技术提供创新功能。以位置探测为例，当用户利用移动设备在馆内查找OPAC 时，在保证相关度的情况下，对结果的排序可以优先考虑基于位置，即将与读者距离最近的书目显示给读者，并通过虚拟地图或增强现实技术给读者提供方位指引，目前台湾已有图书馆尝试这一技术。在多数图书馆网站上都有图书推荐区，可以考虑在移动设备上显示一些与用户所在位置相关的图书资料，以提高图书馆服务的情境相关性。

4 结论

随着信息终端类型的增多和屏幕的多样化，为每一种设备和屏幕开发专用平台的压力随之增加，自适应正是为了解决这一问题提出的设计思路，它可以使网站和程序根据设备和屏幕尺寸的变化自我调适。就图书馆而言，它可以减轻图书馆开发独立移动网站和客户端的压力；就使用者而言，它能使读者在多种条件下获得图书馆服务平台提供的大部分信息和功能，并拥有良好的使用体验。自适应的关键在于系统如何自我调适，即优化，文章提出了5 种策略，分别是逐步简洁、重点凸显、交互优化、性能降低与功能创新。

自适应系统的成功实施还需要处理好与图书馆已有业务系统的关系，实现协调发展。

一是处理好自适应平台和桌面平台的关系。对于自适应平台，系统虽然能够进行自我调适，但却无法使用户返回到原有平台。对于部分用户来讲，可预期要比可操作更为重要。在信息系统设计中，遵循用户的思维模式即是指系统设计要符合用户的思维、操作习惯和对系统的期待。如果用户对于固定系统比较熟悉，他们清晰地知晓自己如何找到需要的信息，如何完成任务，系统就有必要在自适应平台中提供返回原有平台的切换功能，因为界面和功能毫无预期地突然改变会造成一些用户使用上的困难。

二是处理好自适应平台与移动平台的关系。应用自适应系统的一个很自然的问题就是图书馆有无必要再开发独立的移动网站和客户端。一般来讲，如果图书馆的经费有限，可以考虑只建设一个自适应网站，但是如果图书馆有条件建立独立的移动系统，可以保留移动网站和客户端，只是在后一种情况下，需要处理好自适应平台和移动平台之间的分工。可以考虑设计更为简洁的移动平台，使移动平台专注于移动应用中的核心任务。从宾夕法尼亚州立大学图书馆的移动网站可以看出，由于Web 网站能够自适应，在移动网站上提供了非常专注的功能，包括检索、账户管理与移动适配数据库等移动用户频繁使用的功能。

三是处理好与应用软件和第三方平台的关系。如上所述，对于网站中调用的应用程序和第三方平台，图书馆由于缺乏有效控制而无法实现自适应。在这种情况下，图书馆就要协调好与应用软件和第三方平台的关系，通过宣传自适应的价值，争取供应商支持，以开放接口或对系统进行技术改造等途径，整体提升图书馆服务平台的自适应水平。

[1] 15 top web design and development trends for 2012[EB/OL].[2013- 12- 29]. www.netmagazine.com/ features/15- top- web- design- and- development- trends-2012.

[2] Ethan Marcotte. Responsive Web Design [J]. A List Apart，2010，May 25.

[3] Jeremy Snell. Flexible everything- Getting responsive with web design [J]. Computers in Libraries， 2013（4）：12- 16.

[4] JeffWisniewski. Responsive Design[J]. Online Searcher.2013 （1/ 2）：76- 76.

[5] Karen McGrane. Content strategy for mobile[M]. New York：A Book Apart，2012：53.

[6] 王芬林，吴晓. 数字图书馆发展研究[M]. 北京：国家图书馆出版社，2012：171.

[7] Karen McGrane.Content strategy for mobile[M]. New York：A Book Apart，2012：20- 22.

[8] World Bank Search[EB/OL].[2014- 01- 10]. http：/ /search.worldbank.org/ .

[9] Bohyun Kim.The LibraryMobile Experience：Practices and User Expectations[M]. U.S.A.：ALA TechSource，2013：15- 28.

[10] Eric Rumsey. Responsive Design Sites： Higher Ed，Libraries， Notables [EB/OL]. [2013- 12- 30]. http：/ / blog.lib.uiowa.edu/ hardinmd/ 2012/ 05/ 03/ responsivedesign- sites- higher- ed- libraries- notables/ .

[11] Bohyun.Kim. The library mobile experience：practices and user expectations[M]. U.S.A.：ALA TechSource，2013：29- 39.

[12] Chen ，T . （2008） . Input to the mobile web in situationally- impaired[C].In Proceedings of the 10th international ACM SIGACCESS conference on Computers and accessibility. Halifax， Nova Scotia，Canada：ACM. 13- 15，October 2008：303- 304.

[13] Guy Podjarny. Performance implications of responsive design- Book contribution [EB/OL]. [2014- 01- 05].http：/ /www.guypo.com/mobile/ performance- implicationsof- responsive- design- bo ok- contribution.

[14] Tammy Everts. How I learned that 3G mobile performance is up to 10X slower than throttled broadband service[J].Web Performance Today，October 26，2011.

[15] Jeremy Keith . Conditional Loading for responsive designs[J]. 24 Ways，December 2，2011.

[16] Kathryn Frederick. Responsive web design 101 [J].Computers in Libraries，2013 （7/ 8）：11- 14.