導讀：B端設計可能是下一個風口，目前內卷也很嚴重，由于B端設計師中很多都不太了解前端的技術，這次給大家分享一下最近學習和整理的網頁布局相關的知識，本文會從B端設計師的視角帶大家了解各種布局的知識點，讓我們設計小伙伴在和開發的溝通中有一定話語權。

一文了解布局的相關知識，在與前端開發對接時掌握設計話語權；深度解析B端產品響應式設計的知識點。

一、開發崗位種類和入門知識

開發崗位分成前端工程師和后端工程師。

后端開發工程師主要職責是平臺設計、接口設計和功能實現，在日常工作中與我們設計師的交流不太多。

作為UI設計師的我們，在工作中最常打交道的就是前端工程師。前端開發主要工作是將UI設計師的高保真設計稿通過代碼轉化成可用的前端頁面。前端開發又可細分為web前端開發、原生iOS開發和原生安卓開發。前端開發主要是用JS+CSS完成頁面的構建。

這里簡單介紹一下JS、CSS和HTML。

1. HTML

HTML（HyperText Markup Language）是超文本標記語言。超文本就是超越文本的意思，表示它不僅僅是簡單的文本，它比普通的 .txt 文件要高級。這些記號超越了普通文本的標記，它們對普通文本的修飾，構成了一套規則，這套規則就是 HTML。

以蓋房子類比，必須定義這個房子有多長、多寬，每一塊面積如何規劃，例如哪里是衛生間、哪里是飯廳、哪里是臥室。將這些定義好，網頁也就有了最基本的樣子。

2. CSS

CSS（Cascading Style Sheets）是級聯樣式表。CSS 中的“樣式”就是指外觀。還以蓋房為例，定義好了各個空間，房子也蓋起來了，但還要裝修，例如給客廳貼壁紙、給臥室鋪地板。CSS 就是起裝修作用的，要和 HTML —起配合使用。

3. JavaScript

JavaScript是一種腳本語言，主要用于前端頁面的 DOM 處理。房子已經裝修好，貼上了墻紙，鋪上了地板，桌子、板凳、沙發都已經擺好，一切都很完美?？墒?，一個有生活情趣的住戶時常要買些新家具，或者把茶幾換個位置，這時，移動、添加、減少物件就只能靠 JavaScript 實現。

4. 前端開發CSS單位

前端開發人員所使用的CSS單位包含很多種，我們設計師只需要了解所有單位分成兩類，絕對單位和相對單位。網頁設計中最常使用的單位px像素，就是一種絕對單位。

絕對單位

絕對長度單位是固定的，用任何一個絕對長度表示的長度都將恰好顯示為這個尺寸。設置寬度為2px，不管屏幕變大還是變小都始終顯示2px。

相對單位

相對長度單位規定相對于另一個長度屬性的長度。相對長度單位在不同渲染介質之間縮放表現得更好。

二、布局種類介紹

1. 固定&靜態布局

概念

頁面保持固定的寬度，不會根據瀏覽器或顯示器的寬度大小而變化。開發使用像素這種絕對單位作為單位，頁面按照精確像素展示。

固定布局屬于前20年的技術產物，由于當時的科技水平有限，使用的純平顯示器尺寸類型都較固定，所以當時很多網頁都使用的是固定布局。

優點

設計簡單，不需要考慮屏幕尺寸的限制，使用一種固定的尺寸進行設計即可。

開發簡單，不需要考慮屏幕尺寸的適應問題。

缺點

小屏幕時需要左右滾動才能看到全部內容，大屏幕時兩側留白較多，空間浪費。

代表案例

目前部分網頁依然會使用固定布局設計開發，常見于一些新聞門戶類網站，這一類網頁以大量的圖片和文字資訊為主，如：新浪網、中華網

設計建議

固定布局形式適合一些新聞門戶類等文字內容很多的網站，設計師在設計過程中可以定義一種適合瀏覽的頁面內容區寬度，通常設置為1200px，內容區域居中兩側空間留白。

2. 流式布局

概念

流式布局（Liquid）的特點（也叫”Fluid”) 是頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。網頁中主要的劃分區域的尺寸使用百分數。

頁面中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置頁面主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。

優點

布局保持不變，內容跟隨頁面寬度變化去做變化，內容會在大屏和小屏幕之間的寬度變化而變化，能夠適應大屏和小屏之間的顯示。

缺點

內部字體無法跟隨變化大小

如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。

代表案例

阿里云網頁版在低于750px分辨率時采用流式布局方式。

設計建議

流式布局在設計中使用頻率較少，在設計中需要注意寬度變化后導致的內容高度變化，設計時可以考慮做一種最大寬度的效果和最小寬度的效果。

