編輯導語：響應式設計成為主流設計趨勢，為什麼所有的web端都需要響應式設計，其目的是什麼？作者從其實際角度出發，分享響應式設計思路及方法，供産品和設計同學參考。

響應式設計概念自2010年提出以來，經過十多年的發展與普及，在我國已經有超30%的占有率，且正在以每年5%的速度，逐漸取代傳統靜态布局網頁。經過斷斷續續近兩個月的時間，我把自己在多年産品設計中積累的經驗，整理分享如下。本文将從實際應用角度，介紹響應式設計思路及方法，供産品和設計師同學參考。

是不是所有的web端産品都需要響應式設計呢？且看分析。

1.1 響應式設計的意義

響應式設計之所以會成為主流趨勢，是因為從各利益相關者角度，皆具有極大的優勢。

從公司角度：一次開發成型，節省開發和運維成本，同時能提升品牌一緻性。

從産品角度：在不同的用戶設備上，保持一緻性的使用體驗，輸出穩定的産品價值。

從用戶角度：不限制設備，不限制使用時間和條件，使用更加便捷。

1.2 網頁布局設計的分類

按照網頁對分辨率的适配程度，把布局設計區分為三類。

A. 固定布局設計

實現方法：内容寬度固定，布局不根據設備分辨率改變。

設計方案：出一套設計方案，以像素做單位。

B. 自适應設計

實現方法：前端寫幾套代碼對應不同類型設備（如pc端、平闆、手機），通過檢測視口分辨率，來判斷當前訪問的是哪種設備，從而顯示對應的代碼。

設計方案：先為每類設備分别出一套設計，然後在一類設備的分辨率範圍内指定元素的兼容方式；同一類設備的分辨率差異較小，因此兼容方式相對簡單。

C. 響應式設計

實現方法：前端隻寫一套代碼，通過媒體查詢，指定不同分辨率下頁面如何顯示。

設計方案：通常需要确定一套主設計方案，然後針對不同分辨率指定布局及元素的兼容方式。

注意：

①B和C中，自适應和響應式隻是歸納叫法，後文中提到的前端布局方法并不一一對應。做一個多分辨率适配産品時，前端布局通常需要多種方法結合，比如最常見的自适應 流式布局的結合。

②很多分享提到，響應式設計是指“一套設計方案，适配所有設備”，這種說法并不完全正确。響應式設計的核心是确保用戶體驗一緻，當産品功能和交互較為複雜時，設計師可能需要輸出多套設計方案。

1.3 各種布局的特點及适用範圍

通過以上分析，顯然不是所有的web端産品都需要響應式設計。應根據産品性質、用戶設備、産品使用場景、公司資源（人力配置、時間預算、資金預算）等因素，合理選擇産品設計方案。

根據産品設計需要，人為地把屏幕分辨率劃分出多個臨界點，這一系列臨界點被稱為屏幕斷點。

2.1 分辨率占比統計

下圖為百度統計的web端分辨率占比，可以看出占比較多的分辨率有：1920、1536、1366、1440、1600等。

下圖為百度統計的移動端分辨率占比，可以看出占比較多的分辨率有：320、414、375、320等。

2.2 各大平台制定的屏幕斷點

微軟的屏幕斷點：

微軟設計文檔中，劃分的顆粒度較粗，僅将分辨率分為小、中、大三段。

Bootstrap的響應式斷點：

極小設備portrait phones（576px，默認）、小型設備landscape phones（≥576px）、中型設備tablets（≥768px）、大型設備desktops（≥992px）、超大設備large desktops（≥200px）。

Ant design 的屏幕斷點：

屏幕斷點劃分為320、576、768、992、1200。

2.3 斷點的應用示例

以下這段代碼，通過媒體查詢的方式，指定了不同分辨率下字體大小的變化。這段代碼對應的布局方案中，屏幕斷點是1024，1100，1280，1366，1440，1680，1920。

