確實(shí)，只有桌面設(shè)計(jì)網(wǎng)站的日子已經(jīng)過(guò)去了。對(duì)于可從各種設(shè)備進(jìn)行訪問(wèn)的移動(dòng)網(wǎng)站和站點(diǎn)的需求至今是至關(guān)重要的。我們可以很好地理解我們通過(guò)智能手機(jī)進(jìn)行的瀏覽。這是網(wǎng)頁(yè)設(shè)計(jì)響應(yīng)成為迫在眉睫的必需品而不是時(shí)尚的地方。無(wú)論您是從4英寸的智能手機(jī)還是40英寸的電視屏幕看，都可以靈活地優(yōu)化觀看體驗(yàn)。

簡(jiǎn)單來(lái)說(shuō)，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（RWD）允許設(shè)計(jì)，圖像和代碼適應(yīng)顯示站點(diǎn)的設(shè)備的屏幕尺寸。對(duì)于設(shè)計(jì)師和開(kāi)發(fā)人員而言，面臨的挑戰(zhàn)是根據(jù)不同的設(shè)備和平臺(tái)來(lái)定制網(wǎng)站的用戶(hù)界面和用戶(hù)體驗(yàn)。

估計(jì)目前流量的一部分來(lái)自桌面設(shè)備，手機(jī)或平板電腦很重要。事實(shí)上，相當(dāng)一部分流量將從手機(jī)訪問(wèn)您的網(wǎng)站。據(jù)估計(jì)，到2018年，世界人口的三分之一以上擁有智能手機(jī)。據(jù)TechCrunch估計(jì)，到2020年，全球?qū)⒂?1億智能手機(jī)用戶(hù)。因此，手機(jī)的網(wǎng)站設(shè)計(jì)至關(guān)重要，似乎是最重要的。

網(wǎng)站不僅需要針對(duì)不同的設(shè)備進(jìn)行設(shè)計(jì)，更重要的是它應(yīng)該適應(yīng)不同的網(wǎng)絡(luò)瀏覽器。每個(gè)Web瀏覽器都有其移動(dòng)版本，并且它們傾向于使網(wǎng)站呈現(xiàn)不同的方式。不僅有不同版本的移動(dòng)網(wǎng)絡(luò)瀏覽器需要考慮，而且每個(gè)人都不可能使用最新版本。因此，您的網(wǎng)站的設(shè)計(jì)必須響應(yīng)并適用于不同的設(shè)備，屏幕尺寸，網(wǎng)頁(yè)瀏覽器和版本。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)勢(shì)

    增強(qiáng)的用戶(hù)體驗(yàn)（UX）：這是企業(yè)的長(zhǎng)期解決方案，因?yàn)榫W(wǎng)站可以適應(yīng)任何屏幕尺寸，如手機(jī)，平板電腦，臺(tái)式機(jī)或任何其他設(shè)備。

    共享/鏈接：所有喜好，分享，推文和入站鏈接只有一個(gè)URL。

    SEO優(yōu)勢(shì)：?jiǎn)蝹€(gè)URL累積所有鏈接，頁(yè)面權(quán)限，頁(yè)面排名等。

    低維護(hù)成本：一旦響應(yīng)式網(wǎng)站準(zhǔn)備就緒，就需要很少的維護(hù)，而不是單獨(dú)的移動(dòng)網(wǎng)站的維護(hù)更高。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的挑戰(zhàn)

    影響加載時(shí)間：用戶(hù)必須下載HTML / CSS代碼，并且隨著圖像大部分時(shí)間縮小，而不是調(diào)整大小，它會(huì)增加加載時(shí)間。

    發(fā)展障礙：開(kāi)發(fā)響應(yīng)式網(wǎng)站需要更多的時(shí)間。將現(xiàn)有站點(diǎn)轉(zhuǎn)換為RWD更加復(fù)雜和耗時(shí)。

什么時(shí)候使用RWD有意義？

