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

時間：2022-05-29 09:51:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 09:51:01 來源：網(wǎng)絡(luò)營銷

根據(jù)統(tǒng)計，到2015年，移動互聯(lián)網(wǎng)的用戶數(shù)量將會超過桌面用戶，除了智能手機之外，使用平板電腦甚至是電視機進行上網(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ā)客戶端應(yīng)用，不如先花些心思將原本的網(wǎng)站打造的更具彈性，使其在各種主流移動設(shè)備中都擁有盡量優(yōu)秀的用戶體驗。

2、你想節(jié)約成本

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

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

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

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

前期，通過用戶調(diào)研，我們可以了解到用戶群所使用的設(shè)備類型分布情況，并預(yù)估出幾種典型的響應(yīng)規(guī)格，用來規(guī)劃不同的呈現(xiàn)方式，有幾個問題億企邦建議大家需要特別考慮下：

1、用戶在不同設(shè)備上的目標有多大區(qū)別？

過去，我們通常會假設(shè)用戶在使用移動設(shè)備訪問網(wǎng)站時，其行為都是高度目標驅(qū)動化的，例如在旅途中獲取酒店地址、預(yù)訂房間一類。

但實際情況不僅如此——智能手機、平板電腦等各類移動設(shè)備的用戶，會越來越多的在相對穩(wěn)定從容的狀態(tài)下使用網(wǎng)絡(luò)，所以在很多時候，用戶使用不同設(shè)備的目標差別并沒有想象的那么大，我們不能片面的假設(shè)不同類型設(shè)備的用戶對功能的需求差異。

2、關(guān)于功能與內(nèi)容呈現(xiàn)，從技術(shù)的角度出發(fā)，需要考慮哪些？

對于功能繁多復(fù)雜的網(wǎng)站，需要針對不同的設(shè)備類型進行功能和內(nèi)容的優(yōu)先級排序，以便在開發(fā)階段通過CSS定義不同的響應(yīng)規(guī)則，以最合理的樣式規(guī)格和布局方式進行呈現(xiàn)，尤其對于手機等小屏幕設(shè)備，需要多花些心思（具體可查看億企邦《響應(yīng)式網(wǎng)頁設(shè)計的排版設(shè)計趨勢》的相關(guān)介紹）。

三、制作線框原型

通過線框圖，我們可以對響應(yīng)式的視覺效果背后的邏輯結(jié)構(gòu)進行規(guī)劃和定義。

我們根據(jù)之前一步的研究和預(yù)估結(jié)果，規(guī)劃出幾種比較典型的屏幕尺寸規(guī)格，本次案例中，我們選擇了三款具有代表性的主流設(shè)備，包括桌面顯示器、iPad和iPhone，因為根據(jù)我們的用戶研究結(jié)果，使用這三種設(shè)備的用戶占了絕大部分。

需要強調(diào)一下，響應(yīng)式設(shè)計的目的在于，針對不同設(shè)備的屏幕規(guī)格區(qū)間，進行功能及內(nèi)容的輸出格式預(yù)設(shè)，所以我們只需要選取一些具有代表性的設(shè)備，而不必顧全所有已知的規(guī)格類型，我們制作線框原型的主要目標是規(guī)劃樣式背后的邏輯。

在這個階段，我們必須清楚，整個網(wǎng)站中有哪些關(guān)鍵頁面是在功能和布局方面具有代表性的，對于這次的案例網(wǎng)站，“關(guān)鍵頁面”包括首頁、預(yù)訂流程中的頁面、酒店詳情頁面等。

1、開始規(guī)劃

首先來定義每種關(guān)鍵規(guī)格中的結(jié)構(gòu)網(wǎng)格，我們創(chuàng)建了三個頁面模板，寬度分別為1024像素(桌面顯示器)、768像素(iPad豎屏寬度)、320像素(iPhone豎屏寬度)。