通過以上可以看出，屏幕斷點并不是固定的。在産品設計中，可參考成熟設計規範中的斷點，也可根據實際需要定義自己的屏幕斷點。一般可通過用戶調研和市場調研，确定目标用戶所使用的主要設備，以此來定義屏幕斷點。

從實現技術角度，彈性布局、自适應布局、流式布局、響應式布局、網格布局，為多端适配提供了可能性。這部分前端開發的知識，感興趣的同行可自行了解。從技術實現的核心，可以總結出以下6種設計手法。

3.1 調整大小

3.2 重新定位

3.3 重新排列

3.4 顯示/隐藏

例如在移動端，把一部分功能隐藏起來，并通過點擊以浮層等方式顯示。

3.5 替換

例如在移動端，把導航菜單替換為漢堡菜單，把列表替換為卡片等。

3.6 改變架構

例如在電腦端為左右布局，在移動端改變為多級頁面。

其中，前三種多用于屏幕斷點内響應，後三種多用于屏幕斷點間響應。

4.1 擴展策略

在設計方案實施過程中，通常先确定基準分辨率，作為設計尺寸輸出設計方案，再擴展到其他分辨率。分辨率擴展時遵循的策略，一般有以下3種。

優雅降級：優先考慮PC端，其核心是追求産品完美表達，再降級适配到限制更大的移動端設備；

漸進增強：優先考慮移動端，其核心是保證主要功能的完善性，再做增強擴展，目前業界認可度較高；

用戶設備優先：這是我本人在工作中總結出的一種方法，針對自己的産品，如果可确定目标用戶使用的設備中，某分辨率占比較多，我們可以以此為基準分辨率進行設計，再向其他分辨率擴展。

4.2 三種典型頁面框架

上下布局：

頂部為導航，導航以下為内容區。在C端産品或内容型網站中較為常見。

T型布局：

一般頂部為最高層級菜單或跳轉鍊接，左側為二級導航，同時也是核心業務相關的導航。一般用于B端後台類産品、工具類産品、或架構較為複雜的其他産品。

左右布局：

一般應用于産品框架較為扁平，但導航層級較多的情況。可與以上兩種布局互相轉換。

4.3 T型框架的響應式設計過程

T型布局基本包含了其他兩種布局的屬性，故以T型布局為例，詳細介紹響應式設計落地實操方法。

A. 框架層響應

與設計分辨率對比，其他斷點的擴展分别使用了以下方法：

• 較大分辨率——使用的自适應手法：調整大小；
• 較小分辨率——使用的自适應手法：調整大小、顯示/隐藏、替換；
• 更小分辨率——使用的自适應手法：改變架構、替換。

B. 内容區響應

①栅格布局：布局經過嚴格計算，适合大部分B端後台類頁面。

可以看出在栅格響應式中，栅格的寬度、列數，以及每塊元素所占的列數，都會根據分辨率的變化而變化；通過媒體查詢的方式，定義每個斷點對應的列數和元素所占的列數；其核心依然是上面提到的6種方法。

②流式布局：内容區是卡片式流，如圖片、視頻等。

這類布局中，卡片寬度用百分比表示，并設定最大最小尺寸，臨界寬度後改變個數；外邊距寬度（圖中藍色部分）、内邊距寬度（圖中橙色部分）根據設計表達需要，可以改變也可以固定。瀑布流等不規則布局，涉及到定位問題，但基本設計理念一緻。

③針對斷點單獨設計：應用于對視覺表達要求極高，或布局不規律的頁面；本質同自适應布局原理。

4.4 設備差異化交互響應

在設計方案落地過程中，首先調研用戶使用的設備，據此制定出屏幕斷點；篩選出一個典型的分辨率，在該分辨率下輸出設計方案；然後确定如何向其他斷點擴展，最後形成一整套響應式設計方案。

本文由 @周沫 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!