本站小編為你精心準備了響應式交互設計論文參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

1響應式WEB交互常用技術

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

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

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

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

2響應式交互建設流程

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

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

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

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

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

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

3響應式設計優化

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

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

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

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

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

3.5使用CND進行頁面資源管理CDN是英文ContentDeliveryNetwork簡寫,意即內容分發網絡。它的基本思路是將互聯網中有可能影響數據傳輸速度和穩定性的環節避開,保證內容傳輸的穩定性。

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

4優秀的響應式WEB框架

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

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

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

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

4.5TukTukTukTuk是一個高效快速的響應式CSS3框架,以輕量級的設計和面向對象的CSS為優勢,非常容易擴展。5.6KubeKube是一款靈活的CSS框架,包括網格、按鈕、表、排版樣式等實用功能,可對forms,grids,buttons,tables,typography等屬性設置樣式,同時提供LESS文件,給開發人員帶來了極大的靈活性。

5結語

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

作者：劉耀陽單位：遼寧金融職業學院