新媒體環境下政務網站的重構

張　雷　　熊　賁　　李佐斌(.長江水利委員會 宣傳與出版中心 ，湖北 武漢　43000；.長江水利委員會 網絡與信息中心，湖北 武漢　43000)

?

運行與管理

新媒體環境下政務網站的重構

張雷1熊賁2李佐斌2(1.長江水利委員會 宣傳與出版中心 ，湖北 武漢430010；2.長江水利委員會 網絡與信息中心，湖北 武漢430010)

摘要：為了適應政務網站移動互聯網Web設計需求，以長江水利網為例，描述了該政務網站現有的架構特點以及重構的策略，提出了響應式Web設計的觀點，為實現"一源多屏"Web設計提供了網站重構的方案。可為移動互聯網設計和重構提供技術框架和思路。

關鍵詞：響應式；HTML5; CSS3；Web 設計; 政務網站

1問題的提出

新媒體是新技術支撐體系下出現的媒體形態，如數字雜志、數字報紙、數字廣播、手機微信、移動電視、桌面視窗、觸摸媒體等。新媒體首先必須有革新，包括技術革新、形式革新和理念革新。筆者認為理念革新更為重要，因為它是新媒體定義的核心內容，具有“數字技術、互聯網技術、移動通信技術”的技術維度和“雙向傳播、用戶創造內容”的傳播維度兩個指標。

我國政務網站都具有普遍共性，本文試以長江水利委員會(以下簡稱長江委)政務網站為例，針對這類網站存在的問題，在理念革新的前提下，通過HTML5+CSS3技術手段，使用響應式網頁設計重構政務網站，努力從架構設計上最大程度地解決其存在的問題。

2政務網站架構現狀

2.1　網站主體架構

長江水利網作為長江委的主體網站，以快速反映長江流域水事新聞、委內日常行政管理工作為己任。網站內容由新聞中心、政務之窗、在線服務、互動平臺組成，技術架構以Linux平臺下Nginx提供Web服務，網頁設計采用內容與樣式分離的方式(DIV+CSS)的方式，系統已安全運行多年。TRS WCM提供內容管理平臺，以提供信息服務為主，部分互動功能還有待完善，沒有真正意義上移動互聯網應用，不能滿足新媒體應用的要求。然而通過改造可以很容易地過度到高性能的HTML5，與具有媒體感知能力的CSS3(Cascading StyleSheet)巧妙結合，重構具有媒體感知能力的水利政務網站。

2.2　主站嵌套網站

2006年12月長江委為提高公共服務能力和事權管理效能，構建行為規范、運轉協調、公開透明、廉潔高效的流域水行政管理體制，按照中辦、國辦以及水利部《關于進一步推行政務公開的意見》的要求和部署，開通了“長江委政務公開網”。網站開通以來一直使用IP地址加端口的方式對外提供服務，不便于基于域名管理的搜索引擎收錄，致使新聞信息大多引用長江水利網的稿件、界面風格樣式多年未更新，內容樣式混合不清等。為滿足政務網站測評的要求，將網上辦事功能及公開目錄以嵌套的方式在長江水利網上呈現。此外，采用嵌套方式的還有長江委水文局的實時水雨情信息等。此類嵌套網頁外鏈后會影響用戶體驗，降低對長江水利網的綜合評價。

2.3　微信公眾號鏈接

2014年7月，長江水利網開通了微信公眾號“美麗長江”。堅持每日一期圖文并茂的微信推送，以關注長江的生態與建設，為公眾提供更生動更貼近更精彩的長江新聞資訊，致力于打造一個互動性更強的交流溝通平臺。目前粉絲數量超過1 000。

同時，在該網策劃的多期專題中都對微信公眾號進行了宣傳。在2014年舉辦的“尋找最美一線職工”網上投票活動中，實現了桌面與移動互動投票，職工反響很好。美中不足的是微信與該網網頁的鏈接效果不理想，需要手機用戶不斷拖拽網頁或者縮放大小，才能正常顯示。為此，本文致力于研究響應式網頁設計重構政務網站的建設。

3政務網站的重構策略

3.1　門戶網站與部門網站職能劃分

首先，規范各類政府網站的界定與分工，分別建設以信息服務和以網上辦事為主的政府網站；其次，信息服務類網站應盡可能由較高級別政府部門建設，并整合所有下屬機關和下級政府機關的信息；最后，網上辦事類網站由具有一定行政管理職能或相關專業背景的部門或單位建設[1-2]。

