自適應設計與圖書館移動服務建設

付躍安

與傳統(tǒng)電腦(含臺式電腦和手提電腦)不同，移動設備的類型具有多樣化的特點，如各種尺寸的手機、平板電腦等，使用的技術也多種多樣，如采用視網膜屏幕的iPad、iPad mini、Kindle Fire、Kindle Fire HD、4 寸屏智能手機如iPhone 5、5 寸屏智能手機如三星Galaxy Note 等，且變化帶有不可預測性。適用于傳統(tǒng)電腦的網站和程序未必適用于手機，適用于手機的網站和程序未必適用于平板電腦。為了使用戶擁有良好的使用體驗，也為了充分利用設備性能，一些公司除了分別開發(fā)針對傳統(tǒng)電腦和手機的網站、程序外，還開發(fā)了應用于平板電腦的網站和程序。這給開發(fā)者的財力、物力和人力造成了壓力。網絡標準專家Jeffrey Zeldman 認為這是一場“標準噩夢”，“為所有設備都設計精彩的界面，從沒有像現(xiàn)在這么令人困惑和富有挑戰(zhàn)”[1]。于是，以一種平臺應用于多種設備的設計——自適應設計被提出來，引起了IT 界的重視。

1 自適應設計概述

自適應設計(Responsive Design)也被稱為響應式設計，是一位名叫Ethan Marcotte 的網站設計師在2010 年的一篇文章中提出來的[2]。在此之前，網站設計采用的是一種稱為固定像素的設計模式，沒有考慮到瀏覽器和屏幕尺寸的變化，當網頁大于視窗時，頁面或者被壓縮到整個窗口中，或者被用戶放大，但只能看到頁面局部。運用自適應設計的網頁和程序能根據屏幕尺寸和設備類型，在保證可讀、可用的情況下，實現(xiàn)自我調整，達到條件相同，體驗相同；條件不同，體驗可替代的目的。隨著CSS3 與HTML5 的推出，自適應設計開始受到關注。自適應主要通過流式布局、彈性字體、媒體查詢、彈性圖片等技術實現(xiàn)。設計人員通常設置幾個屏幕臨界值——斷點，這些斷點被認為是體驗發(fā)生變化的關鍵點，由媒體查詢檢測用戶的設備獲得，系統(tǒng)借此應用不同的CSS樣式。目前，已開發(fā)出了用于自適應設計的CSS架構，如Base、Foundation、Titan、Bootstrap等[3]，CMS 系統(tǒng)Word Press、Drupal 也能對自適應提供支持，另外還出現(xiàn)了自適應建設工具，如“快速自適應網頁設計”(Really Quick Responsive Web Design)與“自適應計算器”(The Responsive Calculator)均可以協(xié)助設計人員快速計算頁面各元素的百分比。

自適應不止是一種技術，更是一種理念。從系統(tǒng)建設的角度講，它強調系統(tǒng)的可重用，即同一平臺可以在多種環(huán)境中應用，而不是針對每一種環(huán)境設計獨立平臺。有些網站有多個版本，用戶在使用移動設備訪問時，系統(tǒng)能探測到用戶的設備并將用戶定向到移動網站，這不屬于自適應，因為它沒有實現(xiàn)同一平臺的重用。從用戶的角度講，自適應強調不論用戶使用何種設備，在何種環(huán)境中訪問，均能獲得所有的信息和功能，并保證一定的使用體驗[4]。在自適應產生之前，人們曾用不同概念表達這一理念。早在30 年前，著名計算機專家Alan J.Perlis 就說過：“在一個數(shù)據結構上運行100種功能好過在10 種數(shù)據結構上運行10 種功能。”[5]世界萬維網聯(lián)盟(W3C)于2008 年起草了研究報告《萬維網聯(lián)盟移動友好基礎測試1.0》(W3C MobileOK Basic Tests 1.0)，并推出了在線檢測工具MobileOK Checker，用以檢測一個網站的移動友好性，盡管W3C 沒有說明它是用來檢測Web 網站還是移動網站，但國外不少學者都將其作為對Web 網站的移動友好進行檢測的工具。另外，也有人提出了可調適設計(Adaptive Design)的概念，基本思路類似。

2 自適應與圖書館移動服務

