B端設(shè)計指南 - 柵格

時間：2023-08-31 11:18:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-08-31 11:18:02 來源：網(wǎng)站運(yùn)營

B端設(shè)計指南 - 柵格：在一個B端頁面當(dāng)中，關(guān)于柵格的使用方法，你或多或少都會有所疑惑。它究竟是如何使用？柵格在實(shí)際工作當(dāng)中的使用方法是什么？今天我們就聊聊B端系統(tǒng)當(dāng)中的柵格

老規(guī)矩，我們在講柵格之間，先科普一個知識點(diǎn)，為何會有柵格？
早在平面設(shè)計開始之初，就有對“柵格”的使用記錄。（不過那時不叫柵格，而叫網(wǎng)格）因為印刷機(jī)器以及切割工具的限制，導(dǎo)致在頁面的板式設(shè)計需要一定的出血線用于防止書籍內(nèi)容的缺失，因此出現(xiàn)了當(dāng)時非?；鸨摹镀矫嬖O(shè)計中的網(wǎng)格系統(tǒng)》一書

雖然這是一本非常老的書，但是設(shè)計本身就是相通，將其核心思想用在圖標(biāo)設(shè)計、網(wǎng)頁設(shè)計、B端設(shè)計當(dāng)中都有著明確的指導(dǎo)意義

而在設(shè)計（網(wǎng)頁端、桌面端）產(chǎn)品時，對于空間上的理解，一直以來都是令人頭疼的問題

我們將屏幕當(dāng)中的設(shè)計空間分為橫向 與 縱向兩個維度：



橫向：由于大多數(shù)顯示器都是寬屏的形式，導(dǎo)致我們大多數(shù)頁面內(nèi)容都是通過橫向的方式進(jìn)行列式排布，也就導(dǎo)致縱向?qū)Ш?、二三級?nèi)容分布較多；而市面上所要兼容的橫向尺寸較多，大致分為：1920、1440、1366、1280，而怎樣將如此多的尺寸，擺放不同的元素，這仿佛才是設(shè)計的難點(diǎn)

縱向：屏幕的縱向的空間同樣十分關(guān)鍵，當(dāng)內(nèi)容在橫向無法滿足時，則會增加屏幕縱向的內(nèi)容量。但是我們可以通過瀏覽器的特性，縱向的內(nèi)容通過滾動條進(jìn)行收折，進(jìn)而實(shí)現(xiàn)兼容

柵格的定義

前面說了這么多，我們來聊聊柵格的定義
柵格：是對界面當(dāng)中元素橫向排布的一種模式，主要用于大型區(qū)塊間距的排列，不適用于 圖標(biāo)與文字 間隔的小型元素

這里有兩個重要點(diǎn)：橫向排布：代表著柵格的用法，這也是為什么柵格都是一列一列的原因用于大型區(qū)塊：不是任何內(nèi)容都可以用柵格，比如在 卡片當(dāng)中的圖標(biāo)、文字，更多是要分析整個卡片，將其看作一個整體，如上圖

2.柵格的組成形式
在一個常見的柵格當(dāng)中，一般分為頁邊距、水槽、柵格寬度



頁邊距：是柵格與外層信息的保護(hù)區(qū)域

因為在整個柵格系統(tǒng)當(dāng)中，除了柵格之外，往往還會有其他的內(nèi)容進(jìn)行展示（如上上方圖，柵格日常的使用頁面），而我們正好可以通過頁邊距的方式，將其進(jìn)行區(qū)分。我們以常見的B端界面為例，通過頁邊距可以將側(cè)邊導(dǎo)航與內(nèi)容頁進(jìn)行區(qū)分，保證頁面間的親密性，常見的頁邊距尺寸一般為 20px、24px。

水槽：是確定柵格寬度間的固定間距，通常是幫助柵格內(nèi)的元素進(jìn)行更為合理的排布

水槽目的就是為了統(tǒng)一元素間的距離。比如現(xiàn)在頁面當(dāng)中有兩個卡片的內(nèi)容，而使用水槽，我就可以將這兩個卡片的內(nèi)容，確定其間距（再次強(qiáng)調(diào)柵格用于確定橫向內(nèi)容）方便柵格當(dāng)中元素的信息排列