按照國辦發〔2015〕15號文的要求，關閉長江委機關所有的部門網站，所有稿件統一由長江委宣傳出版中心負責內容管理。通過一系列專業的采編審流程，強化長江水利網的權威、規范、有序的信息服務，發揮網絡宣傳陣地優勢，為治江事業營造更好的輿論氛圍。網上辦事類依托原政務公開網有關行政許可及網上辦事功能板塊，歸并原來重復建設的信息服務板塊，機關各職能部門可以集中精力為政務公開提供更好的在線服務。

3.2　移動優先重構政務網站

根據CNNIC第36次互聯網絡發展狀況調查結果，截止2015年6月，中國手機網民的總規模達5.94億，較2014年12月增加了3 679萬人，其中使用手機上網的人群占比由 2014年12月的85.8%提升至88.9%，農村地區新增網民中，使用手機上網的達69.2%，而且在未來數年，手機上網依然是帶動農村地區網民增長的主要動力。通過臺式電腦、筆記本電腦和平板電腦接入互聯網的比例均有下降。隨著手機終端大屏化及其應用體驗的不斷提升，手機作為網民主要上網終端的趨勢進一步明顯[3]。

3.3　一站式融合重構網站數據庫

對政府網站的相關評估調查表明，我國政府網站中有48%尚未提供搜索服務或者搜索功能不可用，47%網站的站內搜索只能夠搜到有關工作會議的相關動態信息，只有5%的網站能夠在搜索結果的前幾頁查找到相關辦事服務資源[4-5]。第一次全國政府網站普查發現，一些網站便捷性、實用性亟待提升。部分網站沒有提供規范清晰的服務流程，缺少可供下載的必要表格和文件，不能提供實用有效的申報、查詢等辦事服務；14.7%的網站互動功能缺失，政府與公眾交流缺少有效途徑；還有一些網站結構混亂、頁面繁多、不便使用，給公眾查找政府信息、網上辦事帶來較大困難[6]。

上述問題與現有政務網站架構存在的問題有關，從頭梳理需要很長的周期和大量的投入，而依托先進的政務網站管理平臺整合遷移相關數據庫是解決問題的途徑之一，也可分步實施將嵌入的功能站點相關內容在現有內容管理平臺上作標題鏈接引用，這樣在本站標題檢索中可以很容易查詢到相關內容；為便于必要表格和文件下載，在保證及時更新的前提下，轉載原文到主站。

利用HTML5跨系統跨平臺的特性，在被引用嵌套網頁增加主站統一規范的CSS3樣式表，為響應式設計打下基礎。這類方案投入少、見效快，有的僅需負責前端開發的工程師配合即可，如果將來系統遷移，僅對樣式表這部分代碼作少量修改還可以重復使用。政務服務功能分類檢索項目內容可控，基本上可快速融合具有引導功能的政務服務信息到主站數據庫，便于搜索引擎收錄以及本站集中檢索。

4響應式設計技術

響應式網頁設計最先由伊桑·馬科特(Ethan Marcotte)提出。他將3種已有的開發技巧(彈性網格布局、彈性圖片、媒體和媒體查詢)整合起來，并命名為響應式網頁設計。該術語還有一堆表意相同的其他名稱，如流式設計、彈性布局、塑料布局、流體設計、自適應布局、跨設備設計以及彈性設計[5]。

響應式網頁設計(后節描述概念)要求優先考慮手機移動網頁，這種“移動優先”思想很適宜采納最簡潔、最有效和最具語義的代碼。在響應式Web布局設計時，媒體查詢順序為從移動端向上設計，優先建立移動設備用戶體驗，然后針對更大屏幕顯示器進行調整，以避免移動終端對媒體查詢的支持不完善，即在樣式表的開頭定義基本樣式，然后使用媒體查詢，從低分辨率到高分辨率來重寫樣式，以覆蓋前面定義的樣式。

本文描述的響應式設計是基于HTML5豐富語義的網頁標簽組織網頁，應用CSS3媒體查詢功能配合一組不同分辨率的樣式表，使網頁感知不同媒體(判斷是移動終端還是桌面終端)的分辨率，作出相應合理的布局調整。

何軍：是的，尤其是阿里旗下的菜鳥一直在這方面進行運作，包括今年的參股香港樞紐建設等等。深層次的原因我不愿意進行過度的解讀，但是我想說的是阿里很明白物流對于阿里未來發展的意義，尤其是大物流概念，包括同城配送、外賣市場、供應鏈等。包括阿里打造國家智能物流骨干網絡的提法，都表示了阿里對物流領域的高度看中，以及深度參與的決心。阿里的很多并購邏輯都是由此而展開。

4.1　HTML5

