響應式WEB交互設計淺析

劉耀陽

摘 要：隨著移動互聯網的大行其道，為多尺寸瀏覽器自動配適而生的響應式交互設計逐漸受到重視。按照目前移動互聯網的發展趨勢，可以預見在不遠的將來，移動互聯網端的數據流量將超越PC端數據流量。響應式web設計（Responsive Web design）可以為不同設備環境（系統平臺、屏幕尺寸、屏幕方向等）用戶提供更加舒適友好的操作界面及用戶體驗。隨著智能大屏幕移動設備的普及，響應式交互設計的應用與發展可以說是大勢所趨。該文對響應式交互設計的概念、優勢、實現方式進行了介紹與總結。

關鍵詞：響應式 交互設計 WEB設計

中圖分類號：TP393 文獻標識碼：A 文章編號：1672-3791（2014）12（a）-0016-02

目前移動互聯網在人們網絡生活中地位越來越重要，為配適多尺寸移動端瀏覽器而生的響應式交互設計也越來越受網站開發者喜愛與看重。那么什么是響應式交互設計，響應式交互設計又如何實現呢？

1 什么是響應式交互設計

1.1 響應式WEB交互設計概念

目前，隨著信息技術的發展，以及人們物資生活水平的提高，瀏覽網頁獲取資訊的方式已不僅僅局限與使用PC端個人電腦瀏覽器來進行。很多時候我們開始使用移動設備，如智能手機、平板電腦等設備進行資訊的獲取。但我們很快發現，移動設備更新換代頻率越來越快，要跟上新產品發布的速度，并且兼容所有設備是非常困難的。對于大多數網站來說，也沒有資金和精力為每一個新分辨率的新移動設備產品設計制作一套配適的移動端網站版本。對于用戶來說，用戶只關心信息獲取的體驗，而不會去考慮開發的繁瑣程度。那么為了迎合用戶需求，保持用戶體驗，同時兼顧網站開發的資金、技術、時間以及人力成本，提升擴展性及兼容性，響應式交互設計應運而生。

1.2 響應式交互設計優勢與缺點

在目前這樣一個時間節點上，許多網站還沒有開始對原有網站進行響應式交互的改版或升級。原因有很多種，其中，網站主沒有意識到響應式交互的優勢與必要性是很主要一點。

響應式交互有以下優勢：首先，靈活性高，可從容應對多種屏幕分辨率下的用戶體驗。現在手機、平板電腦制造廠商眾多，尺寸及分辨率也標準不一。使用響應式WEB交互設計后，無論用戶使用蘋果、三星、HTC還是其他任何品牌產品，只要是智能機，都能達到完美的匹配效果。其次，擴展性高，頁面內容豐富多變。響應式交互可以根據不同的設備顯示屏幕大小自動配適頁面內容。如有需要還可以顯示或隱藏特定內容及功能。兼容多平臺，用戶體驗一致。目前主流的移動設備系統平臺中，IOS平臺和Android平臺在智能設備用戶中占有率最高，但兩種系統平臺開發理念及編寫方式不一樣。響應式交互設計支持多平臺，可以解決用戶因為設備系統不一致而導致的用戶體驗參差不齊的問題，使用戶無論使用什么設備都能獲得統一的使用感受。最后，適應性高，完美兼容新設備。響應式WEB交互設計多采用彈性布局方式，這種方式會根據設備屏幕寬高比自動配適內容，因此采用了響應式交互的網站即便在全新的屏幕尺寸下也能使頁面內容完美展示。

說完了響應式WEB交互設計的優勢，那么這種設計有沒有劣勢呢？答案是有的，其劣勢如下：代碼編寫需要很強兼容性，需要面對多種分辨率進行優化調試，代碼偏長，會出現無用的隱藏元素，略微影響加載速度；設計復雜，代碼編寫需要嚴謹考慮多種可變因素以及承擔設計紕漏造成的影響；工作量加大，影響開發效率。折中了設計方案，更多考慮在多設備條件下優化頁面，單獨頁面或許達不到最佳效果。可以看出，在目前網絡環境與技術背景的支持下，響應式交互設計的劣勢與優勢相比，可以說是瑕不掩瑜，對響應式交互設計的應用與發展并不會造成太大困擾。

2 響應式WEB交互常用技術

