響應(yīng)式交互設(shè)計(jì)論文范文
本站小編為你精心準(zhǔn)備了響應(yīng)式交互設(shè)計(jì)論文參考范文，愿這些范文能點(diǎn)燃您思維的火花，激發(fā)您的寫作靈感。歡迎深入閱讀并收藏。
響應(yīng)式WEB交互設(shè)計(jì)的目的是一個網(wǎng)站能夠兼容多個終端,頁面能夠自動配適顯示設(shè)備。具體的實(shí)現(xiàn)方式由多方面組成,包括彈性布局、CSS、網(wǎng)站框架等。下面我們來介紹幾個常用的響應(yīng)式頁面常用技術(shù)。
1.1MediaQueryMediaQuery用于根據(jù)不同分辨率尺寸調(diào)整相應(yīng)樣式?，F(xiàn)在市面上基于IOS系統(tǒng)平臺和Android系統(tǒng)平臺的移動設(shè)備占大多數(shù),同時他們的自帶瀏覽器內(nèi)核都為webkit內(nèi)核,所以我們可以使用viewport屬性和MediaQuery技術(shù)實(shí)現(xiàn)網(wǎng)站的響應(yīng)式交互。這種方法能夠非常方便的實(shí)現(xiàn)基準(zhǔn)字號font-size在不同分辨率下顯示完全,不會出現(xiàn)閱讀困難。
1.2FluidgridFluidgrid即流體布局。其作用在于將網(wǎng)頁上一些元素的框格由固定模式調(diào)整為相對模式(如百分百或比例等)。使用Fluidgrid能夠使網(wǎng)頁根據(jù)屏幕的寬度自動調(diào)整頁面寬度,進(jìn)而保證頁面內(nèi)容顯示完整,原有功能繼續(xù)可用。
1.3FlexboxFlexbox是css規(guī)則總新添加的一種模型屬性。它類似于APP結(jié)構(gòu),展示方式是固定頭部與底部,中間部分內(nèi)容的高度實(shí)現(xiàn)自動適應(yīng)。Flexbox的出現(xiàn)打破了常常使用的原有的浮動布局方式,實(shí)現(xiàn)了垂直等高、水平均分、按比例劃分。如果希望目前的網(wǎng)站能夠以正常的網(wǎng)頁方式編寫,并且以WabApp的外觀顯示方式出現(xiàn)在用戶面前,那么Flexbox是非常適合的一種方式。
2響應(yīng)式交互建設(shè)流程
2.1確定內(nèi)容架構(gòu)根據(jù)網(wǎng)站定位以及用戶分析,確定網(wǎng)站整體風(fēng)格、展示結(jié)構(gòu),如頁面層級、頁面內(nèi)容等,對網(wǎng)站進(jìn)行整體規(guī)劃,厘清脈絡(luò)關(guān)系。
2.2設(shè)計(jì)移動框架移動優(yōu)先理念是基于對移動設(shè)備與PC設(shè)備之間關(guān)系的深刻理解而產(chǎn)生的,移動設(shè)備許多特性讓設(shè)計(jì)更全面及強(qiáng)大。比如移動設(shè)備上的語音識別、基于地理位置定位、手勢操作等,人們發(fā)現(xiàn)移動設(shè)備交互比PC擁有更多可能性。從移動設(shè)備開始讓設(shè)計(jì)師更早思考如何發(fā)揮這些特性及優(yōu)勢。
2.3設(shè)計(jì)響應(yīng)式框架我們需要基于移動端框架拓展開發(fā)出PC端及平板電腦端框架。首先確定響應(yīng)模式,那么從手機(jī)端顯示到平板電腦顯示再到PC端顯示,整個網(wǎng)站布局如何變化,內(nèi)容如何編排,優(yōu)先級如何調(diào)整等都是需要設(shè)計(jì)的部分。同時我們需要對規(guī)則繼續(xù)進(jìn)行細(xì)化，即為定制流體柵格系統(tǒng)(屏幕占比)。
2.4模塊設(shè)計(jì)在確定了響應(yīng)式框架的頁面結(jié)構(gòu)以及相應(yīng)模式后,我們要開始進(jìn)行模塊設(shè)計(jì)的工作。在產(chǎn)品設(shè)計(jì)時我們采用了移動優(yōu)先的理念,但在整個產(chǎn)品的細(xì)節(jié)設(shè)計(jì)以及開發(fā)過程中,是否采用移動優(yōu)先原則應(yīng)根據(jù)實(shí)際情況具體分析。在這里,PC優(yōu)先可以充分暴露業(yè)務(wù)復(fù)雜度,而且項(xiàng)目的設(shè)計(jì)、開發(fā)和測試在PC環(huán)境下?lián)碛懈墒斓墓ぞ吆土鞒?因此,在必要的時候采用PC優(yōu)先理念也是非常合理的。同時我們應(yīng)注意的是,在開發(fā)模塊的時候,必須時刻提醒自己:這個模塊在當(dāng)前設(shè)備上運(yùn)行無誤,在其他設(shè)備下是否會發(fā)生問題？
2.5響應(yīng)式模塊設(shè)計(jì)PC端模塊完成后,接下來我們需要根據(jù)已設(shè)計(jì)好的PC端模塊拓展出移動設(shè)備模塊。這些模塊必須符合設(shè)備習(xí)慣,充分利用設(shè)備特性,為用戶體驗(yàn)帶來便捷與舒適。
2.6測試優(yōu)化這一步需要在真實(shí)設(shè)備下測試網(wǎng)站效果,并對暴露出的問題進(jìn)行優(yōu)化。測試優(yōu)化內(nèi)容包括:服務(wù)器承載測試及優(yōu)化,軟件性能測試及優(yōu)化,用戶實(shí)際體驗(yàn)測試及優(yōu)化。
3響應(yīng)式設(shè)計(jì)優(yōu)化
該文之前提到過,響應(yīng)式設(shè)計(jì)也存在一些自身的問題和弊端,可能會影響到用戶體驗(yàn)。那么這些問題和弊端就必須進(jìn)行進(jìn)一步的優(yōu)化處理。
3.1減少HTTP請求次數(shù)在目前的網(wǎng)絡(luò)環(huán)境下,移動端用戶的數(shù)據(jù)使用流量是有限制的,可以說這是相較PC端的一個劣勢。那么為了節(jié)省用戶流量,我們可以使用Ajax異步請求來優(yōu)化頁面內(nèi)部的一些操作。使用服務(wù)器端及前端緩存等機(jī)制保存頁面內(nèi)短期不會變化的一些數(shù)據(jù)，這樣可以在一定程度上降低用戶的數(shù)據(jù)請求量。
3.2壓縮Javascript和CSS將頁面內(nèi)Javascript和CSS進(jìn)行優(yōu)化精簡之后,可以有效地降低頁面大小。
3.3減輕Javascript庫負(fù)載目前很多響應(yīng)式交互設(shè)計(jì)使用jQuery框架,事實(shí)上很多頁面或許并不需要如jQuery一般強(qiáng)大的交互框架,我們可以用其他輕量級框架進(jìn)行建設(shè)。目前針對移動端狀態(tài),有jQueryMobile、YUI、XUI等可供選擇的框架。
3.4頁面實(shí)現(xiàn)逐次加載移動終端設(shè)備由于屏幕大小有限,承載的信息量也有限,我們沒有必要將全部PC端頁面總內(nèi)容一次性加載完成。我們可以使用逐次加載模式,當(dāng)用戶有繼續(xù)觀看的意愿,并對屏幕做出相應(yīng)手勢時,再繼續(xù)進(jìn)行加載新聞或圖片。
3.5使用CND進(jìn)行頁面資源管理CDN是英文ContentDeliveryNetwork簡寫,意即內(nèi)容分發(fā)網(wǎng)絡(luò)。它的基本思路是將互聯(lián)網(wǎng)中有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的環(huán)節(jié)避開,保證內(nèi)容傳輸?shù)姆€(wěn)定性。
3.6優(yōu)化圖片顯示其核心思想是實(shí)現(xiàn)用戶設(shè)備分辨率的自動區(qū)分,根據(jù)不同分辨率提供不同大小的圖片以供用戶加載。這樣既能使不同終端用戶都獲得良好的用戶體驗(yàn),同時不會浪費(fèi)用戶數(shù)據(jù)流量和加載速度。
4優(yōu)秀的響應(yīng)式WEB框架
4.1GumbyFrameworkGumbyFramework是一個靈活的響應(yīng)式框架,它建立在SASS基礎(chǔ)之上。SASS是一款CSS預(yù)處理器,它功能強(qiáng)大,提供很多新的工具來支持使用者快速自主開發(fā)Gumby框架。Gumby的產(chǎn)品更新緊跟最新的行業(yè)技術(shù)標(biāo)準(zhǔn)和規(guī)范,同時支持chrome、firefox、Opera、IE8-10等多種主流瀏覽器。如果開發(fā)者剛剛開始接觸響應(yīng)式交互網(wǎng)站,那么使用Gumby是非常適合的。它自帶PSDUI工具包,能夠非常方便地幫助制作者開發(fā)出一個漂亮的響應(yīng)式交互布局網(wǎng)站,且不需要太多專業(yè)性代碼。
4.2FoundationFoundation由位于加州坎貝爾的產(chǎn)品設(shè)計(jì)公司ZURB設(shè)計(jì)開發(fā),是目前非?，F(xiàn)金的響應(yīng)式WEB設(shè)計(jì)框架。它擁有很多布局模板、CSS樣式表以及自己開發(fā)的優(yōu)秀JavaScript插件。同時,Foundation強(qiáng)大之處還在于其將SASS有效整合,開發(fā)者可以使用Mixins概念簡化開發(fā)行為,使組件的使用更加簡單便捷。
4.3SemanticSemantic優(yōu)勢在于提供一個共享UI以供開發(fā)人員和設(shè)計(jì)師共同協(xié)作,共同開發(fā),提升可控范圍。Semantic使用自然語言習(xí)慣來輔助開發(fā),讓開發(fā)過程更便捷,同時,Semantic還可以實(shí)時進(jìn)行debug輸出,提示代碼作用。
4.4PureCSSPureCSS是一款輕量級響應(yīng)式框架,解壓縮后只有5.7KB。它基于Normalize.css框架構(gòu)建,沒有使用任何JavaScript,只使用了HTML和CSS技術(shù)。該框架采用模塊化結(jié)構(gòu),每一個模塊樣式都可以單獨(dú)使用。
4.5TukTukTukTuk是一個高效快速的響應(yīng)式CSS3框架,以輕量級的設(shè)計(jì)和面向?qū)ο蟮腃SS為優(yōu)勢,非常容易擴(kuò)展。5.6KubeKube是一款靈活的CSS框架,包括網(wǎng)格、按鈕、表、排版樣式等實(shí)用功能,可對forms,grids,buttons,tables,typography等屬性設(shè)置樣式,同時提供LESS文件,給開發(fā)人員帶來了極大的靈活性。
5結(jié)語
響應(yīng)式交互設(shè)計(jì)需要綜合考慮,統(tǒng)籌部署網(wǎng)站的功能性與美觀性,不再是只考慮一種設(shè)備使用情況的傳統(tǒng)網(wǎng)站搭建模式。這就給網(wǎng)站設(shè)計(jì)開發(fā)帶來了新的挑戰(zhàn)和機(jī)遇。我們稱響應(yīng)式交互為“設(shè)計(jì)”而不是“技術(shù)”,是因?yàn)轫憫?yīng)式交互講究設(shè)計(jì)先行,需要提前設(shè)計(jì)網(wǎng)站的方方面面,而不是依樣畫葫蘆的把已有的前端變成響應(yīng)式網(wǎng)站。對于頁面制作者,應(yīng)將單一頁面設(shè)計(jì)思維轉(zhuǎn)換成響應(yīng)式交互設(shè)計(jì)思維。每一個網(wǎng)站從設(shè)計(jì)之始,就要依照響應(yīng)式交互的標(biāo)準(zhǔn)進(jìn)行頁面設(shè)計(jì)與規(guī)劃。這就需要我們在設(shè)計(jì)開發(fā)過程中不斷和設(shè)計(jì)、前端、后臺等人員有效溝通,定制合理的響應(yīng)策略,才能搭建出合理高效的適應(yīng)當(dāng)前及將來網(wǎng)絡(luò)環(huán)境的響應(yīng)式交互網(wǎng)站。
作者：劉耀陽單位：遼寧金融職業(yè)學(xué)院