HTML5即萬維網的核心語言，是標準通用標記語言下的一個應用超文本標記語言(HTML)的第5次重大修改。2014年10月29日，該標準規范終于制定完成。

在創建可以通過W3C標準驗證的頁面時，HTML5強調簡化標簽，僅鏈接必須的圖片文件。智能手機用戶也只能使用有限的帶寬訪問頁面。而響應式設計的一個主要目標就是，網站不僅要對用戶有限的視窗作出響應，還要以最快的速度加載網頁。

較之上一個版本HTML(HTML 4.0.1)，HTML5 進行了很大的改進，提供了許多新特性。HTML5含義豐富的新語義更利于搜索引擎收錄，也可以在表單提交等基本網頁交互場景中對用戶做出反饋，一般不再需要復雜的JavaScript表單處理流程，可為響應式設計創建更加簡潔和快速的代碼。

4.2　CSS3

CSS即層疊樣式表，在網頁制作時采用層疊樣式表技術可有效實現對頁面的布局、字體、顏色、背景和其他效果更加精確的控制。只要對相應代碼做一些簡單修改，就可以改變同一頁面的不同部分，或者頁數不同網頁的外觀和格式。CSS3是CSS技術的升級版本，其語言開發為模塊化。以前的規范作為一個模塊確實太龐大且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來，包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。

前端工程師可使用響應式前端開發框架，簡化開發過程，確保開發網站具有跨瀏覽器、一致性、響應式等特點。如果需要一種快速搭建響應式網站結構的方法，可以考慮響應式前端開發框架(如Columnal 這樣的CSS 網格系統)。筆者不建議使用該框架，熟練掌握CSS3語法，使用起來將更靈活自由。

4.3　至關重要的媒體查詢

如果沒有CSS3媒體查詢模塊，就不能針對設備特性(如視窗寬度)設置特定的CSS樣式。媒體查詢由媒體類型和一個或多個檢測媒體特性條件表達式組成，它是根據媒體類型、屏幕寬度、屏幕比例、設備方向(橫向或縱向)等各種功能特性來改變頁面布局。使用媒體查詢可以在不改變頁面內容的情況下，為特定輸出設備定制顯示效果。

媒體查詢表達式由設備類型和一個或多個檢測媒體特性的聲明構成，可以將其想象成對瀏覽器的提問。如果瀏覽器回答“是”，則應用樣式；如果回答“否”，則不應用樣式。相對于CSS2，媒體查詢可能要問更多問題。

5網站重構幾個關鍵點

5.1　依可訪問性選擇界面布局與元素

從用戶的角度入手，從社會心理學層面對政府網站的可訪問性進行研究探討。通過對30個國內重點省市政府網站以及20個較常見的國外國家級和市級政府網站的網站界面布局與元素的放置位置進行調研及統計分析，概括出在政府網站中采用最多的4種界面布局和常見的5種網站界面元素，及其在4種界面布局中可能的分布位置。通過偏好調研及分析，給出了最佳網站界面布局與界面元素放置位置組合方案(見圖1)，可為政府網站的優化設計提供參考[7]。

圖1　網站界面布局與界面元素放置位置組合方案

長江水利網現有布局表現為分類目錄不在首頁呈現，容易使用戶迷惑；搜索引擎位置不規范，不便于移動界面設計搜索引擎位置漂移，因此需要將“信息搜索框”提到上部較醒目的位置，將“分類目錄”移到左側比較醒目的位置。

5.2　從移動端網頁設計開始思考桌面設計

正如伊桑·馬科特等人所表述，真正的響應式設計方法不僅僅是根據視口大小改變網頁布局，相反，它要從整體上顛覆當前的設計網頁。以往先是對桌面電腦進行固定寬度設計，然后將其縮小并對小屏幕進行內容重排；現在首先應對小屏幕進行設計，然后逐步增強對大屏幕的設計和內容[8]。

此外，在設計網頁之初，要跟美工設計充分溝通，比如合理布局，有的研究者認為應該從適應最小分辨率設備開始設計線框模型，然后測試圖片素材。相比傳統的Web視覺設計過程，Web設計師必須時刻保持警惕，關注功能性組件的可用性、保證圖文信息在所有設備中都容易辨讀[8]。筆者認為，這樣反倒使美工困惑；若能避免一些不必要的設計，即可提高工作效率。比如上述“分類目錄”和搜索引擎位置不規范問題，在平面設計時給予注意即可。

5.3　拋棄固定寬度設計想法

