B端設計指南 - 柵格

語言: CN / TW / HK

在一個B端頁面當中,關於柵格的使用方法,你或多或少都會有所疑惑。它究竟是如何使用?柵格在實際工作當中的使用方法是什麼?今天我們就聊聊B端系統當中的柵格

老規矩,我們在講柵格之間,先科普一個知識點,為何會有柵格?

早在平面設計開始之初,就有對“柵格”的使用記錄。(不過那時不叫柵格,而叫網格)因為印刷機器以及切割工具的限制,導致在頁面的板式設計需要一定的出血線用於防止書籍內容的缺失,因此出現了當時非常火爆的《平面設計中的網格系統》一書

雖然這是一本非常老的書,但是設計本身就是相通,將其核心思想用在圖示設計、網頁設計、B端設計當中都有著明確的指導意義

而在設計(網頁端、桌面端)產品時,對於空間上的理解,一直以來都是令人頭疼的問題

我們將螢幕當中的設計空間分為橫向 與 縱向兩個維度:

橫向:由於大多數顯示器都是寬屏的形式,導致我們大多數頁面內容都是通過橫向的方式進行列式排布,也就導致縱向導航、二三級內容分佈較多;而市面上所要相容的橫向尺寸較多,大致分為:1920、1440、1366、1280,而怎樣將如此多的尺寸,擺放不同的元素,這彷彿才是設計的難點

縱向:螢幕的縱向的空間同樣十分關鍵,當內容在橫向無法滿足時,則會增加螢幕縱向的內容量。但是我們可以通過瀏覽器的特性,縱向的內容通過滾動條進行收折,進而實現相容

1.柵格的定義

前面說了這麼多,我們來聊聊柵格的定義

柵格:是對介面當中元素橫向排布的一種模式,主要用於大型區塊間距的排列,不適用於 圖示與文字 間隔的小型元素

這裡有兩個重要點:橫向排布:代表著柵格的用法,這也是為什麼柵格都是一列一列的原因用於大型區塊:不是任何內容都可以用柵格,比如在 卡片當中的圖示、文字,更多是要分析整個卡片,將其看作一個整體,如上圖

2.柵格的組成形式

在一個常見的柵格當中,一般分為頁邊距、水槽、柵格寬度

頁邊距:是柵格與外層資訊的保護區域

因為在整個柵格系統當中,除了柵格之外,往往還會有其他的內容進行展示(如上上方圖,柵格日常的使用頁面),而我們正好可以通過頁邊距的方式,將其進行區分。我們以常見的B端介面為例,通過頁邊距可以將側邊導航與內容頁進行區分,保證頁面間的親密性,常見的頁邊距尺寸一般為 20px、24px。

水槽:是確定柵格寬度間的固定間距,通常是幫助柵格內的元素進行更為合理的排布

水槽目的就是為了統一元素間的距離。比如現在頁面當中有兩個卡片的內容,而使用水槽,我就可以將這兩個卡片的內容,確定其間距(再次強調柵格用於確定橫向內容)方便柵格當中元素的資訊排列

柵格寬度:是柵格當中內容所佔的基本寬度,一個柵格寬度往往是通過內容寬度、頁邊距、水槽排除過後所剩的寬度平均得出,一般會分為 12欄、24欄 兩種方式

柵格寬度的確定,其實就是一個數學題,先給你一個公式(不建議使):(A×n) – i = W

A:一個柵格單元的寬度;a:一個柵格的寬度;n:正整數;i:水槽寬度;W:頁面的寬度

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

以1440的頁面為例,通常B端產品左側會有一個導航選單,假設為 200px

因此整個柵格的內容頁則為1440 - 200=1240px

然後設定頁邊距寬度為 24px,一個柵格會有兩條頁邊距,剩下寬度則為:1240 - (24*2)=1192px

接著設定整個柵格為12欄,水槽寬度為8px。因為水槽位於 柵格 的左右兩側,也就意味著水槽的數量會比柵格少一列(別問為什麼,問就自己去下面圖片數一數)也就是1192 - (8*11)=1104px

最後因為在水槽已經確定柵格為12欄,整個柵格的寬度則為:1104/12=92px

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