柵格寬度：是柵格當(dāng)中內(nèi)容所占的基本寬度，一個柵格寬度往往是通過內(nèi)容寬度、頁邊距、水槽排除過后所剩的寬度平均得出，一般會分為 12欄、24欄 兩種方式

柵格寬度的確定，其實(shí)就是一個數(shù)學(xué)題，先給你一個公式（不建議使）：(A×n) – i = W
A：一個柵格單元的寬度；a：一個柵格的寬度；n：正整數(shù)；i：水槽寬度；W：頁面的寬度

雖然公式好像是萬能的，但我不喜歡死記硬背，來深入講一講這個公式背后的邏輯和使用方法

以1440的頁面為例，通常B端產(chǎn)品左側(cè)會有一個導(dǎo)航菜單，假設(shè)為 200px

因此整個柵格的內(nèi)容頁則為1440 - 200=1240px


然后設(shè)定頁邊距寬度為 24px，一個柵格會有兩條頁邊距，剩下寬度則為：1240 - (24*2)=1192px

接著設(shè)定整個柵格為12欄，水槽寬度為8px。因為水槽位于 柵格 的左右兩側(cè)，也就意味著水槽的數(shù)量會比柵格少一列（別問為什么，問就自己去下面圖片數(shù)一數(shù)）也就是1192 - (8*11)=1104px
最后因為在水槽已經(jīng)確定柵格為12欄，整個柵格的寬度則為：1104/12=92px


如果還不能理解，建議跳到開頭，再看一遍

這里有兩個關(guān)鍵點(diǎn)整個柵格的順序不能亂：頁面寬度→頁邊距→水槽→柵格寬度。因為我們的柵格一定是從大到小，從外到里，不然做出來的內(nèi)容很容易無效

將元素擺放在柵格中，還需要注意起始位置與結(jié)束位置。這里教你們一個口訣：起始在左，結(jié)束在右；換句話說就是元素的起始位置必須放在柵格寬度的左側(cè)（也中的紅線）；


結(jié)束位置必須放在柵格寬度的右側(cè)（圖中的藍(lán)線）


這樣的方式也是為了避免很多設(shè)計師知道畫柵格而不會用柵格，出現(xiàn)一些低級錯誤

網(wǎng)頁的布局方式：
布局方式，本質(zhì)上就是去處理窗口寬度與網(wǎng)頁內(nèi)容的關(guān)系

用戶會使用瀏覽器打開不同尺寸的窗口寬度，而網(wǎng)頁內(nèi)容究竟應(yīng)該如何去適應(yīng)這些窗口尺寸？
通常會分為：固定布局、流式布局、自適應(yīng)布局、響應(yīng)式布局

1.固定布局（Static Layout）
固定布局是一種最為簡單的方式，它的設(shè)計邏輯是將頁面當(dāng)中的內(nèi)容“寫死固定”在屏幕上，內(nèi)容不會隨著本身窗口寬度進(jìn)行改變，所有元素都使用 px 作為基礎(chǔ)單位

當(dāng)然在固定布局當(dāng)中，窗口大小與頁面內(nèi)容會存在兩種基本關(guān)系：窗口過大則將頁面元素進(jìn)行居中，窗口過小則展示橫向滾動條

固定布局的好處是這種方式相對簡單，只需將頁面設(shè)計好即可，不會存在太多兼容性的問題（因為也壓根沒有考慮兼容性的相關(guān)問題）
固定布局通常出現(xiàn)在 老舊的政府項目、網(wǎng)頁的登錄注冊中


2.流式布局（Liquid Layout）
流式布局是最基礎(chǔ)的變化布局，它的設(shè)計邏輯是將頁面當(dāng)中的元素設(shè)計成可以流動的“水”，通過在頁面，設(shè)計不同的“杯子”容器來裝下頁面內(nèi)容
這里的“水”一般指的是 文字、圖標(biāo)、以及一些頁面重復(fù)出現(xiàn)的元素。而杯子通常是我們設(shè)計的容器，它高度固定，只會變化其寬度，比如卡片、外層容器控制寬度 等等...
因為“杯子”的限制，也就導(dǎo)致水會根據(jù)杯子的寬度進(jìn)行延展流動，進(jìn)而形成流式布局


