繼上一次關于B端界面寬度設置的內(nèi)容以后，現(xiàn)在我們就要談一談另一個 B 端設計師都很關心的話題，B 端的響應式應用。

很多新人在這個問題上深感苦惱，嚴重影響工作的進展，所以下面我們好好展開聊一聊。如果對響應式本身概念不太理解的同學，可以優(yōu)先看看之前這篇分享：

傳送門：一文看懂網(wǎng)頁響應式布局原理

第一步，我們簡單討論一下 B 端響應式是什么的問題。

雖然前面有寫過網(wǎng)頁響應式的分析，但是 B 端產(chǎn)品的作為一個比較特殊的分類，和一般展示型網(wǎng)站的響應式在應用上還是有很多不同點的。

響應式是網(wǎng)站為了讓內(nèi)容適配瀏覽器畫布尺寸而使用的技術，即內(nèi)容的區(qū)域會隨著瀏覽器窗口的變更而變更，從而提升不同用戶、不同場景的使用需求和體驗。

普通展示性站點，主要是對信息要素進行響應式的呈現(xiàn)，包括圖片、文字、背景等內(nèi)容。而 B 端不僅展示的內(nèi)容形式更復雜，還包含大量復雜的圖表、表單、按鈕、組件等元素。

B端的響應式設計不僅僅是讓內(nèi)容能自動匹配顯示而已，還要兼顧操作合理性和用戶體驗，并且這些復雜的設計內(nèi)容在開發(fā)上也有比較多的技術難點。

所以，作為 B 端設計師，如果不能對該領域知識有基本認識，那么在對應項目中就很難做出讓用戶滿意的設計，以及降低項目的推進效率。

解讀響應式設計，最好的參考對象，就是螞蟻 AntDesign 的布局相關規(guī)范了。

地址：https://ant.design/docs/spec/layout-cn

Ant 中，主要應用兩種布局形式，左右工作區(qū)和上下工作區(qū)，響應式規(guī)則主要作用在工作區(qū)中的內(nèi)容區(qū)域中。

在這個區(qū)域中，Ant 采用了 24 列格線（Coloum）、23 列間隔（Gutter）的刪格系統(tǒng)。其中間隔數(shù)值是固定的，內(nèi)容區(qū)域減去 23 列間隔后，剩下的部分等分成 24 個格線。

這是一個自動計算的體系，Gutter 可以通過我們制定，系統(tǒng)會自動根據(jù)實際區(qū)域尺寸計算格線的寬度，大致公式如下：

列寬 = （區(qū)域?qū)?- 23*間距）/ 24

這個公式中，未知數(shù)只有列寬有一個，間距是我們自己定的，只要在瀏覽器中也一定有一個數(shù)值，所以最后計算出列寬也就理所應當了。

柵格系統(tǒng)的基礎應用，就是對內(nèi)容模塊分配指定數(shù)值的 “列”，比如一個組件的寬包含 3 col、4col、5col 或者 12col。也就是說，在同一行中，總共包含 24 col，隨便設計師切割出多少模塊出來，只要最后總數(shù)相加是 24 即可。

所以通過 Ant 的框架來完成 B 端的設計，就是創(chuàng)建好畫布以后，在內(nèi)容區(qū)域創(chuàng)建出對應刪格系統(tǒng)，然后在該刪格體系內(nèi)定義寬高、間距即可，Ant 的框架會自動幫助我們完成響應的功能。

比如，一開始設計的頁面中，創(chuàng)建了 1440px 的畫布，使用左右布局的形式，左側使用 200px 寬的導航欄，右側區(qū)域?qū)挾葹?1192px，間距為 8px，列寬就是 42px。

在這之后，內(nèi)部層次更低的表格、輸入框、標簽欄等元素也會對應實現(xiàn)響應的效果……

講到這里暈了嘛？

暈就對了，再寫下去我也暈（狗頭）。

因為 Ant 還是任何成熟的 B 端響應式框架，都有比較高的理解成本，需要對刪格和前端對應技術特征有一定的了解。再解釋下去，我們就要從底層的 DIV+CSS 講起了。

感興趣的同學可以自己在 Ant 規(guī)范中查看設計、組件中的布局部分，嘗試去理解它們，如果看不明白，就不要再花多余的時間去查資料了，因為欠缺足以理解他們的基礎。

