【51CTO.com快譯】響應(yīng)式網(wǎng)頁設(shè)計(jì)是指設(shè)計(jì)可以從各種設(shè)備(包括手機(jī)和平板電腦)訪問的網(wǎng)頁。以響應(yīng)式網(wǎng)頁設(shè)計(jì)為例，布局適應(yīng)設(shè)備的屏幕尺寸和瀏覽方向。使用響應(yīng)式網(wǎng)頁設(shè)計(jì)可以改善用戶的瀏覽體驗(yàn)，那樣用戶可以從任何位置輕松訪問您的網(wǎng)站;如果企業(yè)想要留住客戶并與客戶互動(dòng)，響應(yīng)式網(wǎng)頁設(shè)計(jì)是最佳選擇。

專業(yè)網(wǎng)頁設(shè)計(jì)人員可幫助將普通網(wǎng)站變成響應(yīng)式網(wǎng)站。他們提供廣泛的服務(wù)，從創(chuàng)建針對(duì)移動(dòng)端優(yōu)化的設(shè)計(jì)，到從頭開始創(chuàng)建新網(wǎng)站，不一而足。

響應(yīng)式網(wǎng)頁設(shè)計(jì)(RWD)是網(wǎng)站開發(fā)界的最新趨勢(shì)。它已成為一種需要考慮的基本設(shè)計(jì)，以滿足客戶的需求：讓公司以可行的成本覆蓋更廣大的受眾。開發(fā)響應(yīng)式網(wǎng)站時(shí)須遵循嚴(yán)格的準(zhǔn)則，比如瀏覽器兼容性測(cè)試。

鑒于如今移動(dòng)設(shè)備日益普及，響應(yīng)式網(wǎng)頁設(shè)計(jì)的重要性顯著增加?，F(xiàn)在，對(duì)于Web設(shè)計(jì)人員、開發(fā)人員和測(cè)試人員來說，跨不同設(shè)備輕松訪問網(wǎng)站，創(chuàng)建可在移動(dòng)設(shè)備上訪問的網(wǎng)站和應(yīng)用程序已變得很重要。

為了使網(wǎng)站在移動(dòng)設(shè)備上易于訪問，網(wǎng)頁設(shè)計(jì)人員必須確保網(wǎng)站能夠靈活地適應(yīng)不同的屏幕尺寸。

瀏覽器兼容性是關(guān)鍵

原型設(shè)計(jì)是軟件開發(fā)流程的一個(gè)重要組成部分。為了確保移動(dòng)設(shè)備的響應(yīng)方式與較大尺寸的設(shè)備一樣，在使用不同屏幕分辨率和瀏覽器尺寸的各種流行的移動(dòng)設(shè)備上進(jìn)行測(cè)試至關(guān)重要。確保所有屏幕上有完全一致的響應(yīng)。

設(shè)備分辨率或尺寸方面的變化所需的任何調(diào)整(比如縮放或調(diào)整大小)都必須自動(dòng)進(jìn)行，并且內(nèi)容不應(yīng)更改大小或重新排序?？鐬g覽器測(cè)試可確保軟件在所有瀏覽器和設(shè)備上按預(yù)期運(yùn)行。

注意設(shè)計(jì)兼容性

響應(yīng)式設(shè)計(jì)測(cè)試旨在確保網(wǎng)頁或應(yīng)用程序的功能在多個(gè)設(shè)備上繼續(xù)正常工作。雖然無法測(cè)試所有設(shè)備，但使用眾多設(shè)備進(jìn)行測(cè)試很重要，因?yàn)橐苿?dòng)網(wǎng)站流量一直在穩(wěn)步上升。響應(yīng)式設(shè)計(jì)依賴目標(biāo)設(shè)備的寬度、設(shè)備屏幕分辨率和像素密度。

隨著移動(dòng)設(shè)備變得更多樣化，定義和測(cè)試響應(yīng)式設(shè)計(jì)模板變得越來越困難。然而，借助綜合測(cè)試技術(shù)，您可以確保自己的設(shè)計(jì)適用于多種響應(yīng)式網(wǎng)頁布局。

在移動(dòng)設(shè)備測(cè)試市場(chǎng)，有多個(gè)品牌可供選擇。響應(yīng)式設(shè)計(jì)測(cè)試需要考慮設(shè)備組合。雖然測(cè)試應(yīng)該涵蓋市面上的大多數(shù)常見設(shè)備，但很難全面地測(cè)試每種移動(dòng)設(shè)備。

