網(wǎng)頁中的響應(yīng)式設(shè)計(jì)能夠提高協(xié)作效率，提高用戶體驗(yàn)感受，減少開發(fā)成本。但不同的頁面的網(wǎng)頁設(shè)計(jì)布局存在差異，如何合理布局？快速解決響應(yīng)式落地痛點(diǎn)？作者結(jié)合自己過去在響應(yīng)式項(xiàng)目中踩過的坑，希望能夠幫助你。

如果現(xiàn)在面試，問：為什么你們這個(gè)網(wǎng)頁要做響應(yīng)式設(shè)計(jì)？簡(jiǎn)單說一下你設(shè)計(jì)側(cè)的看法。

答：設(shè)計(jì)角度來說，協(xié)作效率提高；各終端用戶體驗(yàn)一致；節(jié)省研發(fā)維護(hù)成本……然后展開巴拉巴拉……

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

一、響應(yīng)式設(shè)計(jì)對(duì)用戶有什么好處？

這個(gè)問題翻譯一下就是響應(yīng)式設(shè)計(jì)的內(nèi)容怎么能讓用戶更好更快地理解？亨利.亞當(dāng)斯（Henry Adams）曾經(jīng)說過：“混沌是自然法則，秩序是人類的夢(mèng)想”。人們是喜歡秩序的，比如紅綠燈、人行道、排隊(duì)等，因?yàn)橹刃蚩梢宰屖虑樽兊酶玫睦斫夂蛨?zhí)行。

響應(yīng)式設(shè)計(jì)的本質(zhì)就是內(nèi)容元素在頁面上通過一定的規(guī)律構(gòu)建了秩序，構(gòu)建這個(gè)秩序的目的是讓用戶更好的理解。那么用戶是如何理解一個(gè)東西的？

01 格式塔理論

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

同樣，我們打開網(wǎng)站進(jìn)行瀏覽或操作時(shí)，第一感受往往就是頁面的整體效果，后續(xù)才會(huì)感知到一些很細(xì)節(jié)的元素。往宏觀來講當(dāng)人們感知一個(gè)物體到由許多元素組成的復(fù)雜對(duì)象時(shí)，人們會(huì)采用有意識(shí)或無意識(shí)的方法將這些部分安排到整個(gè)組織的系統(tǒng)中，而不只是簡(jiǎn)單的元素級(jí)。

官網(wǎng)概括：“在心理現(xiàn)象中，人們對(duì)客觀對(duì)象的感受源于整體關(guān)系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個(gè)統(tǒng)一的整體，部分之和不等于整體，因此整體不能分割”。

上圖是從谷歌截取的一張?jiān)贫鋱D片，某個(gè)時(shí)刻被人們賦予其具體的形狀，有的人認(rèn)為像國家地圖，有的人認(rèn)為像動(dòng)圖。云本身沒有形狀易隨風(fēng)飄散，這個(gè)形狀就是人對(duì)聚集起來云的整體感受。

02 視覺層次結(jié)構(gòu)

視覺層次結(jié)構(gòu)：對(duì)交互式界面的視覺構(gòu)圖的新理解

什么是視覺層次結(jié)構(gòu)，為什么它是重要的？視覺層次結(jié)構(gòu)是內(nèi)容的構(gòu)成布局，以便有效地傳達(dá)信息和含義。視覺層次結(jié)構(gòu)首先會(huì)將觀眾引導(dǎo)至最重要的信息，然后引導(dǎo)至次要內(nèi)容。

通過適當(dāng)?shù)厥褂贸叽?，顏色，形狀，距離，比例和方向來建立構(gòu)圖的意義、概念和氛圍，這是通過創(chuàng)造性地使用確定視覺層次的圖形元素來傳達(dá)的。

Airbnb使用z字型布局設(shè)定視覺焦點(diǎn)

通過利用這種布局，Airbnb 設(shè)計(jì)團(tuán)隊(duì)實(shí)現(xiàn)了建立出一個(gè)簡(jiǎn)潔的視覺層次。傳遞特定信息的區(qū)域被精準(zhǔn)定位并吸引用戶注意