這裡有兩個關鍵點整個柵格的順序不能亂:頁面寬度→頁邊距→水槽→柵格寬度。因為我們的柵格一定是從大到小,從外到裡,不然做出來的內容很容易無效

將元素擺放在柵格中,還需要注意起始位置與結束位置。這裡教你們一個口訣:起始在左,結束在右;換句話說就是元素的起始位置必須放在柵格寬度的左側(也中的紅線);

結束位置必須放在柵格寬度的右側(圖中的藍線)

這樣的方式也是為了避免很多設計師知道畫柵格而不會用柵格,出現一些低階錯誤

網頁的佈局方式:

佈局方式,本質上就是去處理視窗寬度與網頁內容的關係

使用者會使用瀏覽器開啟不同尺寸的視窗寬度,而網頁內容究竟應該如何去適應這些視窗尺寸?

通常會分為:固定佈局、流式佈局、自適應佈局、響應式佈局

1.固定佈局(Static Layout)

固定佈局是一種最為簡單的方式,它的設計邏輯是將頁面當中的內容“寫死固定”在螢幕上,內容不會隨著本身視窗寬度進行改變,所有元素都使用 px 作為基礎單位

當然在固定佈局當中,視窗大小與頁面內容會存在兩種基本關係:視窗過大則將頁面元素進行居中,視窗過小則展示橫向滾動條

固定佈局的好處是這種方式相對簡單,只需將頁面設計好即可,不會存在太多相容性的問題(因為也壓根沒有考慮相容性的相關問題)

固定佈局通常出現在 老舊的政府專案、網頁的登入註冊中

2.流式佈局(Liquid Layout)

流式佈局是最基礎的變化佈局,它的設計邏輯是將頁面當中的元素設計成可以流動的“水”,通過在頁面,設計不同的“杯子”容器來裝下頁面內容

這裡的“水”一般指的是 文字、圖示、以及一些頁面重複出現的元素。而杯子通常是我們設計的容器,它高度固定,只會變化其寬度,比如卡片、外層容器控制寬度 等等...

因為“杯子”的限制,也就導致水會根據杯子的寬度進行延展流動,進而形成流式佈局

使用流式佈局可以通過較低的開發成本,來實現一個頁面當中多尺寸的小範圍適配,如果螢幕尺寸跨度較大,則會比較困難

而流式佈局最常使用的方式就是通過柵格系統,來確定整個“杯子”的寬度,進而讓“水”能夠在頁面當中實時滾動展示

這裡有兩個需要注意的點:

1.在研發層面,杯子的大小是需要進行限制的,通常會去設定它的最大值與最小值,當它超過最大值則居中對齊,當他在流式佈局當中,視窗超過其最大值則固定左側,右側空白補充;視窗小於其最小值則展示橫向滾動條

比如與上方同樣的案例,將頁面當中內容的文字實現成流式佈局,並且將其流體佈局的寬度限制為 200px - 120px ,這時則會形成頁面的寬度變化,會導致內容發生直接的變化

2.流動的“水” 需要去考慮它漫出的情況,即在“水杯”高度固定的情況下,整個寬度無法裝下如此多“水”的情況,通常我們可以使用 “...” 進行標註。這個思路後續在響應式佈局當中也會體現

3.自適應佈局(Adaptive Layout)

自適應佈局是將差別較大的螢幕尺寸,去建立多個不同的設計稿,每一個設計稿去對應 一個使用者實際的尺寸範圍。改變螢幕解析度就可以去切換不同的設計方案

通俗一點來說,自適應就是去單獨設計桌面端、平板端、移動端的頁面,並且將它們三者進行獨立,而系統通過不同尺寸間的 螢幕斷點/瀏覽器UA等...(實際前端判斷遠比這個更加複雜,但是為了方便理解可以暫且這麼認為),進而適應出不同的設計頁面

而通俗一點來說,自適應是使用多套程式碼去對應多個頁面,並且都是在業務非常複雜的情況下進行使用,在國內當中最常使用便是 桌面端與移動端 的產品

比如 語雀 當中的 桌面端與移動端就是一個典型案例,他通過判斷使用者的使用裝置,將頁面拆分為了,桌面端、移動裝置端、小程式(單獨設計適配的)。因此只需要將每種裝置的設計思路分析清楚即可

