隨著屏幕分辨率的跨度越來越大，網(wǎng)站(web)
響應(yīng)式設(shè)計不得不讓每一個前端工程師、網(wǎng)頁設(shè)計師重視起來，
響應(yīng)式設(shè)計的最大優(yōu)點在于一套結(jié)構(gòu)可以在各種分辨率下能夠良好運(yùn)行，當(dāng)然弊端就是在某些客戶端上會顯得冗余，還有一個弊端就是在移動端和原生的安卓app和IOS app比起來還是比較弱，但是如果只是做內(nèi)容展示，和不需要太多強(qiáng)大的功能的話，響應(yīng)式布局也是不錯的選擇，哦，當(dāng)然響應(yīng)式布局還有個缺點是增大了前端和網(wǎng)頁設(shè)計的工作量和設(shè)計難度。
根據(jù)統(tǒng)計，到2016年，移動互聯(lián)網(wǎng)的用戶數(shù)量將會超過桌面用戶，除了智能手機(jī)之外，使用平板電腦甚至是電視機(jī)進(jìn)行上網(wǎng)的用戶也在持續(xù)增加，在這種形勢下，怎樣讓我們的網(wǎng)站盡量兼容各種類型的設(shè)備，并確保優(yōu)良的用戶體驗，這將是越來越重要的問題。通過響應(yīng)式的設(shè)計開發(fā)方式，我們可以使網(wǎng)站頁面隨瀏覽設(shè)備的不同而自行響應(yīng)，動態(tài)的調(diào)整布局結(jié)構(gòu)、元素規(guī)格樣式，將相同的內(nèi)容以不同的格式呈現(xiàn)給不同設(shè)備的用戶。
一、什么情況下適宜采用
響應(yīng)式設(shè)計？
當(dāng)客戶提出產(chǎn)品功能移動化的需求時，有一些解決方案可供我們選擇，包括原生客戶端應(yīng)用、Web應(yīng)用等，究竟怎樣的方式更合適，還是取決于具體的需求情況。
另外也要考慮網(wǎng)站本身是否需要實施移動化，雖然響應(yīng)式站點并不能算是一種純粹的移動化解決方案，但是在某些情況下，這種方式是非常值得考慮的。
1、你心里沒譜
設(shè)計開發(fā)一個全新的移動版本站點或是客戶端應(yīng)用，整個過程是有很大挑戰(zhàn)性的，除非產(chǎn)品正式上線，否則你無法真正了解它是否會成功，與其單純的為了移動化而花費(fèi)資源打造移動版本站點或是開發(fā)客戶端應(yīng)用，不如先花些心思將原本的網(wǎng)站打造的更具彈性，使其在各種主流移動設(shè)備中都擁有盡量優(yōu)秀的用戶體驗。
2、你想節(jié)約成本
要打造響應(yīng)式站點，自然離不開有經(jīng)驗的交互、視覺設(shè)計及前端開發(fā)人員，所需的資源，尤其是時間方面，比起普通網(wǎng)站來說大約增加20%到30%的樣子，但比起單獨(dú)打造移動版本的網(wǎng)站，或是設(shè)計開發(fā)客戶端應(yīng)用的成本來說，卻要低很多，從維護(hù)的角度來說，也會輕松很多。
3、你希望網(wǎng)站可以兼容未來的新設(shè)備
所謂的移動版本站點，通常是針對某類具體規(guī)格的設(shè)備進(jìn)行單獨(dú)打造的，彈性比較差，新的移動設(shè)備層出不窮，傳統(tǒng)的移動版本站點需要不斷的進(jìn)行更新維護(hù)，才能盡量保證在新設(shè)備中工作良好，
響應(yīng)式設(shè)計可以根據(jù)設(shè)備瀏覽環(huán)境的具體規(guī)格進(jìn)行判斷，使用不同的呈現(xiàn)方式來展示內(nèi)容，無需針對某種特定的規(guī)格進(jìn)行維護(hù)，適應(yīng)性更好。
二、用戶研究與設(shè)備規(guī)格預(yù)估
前期，通過用戶調(diào)研，我們可以了解到用戶群所使用的設(shè)備類型分布情況，并預(yù)估出幾種典型的響應(yīng)規(guī)格，用來規(guī)劃不同的呈現(xiàn)方式，有幾個問題馬海祥建議大家需要特別考慮下：
1、用戶在不同設(shè)備上的目標(biāo)有多大區(qū)別？
過去，我們通常會假設(shè)用戶在使用移動設(shè)備訪問網(wǎng)站時，其行為都是高度目標(biāo)驅(qū)動化的，例如在旅途中獲取酒店地址、預(yù)訂房間一類。
但實際情況不僅如此——智能手機(jī)、平板電腦等各類移動設(shè)備的用戶，會越來越多的在相對穩(wěn)定從容的狀態(tài)下使用網(wǎng)絡(luò)，所以在很多時候，用戶使用不同設(shè)備的目標(biāo)差別并沒有想象的那么大，我們不能片面的假設(shè)不同類型設(shè)備的用戶對功能的需求差異。
2、關(guān)于功能與內(nèi)容呈現(xiàn)，從技術(shù)的角度出發(fā)，需要考慮哪些？
對于功能繁多復(fù)雜的網(wǎng)站，需要針對不同的設(shè)備類型進(jìn)行功能和內(nèi)容的優(yōu)先級排序，以便在開發(fā)階段通過CSS定義不同的響應(yīng)規(guī)則，以最合理的樣式規(guī)格和布局方式進(jìn)行呈現(xiàn)，尤其對于手機(jī)等小屏幕設(shè)備，需要多花些心思。
三、制作線框原型
通過線框圖，我們可以對響應(yīng)式的視覺效果背后的邏輯結(jié)構(gòu)進(jìn)行規(guī)劃和定義。
我們根據(jù)之前一步的研究和預(yù)估結(jié)果，規(guī)劃出幾種比較典型的屏幕尺寸規(guī)格，本次案例中，我們選擇了三款具有代表性的主流設(shè)備，包括桌面顯示器、iPad和iPhone，因為根據(jù)我們的用戶研究結(jié)果，使用這三種設(shè)備的用戶占了絕大部分。
需要強(qiáng)調(diào)一下，
響應(yīng)式設(shè)計的目的在于，針對不同設(shè)備的屏幕規(guī)格區(qū)間，進(jìn)行功能及內(nèi)容的輸出格式預(yù)設(shè)，所以我們只需要選取一些具有代表性的設(shè)備，而不必顧全所有已知的規(guī)格類型，我們制作線框原型的主要目標(biāo)是規(guī)劃樣式背后的邏輯。
在這個階段，我們必須清楚，整個網(wǎng)站中有哪些關(guān)鍵頁面是在功能和布局方面具有代表性的，對于這次的案例網(wǎng)站，“關(guān)鍵頁面”包括首頁、預(yù)訂流程中的頁面、酒店詳情頁面等。
圖盛網(wǎng)絡(luò),專業(yè)廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)絡(luò)公司領(lǐng)先網(wǎng)絡(luò)品牌,3年網(wǎng)站建設(shè)經(jīng)驗,超過5000家成功案例,作為廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)站設(shè)計公司和知名廣州網(wǎng)站制作公司,提供：廣州網(wǎng)站建設(shè),廣州網(wǎng)站制作,廣州網(wǎng)站設(shè)計,廣州做網(wǎng)站,廣州建網(wǎng)站,廣州建站等服務(wù)專業(yè)資質(zhì)獲得廣大客戶的認(rèn)可。
更多網(wǎng)站資訊,微信輕松掃一掃關(guān)注圖盛網(wǎng)絡(luò)（ykzxgm.cn）。