這些準(zhǔn)則將向您介紹如何確保圖片及其他元素不會(huì)在您的響應(yīng)式網(wǎng)頁設(shè)計(jì)中重疊。您的測(cè)試計(jì)劃應(yīng)涵蓋消費(fèi)者使用的所有主要設(shè)備：從臺(tái)式機(jī)到智能手機(jī)。如果您在從事客戶項(xiàng)目，需要從客戶那里獲得有關(guān)設(shè)備的一些信息。此外，許多測(cè)試人員沒有認(rèn)識(shí)到兩個(gè)看起來相似的設(shè)備會(huì)帶來全然不同的結(jié)果。

比如說，屏幕尺寸的微小差異可能導(dǎo)致加載和使用網(wǎng)站所需的時(shí)間量出現(xiàn)巨大差異。讓您的團(tuán)隊(duì)確定是否存在任何問題的一個(gè)好方法是，從客戶那里獲取有關(guān)其客戶在使用的設(shè)備的信息。

確保您網(wǎng)站的導(dǎo)航系統(tǒng)準(zhǔn)確無誤

響應(yīng)式導(dǎo)航欄可幫助您在移動(dòng)設(shè)備上瀏覽您的網(wǎng)站。您可以快速訪問網(wǎng)站的不同部分，并返回到訪問過的上一頁。用戶的設(shè)備尺寸變化后，導(dǎo)航欄也應(yīng)該隨之變化。導(dǎo)航欄用于快速導(dǎo)航到您網(wǎng)站上的不同部分或不同頁面。導(dǎo)航欄通常包含五個(gè)或更多元素。確保您的導(dǎo)航欄適用于所有設(shè)備和瀏覽器。

測(cè)試響應(yīng)式網(wǎng)站時(shí)，重要的是要考慮RWD中存在的不同屏幕尺寸。確保您的網(wǎng)站面對(duì)最小的手機(jī)屏幕和最大的桌面顯示器都能完美運(yùn)行，可能需要特定的寬度或布局。這里允許端到端瀏覽的測(cè)試很重要，因?yàn)橛脩魬?yīng)該能夠從各種尺寸的屏幕和各種類型的設(shè)備訪問您的網(wǎng)站。

轉(zhuǎn)向并行測(cè)試

在您的移動(dòng)版和桌面版上并行工作是最好的測(cè)試方式。這可提高您的效率，并讓您可以為用戶創(chuàng)建更順暢的響應(yīng)式網(wǎng)頁設(shè)計(jì)體驗(yàn)。如果沒有并行測(cè)試，您就無法確定網(wǎng)頁的質(zhì)量水準(zhǔn)。測(cè)試對(duì)于RWD測(cè)試流程的所有階段都至關(guān)重要。測(cè)試對(duì)于響應(yīng)式網(wǎng)頁設(shè)計(jì)流程的所有階段都至關(guān)重要。

雖然分別測(cè)試桌面版和移動(dòng)版可能更具成本效益，但這并不能讓您了解全貌。并行測(cè)試是跨多個(gè)設(shè)備創(chuàng)建無縫用戶體驗(yàn)的關(guān)鍵。借助并行測(cè)試，您可以在手機(jī)、平板電腦和臺(tái)式機(jī)上獲得同樣的體驗(yàn)。這將讓您可以通過移動(dòng)響應(yīng)式網(wǎng)頁設(shè)計(jì)獲得更好的用戶體驗(yàn)。

響應(yīng)式網(wǎng)頁設(shè)計(jì)是一種多設(shè)備體驗(yàn)。用戶希望在其臺(tái)式機(jī)、平板電腦和移動(dòng)設(shè)備上找到同樣的內(nèi)容和功能。借助并行測(cè)試，您可以確保頁面內(nèi)容非常適合在多個(gè)設(shè)備上瀏覽。請(qǐng)記住，測(cè)試是響應(yīng)式網(wǎng)頁設(shè)計(jì)流程中一個(gè)非常重要的環(huán)節(jié)。如果不進(jìn)行測(cè)試，您無法確定用戶在跨設(shè)備和瀏覽器訪問您網(wǎng)站方面的體驗(yàn)有多好。

不要完全依賴功能測(cè)試