對圖書館來講，自適應設計的價值在于可以節(jié)約系統(tǒng)開發(fā)成本和維護壓力。就網站建設而言，圖書館至少要開發(fā)和維護兩個網站：Web版和移動版，為了使持有平板電腦的用戶也能獲得良好的使用體驗，圖書館也可以像企業(yè)那樣開發(fā)平板網站。然而，作為公益性機構，圖書館很難有足夠的經費和人力保障用戶的這種精細體驗。根據國內學者調查，目前國內只有少量圖書館有能力建設移動網站，而能夠建設移動客戶端的圖書館更少，因此經費是制約圖書館移動服務的重要因素。采用自適應技術，使圖書館服務平臺只需要一次建設，就可以應用于多種環(huán)境和不同設備，能有效降低移動服務門檻，使更多的圖書館將自己的資源和服務推廣到移動渠道中。這與圖書館對三網融合的訴求在理念上是一致的，在三網沒有融合的情況下，為了實現(xiàn)多通道服務，圖書館不得不建設一個個專有業(yè)務系統(tǒng)[6]，而在三網融合之后，圖書館就可以以一個業(yè)務系統(tǒng)提供多通道服務。從這個意義上講，自適應平臺是繼圖書館移動服務的短信模式、WAP模式、客戶端模式之后的第四種模式。

對讀者來講，自適應平臺的意義在于能方便讀者利用移動設備訪問Web 平臺，這種情況在現(xiàn)實中普遍存在。一方面，雖然移動平臺的功能和內容針對移動用戶進行了優(yōu)化設計，許多圖書館在設計之前都會對讀者進行調查，設計之后請讀者測試，但是一個不容置疑的事實是，移動平臺提供的內容和服務是有限的，當讀者對移動平臺上未提供的信息和服務產生了需求時，只能通過Web 平臺獲得。隨著移動終端性能改善和高速網絡的出現(xiàn)，讀者對移動應用的要求越來越高，近年來圖書館移動網站中不斷增加功能，致使Web 平臺與移動平臺的界限開始模糊[7]；另一方面，存在著只有移動設備使用的場合，這包括兩種情況：一是在移動環(huán)境中，讀者沒有電腦可用；二是對部分弱勢群體來說，移動設備或許是他們訪問圖書館網站的唯一媒介。通過世界銀行提供的統(tǒng)計數(shù)據(2011 年)可知，隨著人均國民生產總值的降低，每百人互聯(lián)網用戶數(shù)和每百人移動蜂窩用戶數(shù)均呈下降趨勢，但前者下降的幅度大于后者。例如，南非的每百人互聯(lián)網用戶數(shù)是世界水平的64%，每百人移動蜂窩用戶數(shù)超過世界平均水平；盡管印度每百人互聯(lián)網用戶數(shù)只有全球水平的31%，但每百人移動蜂窩用戶數(shù)是全球水平的84%；既使人均國民生產總值只有全球水平5%的阿富汗，每百人移動蜂窩用戶數(shù)也達到了全球水平的63%[8]。因此，經濟水平對移動接入的影響較小，弱勢群體可能沒有電腦，但可能擁有可聯(lián)網移動的設備。PEW在研究報告中也認為：“傳統(tǒng)上在基礎互聯(lián)網接入鴻溝另一側的群體現(xiàn)在開始使用無線上網。在智能手機用戶中，年輕人、少數(shù)族群、沒有讀過大學的人以及低收入階層要比其他人群更傾向于認為手機是他們訪問互聯(lián)網的主要工具”[9]。

