網頁中的響應式設計能夠提高協作效率，提高用戶體驗感受，減少開發成本。但不同的頁面的網頁設計布局存在差異，如何合理布局？快速解決響應式落地痛點？作者結合自己過去在響應式項目中踩過的坑，希望能夠幫助你。

如果現在面試，問：為什么你們這個網頁要做響應式設計？簡單說一下你設計側的看法。

答：設計角度來說，協作效率提高；各終端用戶體驗一致；節省研發維護成本……然后展開巴拉巴拉……

在上家公司作為面試官時，一個問題十個人至少有九個人回答差不多。如果是你，你怎么挑搭檔呢？

一、響應式設計對用戶有什么好處？

這個問題翻譯一下就是響應式設計的內容怎么能讓用戶更好更快地理解？亨利.亞當斯（Henry Adams）曾經說過：“混沌是自然法則，秩序是人類的夢想”。人們是喜歡秩序的，比如紅綠燈、人行道、排隊等，因為秩序可以讓事情變得更好的理解和執行。

響應式設計的本質就是內容元素在頁面上通過一定的規律構建了秩序，構建這個秩序的目的是讓用戶更好的理解。那么用戶是如何理解一個東西的？

01 格式塔理論

用戶是如何理解一個事物呢？在路邊迎面走來美女，趕緊瞥一眼：哇，氣質真好！這個氣質好正是對這個女生的整體感受；然后你想和她交個朋友，過去加微信，發現這個女生眼睛好大好亮，這就是后續感知到一些細節的元素。所以說我們對一個事物首先是整體感受，其次是細節揣摩。

同樣，我們打開網站進行瀏覽或操作時，第一感受往往就是頁面的整體效果，后續才會感知到一些很細節的元素。往宏觀來講當人們感知一個物體到由許多元素組成的復雜對象時，人們會采用有意識或無意識的方法將這些部分安排到整個組織的系統中，而不只是簡單的元素級。

官網概括：“在心理現象中，人們對客觀對象的感受源于整體關系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個統一的整體，部分之和不等于整體，因此整體不能分割”。

上圖是從谷歌截取的一張云朵圖片，某個時刻被人們賦予其具體的形狀，有的人認為像國家地圖，有的人認為像動圖。云本身沒有形狀易隨風飄散，這個形狀就是人對聚集起來云的整體感受。

02 視覺層次結構

視覺層次結構：對交互式界面的視覺構圖的新理解

什么是視覺層次結構，為什么它是重要的？視覺層次結構是內容的構成布局，以便有效地傳達信息和含義。視覺層次結構首先會將觀眾引導至最重要的信息，然后引導至次要內容。

通過適當地使用尺寸，顏色，形狀，距離，比例和方向來建立構圖的意義、概念和氛圍，這是通過創造性地使用確定視覺層次的圖形元素來傳達的。

Airbnb使用z字型布局設定視覺焦點

通過利用這種布局，Airbnb 設計團隊實現了建立出一個簡潔的視覺層次。傳遞特定信息的區域被精準定位并吸引用戶注意

小 結

簡單來說，利用用戶觀察事物的心理學創建合理的布局，將一些看似互不相干的元素和諧、有序地組織在一起。

當然布局框架只是整個產品的基礎骨架，在骨架確定之后，設計師才可進行下一步的設計，如統一的視覺表達元素，清晰的功能操作，流暢的交互表達。

二、響應式設計對業務有什么好處？

作為非互聯網的用戶，每次更新需重新下載應用的成本是很高的。當前整個團隊的業務目標是獲取流量，臺灣用戶和大多數海外用戶相似點是習慣用谷歌搜索，所以我們考慮在如果在網頁端獲取更多的流量？

針對谷歌搜索引擎優化(簡稱SEO)，響應式設計能夠滿足用戶搜索關鍵詞時，產品網站能夠出現在搜索結果頁的前幾名，這個優勢與當前業務目標一致。

SEO：（英文 Search Engine Optimization）字面理解很簡單的，就是“搜索引擎優化”，最簡單的理解就是“搜索自然排名”。最終目的是要拉開與同行的差距，獲得品牌收益，占領市場。從字面上來看，SEO就是能使網站排名在前，獲得自由精確的流量。

開發成本低：響應式的設計只需要開發一套代碼，就可以兼容多種尺寸的終端，不需要開發單獨的客戶端版本。同一個客戶端產品運行在不同尺寸的設備上，使用統一的后臺系統，一次開發，多端生效。

產品體驗一致：各屏幕展示效果一致，用戶體驗一致，不會出現較大風格的改變，面對不同分辨率的設備適應性更強，最大化提升用戶的操作體驗。

業務迭代更快：往往不同終端有不同的運營系統，一次運營動作需要操作多次。響應式基于同一個客戶端、后臺和運營系統，一次運營多端同步生效，提高工作效率。

三、不同網頁布局易錯點

靜態頁面和自適應布局頁面大家都有所了解，這2個也是市面上最常用的網頁設計模式。團隊最后采用哪種布局方式或者幾種布局方式的組合，是根據展示效果和研發成本綜合決定的。

