來源|Clippp

Halo，這里是設(shè)計夾，今天分享的是「Web布局設(shè)計」。

整個設(shè)計語言庫從設(shè)計價值觀、設(shè)計法則、布局、視覺、數(shù)據(jù)可視化、動效這6大模塊進(jìn)行構(gòu)建，這里主要從布局、視覺、數(shù)據(jù)可視化這3大模塊進(jìn)行闡述。

參考Ant Design、Element Design、Google Design等設(shè)計體系，結(jié)合已上線官網(wǎng)-展示類、商城-交易類、后臺-功能類、組件測試工具-工具類等Web端產(chǎn)品進(jìn)行研究總結(jié)。

其中Web布局主要從框架布局、頁面層級、柵格系統(tǒng)、Web頁面適配這4個方面來進(jìn)行闡述。

因為每個模塊內(nèi)容長短不一，分開寫一篇文章過短，放一起歸納會更加系統(tǒng)點。

①框架布局

本模塊從設(shè)計原則、基礎(chǔ)布局、擴(kuò)展布局、懶加載這4方面進(jìn)行闡述。

框架布局是頁面的骨架和基礎(chǔ)。在框架確定之后，設(shè)計者才可進(jìn)行下一步的構(gòu)建：統(tǒng)一的視覺元素，清晰的功能操作，具體流程的交互等。

我們主要梳理了基礎(chǔ)層、內(nèi)容層相關(guān)模塊所組合的布局框架。以下主要從基礎(chǔ)布局、擴(kuò)展布局這兩方面進(jìn)行闡述。

1.1 設(shè)計原則

一致性：確保產(chǎn)品布局在結(jié)構(gòu)和視覺的一致性，為用戶提供高度的舒適感。

邏輯性：視覺中的各種分類構(gòu)成具有邏輯思路，結(jié)構(gòu)聯(lián)系緊密且通暢。

可擴(kuò)展性：無論產(chǎn)品功能是簡單還是復(fù)雜，布局框架能夠隨著產(chǎn)品需求的變化進(jìn)行布局結(jié)構(gòu)的延展和擴(kuò)充。

可預(yù)測性：選擇可預(yù)測和可識別的布局，并連接到體驗的每一個環(huán)境中且在適當(dāng)?shù)牡胤揭龑?dǎo)用戶。

1.2 基礎(chǔ)布局

基礎(chǔ)布局包括：上下布局、左右布局、“T”型布局。這三種布局結(jié)構(gòu)相對簡單且常見。

上下布局：上半部分為導(dǎo)航模塊，下半部分為主內(nèi)容模塊。導(dǎo)航欄寬度限制了導(dǎo)航的數(shù)量和文本長度，適用于導(dǎo)航較少、頁面篇幅較長的網(wǎng)站。是使用場景最多的框架布局。

左右布局：頁面左側(cè)為全局導(dǎo)航模塊，右側(cè)為主內(nèi)容模塊。這種布局提高了導(dǎo)航的可見性，也有利于頁面之間的切換，適用于結(jié)構(gòu)簡單的網(wǎng)站。

“T”型布局：常用于社交文章類網(wǎng)站，頂部全局導(dǎo)航承接了所有子入口的功能，內(nèi)容區(qū)域再劃分成菜單欄（或側(cè)邊欄）、主內(nèi)容模塊兩部分。

1.3 擴(kuò)展布局

擴(kuò)展布局包括：“C”型布局、“口”型布局。這兩種布局結(jié)構(gòu)相對復(fù)雜，是基礎(chǔ)布局的拓展，用于承載有大量信息的頁面。

“C”型布局：它是“T”型布局的擴(kuò)展。結(jié)合了水平導(dǎo)航和垂直導(dǎo)航的特點，能更清晰地區(qū)分：常用業(yè)務(wù)功能操作和輔助操作。適用于功能模塊較多、較復(fù)雜的后臺管理網(wǎng)站。

