通過響應(yīng)式的設(shè)計(jì)開發(fā)方式，我們可以使網(wǎng)站頁面隨瀏覽設(shè)備的不同而自行響應(yīng)，動(dòng)態(tài)的調(diào)整布局結(jié)構(gòu)、元素規(guī)格樣式，將相同的內(nèi)容以不同的格式呈現(xiàn)給不同設(shè)備的用戶。

什么情況下適宜采用響應(yīng)式Web設(shè)計(jì)的方式

當(dāng)客戶提出產(chǎn)品功能移動(dòng)化的需求時(shí)，有一些解決方案可供我們選擇，包括原生客戶端應(yīng)用、Web應(yīng)用等;究竟怎樣的方式更合適，還是取決于具體的需求情況。另外也要考慮網(wǎng)站本身是否需要實(shí)施移動(dòng)化。雖然響應(yīng)式站點(diǎn)并不能算是一種純粹的移動(dòng)化解決方案，但是，在某些情況下，這種方式是非常值得考慮的。

你心里沒譜

設(shè)計(jì)開發(fā)一個(gè)全新的移動(dòng)版本站點(diǎn)或是客戶端應(yīng)用，整個(gè)過程是有很大挑戰(zhàn)性的。除非產(chǎn)品正式上線，否則你無法真正了解它是否會(huì)成功。與其單純的為了移動(dòng)化而花費(fèi)資源打造移動(dòng)版本站點(diǎn)或是開發(fā)客戶端應(yīng)用，不如先花些心思將原本的網(wǎng)站打造的更具彈性，使其在各種主流移動(dòng)設(shè)備中都擁有盡量優(yōu)秀的用戶體驗(yàn)。

你想節(jié)約成本

要打造響應(yīng)式站點(diǎn)，自然離不開有經(jīng)驗(yàn)的交互、視覺設(shè)計(jì)及前端開發(fā)人員。所需的資源，尤其是時(shí)間方面，比起普通網(wǎng)站來說大約增加20%到30%的樣子;但比起單獨(dú)打造移動(dòng)版本的網(wǎng)站，或是設(shè)計(jì)開發(fā)客戶端應(yīng)用的成本來說，卻要低很多。從維護(hù)的角度來說，也會(huì)輕松很多。

你希望網(wǎng)站可以兼容未來的新設(shè)備

所謂的移動(dòng)版本站點(diǎn)，通常是針對某類具體規(guī)格的設(shè)備進(jìn)行單獨(dú)打造的，彈性比較差。新的移動(dòng)設(shè)備層出不窮，傳統(tǒng)的移動(dòng)版本站點(diǎn)需要不斷的進(jìn)行更新維護(hù)，才能盡量保證在新設(shè)備中工作良好。響應(yīng)式設(shè)計(jì)可以根據(jù)設(shè)備瀏覽環(huán)境的具體規(guī)格進(jìn)行判斷，使用不同的呈現(xiàn)方式來展示內(nèi)容，無需針對某種特定的規(guī)格進(jìn)行維護(hù)，適應(yīng)性更好。

響應(yīng)式網(wǎng)站頁面的設(shè)計(jì)流程

我們將使用一個(gè)真實(shí)的酒店網(wǎng)站作為范例，來演示響應(yīng)式Web設(shè)計(jì)的流程。這個(gè)網(wǎng)站是我們在九月份剛剛為Macdonald連鎖酒店創(chuàng)建的。在整個(gè)設(shè)計(jì)開發(fā)流程中，有幾個(gè)關(guān)鍵步驟，是我們接下來要逐一展開學(xué)習(xí)的：

1、用戶研究與設(shè)備規(guī)格預(yù)估

2、制作線框原型

3、視覺設(shè)計(jì)

4、前端構(gòu)建


那么響應(yīng)式網(wǎng)站對搜索引擎是否有好呢？

有人說，谷歌“喜歡”響應(yīng)的北京網(wǎng)站設(shè)計(jì)，并獎(jiǎng)勵(lì)響應(yīng)網(wǎng)站以更高的搜索排名。我認(rèn)為，谷歌喜歡能滿足用戶需求的網(wǎng)站，無論使用什么樣的技術(shù)。