如上圖所示，從每列等寬的情況入手，可以讓規(guī)劃工作相對簡單一些，幫助我們將注意力放在響應(yīng)式的布局改變上（具體可查看億企邦《響應(yīng)式網(wǎng)頁設(shè)計的基本原則布局》的相關(guān)介紹）。

2、溝通與評審

接下來我們需要考慮的是，每一列中的模塊組件應(yīng)該以怎樣的方式隨著頁面的寬度縮放而響應(yīng)式的適應(yīng)和調(diào)整，在這個過程里，保持團隊成員之間的溝通是非常重要的，包括視覺設(shè)計師、前端開發(fā)人員等。

使用初步的線框原型，與大家交流模塊組件在布局和樣式方面的調(diào)整計劃，盡量在初期就讓相關(guān)成員對整個規(guī)劃做到心中有數(shù)，并盡早發(fā)現(xiàn)前端實現(xiàn)等方面的潛在的問題。

3、首頁

也許對于你自己的實際項目來說，其他頁面的重要程度或代表性是超過首頁的，這不是問題，你可以調(diào)整具體的頁面規(guī)劃次序，我們的這個項目案例是從首頁開始入手的。

上圖中展示的，就是我們?yōu)槭醉撝谱鞯娜N響應(yīng)規(guī)格的線框原型。

4、全局導(dǎo)航

我們創(chuàng)建了一個簡單的橫向?qū)Ш綏l，其寬度可以隨著屏幕寬度的變化而調(diào)整，在最后一種規(guī)格的范圍里(320像素以下)，導(dǎo)航條會折行顯示，以保證導(dǎo)航元素的可讀性。

頭部中其他元素的調(diào)整方式與全局導(dǎo)航的類似，在這一步中，最好提前考慮一下關(guān)于組件元素的樣式問題，做好與視覺設(shè)計師的交流溝通。比如，對于導(dǎo)航元素，如果使用復(fù)雜的tab式背景，就很有可能在小屏幕設(shè)備中、特別是導(dǎo)航條折行的情況下產(chǎn)生樣式問題（具體可查看億企邦《常見的七種響應(yīng)式導(dǎo)航設(shè)計模式的優(yōu)點和缺點》的相關(guān)介紹）。

5、頁腳

默認尺寸下，頁腳由四列內(nèi)容組成；另外兩個規(guī)格范圍中，布局分別為三列和一列；內(nèi)容模塊隨文檔流向下依次擴展即可。

6、其他模塊組件

全局的四列等寬網(wǎng)格布局使其他組件的規(guī)劃也非常輕松，在首頁中有一個組件，其中包含若干內(nèi)容模塊，默認尺寸下，可以并排顯示四個模塊，左右兩邊各有一個觸發(fā)滾動的按鈕，以點擊之后模塊列表會前后滾動，以顯示更多內(nèi)容。

在平板電腦類型的布局中，默認顯示的數(shù)量變?yōu)槿齻€；而在手機的小尺寸屏幕中，內(nèi)容模塊列表會變?yōu)閱瘟校⑷サ袅擞糜谧笥覞L動的按鈕，用戶可以上下滾動頁面，依次查看不同的模塊。

類似的，其他涉及到多列顯示的組件和模塊都需要做這樣的考慮，要了解不同設(shè)備的用戶所習(xí)慣的操作方式，同時結(jié)合該設(shè)備的屏幕寬度規(guī)格，設(shè)計出最合理的布局及交互方式。

測試線框原型我們可以在線框原型的初稿完成之后，將其圖片導(dǎo)入對應(yīng)的設(shè)備中，進行一些簡單的初步測試，試著上下或左右滾動原型界面，感受導(dǎo)航與功能、內(nèi)容的布局，完成一些假設(shè)的獲取信息的目標，這樣的測試可以幫助我們盡早的檢驗頁面在可訪問性及可讀性等方面的潛在問題。

對于手機用戶來說，有一個問題：多數(shù)頁面在首屏中只能顯示網(wǎng)站名、全局導(dǎo)航和搜索等功能；用戶點擊全局導(dǎo)航中的鏈接之后，即使頁面正常的進行了跳轉(zhuǎn)，也會給人一種錯覺，好像頁面并沒有發(fā)生變化；除非滾動頁面，通過查看頁面的主要內(nèi)容部分，來判斷當(dāng)前是否處于自己的目標頁面。