響應式WEB交互設計的目的是一個網站能夠兼容多個終端，頁面能夠自動配適顯示設備。具體的實現方式由多方面組成，包括彈性布局、CSS、網站框架等。下面我們來介紹幾個常用的響應式頁面常用技術。

2.1 Media Query

Media Query用于根據不同分辨率尺寸調整相應樣式。現在市面上基于IOS系統平臺和Android系統平臺的移動設備占大多數，同時他們的自帶瀏覽器內核都為webkit內核，所以我們可以使用viewport屬性和Media Query技術實現網站的響應式交互。這種方法能夠非常方便的實現基準字號font-size在不同分辨率下顯示完全，不會出現閱讀困難。

2.2 Fluid grid

Fluid grid即流體布局。其作用在于將網頁上一些元素的框格由固定模式調整為相對模式（如百分百或比例等）。使用Fluid grid能夠使網頁根據屏幕的寬度自動調整頁面寬度，進而保證頁面內容顯示完整，原有功能繼續可用。

2.3 Flex box

Flex box是css規則總新添加的一種模型屬性。它類似于APP結構，展示方式是固定頭部與底部，中間部分內容的高度實現自動適應。Flex box的出現打破了常常使用的原有的浮動布局方式，實現了垂直等高、水平均分、按比例劃分。如果希望目前的網站能夠以正常的網頁方式編寫，并且以WabApp的外觀顯示方式出現在用戶面前，那么Flex box是非常適合的一種方式。

3 響應式交互建設流程

3.1 確定內容架構

根據網站定位以及用戶分析，確定網站整體風格、展示結構，如頁面層級、頁面內容等，對網站進行整體規劃，厘清脈絡關系。

3.2 設計移動框架

移動優先理念是基于對移動設備與PC設備之間關系的深刻理解而產生的，移動設備許多特性讓設計更全面及強大。比如移動設備上的語音識別、基于地理位置定位、手勢操作等，人們發現移動設備交互比PC擁有更多可能性。從移動設備開始讓設計師更早思考如何發揮這些特性及優勢。endprint

3.3 設計響應式框架

我們需要基于移動端框架拓展開發出PC端及平板電腦端框架。首先確定響應模式，那么從手機端顯示到平板電腦顯示再到PC端顯示，整個網站布局如何變化，內容如何編排，優先級如何調整等都是需要設計的部分。同時我們需要對規則繼續進行細化，即為定制流體柵格系統（屏幕占比）。

3.4 模塊設計

在確定了響應式框架的頁面結構以及相應模式后，我們要開始進行模塊設計的工作。在產品設計時我們采用了移動優先的理念，但在整個產品的細節設計以及開發過程中，是否采用移動優先原則應根據實際情況具體分析。在這里，PC優先可以充分暴露業務復雜度，而且項目的設計、開發和測試在PC環境下擁有更成熟的工具和流程，因此，在必要的時候采用PC優先理念也是非常合理的。同時我們應注意的是，在開發模塊的時候，必須時刻提醒自己：這個模塊在當前設備上運行無誤，在其他設備下是否會發生問題？

3.5 響應式模塊設計

PC端模塊完成后，接下來我們需要根據已設計好的PC端模塊拓展出移動設備模塊。這些模塊必須符合設備習慣，充分利用設備特性，為用戶體驗帶來便捷與舒適。

3.6 測試優化

這一步需要在真實設備下測試網站效果，并對暴露出的問題進行優化。測試優化內容包括：服務器承載測試及優化，軟件性能測試及優化，用戶實際體驗測試及優化。

4 響應式設計優化

該文之前提到過，響應式設計也存在一些自身的問題和弊端，可能會影響到用戶體驗。那么這些問題和弊端就必須進行進一步的優化處理。

4.1 減少HTTP請求次數

在目前的網絡環境下，移動端用戶的數據使用流量是有限制的，可以說這是相較PC端的一個劣勢。那么為了節省用戶流量，我們可以使用Ajax異步請求來優化頁面內部的一些操作。使用服務器端及前端緩存等機制保存頁面內短期不會變化的一些數據，這樣可以在一定程度上降低用戶的數據請求量。

4.2 壓縮Javascript和CSS

將頁面內Javascript和CSS進行優化精簡之后，可以有效地降低頁面大小。

4.3 減輕Javascript庫負載

