響應式設計：最佳實踐和注意事項

響應式網站是適應所有屏幕尺寸和分辨率的網站，不僅適用於台式機，還適用於移動設備、平板電腦，有時甚至是電視。

根據 Statista 的數據，2017 年移動流量佔全球所有流量的 52.64%，這意味著一個沒有針對移動設備進行良好優化的網站正在損失大約一半的流量。 到 2018 年底，預計移動設備的全球流量份額將增長到 79%，這是一個驚人的增長。

沒有移動網站的企業正以驚人的速度落後，因為十分之八的訪問者將停止使用在他們的設備上顯示效果不佳的網站。 用戶點擊返回按鈕並嘗試競爭對手的業務太容易了，谷歌甚至將那些沒有響應的網站在搜索中排名較低。

您可以在此處參加 Google 的移動設備友好測試。

這是否意味著移動設備比桌面設備更重要？ 沒有。83% 的移動用戶表示，如果他們願意，他們應該能夠在桌面上繼續體驗。

看看這個針對移動設備優化的 eBay 版本與沒有針對移動設備優化的情況。 你甚至會考慮非優化版本嗎？

為了設計能夠在當今互聯網上競爭的網站，網頁設計師必須是響應式網頁設計(RWD) 方面的專家。 他們應該從哪裡開始？

響應式網頁設計的移動優先方法

移動優先網頁設計意味著首先設計移動網站，然後開發桌面版本。 這種方法運作良好的原因有很多。

1. 移動網站有更多的可用性問題（這主要是由於缺乏屏幕空間），因此主要關注移動設計更實用且更有效。
2. 擴大移動版本比縮小桌面版本更容易（同樣，因為移動網站空間不足）。
3. 移動優先的網頁設計有助於重新評估視覺和功能上的必要性。

將網站設計為移動優先響應式網站迫使設計師提出許多重要問題，因為可使用的屏幕空間較少。 以下是需要問的問題：

• 這個特性/功能真的有必要嗎？
• 我們如何首先為移動設備設計一些極簡主義的東西，然後再在桌面上很好地擴展？
• 這種視覺效果值得花時間在移動設備上加載嗎？
• 主要目標是什麼，哪些視覺元素可以幫助用戶實現它？

稍後我們將看一些響應式網頁設計示例。 現在，讓我們談談今天哪些設備、屏幕尺寸和網絡瀏覽器是相關的。

響應式網頁設計與哪些屏幕分辨率相關？

以下是全球移動設備、平板電腦和桌面用戶最常見的屏幕分辨率。 如您所見，分辨率範圍很廣，因此目前無論是移動設備、平板電腦還是台式機都沒有佔據市場份額——這告訴我們，設計師在考慮響應式網頁設計時應該考慮所有這些。

• 360x640（小型移動）：22.64%
• 1366x768（普通筆記本電腦）：11.98%
• 1920x1080（大桌面）：7.35%
• 375x667（平均移動）：5%
• 1440x900（平均桌面）：3.17%
• 720x1280（大型移動）：2.74%

就像設備故障一樣，我們應該按位置對數據進行細分，以匹配目標受眾的用戶人口統計數據（或預期的用戶人口統計數據）。 它也值得迎合越來越受歡迎的分辨率，因為雖然某些屏幕尺寸目前並不常見，但它們可能會在未來出現。 這將幫助響應式設計師打造面向未來的用戶體驗，即使市場份額發生變化也能正常工作。

例如，360x640 分辨率（主要對應於使用 Android 的三星設備）在去年增長了 5.43%。 在開始網站設計之前，設計師可以使用這些有價值的見解來決定關鍵的響應斷點。

當今流行哪些 Web 瀏覽器？

響應式網頁設計旨在在任何設備上提供無縫體驗，並且由於不同的網絡瀏覽器以不同的方式呈現網頁，因此必須對網站進行測試以確保它們與各種移動和桌面網絡瀏覽器兼容。

儘管使網站擴展到正確的響應斷點主要是 Web 開發人員的責任，但正是 Web 設計師決定了響應式網站如何適應各種屏幕尺寸以創建最佳用戶體驗。

