Halo，這里是設(shè)計夾，今天分享的是「Web布局設(shè)計」。
整個設(shè)計語言庫從設(shè)計價值觀、設(shè)計法則、布局、視覺、數(shù)據(jù)可視化、動效這6大模塊進行構(gòu)建，這里主要從布局、視覺、數(shù)據(jù)可視化這3大模塊進行闡述。
參考Ant Design、Element Design、Google Design等設(shè)計體系，結(jié)合已上線官網(wǎng)-展示類、商城-交易類、后臺-功能類、組件測試工具-工具類等Web端產(chǎn)品進行研究總結(jié)。
其中Web布局主要從框架布局、頁面層級、柵格系統(tǒng)、Web頁面適配這4個方面來進行闡述。
因為每個模塊內(nèi)容長短不一，分開寫一篇文章過短，放一起歸納會更加系統(tǒng)點。
①框架布局本模塊從設(shè)計原則、基礎(chǔ)布局、擴展布局、懶加載這4方面進行闡述。
框架布局是頁面的骨架和基礎(chǔ)。在框架確定之后，設(shè)計者才可進行下一步的構(gòu)建：統(tǒng)一的視覺元素，清晰的功能操作，具體流程的交互等。
我們主要梳理了基礎(chǔ)層、內(nèi)容層相關(guān)模塊所組合的布局框架。以下主要從基礎(chǔ)布局、擴展布局這兩方面進行闡述。
1.1 設(shè)計原則
一致性：確保產(chǎn)品布局在結(jié)構(gòu)和視覺的一致性，為用戶提供高度的舒適感。
邏輯性：視覺中的各種分類構(gòu)成具有邏輯思路，結(jié)構(gòu)聯(lián)系緊密且通暢。
可擴展性：無論產(chǎn)品功能是簡單還是復(fù)雜，布局框架能夠隨著產(chǎn)品需求的變化進行布局結(jié)構(gòu)的延展和擴充。
可預(yù)測性：選擇可預(yù)測和可識別的布局，并連接到體驗的每一個環(huán)境中且在適當?shù)牡胤揭龑в脩簟?/p>
1.2 基礎(chǔ)布局
基礎(chǔ)布局包括：上下布局、左右布局、T型布局。這三種布局結(jié)構(gòu)相對簡單且常見。
上下布局：上半部分為導航模塊，下半部分為主內(nèi)容模塊。導航欄寬度限制了導航的數(shù)量和文本長度，適用于導航較少、頁面篇幅較長的網(wǎng)站。是使用場景最多的框架布局。
左右布局：頁面左側(cè)為全局導航模塊，右側(cè)為主內(nèi)容模塊。這種布局提高了導航的可見性，也有利于頁面之間的切換，適用于結(jié)構(gòu)簡單的網(wǎng)站。
T型布局：常用于社交文章類網(wǎng)站，頂部全局導航承接了所有子入口的功能，內(nèi)容區(qū)域再劃分成菜單欄（或側(cè)邊欄）、主內(nèi)容模塊兩部分。
1.3 擴展布局
擴展布局包括：C型布局、口型布局。這兩種布局結(jié)構(gòu)相對復(fù)雜，是基礎(chǔ)布局的拓展，用于承載有大量信息的頁面。
C型布局：它是T型布局的擴展。結(jié)合了水平導航和垂直導航的特點，能更清晰地區(qū)分：常用業(yè)務(wù)功能操作和輔助操作。適用于功能模塊較多、較復(fù)雜的后臺管理網(wǎng)站。
口型布局：常用于工具、資訊類網(wǎng)站，它是C型布局的擴展，增加了側(cè)邊欄模塊。它充分利用了版面的特性，可承載最多的信息及功能，缺點是頁面擁擠，不夠靈活。
1.4 懶加載
指的是在長網(wǎng)頁中延遲加載圖像。頁面滾動到可視區(qū)域中，圖像才會加載出來，是一種加載速度快、能緩解服務(wù)器壓力的方式。
加載時顯示的頁面骨架屏（灰色占位圖），是頁面加載過程中的過渡效果。
試想，在圖片多、頁面長的電商網(wǎng)頁中，如果每一張圖片都需要加載，由于加載數(shù)量過大，會造成長時間白屏或閃爍，有時候頁面甚至會崩潰，這就嚴重影響到了用戶體驗。
本模塊從背景層、內(nèi)容層、全局控制層、蒙版層、彈出層這 5 方面進行闡述。
頁面層級用于規(guī)范頁面元素所屬層級、層級順序及組合規(guī)范。
頁面的基礎(chǔ)層級從底層到頂層的排序，依次為：
Background 背景層、Content 內(nèi)容層、Global control 全局控制層(導航、菜單、側(cè)邊欄等)、Mask 蒙版層、Pop-up 彈出層。
下面以結(jié)構(gòu)相對復(fù)雜的口型布局作層級示例：
2.1 背景層
背景層樣式固定，在頁面中永遠置于頁面底部，并且一般會給予背景層中性色，作用是方便突出內(nèi)容層和全局控制層。
背景層可分為純色背景、圖片背景。
純色背景常用顏色：中性色板的 color1 - #ffffff、color2 - #fafafa、color3 - #f5f5f5。圖片背景又包括圖形、文字、圖片等元素構(gòu)成的背景，主要用于裝飾頁面、引導視覺。
2.2 內(nèi)容層
內(nèi)容層是視圖結(jié)構(gòu)中最核心、最復(fù)雜的一層，它與業(yè)務(wù)強相關(guān)，屬于頁面中第二層級的內(nèi)容。
它承載了業(yè)務(wù)場景中用戶需要獲取的核心信息，以及輔助核心任務(wù)的操作，如：表單填寫、列表對比、詳情展示、信息說明等。
2.3 全局控制層
全局控制層在內(nèi)容層之上，屬于頁面第三層級內(nèi)容，一般在業(yè)務(wù)場景中對整個網(wǎng)站有全局控制及導航的功能，如：導航、菜單、側(cè)邊欄。
2.4 蒙版層
一般和彈出層配合使用，不單獨使用。常用蒙版樣式：不透明度為50%的黑色背景遮罩，color : rgba(0,0,0,0.5)。
作用：用于鎖定內(nèi)容層和導航層操作，突出上方彈窗內(nèi)容，促使用戶高效操作。
2.5 彈出層
指當前任務(wù)或內(nèi)容相關(guān)的臨時出現(xiàn)層，優(yōu)先級最高。一般承載當前需要臨時處理的任務(wù)，如：對話框組件。
對話框以滑出或者彈出的形式展現(xiàn)給用戶，底部內(nèi)容層不可操控，被蒙版遮罩禁用，在操作需要聚焦的分支流程時使用。
本模塊從關(guān)于柵格、模塊、間距系統(tǒng)、關(guān)于適配這4方面進行闡述。
柵格系統(tǒng)在頁面排版布局、尺寸設(shè)定方面給了設(shè)計者直觀的參考，它讓頁面設(shè)計變得有規(guī)律。
熟練地運用柵格系統(tǒng)，不僅可以減少決策成本、提高設(shè)計理解力，還可以實現(xiàn)響應(yīng)式布局、加速團隊協(xié)作并保證視覺還原。
3.1 關(guān)于柵格
輕量級的項目，用12柵格即可滿足設(shè)計需求。但對于業(yè)務(wù)信息量大、信息分組較多的大體量項目，就需要對12列進一步細分，用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)容進行 24 柵格的劃分設(shè)置，12柵格的使用方法也可此類推。
頁面中柵格的 Gutter 為定值，當瀏覽器（頁面寬度）在一定范圍內(nèi)拉寬或縮窄時，柵格的 Column 寬度會隨之拉寬或縮窄，但 Gutter 的寬度值固定不變。
3.2 模塊
模塊就是我們的設(shè)計區(qū)塊，可以是一段文字、一張圖片，又或是其他元素。其中，背景/點綴元素并不能算作是設(shè)計模塊，所以無需嚴格遵循柵格系統(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è)計者更好的進行版式設(shè)計和內(nèi)容布局，也可以輔助設(shè)計師規(guī)范頁面內(nèi)各種元素的對齊與間距的設(shè)定。為了保持頁面布局的一致性和韻律感，我們需要對間距系統(tǒng)進行規(guī)范。
鑒于目前主流桌面設(shè)備的屏幕分辨率，在垂直、水平方向大多可以被 8 整除，而 8 也符合偶數(shù)原則，所以使用8作為最小原子足夠普適。
雖然2、4、6、8、10也滿足以上條件，但2、4、6作為基礎(chǔ)間距，會使元素分得過于細碎，難以把控頁面的節(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è)的導航欄、菜單欄、側(cè)邊欄均為固定寬度（Fixed）。
3.4.2 擴展布局
C型布局、口型布局中，內(nèi)容區(qū)都是自適應(yīng)寬度（Auto），兩側(cè)的導航欄/菜單欄、側(cè)邊欄均為固定寬度（Fixed）。
④Web頁面適配本模塊從響應(yīng)式、中斷點、布局類型、流動布局下的模塊處理、自適應(yīng)這 5 方面進行闡述。
4.1 響應(yīng)式
響應(yīng)式 Responsive 是使用一套頁面/代碼適配多個客戶端。
適用場景：從運營和維護的便利性方面考慮，當網(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)頁在收縮的過程中的最小范圍。當網(wǎng)頁寬度到達這個范圍以后，網(wǎng)頁內(nèi)部的元素就要進行相應(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)頁變得更加細膩、流暢。然而，當研發(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 流動布局
當窗口縮小時，內(nèi)容將動態(tài)地發(fā)生變化，文本會進行換行，元素也會變窄。然而，這些元素在內(nèi)容寬度縮小到下一個中斷點之前，布局是不會變化的。
對用戶來說，擴展內(nèi)容的大小（流動布局）比擴展可見內(nèi)容的數(shù)量（固定布局）更有用。適用場景：流動柵格系統(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)一的縮放比。當用戶需要調(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)容隨著屏幕寬度進行擠壓或拉伸。
適用場景：適用于文本內(nèi)容、純色背景、按鈕、填選框等伸縮不會發(fā)生變形的元素。
4.4.2 左右-上下
模塊內(nèi)容從左右排列變?yōu)樯舷屡帕小?/p>
適用場景：適用于圖文列表、主內(nèi)容+右側(cè)推薦等所有左右排版的組合。
4.4.3 刪減-增加
移動端空間有限，需對不重要的內(nèi)容（如重復(fù)的快捷入口、推薦鏈接、相關(guā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)容過多時可選擇收起，以彈窗或者單獨一個頁面顯示。
適用場景：桌面端頂部的菜單、導航，在窄屏中收進菜單 icon，點擊彈出分類菜單，此乃常用的場景及處理手法；
4.5 自適應(yīng)
自適應(yīng) Adaptive 是為不同客戶端分別提供一套獨立的頁面/前端代碼。
我們可以通過顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）查詢當前設(shè)備類型，匹配并顯示相應(yīng)的樣式，讓網(wǎng)頁在不同設(shè)備下實現(xiàn)更好的顯示效果。
適用場景：從頁面?zhèn)€性化、多功能方面考慮，當網(wǎng)站功能復(fù)雜、用戶交互頻繁、用戶量較大時建議使用自適應(yīng)，這樣能為用戶提供功能更全面、交互體驗更好的服務(wù)，如電商類網(wǎng)站。
總結(jié)
以上就是對Web布局設(shè)計的分析與總結(jié)。希望能給大家提供一些幫助。
看完覺得寫得好的，不防打賞一元，以支持藍海情報網(wǎng)揭秘更多好的項目。
感謝您的支持，我會繼續(xù)努力的!
打開支付寶掃一掃，即可進行掃碼打賞哦
手機直接保存圖片,掃一掃識別二維碼,即可進行掃碼打賞哦