“口”型布局：常用于工具、資訊類網(wǎng)站，它是“C”型布局的擴(kuò)展，增加了側(cè)邊欄模塊。它充分利用了版面的特性，可承載最多的信息及功能，缺點是頁面擁擠，不夠靈活。

1.4 懶加載

指的是在長網(wǎng)頁中延遲加載圖像。頁面滾動到可視區(qū)域中，圖像才會加載出來，是一種加載速度快、能緩解服務(wù)器壓力的方式。

加載時顯示的頁面骨架屏（灰色占位圖），是頁面加載過程中的過渡效果。

試想，在圖片多、頁面長的電商網(wǎng)頁中，如果每一張圖片都需要加載，由于加載數(shù)量過大，會造成長時間白屏或閃爍，有時候頁面甚至?xí)罎?，這就嚴(yán)重影響到了用戶體驗。

②頁面層級

本模塊從背景層、內(nèi)容層、全局控制層、蒙版層、彈出層這 5 方面進(jìn)行闡述。

頁面層級用于規(guī)范頁面元素所屬層級、層級順序及組合規(guī)范。

頁面的基礎(chǔ)層級從底層到頂層的排序，依次為：

Background 背景層、Content 內(nèi)容層、Global control 全局控制層(導(dǎo)航、菜單、側(cè)邊欄等)、Mask 蒙版層、Pop-up 彈出層。

下面以結(jié)構(gòu)相對復(fù)雜的“口”型布局作層級示例：

2.1 背景層

背景層樣式固定，在頁面中永遠(yuǎn)置于頁面底部，并且一般會給予背景層中性色，作用是方便突出內(nèi)容層和全局控制層。

背景層可分為純色背景、圖片背景。

純色背景常用顏色：中性色板的 color1 - #ffffff、color2 - #fafafa、color3 - #f5f5f5。圖片背景又包括圖形、文字、圖片等元素構(gòu)成的背景，主要用于裝飾頁面、引導(dǎo)視覺。

2.2 內(nèi)容層

內(nèi)容層是視圖結(jié)構(gòu)中最核心、最復(fù)雜的一層，它與業(yè)務(wù)強(qiáng)相關(guān)，屬于頁面中第二層級的內(nèi)容。

它承載了業(yè)務(wù)場景中用戶需要獲取的核心信息，以及輔助核心任務(wù)的操作，如：表單填寫、列表對比、詳情展示、信息說明等。

2.3 全局控制層

全局控制層在內(nèi)容層之上，屬于頁面第三層級內(nèi)容，一般在業(yè)務(wù)場景中對整個網(wǎng)站有全局控制及導(dǎo)航的功能，如：導(dǎo)航、菜單、側(cè)邊欄。

2.4 蒙版層

一般和彈出層配合使用，不單獨使用。常用蒙版樣式：不透明度為50%的黑色背景遮罩，color : rgba(0,0,0,0.5)。

作用：用于鎖定內(nèi)容層和導(dǎo)航層操作，突出上方彈窗內(nèi)容，促使用戶高效操作。

2.5 彈出層

指當(dāng)前任務(wù)或內(nèi)容相關(guān)的臨時出現(xiàn)層，優(yōu)先級最高。一般承載當(dāng)前需要臨時處理的任務(wù)，如：對話框組件。

對話框以滑出或者彈出的形式展現(xiàn)給用戶，底部內(nèi)容層不可操控，被蒙版遮罩禁用，在操作需要聚焦的分支流程時使用。

③柵格系統(tǒng)

本模塊從關(guān)于柵格、模塊、間距系統(tǒng)、關(guān)于適配這4方面進(jìn)行闡述。

柵格系統(tǒng)在頁面排版布局、尺寸設(shè)定方面給了設(shè)計者直觀的參考，它讓頁面設(shè)計變得有規(guī)律。

熟練地運用柵格系統(tǒng)，不僅可以減少決策成本、提高設(shè)計理解力，還可以實現(xiàn)響應(yīng)式布局、加速團(tuán)隊協(xié)作并保證視覺還原。