小 結(jié)

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

當(dāng)然布局框架只是整個(gè)產(chǎn)品的基礎(chǔ)骨架，在骨架確定之后，設(shè)計(jì)師才可進(jìn)行下一步的設(shè)計(jì)，如統(tǒng)一的視覺表達(dá)元素，清晰的功能操作，流暢的交互表達(dá)。

二、響應(yīng)式設(shè)計(jì)對(duì)業(yè)務(wù)有什么好處？

作為非互聯(lián)網(wǎng)的用戶，每次更新需重新下載應(yīng)用的成本是很高的。當(dāng)前整個(gè)團(tuán)隊(duì)的業(yè)務(wù)目標(biāo)是獲取流量，臺(tái)灣用戶和大多數(shù)海外用戶相似點(diǎn)是習(xí)慣用谷歌搜索，所以我們考慮在如果在網(wǎng)頁端獲取更多的流量？

針對(duì)谷歌搜索引擎優(yōu)化(簡(jiǎn)稱SEO)，響應(yīng)式設(shè)計(jì)能夠滿足用戶搜索關(guān)鍵詞時(shí)，產(chǎn)品網(wǎng)站能夠出現(xiàn)在搜索結(jié)果頁的前幾名，這個(gè)優(yōu)勢(shì)與當(dāng)前業(yè)務(wù)目標(biāo)一致。

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

開發(fā)成本低：響應(yīng)式的設(shè)計(jì)只需要開發(fā)一套代碼，就可以兼容多種尺寸的終端，不需要開發(fā)單獨(dú)的客戶端版本。同一個(gè)客戶端產(chǎn)品運(yùn)行在不同尺寸的設(shè)備上，使用統(tǒng)一的后臺(tái)系統(tǒng)，一次開發(fā)，多端生效。

產(chǎn)品體驗(yàn)一致：各屏幕展示效果一致，用戶體驗(yàn)一致，不會(huì)出現(xiàn)較大風(fēng)格的改變，面對(duì)不同分辨率的設(shè)備適應(yīng)性更強(qiáng)，最大化提升用戶的操作體驗(yàn)。

業(yè)務(wù)迭代更快：往往不同終端有不同的運(yùn)營系統(tǒng)，一次運(yùn)營動(dòng)作需要操作多次。響應(yīng)式基于同一個(gè)客戶端、后臺(tái)和運(yùn)營系統(tǒng)，一次運(yùn)營多端同步生效，提高工作效率。

三、不同網(wǎng)頁布局易錯(cuò)點(diǎn)

靜態(tài)頁面和自適應(yīng)布局頁面大家都有所了解，這2個(gè)也是市面上最常用的網(wǎng)頁設(shè)計(jì)模式。團(tuán)隊(duì)最后采用哪種布局方式或者幾種布局方式的組合，是根據(jù)展示效果和研發(fā)成本綜合決定的。

01 靜態(tài)布局&自適應(yīng)布局

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

一套布局對(duì)應(yīng)一個(gè)屏幕分辨率，改變屏幕分辨率可以切換不同靜態(tài)布局，但頁面元素不隨窗口大小的調(diào)整發(fā)生變化，內(nèi)容被遮住。

02 響應(yīng)式布局

響應(yīng)式布局設(shè)計(jì)是讓同一個(gè)網(wǎng)頁在不同的屏幕分辨率下有不同的顯示方式。當(dāng)瀏覽器的寬度達(dá)到一個(gè)值（這個(gè)值通常稱為斷點(diǎn)，即布局改變的臨界點(diǎn)）時(shí)，頁面的布局就會(huì)發(fā)生明顯的變化，這就是響應(yīng)式設(shè)計(jì)最重要的特點(diǎn)——分段顯示。