使用流式布局可以通過較低的開發(fā)成本，來實(shí)現(xiàn)一個頁面當(dāng)中多尺寸的小范圍適配，如果屏幕尺寸跨度較大，則會比較困難
而流式布局最常使用的方式就是通過柵格系統(tǒng)，來確定整個“杯子”的寬度，進(jìn)而讓“水”能夠在頁面當(dāng)中實(shí)時滾動展示




這里有兩個需要注意的點(diǎn)：
1.在研發(fā)層面，杯子的大小是需要進(jìn)行限制的，通常會去設(shè)定它的最大值與最小值，當(dāng)它超過最大值則居中對齊，當(dāng)他在流式布局當(dāng)中，窗口超過其最大值則固定左側(cè)，右側(cè)空白補(bǔ)充；窗口小于其最小值則展示橫向滾動條
比如與上方同樣的案例，將頁面當(dāng)中內(nèi)容的文字實(shí)現(xiàn)成流式布局，并且將其流體布局的寬度限制為 200px - 120px ，這時則會形成頁面的寬度變化，會導(dǎo)致內(nèi)容發(fā)生直接的變化

2.流動的“水” 需要去考慮它漫出的情況，即在“水杯”高度固定的情況下，整個寬度無法裝下如此多“水”的情況，通常我們可以使用 “...” 進(jìn)行標(biāo)注。這個思路后續(xù)在響應(yīng)式布局當(dāng)中也會體現(xiàn)


3.自適應(yīng)布局（Adaptive Layout）
自適應(yīng)布局是將差別較大的屏幕尺寸，去創(chuàng)建多個不同的設(shè)計稿，每一個設(shè)計稿去對應(yīng) 一個用戶實(shí)際的尺寸范圍。改變屏幕分辨率就可以去切換不同的設(shè)計方案



通俗一點(diǎn)來說，自適應(yīng)就是去單獨(dú)設(shè)計桌面端、平板端、移動端的頁面，并且將它們?nèi)哌M(jìn)行獨(dú)立，而系統(tǒng)通過不同尺寸間的 屏幕斷點(diǎn)/瀏覽器UA等...（實(shí)際前端判斷遠(yuǎn)比這個更加復(fù)雜，但是為了方便理解可以暫且這么認(rèn)為），進(jìn)而適應(yīng)出不同的設(shè)計頁面

而通俗一點(diǎn)來說，自適應(yīng)是使用多套代碼去對應(yīng)多個頁面，并且都是在業(yè)務(wù)非常復(fù)雜的情況下進(jìn)行使用，在國內(nèi)當(dāng)中最常使用便是 桌面端與移動端 的產(chǎn)品

比如 語雀 當(dāng)中的 桌面端與移動端就是一個典型案例，他通過判斷用戶的使用設(shè)備，將頁面拆分為了，桌面端、移動設(shè)備端、小程序（單獨(dú)設(shè)計適配的）。因此只需要將每種設(shè)備的設(shè)計思路分析清楚即可



自適應(yīng)布局與柵格
自適應(yīng)主要是表達(dá)多個設(shè)備尺寸下進(jìn)行切換的 布局方式，在不同的設(shè)備之間，也是需要去使用流式布局以及其他布局方式
而不同的設(shè)備之間，屏幕分辨率的差異就會涉及到一個關(guān)鍵點(diǎn)，屏幕斷點(diǎn)

屏幕斷點(diǎn)
屏幕斷點(diǎn)，又叫媒體查詢 @media，因為在整個設(shè)計當(dāng)中，屏幕尺寸是極其復(fù)雜的，除了我們常見的尺寸：19201080、1440765、1366

用戶還可以通過調(diào)整窗口的大小，進(jìn)而改變網(wǎng)頁尺寸。而屏幕斷點(diǎn)，最主要是判斷屏幕的寬度，來確定 目前的尺寸究竟應(yīng)該采取什么設(shè)計方案

比如在設(shè)計一款成熟的B端產(chǎn)品時，因為商業(yè)的緣故我們作為各大平臺（釘釘、企微、飛書）的ISV（合作上架），產(chǎn)品上架到不同平臺時，需要對不同平臺尺寸進(jìn)行調(diào)整，比如釘釘為1024px、企微為980px、飛書為1280px，這時為了滿足用戶的實(shí)際場景，會將這幾類特殊的尺寸作為屏幕斷點(diǎn)進(jìn)行對應(yīng)的布局設(shè)計，以滿足不同產(chǎn)品當(dāng)中的最佳實(shí)踐