當(dāng)用戶(hù)意圖在移動(dòng)電話和其他網(wǎng)站中包含的頁(yè)面不超過(guò)50頁(yè)的設(shè)備上沒(méi)有顯著差異時(shí)，RWD可以成為改善用戶(hù)移動(dòng)體驗(yàn)的絕佳解決方案。如果您的網(wǎng)站沒(méi)有太多的頁(yè)面類(lèi)型，例如在不同設(shè)備上具有相同用戶(hù)意圖的文章頁(yè)面或類(lèi)別頁(yè)面，則可以考慮RWD。如果站點(diǎn)復(fù)雜，具有很多頁(yè)面類(lèi)型，但是具有相同的用戶(hù)意圖，并且您計(jì)劃重新設(shè)計(jì)您的站點(diǎn)，則RWD可以是一個(gè)可行的選項(xiàng)。另一方面，如果不同的用戶(hù)在使用不同的設(shè)備時(shí)有不同的目標(biāo)，RWD可能不是很好的合適。

UX是關(guān)鍵：

在設(shè)計(jì)響應(yīng)式網(wǎng)站時(shí)，用戶(hù)的互動(dòng)和體驗(yàn)應(yīng)該是關(guān)鍵考慮因素。使用移動(dòng)設(shè)備的用戶(hù)也可以使用有效的用戶(hù)界面來(lái)正確地設(shè)計(jì)用戶(hù)所要求的內(nèi)容。RWD是關(guān)于為其他設(shè)備創(chuàng)建一個(gè)偉大的UX，而不是將桌面網(wǎng)站轉(zhuǎn)換為移動(dòng)設(shè)備。

采用靈活設(shè)計(jì)：

而不是為具有特定尺寸的最新移動(dòng)設(shè)備設(shè)計(jì)網(wǎng)站，而不是圍繞內(nèi)容構(gòu)建設(shè)計(jì)。桌面上的布局和元素應(yīng)該能夠適應(yīng)移動(dòng)設(shè)備。

圖像應(yīng)該是靈活的：

在設(shè)計(jì)響應(yīng)式網(wǎng)站時(shí)，應(yīng)注意確保圖像靈活，并按照規(guī)模量身定做。底層代碼應(yīng)允許圖像根據(jù)屏幕的大小通過(guò)百分比值進(jìn)行縮放。

導(dǎo)航很重要：

對(duì)于不同的屏幕尺寸，應(yīng)該對(duì)大型菜單和內(nèi)容進(jìn)行整理。無(wú)論是簡(jiǎn)單的下拉菜單，漢堡風(fēng)格還是擴(kuò)展/折疊字段，可以使用水平滾動(dòng)的標(biāo)簽。

用戶(hù)參與至關(guān)重要：

要注意確保用戶(hù)清楚，輕松地了解網(wǎng)站的內(nèi)容。頁(yè)面上的主要用戶(hù)操作應(yīng)該是設(shè)計(jì)頁(yè)面的決定性因素。CTA按鈕應(yīng)該可以通過(guò)拇指來(lái)訪問(wèn)，當(dāng)人們用拇指在手機(jī)上訪問(wèn)頁(yè)面時(shí)，它應(yīng)該是清晰明了的。

易于互動(dòng)：

這是一個(gè)事實(shí)，人們喜歡與他們的手指交互閱讀移動(dòng)設(shè)備上的內(nèi)容。通過(guò)增強(qiáng)與手指的交互來(lái)增強(qiáng)用戶(hù)的能力。在設(shè)計(jì)一個(gè)有用和交互式的UI解決方案時(shí)，應(yīng)該考慮一個(gè)人的手指的大小。舒適的可插拔UI元素的行業(yè)標(biāo)準(zhǔn)是25像素。雖然布局和UI元素必須設(shè)計(jì)牢記手機(jī)屏幕，但它們應(yīng)該足夠靈活，以便在所有設(shè)備上創(chuàng)建愉快的體驗(yàn)。如果觀眾使用許多不同尺寸的設(shè)備，流體縮放可能適合于為各種設(shè)備上的大量用戶(hù)提供更好的體驗(yàn)。

關(guān)鍵

無(wú)論您是從4英寸智能手機(jī)還是40英寸電視屏幕看，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)都可為您的網(wǎng)站提供靈活性和優(yōu)化觀看體驗(yàn)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是為其他設(shè)備創(chuàng)建一個(gè)偉大的UX，而不是將桌面網(wǎng)站轉(zhuǎn)換為與手機(jī)兼容的網(wǎng)站。

在設(shè)計(jì)響應(yīng)式網(wǎng)站時(shí)，應(yīng)注意確保圖像靈活，并按照規(guī)模量身定做。

通過(guò)增強(qiáng)與手指的交互來(lái)增強(qiáng)用戶(hù)的能力。