代碼測(cè)試并不驗(yàn)證按鈕和鏈接在所有瀏覽器和設(shè)備上是否正確對(duì)齊。功能測(cè)試可以確認(rèn)布局在不同瀏覽器和設(shè)備上的實(shí)現(xiàn)統(tǒng)一，確保用戶有一致的體驗(yàn)。功能測(cè)試確認(rèn)網(wǎng)站功能根據(jù)代碼來工作。但是這種測(cè)試并不確認(rèn)按鈕和鏈接在所有瀏覽器和設(shè)備上是否正確對(duì)齊。雖然手動(dòng)測(cè)試最有效，但它并沒有考慮用戶體驗(yàn)。

比如說，您可能希望在將網(wǎng)站上線之前測(cè)試不同的瀏覽器和設(shè)備。這就是為什么成功的發(fā)布流程通常需要自動(dòng)化視覺回歸測(cè)試?？墒菃栴}是，編寫測(cè)試以檢查對(duì)齊既緩慢又費(fèi)錢。因此，為了降低成本，并優(yōu)先考慮客戶最關(guān)心的功能，您經(jīng)常發(fā)現(xiàn)自己會(huì)略過這類測(cè)試。

在原始設(shè)備和現(xiàn)有設(shè)備上檢查您的網(wǎng)站

在不同的移動(dòng)設(shè)備和瀏覽器上測(cè)試您的網(wǎng)站將有助于找到布局問題。有時(shí)，由于特定的配置，問題在您的生產(chǎn)環(huán)境中看不到。比如說，某款手機(jī)的瀏覽器每英寸可以處理的像素比另一款瀏覽器更多或更少。定義您的測(cè)試參數(shù)。確保您擁有對(duì)觀眾而言最重要的設(shè)備。您網(wǎng)站的目的是獲得更多的流量和銷售額。

您希望自己的網(wǎng)站引人注目，但又不想在設(shè)計(jì)上花費(fèi)大量時(shí)間。一次性原型設(shè)計(jì)工具將幫助您在各種設(shè)備上設(shè)計(jì)并測(cè)試線框和原型。模擬日常瀏覽的一次性原型設(shè)計(jì)工具可以幫助您深入了解用戶如何與您設(shè)計(jì)的網(wǎng)頁進(jìn)行交互。通過模擬各種不同的瀏覽器，您可以測(cè)試您的網(wǎng)站在不同手機(jī)設(shè)備上瀏覽時(shí)所呈現(xiàn)的外觀。

借助手動(dòng)測(cè)試或自動(dòng)化測(cè)試在實(shí)際設(shè)備上進(jìn)行測(cè)試，您可以確保用戶獲得最佳的移動(dòng)體驗(yàn)。在實(shí)際設(shè)備上進(jìn)行測(cè)試可以讓您深入地了解您的網(wǎng)站在不同情況下有怎樣的呈現(xiàn)。

考慮到所有這些因素，在實(shí)際設(shè)備上進(jìn)行測(cè)試顯然至關(guān)重要，無論是手動(dòng)測(cè)試，還是借助設(shè)備提供的某種形式的自動(dòng)化測(cè)試。這讓您可以確信自己的網(wǎng)站是否有效、吸引力有多大以及瀏覽起來多容易。

在各種顯示模式下測(cè)試您的設(shè)計(jì)

響應(yīng)式設(shè)計(jì)測(cè)試讓用戶可以檢查網(wǎng)站/應(yīng)用程序在不同狀態(tài)下在移動(dòng)設(shè)備上如何顯示。應(yīng)該在橫向模式和縱向模式下都可以瀏覽。有多種工具可以幫助您實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。

響應(yīng)式設(shè)計(jì)是一種根據(jù)用于訪問頁面的設(shè)備來改變頁面布局的網(wǎng)頁設(shè)計(jì)。比如說，屏幕較大的筆記本電腦提供了更多的空間來顯示內(nèi)容，而智能手機(jī)屏幕較小，需要以不同的方式顯示控件和內(nèi)容以適應(yīng)屏幕尺寸。響應(yīng)式設(shè)計(jì)的“變革”專注于這樣的媒體查詢：消除針對(duì)不同屏幕尺寸的復(fù)雜編程，并提供幾個(gè)優(yōu)勢(shì)。