自適應佈局與柵格

自適應主要是表達多個裝置尺寸下進行切換的 佈局方式,在不同的裝置之間,也是需要去使用流式佈局以及其他佈局方式

而不同的裝置之間,螢幕解析度的差異就會涉及到一個關鍵點,螢幕斷點

螢幕斷點

螢幕斷點,又叫媒體查詢 @media,因為在整個設計當中,螢幕尺寸是極其複雜的,除了我們常見的尺寸:19201080、1440765、1366

使用者還可以通過調整視窗的大小,進而改變網頁尺寸。而螢幕斷點,最主要是判斷螢幕的寬度,來確定 目前的尺寸究竟應該採取什麼設計方案

比如在設計一款成熟的B端產品時,因為商業的緣故我們作為各大平臺(釘釘、企微、飛書)的ISV(合作上架),產品上架到不同平臺時,需要對不同平臺尺寸進行調整,比如釘釘為1024px、企微為980px、飛書為1280px,這時為了滿足使用者的實際場景,會將這幾類特殊的尺寸作為螢幕斷點進行對應的佈局設計,以滿足不同產品當中的最佳實踐

關於螢幕斷點的媒體查詢,是在前端 CSS3 程式碼當中,提供給使用者校驗整個螢幕的寬度,比如在下圖前端程式碼當中,則代表在螢幕尺寸小於480px 時,使用 字型大小為16px

而確定斷點才是這其核心,這裡給大家提供兩個思路,實際設計當中還會更為複雜:

物理斷點:也就是螢幕當中,已經劃分好的斷點方式,比如顯示器的全寬大小、不同裝置之間的螢幕解析度差異

設計斷點:在設計過程當中,一些必要的螢幕尺寸。比如上方講到不同平臺的設計問題

其實螢幕斷點不是最終目的,最終還是想通過螢幕斷點,將頁面當中不同的不同元素的處理方式實現在設計稿中,如果不需要,完全可以不考慮增加螢幕斷點

4.響應式佈局(Responsive Layout)

這裡先多聊一句,其實響應式的大規模普及,是源自 2015年 Google 的倡導(可以看到Google旗下的很多產品都採取的響應式佈局,例如 YouTube),它最初的目的非常簡單,就是為了提高響應式在移動終端上的執行效率。因為在2015年時,安卓 生態下的螢幕尺寸多到可怕,以至於需要有一套解決辦法來讓使用者執行並使用

響應式佈局是確保一個頁面當中所有的裝置(桌面端、平板端、移動端)都能夠展示出非常滿意的效果,進行產生的一種技術方案。它更像是 流式佈局與自適應佈局 的結合,它能夠通過對螢幕尺寸的快速響應,進而對頁面的內容進行更為細緻的變化

通俗一點來說就是通過一套程式碼去實現多個頁面,並且將多個頁面的內容進行細化,進而能夠快速適配多個裝置

對於多個裝置,最主要是調整頁面柵格數量、水槽寬度、頁面距進行適應,比如在YouTube當中,就是通過響應式佈局,讓頁面實時響應進行處理

響應式佈局與柵格

比如以 Ant Design Pro的頁面進行拆解,你會發現它在 575、767、991 的尺寸中,頁面佈局發生變化,然後根據螢幕斷點之間的頁面佈局,採用向下相容的適配方式,Ant design Pro 螢幕斷點可以劃分為320、576、768、992、1200,響應策略如下圖:

佈局與柵格的關係

你會發現佈局其實是依賴於柵格,而柵格的使用,正是由於不同的佈局所導致。只有通過柵格,才能夠確定流式佈局的比例、響應式佈局的變化方式,但是在B端產品當中,並不是所有頁面都需要使用柵格,經常看到一些作品集其實是為了柵格而柵格

在B端產品當中在,真正使用柵格的地方更多是工作臺、官網,而其他相對複雜的頁面是沒辦法使用柵格,而對我們每一個產品而言,可以優化的點就是在螢幕尺寸較小的情況下,預設讓整個產品導航選單收起,以提供給使用者更多展示內容

我是CE青年,一個 2 B 行業 的 2B 設計師~

(文章有些久遠,找不到原圖了,望諒解)

Powered by Froala Editor