分段顯示就得考慮頁面柵格了，柵格是為了頁面有更規(guī)律的設(shè)計(jì)展示，有疑問的同學(xué)可以查看《合理刪格化建更好的設(shè)計(jì)》。對(duì)接時(shí)也需要說明具體展示方式，現(xiàn)以 w>892px 評(píng)審舉例：

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

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

注意區(qū)別（踩過的坑??）

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

（2）彈性布局&響應(yīng)式布局區(qū)別

彈性布局：以百分比作為頁面的基本單位，內(nèi)容在屏幕的相對(duì)位置進(jìn)行等比例縮放，這種方式不會(huì)產(chǎn)生任何布局重構(gòu)影響，適配簡(jiǎn)單。

注意區(qū)別：

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

結(jié)果：同一個(gè)手機(jī)同一個(gè)設(shè)計(jì)稿，彈性布局文字可能會(huì)比響應(yīng)式布局實(shí)現(xiàn)效果大（踩過的坑??）

03 混合式布局

混合式布局是指往往單一方式的布局無法滿足需求時(shí)，就需要結(jié)合多種布局組合的方式來實(shí)現(xiàn)。以Ant Design、T Design的響應(yīng)方式為例，對(duì)左側(cè)的全局控制區(qū)域進(jìn)行固定柵格，對(duì)右側(cè)的內(nèi)容區(qū)域進(jìn)行流動(dòng)?xùn)鸥竦奶幚矸绞健?/p>

網(wǎng)站鏈接：https://ant.design/docs/spec/layout-cn

其它內(nèi)容補(bǔ)充
上訴幾種設(shè)計(jì)布局并不矛盾，并不是說只能選其中一個(gè)來實(shí)現(xiàn)。某些情況下，自適應(yīng)設(shè)計(jì)是頁面在做響應(yīng)式設(shè)計(jì)的極端情況下的最優(yōu)解，有一部分設(shè)計(jì)元素是必須采用自適應(yīng)設(shè)計(jì)來完成多端適配的需求的。比如

• 與輸入、上傳強(qiáng)相關(guān)的鍵盤（必須是手機(jī)端才會(huì)彈出）
• 移動(dòng)端平臺(tái)規(guī)范的按鈕（比如吸底按鈕位置和尺寸只有移動(dòng)端才有）
• 移動(dòng)端不具備的功能（鼠標(biāo)移入狀態(tài)、鼠標(biāo)點(diǎn)擊狀態(tài)）

四、項(xiàng)目中遇到問題

下面這幾個(gè)問題是做響應(yīng)式界面設(shè)計(jì)常遇到的，具體怎么畫就不多說了，前面有文章鏈接里面有，這篇主要是針對(duì)上篇沒有涉及到的內(nèi)容補(bǔ)充。

01 什么是斷點(diǎn)？

響應(yīng)式頁面中的容器大小是動(dòng)態(tài)的，發(fā)生布局改變的臨界點(diǎn)稱之為斷點(diǎn)。我們可以提供一個(gè)表格，告訴開發(fā)在不同的頁面寬度區(qū)間，對(duì)應(yīng)的布局應(yīng)該是怎么樣的。這些區(qū)間的臨界點(diǎn)，就是「斷點(diǎn)」。

以我目前業(yè)務(wù)舉例，設(shè)計(jì)團(tuán)隊(duì)結(jié)合業(yè)務(wù)柵格化系統(tǒng)確定出3個(gè)斷點(diǎn)值：大屏-PC端、中屏-小屏電腦、小屏-M端，保證產(chǎn)品在各設(shè)備上都具備易讀性。提供給研發(fā)3套設(shè)計(jì)稿，當(dāng)頁面寬度達(dá)到這3個(gè)值時(shí)候，頁面布局發(fā)生改變。

02 如何確定斷點(diǎn)？

在開始設(shè)計(jì)之前，我們可以到后臺(tái)統(tǒng)計(jì)出用戶常用設(shè)備類型的用戶數(shù)據(jù)，再根據(jù)產(chǎn)品覆蓋人群、受眾分類、使用場(chǎng)景、綜合考慮產(chǎn)品內(nèi)容會(huì)優(yōu)先呈現(xiàn)在哪些設(shè)備和平臺(tái)上，有意識(shí)地篩選出常見的設(shè)備類型：手機(jī)、平板、桌面端……

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

