B端的響應(yīng)式概念

第一步，我們簡(jiǎn)單討論一下 B 端響應(yīng)式是什么的問(wèn)題。

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

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

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

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

所以，作為 B 端設(shè)計(jì)師，如果不能對(duì)該領(lǐng)域知識(shí)有基本認(rèn)識(shí)，那么在對(duì)應(yīng)項(xiàng)目中就很難做出讓用戶滿意的設(shè)計(jì)，以及降低項(xiàng)目的推進(jìn)效率。

響應(yīng)式規(guī)則解析

解讀響應(yīng)式設(shè)計(jì)，最好的參考對(duì)象，就是螞蟻 AntDesign 的布局相關(guān)規(guī)范了。

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

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

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

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

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

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

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

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

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

在這之后，內(nèi)部層次更低的表格、輸入框、標(biāo)簽欄等元素也會(huì)對(duì)應(yīng)實(shí)現(xiàn)響應(yīng)的效果……

講到這里暈了嘛？

暈就對(duì)了，再寫(xiě)下去我也暈（狗頭）。

因?yàn)闊o(wú)論是 Ant 還是任何成熟的 B 端響應(yīng)式框架，都有比較高的理解成本，需要柵格和前端對(duì)應(yīng)技術(shù)特征有一定的了解。再解釋下去，我們就要從底層的 DIV+CSS 講起了。

感興趣的同學(xué)可以自己在 Ant 規(guī)范中查看設(shè)計(jì)、組件中的布局部分，嘗試去理解它們，如果看不明白，就不要再花多余的時(shí)間去查資料了，因?yàn)榍啡弊阋岳斫馑麄兊幕A(chǔ)。

同時(shí)，柵格和響應(yīng)式的共同結(jié)合對(duì)于前端程序員也有非常高的要求，隨著標(biāo)準(zhǔn)化組件的增加，代碼會(huì)越來(lái)越難維護(hù)，產(chǎn)生的問(wèn)題也會(huì)越來(lái)越多。

下面，我會(huì)對(duì)如何進(jìn)行 B 端設(shè)計(jì)給出自己的建議。

響應(yīng)式使用建議

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

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

在常規(guī)項(xiàng)目中，我們對(duì)響應(yīng)式功能的應(yīng)用只需要關(guān)注唯一一個(gè)要點(diǎn) —— 視圖拉伸。

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

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

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

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

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

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

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

而對(duì)于每個(gè)模塊內(nèi)的元素來(lái)說(shuō)，原則也是類似的。如果我們?cè)诶锩嫣砑恿藰?biāo)題、副標(biāo)題，兩個(gè)文本段落，那么這兩個(gè)文本視圖也可以隨著父級(jí)元素的變動(dòng)而變動(dòng)。

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

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

但是，并不是在響應(yīng)式過(guò)程中，我們?cè)O(shè)計(jì)的每個(gè)元素都要具備響應(yīng)式的特征。比如頭像、圖標(biāo)、小按鈕、定寬標(biāo)簽等元素，并不會(huì)隨著父級(jí)元素的變更而變化自己的尺寸，這類元素即定寬元素。

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

并且，在上一篇內(nèi)容中，我們提過(guò)建議使用最小適配寬度來(lái)展開(kāi) B 端的設(shè)計(jì)，原因就是因?yàn)槊恳荒K內(nèi)容的顯示都有它的最小值，所以理論上我們要在設(shè)計(jì) B 端界面的過(guò)程中，確定該頁(yè)面適配的最小寬度（min-width），當(dāng)小于這個(gè)寬度以后，所有頁(yè)面元素將不再縮小，使用瀏覽器進(jìn)度條進(jìn)行左右的滾動(dòng)查看內(nèi)容。

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

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