關(guān)于屏幕斷點(diǎn)的媒體查詢，是在前端 CSS3 代碼當(dāng)中，提供給用戶校驗整個屏幕的寬度，比如在下圖前端代碼當(dāng)中，則代表在屏幕尺寸小于480px 時，使用 字體大小為16px



而確定斷點(diǎn)才是這其核心，這里給大家提供兩個思路，實(shí)際設(shè)計當(dāng)中還會更為復(fù)雜：

物理斷點(diǎn)：也就是屏幕當(dāng)中，已經(jīng)劃分好的斷點(diǎn)方式，比如顯示器的全寬大小、不同設(shè)備之間的屏幕分辨率差異
設(shè)計斷點(diǎn)：在設(shè)計過程當(dāng)中，一些必要的屏幕尺寸。比如上方講到不同平臺的設(shè)計問題

其實(shí)屏幕斷點(diǎn)不是最終目的，最終還是想通過屏幕斷點(diǎn)，將頁面當(dāng)中不同的不同元素的處理方式實(shí)現(xiàn)在設(shè)計稿中，如果不需要，完全可以不考慮增加屏幕斷點(diǎn)


4.響應(yīng)式布局（Responsive Layout）
這里先多聊一句，其實(shí)響應(yīng)式的大規(guī)模普及，是源自 2015年 Google 的倡導(dǎo)（可以看到Google旗下的很多產(chǎn)品都采取的響應(yīng)式布局，例如 YouTube），它最初的目的非常簡單，就是為了提高響應(yīng)式在移動終端上的運(yùn)行效率。因為在2015年時，安卓 生態(tài)下的屏幕尺寸多到可怕，以至于需要有一套解決辦法來讓用戶運(yùn)行并使用

響應(yīng)式布局是確保一個頁面當(dāng)中所有的設(shè)備（桌面端、平板端、移動端）都能夠展示出非常滿意的效果，進(jìn)行產(chǎn)生的一種技術(shù)方案。它更像是 流式布局與自適應(yīng)布局 的結(jié)合，它能夠通過對屏幕尺寸的快速響應(yīng)，進(jìn)而對頁面的內(nèi)容進(jìn)行更為細(xì)致的變化

通俗一點(diǎn)來說就是通過一套代碼去實(shí)現(xiàn)多個頁面，并且將多個頁面的內(nèi)容進(jìn)行細(xì)化，進(jìn)而能夠快速適配多個設(shè)備



對于多個設(shè)備，最主要是調(diào)整頁面柵格數(shù)量、水槽寬度、頁面距進(jìn)行適應(yīng)，比如在YouTube當(dāng)中，就是通過響應(yīng)式布局，讓頁面實(shí)時響應(yīng)進(jìn)行處理

響應(yīng)式布局與柵格

比如以 Ant Design Pro的頁面進(jìn)行拆解，你會發(fā)現(xiàn)它在 575、767、991 的尺寸中，頁面布局發(fā)生變化，然后根據(jù)屏幕斷點(diǎn)之間的頁面布局，采用向下兼容的適配方式，Ant design Pro 屏幕斷點(diǎn)可以劃分為320、576、768、992、1200，響應(yīng)策略如下圖：




布局與柵格的關(guān)系

你會發(fā)現(xiàn)布局其實(shí)是依賴于柵格，而柵格的使用，正是由于不同的布局所導(dǎo)致。只有通過柵格，才能夠確定流式布局的比例、響應(yīng)式布局的變化方式，但是在B端產(chǎn)品當(dāng)中，并不是所有頁面都需要使用柵格，經(jīng)?？吹揭恍┳髌芳鋵?shí)是為了柵格而柵格

在B端產(chǎn)品當(dāng)中在，真正使用柵格的地方更多是工作臺、官網(wǎng)，而其他相對復(fù)雜的頁面是沒辦法使用柵格，而對我們每一個產(chǎn)品而言，可以優(yōu)化的點(diǎn)就是在屏幕尺寸較小的情況下，默認(rèn)讓整個產(chǎn)品導(dǎo)航菜單收起，以提供給用戶更多展示內(nèi)容

我是CE青年，一個 2 B 行業(yè) 的 2B 設(shè)計師～
（文章有些久遠(yuǎn)，找不到原圖了，望諒解）