目前國外已有一些圖書館網站采用了自適應設計，Eric Rumsey 在博客中列舉了34 個使用這一設計的圖書館網站，高校圖書館占有較大比例，其中包括一些知名大學，如密歇根州立大學、弗吉尼亞大學、耶魯大學、牛津大學等，于2013 年啟動的美國數(shù)字公共圖書館(Digital Public Library of America)也采用了自適應設計[10]。經試用發(fā)現(xiàn)，這些圖書館主要是對網站自身進行了自適應設計，在調用應用程序或鏈接到鏡像站、第三方平臺時，多數(shù)無法實現(xiàn)自適應，例如對于書目檢索，許多網站都對主頁的檢索界面進行了自適應設計，但在查看檢索結果時，除個別網站如美國數(shù)字公共圖書館外，基本不能提供自適應。筆者運用自適應網絡設計測試工具(Responsive Web Design Testing Tool，http：//mattkersley.com/responsive/)對國內省級公共圖書館和“985 工程”高校圖書館的網站進行了檢測，發(fā)現(xiàn)均沒有采用自適應設計，只有“國立”臺灣圖書館網站的主導航可以實現(xiàn)流式布局，其他仍然是固定模式。

實現(xiàn)圖書館網站的自適應，難點在于如何使同一平臺在不同設備和應用環(huán)境中均保持可用和易用，即Bohyun Kim 所說的如何使在電腦上顯示內容和功能的適當方式也適用于在移動情境下傳遞內容和功能[11]。正是認識到電腦與移動設備在應用方面的差異，人們才建立了獨立的移動網站和客戶端，但在自適應設計中，這一問題無法回避。由于電腦和移動設備在性能、顯示和交互上的不同，僅僅實現(xiàn)內容的重新布局遠遠不能解決這一問題。以Sacramento公共圖書館網站和Mc Gill 大學生命科學圖書館網站為例，在小屏幕設備上，系統(tǒng)只是對原Web網站的信息、圖標、圖片和交互元素進行了重新排列，沒有做任何優(yōu)化處理，導致移動頁面的信息擁擠不堪，頁面被拉得很長，這顯然不利于讀者使用。同時，移動環(huán)境中用戶對信息和功能的應用不同于Web 環(huán)境，對平臺的要求也不一樣。在這種情況下，將平臺從Web 應用過渡到移動應用就應考慮采取優(yōu)化措施，這也是設立屏幕斷點，應用不同CSS 樣式的原因之一。

3 圖書館網站自適應優(yōu)化策略

優(yōu)化的目的是使應用于電腦的平臺以適合于移動設備和移動環(huán)境的方式為用戶提供服務，讀者不僅可以獲得大部分信息和功能，而且能擁有良好的使用體驗。本文根據圖書館業(yè)務特點，提出了5 種圖書館網站由Web 到移動的自適應優(yōu)化策略。

3.1 實現(xiàn)界面的逐步簡潔

在信息系統(tǒng)設計中，簡潔是一項重要設計原則，大量可用性理論都強調保持界面和交互功能的簡潔，“少即是多”是設計領域對簡潔原則的傳統(tǒng)概括。簡潔由于考慮到了人們的認知特點而易于為人們所接受。從傳統(tǒng)電腦到平板電腦，再到手機，屏幕逐漸減小，可容納的信息量也逐漸減少，在PC 屏幕上感覺簡潔的頁面在移動屏幕上未必會感到簡潔，因此從Web 應用到移動應用，系統(tǒng)應能對界面不斷重組，通過逐步簡潔的方式適應用戶的認知和操作需求。逐步簡潔是自適應網站最基本的優(yōu)化策略，它采取重新布局、隱藏、壓縮和再組織等措施，實現(xiàn)界面的可用和易用。就整個界面而言，傳統(tǒng)電腦中顯示的網站可能是三欄架構，但在平板電腦上顯示的網站可能變?yōu)閮蓹冢谑謾C上則調整為一欄。對于頁面中的具體元素，需要根據元素類別和重要性采取靈活的簡潔措施。在美國數(shù)字公共圖書館網站上，主導航有6 個選項，頁面頂部也有一個8 個選項的快捷導航，但在移動屏幕上，這兩列導航被壓縮成了一個紅色按鈕，點擊之后導航選項展開，再次點擊收回。雖然賓夕法尼亞州立大學圖書館沒有對頁面中部的5 個導航選項進行壓縮，但在電腦中顯示的導航子欄目在移動屏幕中被隱藏。在Notre Dame Hesburgh 大學圖書館的一站式檢索中，隨著屏幕的縮小，檢索選項、幫助鏈接等不再顯示，僅留下一個檢索框與檢索按鈕。雖然簡潔是自適應優(yōu)化的一個基本策略，但簡潔并不代表著簡化，大部分功能對讀者來講都應該是可獲取的，盡管獲取的過程沒有桌面網站方便和直接。

3.2 保留和凸顯重點內容

通過對圖書館網站的使用統(tǒng)計可以發(fā)現(xiàn)，讀者對不同信息、功能的使用率是不一樣的，相對來講，使用率高的信息和功能對讀者比較重要，同時，在桌面環(huán)境和移動環(huán)境中，讀者也存在著不同的使用傾向。在逐步簡潔的過程中，哪些信息和功能需要被隱藏或被保留，不是隨意決定的。一般情況下，應將對讀者重要和使用率高的信息和功能保留下來，而不太重要的信息和功能則通過導航方式逐級呈現(xiàn)。在耶魯大學圖書館網站中部由左至右分布著3 個區(qū)域：研究資源區(qū)、服務區(qū)與開放時間區(qū)，隨著屏幕縮小，研究資源區(qū)和服務區(qū)不再顯示，僅保留開放時間區(qū)，考慮到可用性研究中關于從左至右顯著性依次減弱的觀點，這一優(yōu)化可以看作是設計人員對桌面用戶與移動用戶在網站使用差異上的考慮。在一些非圖書館網站的優(yōu)化中，某些信息在PC 屏幕上顯示，但在移動屏幕上被隱藏；而另一些信息則相反，在移動屏幕上顯示，但在PC 屏幕上被隱藏，這也體現(xiàn)了設計人員對用戶在兩種環(huán)境中需求差異的分析。