“響應(yīng)式網(wǎng)頁設(shè)計(jì)”(RWD)這個(gè)術(shù)語代表了網(wǎng)頁設(shè)計(jì)和開發(fā)的一種理念，而不是特定的設(shè)計(jì)方法。“響應(yīng)式”一詞是指網(wǎng)站對(duì)瀏覽它的設(shè)備做出響應(yīng)的方式。它可以調(diào)整布局、圖片/文本大小等元素，讓網(wǎng)站可以處于跨所有設(shè)備瀏覽的最佳狀態(tài)。

縮短網(wǎng)站加載時(shí)間

您和員工在很多時(shí)候需要外出。無法使用高速網(wǎng)絡(luò)時(shí)，擁有一個(gè)可以在移動(dòng)設(shè)備上快速加載的網(wǎng)站版本至關(guān)重要。無論可用的網(wǎng)絡(luò)速度如何，移動(dòng)網(wǎng)站都應(yīng)該始終快速加載，并且與桌面版相比應(yīng)該易于使用和導(dǎo)航。它們還應(yīng)該是輕量級(jí)的，因?yàn)槠聊怀叽绯３１葮?biāo)準(zhǔn)顯示器小。

漸進(jìn)式Web應(yīng)用程序是一種新方法，用來創(chuàng)建、啟動(dòng)、衡量和維護(hù)針對(duì)移動(dòng)端優(yōu)化的網(wǎng)站。其主要想法是制作一個(gè)類似應(yīng)用程序的網(wǎng)站，該網(wǎng)站也可以離線工作、立即加載。這使得網(wǎng)站響應(yīng)起來更快速，加載起來沒有任何問題，即使網(wǎng)絡(luò)速度慢或根本不可用。為了確保您網(wǎng)站的移動(dòng)版快速加載，考慮優(yōu)化您的圖片。

確保您遵守不同瀏覽器建立的文件大小準(zhǔn)則。比如說，Chrome和Safari將移動(dòng)設(shè)備上的圖片大小限制為32MB。提供出色的用戶體驗(yàn)對(duì)于每個(gè)網(wǎng)站都至關(guān)重要，尤其是對(duì)于移動(dòng)網(wǎng)站。研究表明，用戶對(duì)無法在移動(dòng)設(shè)備上正常運(yùn)行的網(wǎng)站普遍感到不滿。隨著移動(dòng)互聯(lián)網(wǎng)的使用量日益增加，使用移動(dòng)設(shè)備訪問互聯(lián)網(wǎng)的消費(fèi)者數(shù)量也將隨之增加。

最佳響應(yīng)式網(wǎng)頁設(shè)計(jì)工具

LT Browser是一款多合一的Web瀏覽應(yīng)用程序，讓您可以在多達(dá)50多種安卓和iOS設(shè)備的屏幕上以縱向或橫向方式測(cè)試您的網(wǎng)站或Web應(yīng)用程序，它還擁有一款適用于網(wǎng)站和Web應(yīng)用程序的對(duì)移動(dòng)端友好的測(cè)試器工具。憑借獨(dú)特的并排視圖，您可以在不同的瀏覽器上同時(shí)調(diào)試您的網(wǎng)站/Web應(yīng)用程序。

只需點(diǎn)擊一下，您就可以在全屏模式下制作網(wǎng)站的屏幕截圖。為了提高工作效率，它還提供多標(biāo)簽支持、數(shù)據(jù)保存模式、云同步及其他有用的功能。LT Browser是一款適用于安卓和iOS的高級(jí)移動(dòng)瀏覽器，可幫助您創(chuàng)建大量的下一代網(wǎng)站。它是一款功能強(qiáng)大的對(duì)移動(dòng)端友好的測(cè)試工具，讓您可以在網(wǎng)站上線前檢查網(wǎng)站的方方面面，確保網(wǎng)頁在所有設(shè)備上看起來都不錯(cuò)。

LT Browser是在您的移動(dòng)設(shè)備上測(cè)試網(wǎng)頁響應(yīng)能力的便捷方式。通過一鍵式全頁屏幕截圖或視頻錄制，您可以立即與自己的團(tuán)隊(duì)直觀地共享設(shè)計(jì)錯(cuò)誤。共享的測(cè)試結(jié)果將在幾秒鐘內(nèi)包含注釋、標(biāo)記、評(píng)論和測(cè)試詳細(xì)信息，從而為您節(jié)省時(shí)間，而且無須費(fèi)力氣解釋您的網(wǎng)站在移動(dòng)設(shè)備上有怎樣的外觀。

原文標(biāo)題：11 useful guidelines to improve responsive design testing，作者：Jamie Davidson

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】