一個常見的解決方法是，對于小屏幕設(shè)備，將全局導(dǎo)航與主要內(nèi)容之間的部分設(shè)計為可以展開或收起的容器，默認狀態(tài)為收起，這樣即能使主要內(nèi)容可以呈現(xiàn)在首屏中，也可以保證功能的可用性。

四、網(wǎng)頁視覺設(shè)計

相比于傳統(tǒng)的Web視覺設(shè)計過程，在這里我們不僅要打造出風(fēng)格恰當(dāng)?shù)腢I元素，而且要根據(jù)前面制定下來的幾種規(guī)格方案，對某些關(guān)鍵性的UI元素進行樣式擴展或改造。

例如上圖所示的酒店搜索模塊，正如我們前面提到的，在小屏幕版本中，最佳實踐方式是做成可展開和收起的模式，而這種交互方式在平板電腦或桌面設(shè)備中是不需要的，類似這樣情況，在視覺設(shè)計方面需要花些額外的功夫。

在視覺設(shè)計過程中，億企邦還發(fā)現(xiàn)一些很實際的經(jīng)驗和原則：

1、盡量保持小屏幕規(guī)格樣式的簡潔。在UI元素風(fēng)格方面，可以多與前端開發(fā)人員交流，盡量采用可以通過CSS3實現(xiàn)的常規(guī)風(fēng)格樣式，減少背景圖片的使用。

2、要保證內(nèi)容的字體字號在所有設(shè)備中都足夠可讀，尤其是在手機上。

3、與傳統(tǒng)Web設(shè)計開發(fā)相似，最終產(chǎn)出的頁面必定會與視覺稿有所出入，尤其對于響應(yīng)式站點來說，由于在布局結(jié)構(gòu)和細節(jié)樣式等方面都需要有調(diào)整變化的能力，所以在開發(fā)過程中產(chǎn)生設(shè)計還原度方面問題的幾率會更大。

上圖就是針對三種設(shè)備規(guī)格的首頁最終視覺稿。

在此，億企邦仍然要強調(diào)一點，就是在項目前期和中期保持設(shè)計師與開發(fā)者之間的交流與溝通，盡可能早的發(fā)現(xiàn)各類潛在問題。

五、前端構(gòu)建

來看一些在前端構(gòu)建的過程中需要注意的問題，關(guān)于技術(shù)性的細節(jié)問題，仍不會在這里過多討論，有不明白的朋友，可查看億企邦《如何制作一個響應(yīng)式網(wǎng)頁》一文中的相關(guān)介紹。

關(guān)于圖片尺寸對于小屏幕規(guī)格的設(shè)計方案，即使我們通過CSS縮小其顯示尺寸，在文件資源方面仍然是要加載完整的大圖的，所以我們在優(yōu)化保存文件圖片的時候要盡可能的讓文件更小。

不過另外有些方法，可以幫助我們真正實現(xiàn)圖片文件的響應(yīng)化，大致思路是，通過JavaScript判斷當(dāng)前設(shè)備的分辨率規(guī)格范圍，并根據(jù)預(yù)設(shè)的規(guī)則加載不同尺寸的圖片文件。

使用高級CSS讓客戶或需求方理解“漸進增強，平穩(wěn)退化”的思路是很重要的，對于傳統(tǒng)Web設(shè)計開發(fā)也是如此，對響應(yīng)式站點來說，CSS3在降低資源消耗、提高頁面加載速度等方面的作用尤為重要。

億企邦點評：

正如我們在前文中多次強調(diào)的，保持設(shè)計師與開發(fā)者之間的密切溝通和及時交流，對于項目的順利進展會起到不可估量的作用，換個角度說，如果這方面做的不好，很多致命的潛在問題則有可能在項目后期集中爆發(fā)出來。