3.1 關(guān)于柵格

輕量級的項目，用12柵格即可滿足設(shè)計需求。但對于業(yè)務(wù)信息量大、信息分組較多的大體量項目，就需要對12列進(jìn)一步細(xì)分，用24柵格系統(tǒng)來滿足其設(shè)計需求。

列（Column）和槽（Gutter）是柵格系統(tǒng)的基本構(gòu)成元素。

Column-列是內(nèi)容的容器，Gutter-水槽用來調(diào)節(jié)相鄰兩個列的間距，把控頁面留白；列寬+列間距+頁面邊距（Margin）= 屏幕水平寬度。

列和列間距的內(nèi)容區(qū)域（Content width）由 N 個列和（N-1）個水槽組成。

這里，我們以最常見的上下布局結(jié)構(gòu)為例，對內(nèi)容進(jìn)行 24 柵格的劃分設(shè)置，12柵格的使用方法也可此類推。

頁面中柵格的 Gutter 為定值，當(dāng)瀏覽器（頁面寬度）在一定范圍內(nèi)拉寬或縮窄時，柵格的 Column 寬度會隨之拉寬或縮窄，但 Gutter 的寬度值固定不變。

3.2 模塊

模塊就是我們的設(shè)計區(qū)塊，可以是一段文字、一張圖片，又或是其他元素。其中，背景/點綴元素并不能算作是設(shè)計模塊，所以無需嚴(yán)格遵循柵格系統(tǒng)。

以 12 柵格系統(tǒng)為例，它可以根據(jù)業(yè)務(wù)需要被等分成2、3、4、6、12份，也可以被不對稱分割為 1:2:1、1:3:2、2:3:3、1:2、3:1、1:5、3:5 等比例。設(shè)計者可以根據(jù)實際需求，自由組合。

3.3 間距系統(tǒng)

柵格系統(tǒng)可以幫助設(shè)計者更好的進(jìn)行版式設(shè)計和內(nèi)容布局，也可以輔助設(shè)計師規(guī)范頁面內(nèi)各種元素的對齊與間距的設(shè)定。為了保持頁面布局的一致性和韻律感，我們需要對間距系統(tǒng)進(jìn)行規(guī)范。

鑒于目前主流桌面設(shè)備的屏幕分辨率，在垂直、水平方向大多可以被 8 整除，而 8 也符合“偶數(shù)原則”，所以使用8作為最小原子足夠普適。

雖然2、4、6、8、10也滿足以上條件，但2、4、6作為基礎(chǔ)間距，會使元素分得過于細(xì)碎，難以把控頁面的節(jié)奏感；把 10 作為基礎(chǔ)間距，間距跨度又會過大。因此，模塊寬度與間距可以用8n的規(guī)則來定義。

我們用 n 表示變量，分別以 4n、8n、10n 的間距作為對比，假定 n=2：

3.4 關(guān)于適配

由于用戶的頁面顯示設(shè)備，不同形態(tài)的布局，適配方式也不同。

Fixed：表示固定寬度，元素寬度為定值，不受頁面寬度的影響；Auto：表示自適應(yīng)寬度，元素寬度隨著頁面寬度的縮放而縮放；Min：表示最小寬度。

3.4.1 基礎(chǔ)布局

上下布局：內(nèi)容模塊可設(shè)計成固定寬度、全屏寬度兩種視覺布局。

固定寬度的上下布局，固定寬度值（Fixed）設(shè)為 1200px 即可滿足多尺寸屏幕適配需求，Auto 區(qū)的寬度則由屏幕的大小決定；全屏寬度的上下布局，需設(shè)置內(nèi)容區(qū)的左右最小邊距（Min）,以防止內(nèi)容區(qū)的信息被遮擋。

左右布局、“T”型布局：內(nèi)容區(qū)都是自適應(yīng)寬度（Auto），兩側(cè)的導(dǎo)航欄、菜單欄、側(cè)邊欄均為固定寬度（Fixed）。