3. 自適應布局

概念

自適應布局是分別為不同的屏幕分辨率定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態局部（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化?？梢园炎赃m應布局看作是靜態布局的一個系列。

優點

在多個不同尺寸設備終端下查看網頁內容，并且在小屏幕下也能保證相對好的閱讀體驗，對于不同的分辨率能夠靈活的進行操作應用

通過單一的URL地址收集所有的社交分享鏈接。你可以為創建更好、更友好的網站而做出積極貢獻。

缺點

設計工作量大，需要根據不用的頁面設計不同寬度的設計稿

頁面存在多個版本，每個版本都必須單獨更新。通常，設計師需要針對6種最常見的屏幕寬度進行設計。320、480、760、960、1200和1600dp。而且，這個數字還在不斷增長，這使得設計師在現場維護方面的工作變得更加艱辛和耗時。

代表案例

Amazon在自己的頁面中使用了部分寬度自適應的方法，與使用自適應網頁設計的其他網站類似，亞馬遜更加鼓勵用戶下載其官方APP。據報道，通過采用自適應設計，亞馬遜移動端的訪問速度比以往的響應式網頁設計提高了40%。

設計建議

對于UI設計師而言，一旦團隊確定使用自適應布局開發產品，就需要做多套設計稿尺寸。對于自適應布局而言，就是根據不同的頁面寬度加載不同的頁面。

常用的設計尺寸使用600, 840, 960, 1280, 1440, 和1600dp作為斷點，這里的斷點個數和尺寸可以根據實際情況靈活去變化，主要是根據目前終端所在的寬度進行選擇，例如產品目標用戶使用筆記本的數量多，可以將1366作為斷點。

4. 響應式布局

概念

隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果。

對CSS編寫者而言，在實現上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用?！謩e為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。即：創建多個流體式布局，分別對應一個屏幕分辨率范圍?？梢园秧憫讲季挚醋魇橇魇讲季趾妥赃m應布局設計理念的融合。

優點

響應式布局設計產品能夠給用戶帶來無縫的體驗感，無論使用哪種設備（臺式機，移動設備等），訪客都將獲得相同的無縫體驗。即使當它們從一種設備過渡到另一種設備時，也會給人一種熟悉和信任的感覺。

對于B端產品來說，跨終端辦公是今后的趨勢。那么響應式設計對于B端產品來說尤為重要，實現同一個頁面在pc和pad上都能夠流暢查看且操作。

缺點

響應式網頁設計最大的擔憂之一是加載時間。響應性網站會為所有設備加載信息，而不僅僅是訪問者正在查看您網站的設備信息。

要匹配足夠多的屏幕大小，工作量很大，設計也需要多個版本。

代表案例

蘋果官網

設計建議

與自適應一樣，對于UI設計師而言，一旦團隊確定使用響應式布局開發產品，就需要做多套設計稿尺寸。每套設計稿在不同尺寸下設計元素以及導航要發生相應變化，比如在寬度縮小到750，考慮設備為移動端，內容在設計側考慮移動端規范，需要遵循移動端的導航與用戶習慣。

在實操過程中，我們需要更多分析競品以及采用響應式布局的其他產品頁面，并且能夠熟悉掌握各個終端的設計規范。

三、網頁響應式設計策略

不同斷點間屏幕上的界面相互切換適應的策略有：展現、轉變、分割、重排、擴展和移位。

1、展現，小屏幕上隱藏的UI信息在屏幕增大時可以展現出來，如下圖所示本來隱藏在手機側邊導航中的菜單項在平板的左側直接顯示出來了。這一點也和以600為分界的策略相呼應，在更大的屏幕上直接顯示出兩級信息：

2、轉變，界面元素從一個組件變為另一個組件，這一點也說明組件的使用并不是一成不變的，可以根據屏幕的大小選擇合適的組件。如下圖所示，側邊導航的菜單項可能在大屏上顯示為標簽；小屏幕上的文字列表項可以在大屏上顯示為圖片網格列表：

3、分割，分層的信息在一個大的空間里鋪開：

4、重排，界面元素可以重新排布以填滿新的空間：

5、拓展，界面元素在大屏幕上展開為更大的尺寸：

6、移位，界面元素調整到更合適的位置：

四、B端產品的響應式介紹

1. 布局

目前有很多大廠商都出了自己的B端系統，如Arco、element。解讀響應式設計，我在這里選擇了 AntDesign 的布局相關規范。

Ant design中，主要應用了兩種典型的適配布局形式，左右布局和上下布局，響應式規則主要作用在工作區中的內容區域中。