01 靜態布局&自適應布局

靜態布局是早期常見的設計模式，也被稱為固定布局，即無論屏幕如何變化，都展示一套尺寸設計稿。這種一般應用在對外宣傳的網頁上，比如學校官網、政府官網等，不需操作只是展示信息。
自適應布局可以看做是靜態布局的一種延伸。設計一般出3套設計稿，比如web端（>1024px）一套適配，平板（768-1024）一套適配，手機端（<768px）一套適配。

一套布局對應一個屏幕分辨率，改變屏幕分辨率可以切換不同靜態布局，但頁面元素不隨窗口大小的調整發生變化，內容被遮住。

02 響應式布局

響應式布局設計是讓同一個網頁在不同的屏幕分辨率下有不同的顯示方式。當瀏覽器的寬度達到一個值（這個值通常稱為斷點，即布局改變的臨界點）時，頁面的布局就會發生明顯的變化，這就是響應式設計最重要的特點——分段顯示。

分段顯示就得考慮頁面柵格了，柵格是為了頁面有更規律的設計展示，有疑問的同學可以查看《合理刪格化建更好的設計》。對接時也需要說明具體展示方式，現以 w>892px 評審舉例：

（1）固定柵格&流式柵格

固定柵格具有固定列寬、固定槽寬和固定邊距。在特定的斷點范圍內，內容寬度保持固定，不發生變化；
流式柵格具有流式列寬、固定槽寬和固定邊距。流式柵格具有彈性的內容寬度，其寬度將隨著瀏覽器寬度的變化相應地增大或縮小。拉伸過程中視覺效果相較于固定柵格更流暢

注意區別（踩過的坑??）

• 流式柵格能更好的適應不同分辨率，拉伸過程中的列寬就不一定最小單位的倍數了
• 其寬度將隨著瀏覽器寬度的變化相應地增大或縮?。▽崟r響應）
• 通常來說頁面布局比較簡單單一，復雜的業務不適用

（2）彈性布局&響應式布局區別

彈性布局：以百分比作為頁面的基本單位，內容在屏幕的相對位置進行等比例縮放，這種方式不會產生任何布局重構影響，適配簡單。

注意區別：

舉例比如彈性布局在@1倍圖時字體大小是16px，可以理解：16/375=4.3%，文字占手機屏幕寬度的4.3%，即在不同手機屏幕上文字都是按這個比例來顯示，而響應式設計一般文字在手機上（<768px）顯示都是16px。

結果：同一個手機同一個設計稿，彈性布局文字可能會比響應式布局實現效果大（踩過的坑??）

03 混合式布局

混合式布局是指往往單一方式的布局無法滿足需求時，就需要結合多種布局組合的方式來實現。以Ant Design、T Design的響應方式為例，對左側的全局控制區域進行固定柵格，對右側的內容區域進行流動柵格的處理方式。

網站鏈接：https://ant.design/docs/spec/layout-cn

其它內容補充
上訴幾種設計布局并不矛盾，并不是說只能選其中一個來實現。某些情況下，自適應設計是頁面在做響應式設計的極端情況下的最優解，有一部分設計元素是必須采用自適應設計來完成多端適配的需求的。比如

• 與輸入、上傳強相關的鍵盤（必須是手機端才會彈出）
• 移動端平臺規范的按鈕（比如吸底按鈕位置和尺寸只有移動端才有）
• 移動端不具備的功能（鼠標移入狀態、鼠標點擊狀態）

四、項目中遇到問題

下面這幾個問題是做響應式界面設計常遇到的，具體怎么畫就不多說了，前面有文章鏈接里面有，這篇主要是針對上篇沒有涉及到的內容補充。

01 什么是斷點？

響應式頁面中的容器大小是動態的，發生布局改變的臨界點稱之為斷點。我們可以提供一個表格，告訴開發在不同的頁面寬度區間，對應的布局應該是怎么樣的。這些區間的臨界點，就是「斷點」。

以我目前業務舉例，設計團隊結合業務柵格化系統確定出3個斷點值：大屏-PC端、中屏-小屏電腦、小屏-M端，保證產品在各設備上都具備易讀性。提供給研發3套設計稿，當頁面寬度達到這3個值時候，頁面布局發生改變。

02 如何確定斷點？

在開始設計之前，我們可以到后臺統計出用戶常用設備類型的用戶數據，再根據產品覆蓋人群、受眾分類、使用場景、綜合考慮產品內容會優先呈現在哪些設備和平臺上，有意識地篩選出常見的設備類型：手機、平板、桌面端……

（如果面試遇到這個問題就可以這樣回答啦，有理有據不是拍腦袋決定的）

谷歌官方文檔提供了谷歌的指導手冊，Material Design3 更新了 4 個響應式斷點，分別是 600、905、1240、1440，當頁面寬度到達這幾個數值的時候，頁面的中的柵格數量和布局都會發生變化：

谷歌鏈接：https://m2.material.io/design/layout/understanding-layout.html

03 有效內容區最大寬度 ≤ 最大斷點值