以下是移動和桌面網絡瀏覽器市場份額的全球細分。

• 鉻：55.04%
• 野生動物園：14.86%
• UC 瀏覽器：8.69%
• 火狐：5.72%
• 歌劇：4.03%
• 互聯網瀏覽器：3.35%

響應式設計不僅僅是“讓一切都適合”——它還涉及適應設備硬件和網絡瀏覽器的功能以及設備分辨率。 這方面的一個例子可能是，雖然 Google Chrome 支持 CSS 屬性overscroll-behavior:它定義了當用戶向視口邊緣滾動過度時會發生什麼），但其他任何網絡瀏覽器都不支持它。

響應式設計最佳實踐

消除摩擦

如前所述，響應式網頁設計的移動優先方法將幫助設計師評估用戶實現其主要目標的真正必要性。

隨著我們構建到平板電腦版本（以及後來的桌面版本），我們可以開始考慮次要目標以及使這些用戶目標可以實現的微交互、用戶流程和 CTA（號召性用語）。 更重要的是，我們首先關注用戶的主要目標，並消除任何對主要目標和次要目標都沒有幫助的不必要摩擦。

主要目標可能是購買產品，而次要目標可能是訂閱時事通訊（這可能會導致以後購買）。

這是消除摩擦的一個很好的例子：由於移動用戶界面通常更難導航，最好切換到移動電子商務商店的單頁結賬，並且只為桌面電子商務商店啟用多步結賬。

拇指設計

從某種意義上說，響應式網頁設計很棘手，用戶將通過點擊與桌面網站進行交互，但通過點擊和滑動與移動版本進行交互。 物理上也存在差異。 桌面用戶通常將他們的計算機放在表面上，而移動用戶將他們的設備握在手中。 這些差異顯著改變了移動 UI 設計師設計點擊目標和用戶與之交互的其他重要 UI 元素的方式。

讓我們看一些例子：

• 人們通常希望主桌面導航位於頂部。 但是，在移動設備上，它應該位於底部。 拇指不能舒適地到達頂部。
• 其他交互元素也應該易於觸及。 這意味著將它們保持在屏幕的中心，因為拇指更難以觸及設備屏幕的側面和角落。
• 為了便於點擊，重要鏈接和 CTA 的高度應至少為 44 像素（較小的點擊目標不利於可用性）。

推薦閱讀：移動可用性基本指南。

利用移動設備的原生硬件

移動硬件（如設備攝像頭或 GPS 服務）並不是專門為原生應用保留的，而且如前所述，響應式網頁設計不僅僅是“讓一切都適合”。 它還與適應設備的功能有關。 就移動網頁設計而言，由於移動設備具有易於使用的攝像頭，因此只要網站利用可用的本機硬件，一些微交互（例如數據輸入）實際上在較小的屏幕上更容易。

讓我們看一些例子：

• 信用卡/充值卡掃描（因為表格在移動設備上通常很棘手）
• 在社交媒體上分享照片，因為媒體已經在您的設備上
• 雙重身份驗證（因為您已經在移動設備上）
• 快速檢查股票/分析（因為移動應用程序簡化了信息）
• 使用語音執行網絡搜索（因為免提比打字更容易）

默認情況下使佈局流暢/自適應

並非每個用戶都會最大化他們的桌面瀏覽器。 這意味著，雖然設計人員需要考慮用戶當前使用的設備的響應斷點，但他們還需要考慮這些斷點之間發生的情況。

響應式斷點應用於將佈局和內容“重排”到新設備，但考慮到兩者之間的所有大小（以防萬一），佈局需要以其他方式流動（即，它們自然地適應/拉伸為瀏覽器調整大小）。

在設計流體/自適應佈局時，請牢記以下提示：

• 百分比單位將允許元素流動。
• 設置最小和最大寬度可以啟用“但不要比這個更小/更大”的場景。
• SVG 圖像格式可以在不損失質量的情況下放大和縮小，並且與分辨率無關（與 JPG 和 PNG 不同，它們不是）。

不要忘記景觀方向