3.4.2 擴(kuò)展布局

“C”型布局、“口”型布局中，內(nèi)容區(qū)都是自適應(yīng)寬度（Auto），兩側(cè)的導(dǎo)航欄/菜單欄、側(cè)邊欄均為固定寬度（Fixed）。

④Web頁面適配

本模塊從響應(yīng)式、中斷點、布局類型、流動布局下的模塊處理、自適應(yīng)這 5 方面進(jìn)行闡述。

4.1 響應(yīng)式

響應(yīng)式 Responsive 是使用一套頁面/代碼適配多個客戶端。

適用場景：從運營和維護(hù)的便利性方面考慮，當(dāng)網(wǎng)站交互少、功能少、升級不頻繁時建議使用響應(yīng)式，如展示類官網(wǎng)等。

實現(xiàn)響應(yīng)的前提條件：

1. 頁面布局具有規(guī)律性，必須建立靈活的網(wǎng)格基礎(chǔ)，元素寬高可用百分比代替固定數(shù)值；

2. 網(wǎng)頁圖片必須是可伸縮的（頁面中圖片不固定寬/高）。

這兩點也是柵格系統(tǒng)本身的典型特點，柵格系統(tǒng)是響應(yīng)式網(wǎng)頁的實現(xiàn)方式。

4.2 中斷點

中斷點，是網(wǎng)頁在收縮的過程中的最小范圍。當(dāng)網(wǎng)頁寬度到達(dá)這個范圍以后，網(wǎng)頁內(nèi)部的元素就要進(jìn)行相應(yīng)的變化，用來適應(yīng)網(wǎng)頁尺寸的變化。

中斷點是基于頁面具體內(nèi)容、主流用戶設(shè)備的分辨率、用戶規(guī)模和成本計算等設(shè)置的。在拉升/壓縮頁面的過程中，無法使用相同的布局且必須改變內(nèi)容展現(xiàn)方式時，產(chǎn)生的關(guān)鍵尺寸節(jié)點即可作為中斷點。

以下斷點以谷歌 Material Design 和 Bootstrap 的斷點為例，僅作參考：

中斷點越多會讓網(wǎng)頁變得更加細(xì)膩、流暢。然而，當(dāng)研發(fā)時間有限、對顯示要求較低時，可選擇常用的斷點設(shè)置即可。

以下我們挑選了三個常用的中斷點數(shù)值作為參考：

4.3 布局類型

基于固定寬度和百分比寬度，我們可以將網(wǎng)頁的布局類型分為：固定布局、流動布局、混合布局。這里的布局是指收縮網(wǎng)頁的時，信息模塊網(wǎng)格的變化模式。

4.3.1 固定布局

固定布局是指在收縮網(wǎng)頁的過程中，列寬和水槽寬固定保持不變。

通常我們會設(shè)置一個最小寬度（PC端常用最小寬度為 1200px）。小于最小寬度頁面底部就會出現(xiàn)橫向滾動條；大于最小寬度則內(nèi)容居中（兩側(cè)留白）。示例如下：

4.3.2 流動布局

當(dāng)窗口縮小時，內(nèi)容將動態(tài)地發(fā)生變化，文本會進(jìn)行換行，元素也會變窄。然而，這些元素在內(nèi)容寬度縮小到下一個中斷點之前，布局是不會變化的。

對用戶來說，擴(kuò)展內(nèi)容的大?。鲃硬季郑┍葦U(kuò)展可見內(nèi)容的數(shù)量（固定布局）更有用。適用場景：流動?xùn)鸥裣到y(tǒng)是編輯內(nèi)容，儀表板，圖像，視頻，數(shù)據(jù)可視化等理想的響應(yīng)策略。

假設(shè)某中斷點為1200，縮放過程中卡片寬高比不變，頁面寬度由 1592px 縮小至 1200px 時的變化如下：

4.3.3 混合布局

混合布局是指固定布局和流動布局組合使用。例如的后臺管理系統(tǒng)（dashboard）側(cè)邊欄是固定布局，右側(cè)內(nèi)容是流動布局。