斷點值只應用于有效內容區域，有效內容區域不會跟著頁面的寬度無限制變寬，設計有效區域一般是1200或1400。當頁面寬度大于這個值時，使用邊距的寬度進行補充。因為人的眼睛有一定的視野范圍，當文字超過視野范圍的最大寬度，就需要左右轉頭進行閱讀，特別是純文字時候容易串行，閱讀就困難了。

所以電腦屏幕設計不會越來越大，大屏一般是曲面屏也是這個道理。

Tip：行高經驗：無論是Word、PPT或公總號排版時，文字越小時，行高越大。一般正文內容（文字較?。┰O置在字高1.5倍，標題行高1.2倍。

舉一反三

微信公眾號網頁端打開時，內容往往集中在中間部分，可能會有同學說那是為了和移動端體驗感一致。但顯示一行的內容比移動端多，既然為了保持一致，為什么不保持一樣的寬度呢？

那站酷這個例子更典型了，改版后的站酷文字內容限時是636的寬度，為什么不是1200？就是為了避免閱讀串行的問題，提升閱讀體驗。

04 設計側重哪個端口？

雖然響應式在多端都適用，但是我們開始設計時往往會有側重點，因為可能存在某些細節在大屏和小屏的展示樣式是不同的。

桌面優先：從桌面端開始向移動端設計，觸屏端（手機網頁端頁面展示）主要是PC端頁面的延伸。

移動優先：從移動端向網頁端設計。

移動端優先能夠更好的專注于核心功能，因為手機屏幕就那么點大，文案和功能展示肯定盡量精簡。一個頁面除了首屏和第二屏，后面點擊率往往越來越低，這也是一直所強調的「移動端優先」的策略的由來。

手機上看 M 設計時會發現：方案一和方案二區別是用戶頭像下面是否有文字。

方案二：用戶頭像下面有文字，可以展示更多信息，屏效利用率較高，所以大多數APP推薦頁選擇方案二；

方案一：設計形式往往應用在用戶評論區，因為此時內容展示不重要，區分什么內容是誰評論更重要，很顯然方案二可讀性更高

但是方案二的 PC 端相對來說設計不是那么美觀，因為屏幕足夠寬，信息歸屬整合可以更完善。設計感弱于方案一。

所以往往很多需求方說觸屏端（網頁端產品界面）和APP保持一致即可，輕飄飄的一句話后面往往沒有嚴謹的邏輯思考。

05 斷點越多越好？

斷點的數量越多，產品頁面被拉伸時的變化就會越順暢，那么是不是斷點越多越好呢？

針對這個問題，開發同學回答：不一定。斷點數量越多，切換過程確實越順暢，但是開發的時間成本也會相應的增加。

對于純圖文展示這類簡單的頁面，斷點多少對研發同學來說不是問題，因為僅僅考慮頁面縮放而已，但對于交互復雜的頁面，可能更容易出現意想不到的問題。人工測試所以可能會測試場景不夠全，加上交互復雜，出現問題的概率大大上升了，一般一款產品的斷點數量，在 4-6 個為宜。

06 網格設置常用的為什么是8px?

有人會問為什么要選擇8而不是4？很多問題并不是大家習以為常就是正確的，我們需要知其根本邏輯才能舉一反三！

當前市面上大屏設備，4這個數字的確整除率更高，但由于過于細碎也會相應的增加決策的成本，也會讓布局排版變得更為復雜。

當然M端用4、16、24、32是沒有問題的，因為M端屏幕相對較小。

Ant design 、Zan design 、Arco.design 均選擇 8PX 作為最小的網格尺寸。因為目前主流的顯示屏橫向和豎向都可以被 8 整除，可以做到完美適配。

在設計落地時，前端一般會調用開源的組件庫，這樣就可以保證采用8位原子單位的設計與開發無縫對接，保證設計的還原度。

07 父級容器對齊柵格即可

很多時候我們發現如果一味的將元素與柵格對齊，可能會導致設計美觀度降低。這時候我們需要把整個元素想象成為一個更大容器，運用盒子的原理，只需要把父級元素和柵格對齊即可。

08 內容從列開始到列結束

內容元素應對齊柵格而非水槽，但是盒子內部的元素可以不與柵格對齊，內部元素也可以有自己的柵格系統。

09 響應式多端怎么確定相對大??？

目前國內APP而言，內容越來越多，字體越來越小。過年回家時發現50歲左右的中老年用戶，都已經使開始用關懷模式，可是還要工作10多年的人呢！

大家肯定發現了比手機屏幕大的電腦屏幕，字體并沒有變大，這是為什么呢？

基于對用戶觀察模型的研究分析得出，用戶使用手機距離約為30公分，使用電腦的屏幕大概是40公分，僅是屏幕大小不同。這個差異相對較小，所以設計時往往忽略不計了。

但如果是對車機的適配，一般是放大處理，各個元素一般是手機的2倍，才能更好的保障用戶的易讀與易操作的良好體驗。

寫在最后

寫這篇文章的目的主要是總結我22年響應式項目中踩過的坑，記錄下來促使我一個個去解決。如果作為設計你也遇到響應式項目，相信你讀了之后肯定會有收獲。