目前很多響應式交互設計使用jQuery框架，事實上很多頁面或許并不需要如jQuery一般強大的交互框架，我們可以用其他輕量級框架進行建設。目前針對移動端狀態，有jQuery Mobile、YUI、XUI等可供選擇的框架。

4.4 頁面實現逐次加載

移動終端設備由于屏幕大小有限，承載的信息量也有限，我們沒有必要將全部PC端頁面總內容一次性加載完成。我們可以使用逐次加載模式，當用戶有繼續觀看的意愿，并對屏幕做出相應手勢時，再繼續進行加載新聞或圖片。

4.5 使用CND進行頁面資源管理

CDN是英文Content Delivery Network簡寫，意即內容分發網絡。它的基本思路是將互聯網中有可能影響數據傳輸速度和穩定性的環節避開，保證內容傳輸的穩定性。

4.6 優化圖片顯示

其核心思想是實現用戶設備分辨率的自動區分，根據不同分辨率提供不同大小的圖片以供用戶加載。這樣既能使不同終端用戶都獲得良好的用戶體驗，同時不會浪費用戶數據流量和加載速度。

5 優秀的響應式WEB框架

5.1 Gumby Framework

Gumby Framework是一個靈活的響應式框架，它建立在SASS基礎之上。SASS是一款CSS預處理器，它功能強大，提供很多新的工具來支持使用者快速自主開發Gumby框架。Gumby的產品更新緊跟最新的行業技術標準和規范，同時支持chrome、firefox、Opera、IE8-10等多種主流瀏覽器。如果開發者剛剛開始接觸響應式交互網站，那么使用Gumby是非常適合的。它自帶PSD UI工具包，能夠非常方便地幫助制作者開發出一個漂亮的響應式交互布局網站，且不需要太多專業性代碼。

5.2 Foundation

Foundation由位于加州坎貝爾的產品設計公司ZURB設計開發，是目前非常現金的響應式WEB設計框架。它擁有很多布局模板、CSS樣式表以及自己開發的優秀JavaScript插件。同時，Foundation強大之處還在于其將SASS有效整合，開發者可以使用Mixins概念簡化開發行為，使組件的使用更加簡單便捷。

5.3 Semantic

Semantic優勢在于提供一個共享UI以供開發人員和設計師共同協作，共同開發，提升可控范圍。Semantic使用自然語言習慣來輔助開發，讓開發過程更便捷，同時，Semantic還可以實時進行debug輸出，提示代碼作用。

5.4 PureCSS

PureCSS是一款輕量級響應式框架，解壓縮后只有5.7KB。它基于Normalize.css 框架構建，沒有使用任何JavaScript，只使用了HTML和CSS技術。該框架采用模塊化結構，每一個模塊樣式都可以單獨使用。

5.5 TukTuk

TukTuk是一個高效快速的響應式CSS3框架，以輕量級的設計和面向對象的CSS為優勢，非常容易擴展。

5.6 Kube

Kube是一款靈活的CSS框架，包括網格、按鈕、表、排版樣式等實用功能，可對forms，grids，buttons，tables，typography等屬性設置樣式，同時提供LESS文件，給開發人員帶來了極大的靈活性。

6 結語

響應式交互設計需要綜合考慮，統籌部署網站的功能性與美觀性，不再是只考慮一種設備使用情況的傳統網站搭建模式。這就給網站設計開發帶來了新的挑戰和機遇。我們稱響應式交互為“設計”而不是“技術”，是因為響應式交互講究設計先行，需要提前設計網站的方方面面，而不是依樣畫葫蘆的把已有的前端變成響應式網站。對于頁面制作者，應將單一頁面設計思維轉換成響應式交互設計思維。每一個網站從設計之始，就要依照響應式交互的標準進行頁面設計與規劃。這就需要我們在設計開發過程中不斷和設計、前端、后臺等人員有效溝通，定制合理的響應策略，才能搭建出合理高效的適應當前及將來網絡環境的響應式交互網站。

參考文獻

[1] Graye，趙子龍譯.交互設計報告--響應式交互與扁平化設計[DB/OL].http：//www.zcool.com.cn/article/ZNTA5MDA=.html，2013。

[2] 阿里UED.交互設計：響應式Web設計[DB/OL].http：//www.yixieshi.com/ucd/11828.html，2012。

[3] 夏夢竹.十大最佳響應式Web框架設計.http：//tieba.baidu.com/p/3067516972，2014.endprint