僅使用媒體查詢來適應不同視口的固定寬度設計，只會從一組CSS 媒體查詢規則突變到另一組，兩者之間沒有任何平滑漸變。伊桑·馬科特采用的(流動布局、彈性圖片和媒體查詢)技術并不新穎，但基于一套完整統一的方法論，將這些理念進行應用則很有創造性。而且，這種網頁設計新方法在實際應用中可以做到：①使用百分比布局創建流動的彈性界面;②使用媒體查詢來限制元素的變動范圍。這兩者相組合即構成響應式設計的核心，可以創造出真正完美的設計。

固定寬度設計不僅是指傳統網頁設計中常用的以像素為單位的寬度設計，還包括字號，在寬度設計里應該換算成百分比，字號換算縮放。一個簡易可行的公式可將固定像素寬度或文字縮放轉換為對應的百分比寬度：目標元素寬度/上下文元素寬度=百分比寬度。例如，#header(目標元素)被包裹在#wrapper(上下文元素)中。因此，用#header 的寬度(940 像素)除以上下文元素(#wrapper)的寬度(960 像素)，結果是0.979 166 667。將小數點向右移動2位轉換為百分比值，就得到頭部的百分比寬度，即97.916 666 7%，在CSS樣式表里描述為width: 97.916 666 7%; /* 940 ÷ 960 */。

同樣地，目標元素尺寸/上下文元素尺寸=百分比尺寸,該公式也適用于將文字的像素單位轉換為相對單位。值得注意的是，現代瀏覽器的默認文字大都是16 像素(顯式聲明的除外)。例如，body的font-size是16px就是1em，則#logo原來的font-size的48px可改為3em; /* 48 ÷ 16 = 3*/。

6問題討論

(1) 政務網站重構不是簡單的新技術標準在網頁設計中的運用，而是理念上的革新。在革新層面上，響應式設計與“互聯網+政務服務”有著異曲同工的作用，政務網站服務公眾與響應網頁設計適應移動應用同樣重要，便于媒體查詢即便于移動應用，符合互聯網應用中新增網民的特征，適應社會發展趨勢，用技術手段打造更加親民的陽光政務。

(2) 漸進增強以恪守Web 標準的標簽為基礎，意味著它在所有瀏覽器中均可用。通過CSS 樣式和必要的JavaScript，為更先進的瀏覽器提供漸進式的增強體驗。標準瀏覽器如Chrome、Safari、Firefox 在渲染使用HTML5 和CSS3制作的網頁時，效果基本一致。目前，大多數智能手機使用的是和桌面版Safari、Chrome 一樣的Webkit 內核，所以其渲染效果滿足要求，唯有IE8以下的微軟瀏覽器不完全識別CSS3標準需要補丁應用。然而目前國內使用IE8的用戶僅有8%左右，它即將退出歷史舞臺。

7結語

對長江水利網采用響應式網頁設計技術重構網站進行了一些試驗性探索, 為政務網站的建設提供了一種新的解決方案。該方案具有一次開發就能適應所有移動終端的擴展性, 相對于以前專門為移動設備創建一套網站更為靈活、便捷,提升了網站在不同設備上內容的一致性和用戶體驗的流暢度。由于長江水利網站鏈接到的外部數據庫系統還沒實現響應式, 給移動端使用帶來不良體驗。但隨著響應式網頁設計技術應用越來越廣泛, 技術也在不斷成熟和完善, 未來將會有廣闊的應用和發展空間。

參考文獻：

[1]劉合翔. 政府網站用戶行為特征及其應用研究[D].北京：北京大學，2012.

[2]王婷. 精簡與整合中國政府網站的構想[J]. 現代交際，2011, (6):99.

[3]中國互聯網絡信息中心. 第36次中國互聯網絡發展狀況統計報告 [R]. 北京：中國互聯網絡信息中心，2015.

[4]中國軟件評測中心.2012 年中國政府網站績效評估結果[R].北京：中國軟件評測中心，2013.

[5](英)Ben Frain. 響應式Web設計：HTML5和CSS3實戰[M].北京：人民郵電出版社，2013.

[6]國務院辦公廳. 國務院辦公廳關于第一次全國政府網站普查情況的通報[R].北京：國務院辦公廳，2015.

[7]孫銘麗，吳鵬，張紅. 基于用戶心智模型的政府網站可訪問性研究[J]. 情報理論與實踐，2012, (10): 75-80.

[8]趙建保. 響應式Web設計關鍵技術及設計流程[J]. 電腦知識與技術，2014,(2):10.

(編輯：李慧)

作者簡介：張雷, 男，長江水利委員會宣傳與出版中心，館員.

收稿日期：2015-12-05

中圖法分類號：TP3

文獻標志碼：A

文章編號：1006-0081(2016)01-0035-04