谷歌官方文檔提供了谷歌的指導(dǎo)手冊(cè)，Material Design3 更新了 4 個(gè)響應(yīng)式斷點(diǎn)，分別是 600、905、1240、1440，當(dāng)頁面寬度到達(dá)這幾個(gè)數(shù)值的時(shí)候，頁面的中的柵格數(shù)量和布局都會(huì)發(fā)生變化：

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

03 有效內(nèi)容區(qū)最大寬度 ≤ 最大斷點(diǎn)值

斷點(diǎn)值只應(yīng)用于有效內(nèi)容區(qū)域，有效內(nèi)容區(qū)域不會(huì)跟著頁面的寬度無限制變寬，設(shè)計(jì)有效區(qū)域一般是1200或1400。當(dāng)頁面寬度大于這個(gè)值時(shí)，使用邊距的寬度進(jìn)行補(bǔ)充。因?yàn)槿说难劬τ幸欢ǖ囊曇胺秶?dāng)文字超過視野范圍的最大寬度，就需要左右轉(zhuǎn)頭進(jìn)行閱讀，特別是純文字時(shí)候容易串行，閱讀就困難了。

所以電腦屏幕設(shè)計(jì)不會(huì)越來越大，大屏一般是曲面屏也是這個(gè)道理。

Tip：行高經(jīng)驗(yàn)：無論是Word、PPT或公總號(hào)排版時(shí)，文字越小時(shí)，行高越大。一般正文內(nèi)容（文字較?。┰O(shè)置在字高1.5倍，標(biāo)題行高1.2倍。

舉一反三

微信公眾號(hào)網(wǎng)頁端打開時(shí)，內(nèi)容往往集中在中間部分，可能會(huì)有同學(xué)說那是為了和移動(dòng)端體驗(yàn)感一致。但顯示一行的內(nèi)容比移動(dòng)端多，既然為了保持一致，為什么不保持一樣的寬度呢？

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

04 設(shè)計(jì)側(cè)重哪個(gè)端口？

雖然響應(yīng)式在多端都適用，但是我們開始設(shè)計(jì)時(shí)往往會(huì)有側(cè)重點(diǎn)，因?yàn)榭赡艽嬖谀承┘?xì)節(jié)在大屏和小屏的展示樣式是不同的。

桌面優(yōu)先：從桌面端開始向移動(dòng)端設(shè)計(jì)，觸屏端（手機(jī)網(wǎng)頁端頁面展示）主要是PC端頁面的延伸。

移動(dòng)優(yōu)先：從移動(dòng)端向網(wǎng)頁端設(shè)計(jì)。

移動(dòng)端優(yōu)先能夠更好的專注于核心功能，因?yàn)槭謾C(jī)屏幕就那么點(diǎn)大，文案和功能展示肯定盡量精簡(jiǎn)。一個(gè)頁面除了首屏和第二屏，后面點(diǎn)擊率往往越來越低，這也是一直所強(qiáng)調(diào)的「移動(dòng)端優(yōu)先」的策略的由來。

手機(jī)上看 M 設(shè)計(jì)時(shí)會(huì)發(fā)現(xiàn)：方案一和方案二區(qū)別是用戶頭像下面是否有文字。

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

方案一：設(shè)計(jì)形式往往應(yīng)用在用戶評(píng)論區(qū)，因?yàn)榇藭r(shí)內(nèi)容展示不重要，區(qū)分什么內(nèi)容是誰評(píng)論更重要，很顯然方案二可讀性更高

但是方案二的 PC 端相對(duì)來說設(shè)計(jì)不是那么美觀，因?yàn)槠聊蛔銐驅(qū)挘畔w屬整合可以更完善。設(shè)計(jì)感弱于方案一。