與傳統(tǒng)電腦相比，用戶與移動設備的交互要困難得多。有人對比了正常用戶與肢殘用戶的輸入錯誤，發(fā)現(xiàn)正常用戶在使用移動設備時出現(xiàn)的錯誤與肢殘用戶在使用電腦時出現(xiàn)的錯誤不相上下[12]，盡管近年來移動設備的性能有較大改善，但交互困難的事實基本上沒有改變。在這種情況下，從傳統(tǒng)電腦到移動設備，宜將對用戶重要的信息和功能放在移動設備上容易獲得和操作的地方，而不必完全遵從從左至右、從上至下的順序調適，各元素之間的位置完全可以根據需要重新布局。在Richland 圖書館主頁頂部，自左至右分別排列著“我的賬戶”(My Account)與“我如何…”(How Do I…)兩個按鈕，但在小屏幕上，后者位于前者之上，而不是習慣性地將右側項目居于左側項目之下。隨著賓夕法尼亞州立大學圖書館主頁的檢索區(qū)在小屏幕上被下移，為了方便讀者使用，圖書館在頁面頂部設置了一個“搜索”按鈕，點擊之后頁面快速移動到檢索區(qū)，并默認點選搜索框，讀者可直接輸入檢索詞。

3.3 對交互過程進行優(yōu)化

傳統(tǒng)電腦與移動設備在交互上存在著差異，一個關鍵的不同是移動設備沒有鼠標，主要通過手指觸摸或感應筆點選的方式操作。因此，網站中借助鼠標實現(xiàn)的功能在應用到移動設備上時，應以移動設備可執(zhí)行的方式調整。鼠標與觸摸的一個不同就是鼠標有停留功能，一些自適應系統(tǒng)將PC 屏幕上的鼠標停留功能變成了移動屏幕上的點擊功能，并相應調整了頁面順序。Notre Dame Hesburgh 大學圖書館將網站上提供鼠標停留功能的主導航在移動屏幕上凝縮成一個類似檢索框的下拉菜單，稱為“選擇頁面”(Select a page)，點擊該框，網站以對話框的方式顯示一、二級欄目，GrandValley 大學圖書館則采用了點擊導航后重新打開一個頁面的方式容納鼠標停留功能所顯示的信息。

雖然某些任務在傳統(tǒng)電腦與移動設備上均能執(zhí)行，但由于屏幕大小、設備性能等的差異，在從Web 應用過渡到移動應用時，一些網站也進行了適應性調整，使用戶更易于操作。Alvin Sherman 圖書館主頁有1 個組合了5 個數(shù)據來源的檢索區(qū)域(圖書館目錄、論文、雜志、教輔、Google 學術搜索)，使用統(tǒng)一的檢索框和檢索按鈕，但在移動屏幕上，1 個檢索變成了5 個檢索，分別提供檢索框和檢索按鈕。美國數(shù)字公共圖書館檢索結果的細化區(qū)和結果區(qū)在PC 屏幕上位于一個頁面，讀者在細化區(qū)的篩選條件設定可同步在結果區(qū)反映，而在移動屏幕上，細化區(qū)變成了按鈕，讀者點擊按鈕后進入篩選條件頁，設定條件后再重新進入結果頁。

3.4 降低系統(tǒng)性能

為了在電腦上達到良好的運行和顯示效果，與純粹的移動網站相比，自適應網站擁有較大的容量，用戶通過移動設備訪問，雖然可以隱藏一些內容，但一般來講幾乎所有的內容和文件都要被下載到移動設備中，導致下載速度變慢，影響系統(tǒng)運行。網絡性能研究專家Guy Podjarny 曾對347 個自適應網站進行了測試，發(fā)現(xiàn)既使在最小的屏幕設備上，86%的網站都沒有采取降低性能的措施，意味著低性能終端需要與電腦執(zhí)行同樣的任務[13]。同時，服務器對來自移動網絡請求的接受和執(zhí)行滯后期要大于來自有線網絡的請求，這也影響了頁面在移動設備上的下載[14]。因此，當網站需要在移動設備上運行時，系統(tǒng)要采取性能降低策略，以減小移動網絡和移動設備的負擔。Jeremy Keith 提出了“條件內容下載”(Conditional Content Loading)的措施[15]，即根據設備不同提供相應的內容版本，一個稱為Filamentgroup的組織就利用JavaScript 來決定對于特定設備發(fā)送何種版本的圖像，但是該解決方案會增加建設者的壓力，有向開發(fā)獨立的移動平臺回歸的傾向。也有人提出了調適圖像(Adaptive Image)的措施，即根據設備類型和屏幕大小，系統(tǒng)自行創(chuàng)建和提供壓縮后的圖片[16]。除上述思路外，筆者認為，還可以采用基于終端的性能調整策略，即由瀏覽器對網站內容進行過濾和有選擇的壓縮，國內搜狗瀏覽器即具備一定的篩選功能。不過，不論采取何種措施，都要允許用戶能請求原始內容。