同時，刪格和響應式的共同結合對于前端程序員也有非常高的要求，隨著標準化組件的增加，代碼會越來越難維護，產(chǎn)生的問題也會越來越多。

下面，我會對如何進行 B 端設計給出自己的建議。

響應式的應用，是為了讓業(yè)務內(nèi)容可以正常的顯示，交互操作可以順利的開展，而不是為了適配 Ant 這類框架而適配。

所以，盡量堅持極簡、效率至上的原則。建議新手不要將刪格系統(tǒng)和響應式進行混合使用。

在常規(guī)項目中，我們對響應式功能的應用只需要關注唯一一個要點 —— 視圖拉伸。

“視圖” 是一個專業(yè)術語，可以是手機客戶端開發(fā)中的 View，也可以是網(wǎng)頁前端中的 Div，文本編輯器中的 Block，即選中設計元素時的外部邊框。

將整個響應式規(guī)則簡化，在 B 端的使用環(huán)境中，就是對部分模塊、組件的視圖區(qū)域進行橫向拉伸、延展的過程。

比如下方的圖例，瀏覽器畫布放大以后，內(nèi)容區(qū)域?qū)崿F(xiàn)延伸，從而使得內(nèi)部的模塊、組件、列也發(fā)生對應的寬度變化。

我們一層一層來解釋，首先是內(nèi)容區(qū)域的響應。內(nèi)容區(qū)域的實際寬度，并不是我們手動直接給出的，這和 C 端設計有很大的差異。

它的寬是通過定義左右的間距實現(xiàn)的，即距離左側導航的數(shù)值和右側邊緣的數(shù)值。

在這個基礎上，如果我們定義內(nèi)部的橫向模塊，也不需要定義它具體的寬度像素值，而是把它們用百分比的方式來定義，比如做成3等分，就是每個模塊寬占內(nèi)容區(qū)域的 33.33%。

如果內(nèi)容區(qū)域包含間距，那么每個模塊的實際寬度 = （內(nèi)容寬 - 總間距）/ 3 如下方的案例。

而對于每個模塊內(nèi)的元素來說，原則也是類似的。如果我們在里面添加了標題、副標題，兩個文本段落，那么這兩個文本視圖也可以隨著父級元素的變動而變動。

同理，除了文本以外，還包含輸入框、按鈕等表單元素，也一樣應用這種思路進行響應。

以及，在處理表格的時候，我們也可以將每一列分配對應的寬度比例，保證總和是100%的情況，那么無論你怎么伸縮頁面都可以實現(xiàn)內(nèi)容的合理顯示。

但是，并不是在響應式過程中，我們設計的每個元素都要具備響應式的特征。比如頭像、圖標、小按鈕、定寬標簽等元素，并不會隨著父級元素的變更而變化自己的尺寸，這類元素即定寬元素。

響應式設計，就是用這種擊鼓傳花的方法將寬度一層層定義下去，每個進行響應的元素都根據(jù)父級元素的寬來進行間距、比例的換算，而不能響應的元素，我們確定好它的具體長寬值，確保整個頁面的布局可以靈活的進行調(diào)整。

并且，在上一篇內(nèi)容中，我們提過建議使用最小適配寬度來展開 B 端的設計，原因就是因為每一模塊內(nèi)容的顯示都有它的最小值，所以理論上我們要在設計 B 端界面的過程中，確定該頁面適配的最小寬度（min-width），當小于這個寬度以后，所有頁面元素將不再縮小，使用瀏覽器進度條進行左右的滾動查看內(nèi)容。

對于一般項目，使用這種基礎的響應式方法即可，盡量避免使用 Breakpoint 概念去制作多個響應的布局內(nèi)容，不僅設計工作大量增加，而且后期維護成本極高。

對于想要支持手機訪問的需求來說，我只建議放棄在同一套設計中使用響應式布局適配手機，而是和你們的產(chǎn)品、開發(fā)溝通，提供一套獨立的手機設計內(nèi)容。

最近兩篇內(nèi)容就是關于 B 端創(chuàng)建畫布、寬度適應的基本講解。對于 B 端響應式的說明確實需要大量的鋪墊和基礎說明，用圖文的說明方式還是非常的吃力。

之后，會找時間把這部分內(nèi)容做成視頻或公開課，感興趣的同學，可以加入我們的交流群進行交流，屆時會有最新的安排和通知。