兩則消息

第一則：

Google宣布從2015年4月21日開始正式實(shí)施移動(dòng)搜索算法調(diào)整，當(dāng)用戶在手機(jī)上搜索時(shí)，網(wǎng)頁的移動(dòng)友好性將成為移動(dòng)搜索結(jié)果排序的影響因素之一。

一個(gè)移動(dòng)友好型網(wǎng)站需要具備哪些特點(diǎn)？Google稱，最好符合響應(yīng)式網(wǎng)頁設(shè)計(jì)原則，調(diào)整頁面布局，文字足夠大，且頁面鏈接能對觸摸屏點(diǎn)做出快速反應(yīng)。

第二則：

4月份，百度的站長沙龍活動(dòng)中，有站長問到百度針對響應(yīng)式網(wǎng)站有沒有更新算法，百度官方就響應(yīng)式提出了三點(diǎn)保守的回復(fù)：

1、百度正在努力從技術(shù)上支持響應(yīng)式網(wǎng)站；

2、百度官方建議站長在建站和進(jìn)行代碼優(yōu)化時(shí)使用HTML5；

3、優(yōu)質(zhì)的移動(dòng)站與PC站雖然相差無幾，但仍然有其特殊性。

可以看出，目前百度仍然建議站長有單獨(dú)的移動(dòng)站，從而提升用戶訪問移動(dòng)站點(diǎn)時(shí)的體驗(yàn)。

谷歌建議使用響應(yīng)設(shè)計(jì)，即使是正確的選擇，我們也要知道什么才是用戶真正想要的網(wǎng)站，如何去設(shè)計(jì)響應(yīng)式網(wǎng)站。

下圖網(wǎng)站頁面設(shè)計(jì)都是由圖片組成，沒有客戶想要的內(nèi)容。這樣的網(wǎng)站設(shè)計(jì)沒有考慮用戶為什么來到你的網(wǎng)站。




下圖所示網(wǎng)站知道大多數(shù)用戶是汽車愛好者，想看汽車選項(xiàng)或找到一個(gè)經(jīng)銷商，是一個(gè)很好的網(wǎng)站,可能會(huì)讓他們的銷售率得到提高。


如何知道你的用戶希望看到什么內(nèi)容？

1.頁面調(diào)查

想弄明白人們正在尋找什么，最好的方法之一就是直接問他們。我們可以利用Qualaroo工具，快速知道人們正在尋找什么。如果你已經(jīng)知道人們在尋找什么，你知道他們首要考慮的是什么。如果價(jià)格對你的買家來說最重要，價(jià)格應(yīng)該在設(shè)計(jì)中突出。

2．使用拆分測試來理解客戶意圖

我們可以在測試頁面之間建立一種假設(shè)，然后試著思考一下我們的結(jié)論是否正確，是否創(chuàng)建了可以解決用戶問題的內(nèi)容。通過使用Optimizely工具進(jìn)行測試可以取得非常好的效果。

3.研究細(xì)分市場

試著找出你的用戶所在的細(xì)分市場，了解用戶希望看什么。例如進(jìn)入一個(gè)家庭服務(wù)網(wǎng)站，那么房地產(chǎn)、就業(yè)、酒店、新的汽車和家具都是人們希望了解的信息。如果用戶使用移動(dòng)設(shè)備訪問網(wǎng)站，我們的網(wǎng)站應(yīng)該有響應(yīng)的信息和導(dǎo)航選項(xiàng)。

總之，響應(yīng)式網(wǎng)站的確是迄今為止最簡單的多設(shè)備的瀏覽方法，但并不意味著搜索引擎將懲罰一個(gè)可以在不同終端提供卓越移動(dòng)體驗(yàn)的網(wǎng)站。響應(yīng)性設(shè)計(jì)通常是正確的選擇，但不是唯一的選擇。建立一個(gè)能滿足用戶需求的網(wǎng)站才是最重要的。