寫在前面

整個設計語言庫從設計價值觀、設計法則、布局、視覺、數據可視化、動效這 6 大模塊進行構建，這里主要從布局、視覺、數據可視化這 3 大模塊進行闡述。

參考 Ant Design、Element Design、Google Design 等設計體系，結合已上線 官網-展示類、商城-交易類、后臺-功能類、組件測試工具-工具類 等 Web 端產品進行研究總結。

2020-2021 年前公司項目 1.0 版本，由于互聯網領域更新迭代迅速，里面部分內容待完善、驗證、更新，不足之處，歡迎指正。

其中 Web 布局主要從框架布局、頁面層級、柵格系統、Web 頁面適配這 4 個方面來進行闡述。

更多干貨：

注意

本篇文章較長，請大家做好心理準備。因為每個模塊內容長短不一，分開寫一篇文章過短，放一起歸納會更加系統點。版權聲明：最終解釋權歸前司所有。

一、框架布局

本模塊從設計原則、基礎布局、擴展布局、懶加載這 4 方面進行闡述。

框架布局是頁面的骨架和基礎。在框架確定之后，設計者才可進行下一步的構建：統一的視覺元素，清晰的功能操作，具體流程的交互等。

我們主要梳理了基礎層、內容層相關模塊所組合的布局框架。以下主要從基礎布局、擴展布局這兩方面進行闡述。

1. 設計原則

一致性：確保產品布局在結構和視覺的一致性，為用戶提供高度的舒適感。

邏輯性：視覺中的各種分類構成具有邏輯思路，結構聯系緊密且通暢。

可擴展性：無論產品功能是簡單還是復雜，布局框架能夠隨著產品需求的變化進行布局結構的延展和擴充。

可預測性：選擇可預測和可識別的布局，并連接到體驗的每一個環境中且在適當的地方引導用戶。

2. 基礎布局

基礎布局包括：上下布局、左右布局、“T”型布局。這三種布局結構相對簡單且常見。

1. 上下布局：上半部分為導航模塊，下半部分為主內容模塊。導航欄寬度限制了導航的數量和文本長度，適用于導航較少、頁面篇幅較長的網站。是使用場景最多的框架布局。
2. 左右布局：頁面左側為全局導航模塊，右側為主內容模塊。這種布局提高了導航的可見性，也有利于頁面之間的切換，適用于結構簡單的網站。
3. “T”型布局：常用于社交文章類網站，頂部全局導航承接了所有子入口的功能，內容區域再劃分成菜單欄（或側邊欄）、主內容模塊兩部分。

3. 擴展布局

擴展布局包括：“C”型布局、“口”型布局。這兩種布局結構相對復雜，是基礎布局的拓展，用于承載有大量信息的頁面。

1. “C”型布局：它是“T”型布局的擴展。結合了水平導航和垂直導航的特點，能更清晰地區分：常用業務功能操作和輔助操作。適用于功能模塊較多、較復雜的后臺管理網站。
2. “口”型布局：常用于工具、資訊類網站，它是“C”型布局的擴展，增加了側邊欄模塊。它充分利用了版面的特性，可承載最多的信息及功能，缺點是頁面擁擠，不夠靈活。

4. 懶加載

指的是在長網頁中延遲加載圖像。頁面滾動到可視區域中，圖像才會加載出來，是一種加載速度快、能緩解服務器壓力的方式。加載時顯示的頁面骨架屏（灰色占位圖），是頁面加載過程中的過渡效果。

試想，在圖片多、頁面長的電商網頁中，如果每一張圖片都需要加載，由于加載數量過大，會造成長時間白屏或閃爍，有時候頁面甚至會崩潰，這就嚴重影響到了用戶體驗。

二、頁面層級

本模塊從背景層、內容層、全局控制層、蒙版層、彈出層這 5 方面進行闡述。

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

頁面的基礎層級從 底層 到 頂層 的排序，依次為：Background 背景層、Content 內容層、Global control 全局控制層(導航、菜單、側邊欄等)、Mask 蒙版層、Pop-up 彈出層。

下面以結構相對復雜的“口”型布局作層級示例：

1. 背景層

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

背景層可分為純色背景、圖片背景。純色背景常用顏色：中性色板的 color1 - #ffffff、color2 - #fafafa、color3 - #f5f5f5。圖片背景又包括圖形、文字、圖片等元素構成的背景，主要用于裝飾頁面、引導視覺。

2. 內容層

內容層是視圖結構中最核心、最復雜的一層，它與業務強相關，屬于頁面中第二層級的內容。

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

3. 全局控制層

全局控制層在內容層之上，屬于頁面第三層級內容，一般在業務場景中對整個網站有全局控制及導航的功能，如：導航、菜單、側邊欄。

4. 蒙版層

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

作用：用于鎖定內容層和導航層操作，突出上方彈窗內容，促使用戶高效操作。

5. 彈出層

指當前任務或內容相關的臨時出現層，優先級最高。一般承載當前需要臨時處理的任務，如：對話框組件。

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

3. 柵格系統

本模塊從關于柵格、模塊、間距系統、關于適配這 4 方面進行闡述。

柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規律。

熟練地運用柵格系統，不僅可以減少決策成本、提高設計理解力，還可以實現響應式布局、加速團隊協作并保證視覺還原。

①關于柵格

輕量級的項目，用 12 柵格即可滿足設計需求。但對于業務信息量大、信息分組較多的大體量項目，就需要對 12 列進一步細分，用 24 柵格系統來滿足其設計需求。

列（Column）和槽（Gutter）是柵格系統的基本構成元素。Column-列 是內容的容器，Gutter-水槽 用來調節相鄰兩個列的間距，把控頁面留白；列寬+列間距+頁面邊距（Margin）= 屏幕水平寬度。列和列間距的內容區域（Content width）由 N 個列和（N-1）個水槽組成。

這里，我們以最常見的上下布局結構為例，對內容進行 24 柵格的劃分設置，12 柵格的使用方法也可此類推。頁面中柵格的 Gutter 為定值，當瀏覽器（頁面寬度）在一定范圍內拉寬或縮窄時，柵格的 Column 寬度會隨之拉寬或縮窄，但 Gutter 的寬度值固定不變。

②模塊

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

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

③間距系統

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

鑒于目前主流桌面設備的屏幕分辨率，在垂直、水平方向大多可以被 8 整除，而 8 也符合“偶數原則”，所以使用 8 作為最小原子足夠普適。雖然 2、4、6、8、10 也滿足以上條件，但 2、4、6 作為基礎間距，會使元素分得過于細碎，難以把控頁面的節奏感；把 10 作為基礎間距，間距跨度又會過大。因此，模塊寬度與間距可以用 8n 的規則來定義。

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

④關于適配

由于用戶的頁面顯示設備，不同形態的布局，適配方式也不同。

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

基礎布局

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

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

左右布局、“T”型布局：內容區都是自適應寬度（Auto），兩側的導航欄、菜單欄、側邊欄均為固定寬度（Fixed）。

擴展布局

“C”型布局、“口”型布局中，內容區都是自適應寬度（Auto），兩側的導航欄/菜單欄、側邊欄均為固定寬度（Fixed）。

4. Web 頁面適配

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

①響應式

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

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

實現響應的前提條件：

1. 頁面布局具有規律性，必須建立靈活的網格基礎，元素寬高可用百分比代替固定數值；
2. 網頁圖片必須是可伸縮的（頁面中圖片不固定寬/高）。

這兩點也是柵格系統本身的典型特點，柵格系統是響應式網頁的實現方式。

②中斷點

中斷點，是網頁在收縮的過程中的最小范圍。當網頁寬度到達這個范圍以后，網頁內部的元素就要進行相應的變化，用來適應網頁尺寸的變化。

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

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

中斷點越多會讓網頁變得更加細膩、流暢。然而，當研發時間有限、對顯示要求較低時，可選擇常用的斷點設置即可。

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

③布局類型

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

固定布局

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

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

流動布局

當窗口縮小時，內容將動態地發生變化，文本會進行換行，元素也會變窄。然而，這些元素在內容寬度縮小到下一個中斷點之前，布局是不會變化的。

對用戶來說，擴展內容的大小（流動布局）比擴展可見內容的數量（固定布局）更有用。適用場景：流動柵格系統是編輯內容，儀表板，圖像，視頻，數據可視化等理想的響應策略。

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

混合布局

混合布局是指固定布局和流動布局組合使用。例如的后臺管理系統（dashboard）側邊欄是固定布局，右側內容是流動布局。

混合布局在每個維度上有不同的縮放規則，所以它們不使用統一的縮放比。當用戶需要調整瀏覽器的大小以使內容在一個維度上伸縮而在另一個維度上不伸縮時，便使用混合布局。

適用場景：后臺系統設計、工具型的界面設計等。

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

④流動布局下的模塊處理

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

擠壓-拉伸

模塊內容隨著屏幕寬度進行擠壓或拉伸。

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

左右-上下

模塊內容從左右排列變為上下排列。

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

刪減-增加

移動端空間有限，需對不重要的內容（如重復的快捷入口、推薦鏈接、相關的廣告等）進行刪減。

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

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

實際網頁應用示例：

變換位置

根據設備的寬度、內容的重要層級等變換模塊的顯示位置。

適用場景：側邊欄有次要內容模塊（不可刪減的網頁），適配至移動端，可將兩側內容移動至頁面底部（主要內容下方）。（網頁端兩欄、三欄布局，適配至移動端變為單欄布局）

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

實際網頁應用示例：

隱藏-展開

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

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

⑤自適應

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

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

適用場景：從頁面個性化、多功能方面考慮，當網站功能復雜、用戶交互頻繁、用戶量較大時建議使用自適應，這樣能為用戶提供功能更全面、交互體驗更好的服務，如電商類網站。

參考文章

頁面層級

響應式布局/網頁

https://developer.aliyun.com/article/

https://developer.aliyun.com/article/746355

https://zhuanlan.zhihu.com/p/66784964?

http://www.h-ui.net/Hui-2.1-gridSystem.shtml?