在這個區域中，Ant 采用了 24 列柵格（Coloum）、23 列水槽（Gutter）的柵格系統。其中水槽數值是固定的，內容區域減去 23 列間隔后，剩下的部分等分成 24 個格線。

2. 柵格系統

柵格系統可以讓你依靠秩序與邏輯去完成設計。

柵格系統優勢：

減少決策成本提高設計理解力：

柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規律，從而減少了設計決策成本；例如發送消息，預訂酒店房間或乘車。用戶能夠連貫的理解并找到找到下一條信息或下一步要采取的步驟。

響應化：

使用產品時，人們通常會在多個設備之間切換，以完成該產品的單個任務。所以響應式設計不應該是一種奢侈品，而是一種必需品。這意味著設計師不能再為單個設備的屏幕構建。多設備環境迫使設計人員根據動態網格系統進行思考，而不是固定寬度。使用網格可以跨不同屏幕尺寸的多個設備創建連貫的體驗。

加速團隊協作設計：

當多位設計師共同設計產品時，一個統一標準就變得尤為重要。網格系統有助于將界面設計工作分開，因為多位設計師可以在統一的布局下進行不同部分工作，并且無縫集成并保持連貫。

加速開發并保證視覺還原：

大多數設計項目的落地，涉及到設計者和開發者之間的溝通協作。柵格化提高了頁面布局的一致性；從而提升了整個設計開發流程的效率、并能幫助開發者實現較為理想的設計還原。2.柵格系統應用

列和槽（Columns and Gutters）

柵格系統的基礎應用，就是對內容模塊分配指定數值的 “列”，比如一個組件的寬包含 3 列、4列、或者 12列。在同一行中，總共包含 24 列，橫向的元素按照設計師設計的大小比例平分這24列。

列的數量越多，頁面就會被分割的越“碎”，在頁面設計時就會越難把控，適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的頁面設計。

頁面邊距（Side Margins）

在響應式設計中，你選擇了一個頁面邊距之后，縮小頁面寬度時頁面還是會有你設置的最小頁面邊距，直到到達下一個響應點（breakpoint）。當你增大頁面寬度時，頁面就有更多的頁面邊距，直到頁面寬度到達下一個響應點（breakpoint）。

模塊

模塊就是頁面中的設計區域，可以是一段文字，一張圖片，或是其他更加豐富的元素。背景元素并不能算作是設計模塊，所以并不需要遵循柵格系統。模塊的定義是很靈活的，它可以是個小的單位或是元素，也可以是一個元素豐富的區塊。

創建好畫布以后，在需要響應式的區域創建出對應尺寸的24柵格系統，一個24柵格系統可以根據業務需要被2等分、3等分、4等分、6等分、12等分，然后在該柵格體系內定義寬高、間距即可，Ant 的框架會自動幫助我們完成響應的功能，具體采用哪種比例的組合需要我們根據自己業務需求來定。

3. 響應式設計方法

第1步：確定列的數量

根據頁面內容復雜程度確定列的數量。

根據前端框架確定列的數量，例如ant使用24列柵格。

第2步：定義水槽和邊距

確定頁面邊距，通過邊距算出水槽的寬度。

第3步：設計工具布局設置

figma或者sketch都有設置布局的功能，這里以sketch為例展開：

利用 sketch 的布局設置功能，即可快速搭建出網格系統的參考布局，在平時做設計的過程中，可以經常使用 Ctrl+L 快捷鍵切換布局的顯示，提高設計效率。

Total Width：

就是內容區域（Container）的值

Offset：

表示柵格的偏移量，我們只要設定完成以后按Center按鈕即可，會自動居中；

Number of Columns：

就是柵格數

Gutter on outside：

是非常重要的設置，勾選以后才能跟前端的柵格算法匹配。

Gutter Width：

就是柵格之間的間距

Columns Width：

就是柵格的寬度

第4步：設置斷點

斷點是自定義屏幕的寬度范圍，在不同范圍下確定不同的布局規則，這是為了適應不同的設備和屏幕尺寸。

先從 Break Point斷點的個數來看，Sales Force 的斷點個數最少，只有3個。個人認為的原因是 Sales Force 的用戶群體使用的都是PC端，因為大多為后臺操作，所以 Break Point 較少，而且從開發成本來看，斷點越多，規則越復雜，意味著研發成本越高。而其他三家都有自己的硬件設備，為了設計能更好的服務于全端的設備，所以斷點個數較多。

根據設計稿常見尺寸，我們可以得出下面結論：

• 0-599px 大致為手機適配
• 600-1023 大致為平板適配
• 1024-1439 大致為筆記本電腦
• 適配1440+ 大尺寸適配

經過多年實踐，以這幾種尺寸作為斷點，是不會有錯的。

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

題圖來自Unsplash，基于CC0協議