所以往往很多需求方說觸屏端（網(wǎng)頁端產(chǎn)品界面）和APP保持一致即可，輕飄飄的一句話后面往往沒有嚴(yán)謹(jǐn)?shù)倪壿嬎伎肌?/p>

05 斷點(diǎn)越多越好？

斷點(diǎn)的數(shù)量越多，產(chǎn)品頁面被拉伸時(shí)的變化就會(huì)越順暢，那么是不是斷點(diǎn)越多越好呢？

針對(duì)這個(gè)問題，開發(fā)同學(xué)回答：不一定。斷點(diǎn)數(shù)量越多，切換過程確實(shí)越順暢，但是開發(fā)的時(shí)間成本也會(huì)相應(yīng)的增加。

對(duì)于純圖文展示這類簡(jiǎn)單的頁面，斷點(diǎn)多少對(duì)研發(fā)同學(xué)來說不是問題，因?yàn)閮H僅考慮頁面縮放而已，但對(duì)于交互復(fù)雜的頁面，可能更容易出現(xiàn)意想不到的問題。人工測(cè)試所以可能會(huì)測(cè)試場(chǎng)景不夠全，加上交互復(fù)雜，出現(xiàn)問題的概率大大上升了，一般一款產(chǎn)品的斷點(diǎn)數(shù)量，在 4-6 個(gè)為宜。

06 網(wǎng)格設(shè)置常用的為什么是8px?

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

當(dāng)前市面上大屏設(shè)備，4這個(gè)數(shù)字的確整除率更高，但由于過于細(xì)碎也會(huì)相應(yīng)的增加決策的成本，也會(huì)讓布局排版變得更為復(fù)雜。

當(dāng)然M端用4、16、24、32是沒有問題的，因?yàn)镸端屏幕相對(duì)較小。

Ant design 、Zan design 、Arco.design 均選擇 8PX 作為最小的網(wǎng)格尺寸。因?yàn)槟壳爸髁鞯娘@示屏橫向和豎向都可以被 8 整除，可以做到完美適配。

在設(shè)計(jì)落地時(shí)，前端一般會(huì)調(diào)用開源的組件庫，這樣就可以保證采用8位原子單位的設(shè)計(jì)與開發(fā)無縫對(duì)接，保證設(shè)計(jì)的還原度。

07 父級(jí)容器對(duì)齊柵格即可

很多時(shí)候我們發(fā)現(xiàn)如果一味的將元素與柵格對(duì)齊，可能會(huì)導(dǎo)致設(shè)計(jì)美觀度降低。這時(shí)候我們需要把整個(gè)元素想象成為一個(gè)更大容器，運(yùn)用盒子的原理，只需要把父級(jí)元素和柵格對(duì)齊即可。

08 內(nèi)容從列開始到列結(jié)束

內(nèi)容元素應(yīng)對(duì)齊柵格而非水槽，但是盒子內(nèi)部的元素可以不與柵格對(duì)齊，內(nèi)部元素也可以有自己的柵格系統(tǒng)。

09 響應(yīng)式多端怎么確定相對(duì)大?。?/h3>

目前國內(nèi)APP而言，內(nèi)容越來越多，字體越來越小。過年回家時(shí)發(fā)現(xiàn)50歲左右的中老年用戶，都已經(jīng)使開始用關(guān)懷模式，可是還要工作10多年的人呢！

大家肯定發(fā)現(xiàn)了比手機(jī)屏幕大的電腦屏幕，字體并沒有變大，這是為什么呢？

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

但如果是對(duì)車機(jī)的適配，一般是放大處理，各個(gè)元素一般是手機(jī)的2倍，才能更好的保障用戶的易讀與易操作的良好體驗(yàn)。

寫在最后

寫這篇文章的目的主要是總結(jié)我22年響應(yīng)式項(xiàng)目中踩過的坑，記錄下來促使我一個(gè)個(gè)去解決。如果作為設(shè)計(jì)你也遇到響應(yīng)式項(xiàng)目，相信你讀了之后肯定會(huì)有收獲。