我們之前談到了特定的響應式斷點，但我們還需要考慮這些移動視口也可以橫向顯示。 雖然實現流暢的佈局在技術上會使內容自適應，但丟失相當大的縱向視口可能會阻礙可用性和可訪問性。

導航通常是安全的（實際上有時它們更好，因為用戶通常用兩個拇指導航橫向），但滾動變得更加困難，這不是最佳的，因為用戶需要在橫向上滾動更多。

設計師可能還想考慮設計景觀斷點； 例如，在移動設備上垂直堆疊的平鋪元素可以顯示為帶有左右導航按鈕的滑塊，這意味著用戶不必滾動。

請記住，排版也可以響應

儘管 UX 設計師通常使用像素單位來設計網站，但在實際的 Web 上，一個點並不一定等於一個像素，因為不同的設備具有不同的分辨率。 例如，iPhone X 有 458 PPI（每英寸像素），因此在像素尺寸越來越小的地方，我們能夠在相同的物理空間中實現更清晰的圖形（Apple 稱之為“Retina”技術，Android 稱之為“hDPI”）。

這意味著例如 16 像素的字體大小在某些設備上看起來會更大或更小，具體取決於其分辨率。 Web 開發人員通常會使用 em 單位來定義字體大小，這是一種響應式單位，其中 1em 等於 1 磅。

Zeplin、Sympli、Marvel 和 InVision 等設計移交工具可以幫助設計人員與開發人員就共同責任的事項進行協作。 雖然設計師執行設計，開發人員執行代碼，但作為一個整體，產品設計工作流程是一個團隊努力，需要可靠的溝通。

響應式設計性能優化技巧和最佳實踐

響應式網頁設計不僅關乎它的外觀，還關乎它的行為和感覺。 調整網站以使其在預期設備上加載更快同樣重要。

延遲加載非重要圖像和視頻

圖片和視頻佔網站總下載量的很大一部分，但您不需要一次全部加載。 有兩種情況會延遲媒體的渲染：當用戶在首屏下方滾動時可以加載首屏內容，並且只有在佈局和內容下載後才能下載阻止渲染的媒體。 這種做法稱為延遲加載，其中延遲加載重的、不重要的元素以提高頁面性能。

條件加載

一些網站元素不適合移動用戶，或者至少不值得額外的認知負擔。 我們希望我們的移動網站簡單，因此在某些情況下隱藏元素是有意義的。 話雖如此，我們必須確保加載這些元素時不會浪費瀏覽器資源和帶寬，即使它們是隱藏的； 因此，最佳做法是僅在某些條件下包含這些元素。

再一次，開發人員可以通過代碼實現這一點； 但是，設計人員可以通過傳達某些元素應該存在和不應該存在的時間和地點的條件來提高頁面性能。

響應式圖像

如前所述，某些設備每英寸顯示更多像素，如果未以正確的分辨率導出圖像，可能會導致圖像變得模糊。 根據設備的分辨率，有些需要兩倍 (@2x)、三倍 (@3x) 甚至四倍 (@4x) 大小的圖像。 Web 瀏覽器現在支持<picture>元素，該元素會根據設備選擇正確的圖像分辨率。

設計響應式網站的設計師可以通過確保以當今設備上使用的所有分辨率導出圖像來為正確的設備定製圖像（如果您不確定，請詢問您的開發人員——在響應式網頁設計方面，溝通是關鍵）。

結論

線框圖可以幫助在設計過程的早期消除摺痕，這在採用移動優先方法進行響應式網頁設計時效果很好。 也許有一個需要額外注意的響應式斷點，或者也許有一個概念在移動響應方面並不有效。 最好儘早發現道路上的顛簸（即在添加視覺美感之前）。

Adobe XD、Marvel 和 InVision 等現代設計工具使團隊能夠在真實設備上測試原型，在上下文中討論反饋，並且通常作為一個團隊進行協作，直到佈局適用於所有場景。

採用精益 UX 工作流程，其中響應式設計由內部測試和反饋驅動，將確保用戶體驗在首次呈現給真實用戶之前在所有平台和屏幕分辨率上無縫運行。

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