3.5 實現(xiàn)應用功能創(chuàng)新

當前自適應設計的基本思路是力圖使用戶借助移動設備達到通過電腦使用網站和程序的效果，但移動設備具有許多新型技術，如加速器、位置探測、重力感應、觸摸技術、照/攝像功能等，系統(tǒng)建設者要考慮如何利用這些技術提供創(chuàng)新功能。以位置探測為例，當用戶利用移動設備在館內查找OPAC 時，在保證相關度的情況下，對結果的排序可以優(yōu)先考慮基于位置，即將與讀者距離最近的書目顯示給讀者，并通過虛擬地圖或增強現(xiàn)實技術給讀者提供方位指引，目前臺灣已有圖書館嘗試這一技術。在多數(shù)圖書館網站上都有圖書推薦區(qū)，可以考慮在移動設備上顯示一些與用戶所在位置相關的圖書資料，以提高圖書館服務的情境相關性。

4 結論

隨著信息終端類型的增多和屏幕的多樣化，為每一種設備和屏幕開發(fā)專用平臺的壓力隨之增加，自適應正是為了解決這一問題提出的設計思路，它可以使網站和程序根據設備和屏幕尺寸的變化自我調適。就圖書館而言，它可以減輕圖書館開發(fā)獨立移動網站和客戶端的壓力；就使用者而言，它能使讀者在多種條件下獲得圖書館服務平臺提供的大部分信息和功能，并擁有良好的使用體驗。自適應的關鍵在于系統(tǒng)如何自我調適，即優(yōu)化，文章提出了5 種策略，分別是逐步簡潔、重點凸顯、交互優(yōu)化、性能降低與功能創(chuàng)新。

自適應系統(tǒng)的成功實施還需要處理好與圖書館已有業(yè)務系統(tǒng)的關系，實現(xiàn)協(xié)調發(fā)展。

一是處理好自適應平臺和桌面平臺的關系。對于自適應平臺，系統(tǒng)雖然能夠進行自我調適，但卻無法使用戶返回到原有平臺。對于部分用戶來講，可預期要比可操作更為重要。在信息系統(tǒng)設計中，遵循用戶的思維模式即是指系統(tǒng)設計要符合用戶的思維、操作習慣和對系統(tǒng)的期待。如果用戶對于固定系統(tǒng)比較熟悉，他們清晰地知曉自己如何找到需要的信息，如何完成任務，系統(tǒng)就有必要在自適應平臺中提供返回原有平臺的切換功能，因為界面和功能毫無預期地突然改變會造成一些用戶使用上的困難。

二是處理好自適應平臺與移動平臺的關系。應用自適應系統(tǒng)的一個很自然的問題就是圖書館有無必要再開發(fā)獨立的移動網站和客戶端。一般來講，如果圖書館的經費有限，可以考慮只建設一個自適應網站，但是如果圖書館有條件建立獨立的移動系統(tǒng)，可以保留移動網站和客戶端，只是在后一種情況下，需要處理好自適應平臺和移動平臺之間的分工?？梢钥紤]設計更為簡潔的移動平臺，使移動平臺專注于移動應用中的核心任務。從賓夕法尼亞州立大學圖書館的移動網站可以看出，由于Web 網站能夠自適應，在移動網站上提供了非常專注的功能，包括檢索、賬戶管理與移動適配數(shù)據庫等移動用戶頻繁使用的功能。

三是處理好與應用軟件和第三方平臺的關系。如上所述，對于網站中調用的應用程序和第三方平臺，圖書館由于缺乏有效控制而無法實現(xiàn)自適應。在這種情況下，圖書館就要協(xié)調好與應用軟件和第三方平臺的關系，通過宣傳自適應的價值，爭取供應商支持，以開放接口或對系統(tǒng)進行技術改造等途徑，整體提升圖書館服務平臺的自適應水平。

[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] 王芬林，吳曉. 數(shù)字圖書館發(fā)展研究[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.