混合布局在每個維度上有不同的縮放規(guī)則，所以它們不使用統(tǒng)一的縮放比。當(dāng)用戶需要調(diào)整瀏覽器的大小以使內(nèi)容在一個維度上伸縮而在另一個維度上不伸縮時，便使用混合布局。

適用場景：后臺系統(tǒng)設(shè)計、工具型的界面設(shè)計等。

假設(shè)某中斷點為1200，縮放過程中卡片寬高比不變，頁面寬度由 1592px 縮小至 1200px 時的變化如下：

4.4 流動布局下的模塊處理

響應(yīng)式不是簡單的等比縮放。我們要在保證易用性的基礎(chǔ)上，根據(jù)內(nèi)容的重要性靈活布局。流動布局下的模塊處理方式分為 5 種：擠壓-拉伸、左右-上下、 刪減-增加、變換位置、隱藏-展開。

4.4.1 擠壓-拉伸

模塊內(nèi)容隨著屏幕寬度進(jìn)行擠壓或拉伸。

適用場景：適用于文本內(nèi)容、純色背景、按鈕、填選框等伸縮不會發(fā)生變形的元素。

4.4.2 左右-上下

模塊內(nèi)容從左右排列變?yōu)樯舷屡帕小?/p>

適用場景：適用于圖文列表、主內(nèi)容+右側(cè)推薦等所有左右排版的組合。

4.4.3 刪減-增加

移動端空間有限，需對不重要的內(nèi)容（如重復(fù)的快捷入口、推薦鏈接、相關(guān)的廣告等）進(jìn)行刪減。

不同于桌面端網(wǎng)頁，移動端可視區(qū)域相對較小，且受使用環(huán)境等因素的影響較大（如在公交、地鐵中，內(nèi)容過多/多小，不易閱讀及操作）。因此，刪減掉不重要的內(nèi)容，保留主線任務(wù)內(nèi)容極為重要。

可刪減的相關(guān)內(nèi)容不一定只出現(xiàn)在側(cè)邊欄，它也會穿插在主要內(nèi)容模塊附近，以上僅為某種情況的示例，切勿以偏概全。

實際網(wǎng)頁應(yīng)用示例：

4.4.4 變換位置

根據(jù)設(shè)備的寬度、內(nèi)容的重要層級等變換模塊的顯示位置。

適用場景：側(cè)邊欄有次要內(nèi)容模塊（不可刪減的網(wǎng)頁），適配至移動端，可將兩側(cè)內(nèi)容移動至頁面底部（主要內(nèi)容下方）。（網(wǎng)頁端兩欄、三欄布局，適配至移動端變?yōu)閱螜诓季郑?/p>

PC端多欄布局適配至移動端單欄布局中時，模塊的上下順序由模塊的重要層級排序決定。重要級別越高，顯示位置越靠近頁面頂部，反之靠近頁面底部。

實際網(wǎng)頁應(yīng)用示例：

4.4.5 隱藏-展開

內(nèi)容過多時可選擇收起，以彈窗或者單獨一個頁面顯示。

適用場景：桌面端頂部的菜單、導(dǎo)航，在窄屏中收進(jìn)菜單 icon，點擊彈出分類菜單，此乃常用的場景及處理手法；

4.5 自適應(yīng)

自適應(yīng) Adaptive 是為不同客戶端分別提供一套獨立的頁面/前端代碼。

我們可以通過顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）查詢當(dāng)前設(shè)備類型，匹配并顯示相應(yīng)的樣式，讓網(wǎng)頁在不同設(shè)備下實現(xiàn)更好的顯示效果。

適用場景：從頁面?zhèn)€性化、多功能方面考慮，當(dāng)網(wǎng)站功能復(fù)雜、用戶交互頻繁、用戶量較大時建議使用自適應(yīng)，這樣能為用戶提供功能更全面、交互體驗更好的服務(wù)，如電商類網(wǎng)站。