用戶在操作系統時所看到的頁面框架其實就是系統佈局，它是一個產品最外層的框架結構，一般包含了頂部導航、側邊導航欄、麵包屑、圖文、卡片、內容等元素。
對於設計師而言，想要了解一個中台，首先要了解它的系統佈局，系統佈局是頁面設計的基礎，它與頁面的關係，就如同建築與地基的關係。日常完成需求時，UI界面反复的調試頁面寬度與卡片比例會佔用我們大量的時間。為了提高工作效率,並且把更多的時間放在業務、視覺創新等方面，我們就應該需要一套完整的佈局規範。
對整個公司產品體係而言，內部員工與普通用戶使用的操作系統達到幾十甚至上百個，單一的頁面佈局滿足不了各個子項目的使用場景。所以我們從前期的佈局框架設計調研到產品業務的特性，定義了中台界面的幾大類型，並且在我們的設計規範中定義了幾大類型系統佈局方式，根據其佈局方式定制好柵格，方便日後在各個業務場景中使用，從而能夠保持一致性、並且可擴展，方便快速迭代和維護。
重點概覽
一、了解佈局
二、網格基礎
三、定義佈局模塊
四、網頁柵格
五、寫在最後
了解佈局
1、佈局方法論
1.1視覺層次
對於中台的UI設計師們而言，良好的理性思維相對比感性的視覺思維更加重要，因為在UI設計師設計頁面時需要把很多互不相關的元素有秩序的組織在一起，正確引導用戶操作與使用。亨利.亞當斯（Henry Adams）曾經說過： “混沌是自然法則，秩序是人類的夢想”。人們總是喜歡秩序，因為秩序可以讓事情變得更容易理解。這同樣適用於數字產品的用戶界面，當UI元素被有序組合和結構化時，人們可以輕鬆的使用應用程序和網站，並對產品感到滿意，所以設計頁面時需要結合視覺層次理論。視覺層次理論是設計過程的核心方法之一。最初是建立在格式塔原理的基礎上，它觀察到了用戶對相互關聯元素的視覺感知，並展示了人們如何將視覺元素歸為一類。那麼什麼是視覺層次呢？官方概括：視覺層次結構致力於一種用戶能夠理解的方式呈現產品的內容，以便用戶可以理解每個元素的重要性級別。它可以組織頁面內容，以便大腦可以根據物理差異例如：大小，顏色，對比度，樣式等區分對象。
蘋果的設計一直以來都是引領著設計趨勢，其設計被國內外用戶所認可，所以就以蘋果官網作為案例。其中，字重對比：蘋果官網在字重上給人眼前一亮的感覺，它採用Medium+Bold的字重使得標題與詳情內容產生強烈的大小對比，用戶進入官網的第一眼便能了解核心內容。顏色對比：在顏色上使用黑色背景承托產品和內容，強烈的黑白對比增強了信息傳播中的識別度和對比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁面層次感更加的豐富。如下圖：
1.2格式塔理論
往往用戶打開頁面進行閱讀或者操作界面時視覺的第一感受是產品的整體效果，而並不會感知到一些較細節的元素。往宏觀來講當人們感知一個物體到由許多元素組成的複雜對象時，人們會採用有意識或無意識的方法將這些部分安排到整個組織的系統中，而不只是簡單的元素級。它適用於不同級別的感知，但是視覺部分似乎是設計師設計界面時最能體現價值的部分，這其實就是格式塔理論，格式塔（Gestalt）這個術語來自德語單詞Gestalt，中文翻譯為“形狀，形式”。
格式塔心理學家庫爾特·科夫卡（Kurt Koffka）的一句話可以捕捉到這一運動背後的基本思想：“整體不是元素基因的總和”。官網概括：“在心理現像中，人們對客觀對象的感受源於整體關係而非具體元素，也就是說知覺不是感覺元素的總和，而是一個統一的整體，部分之和不等於整體，因此整體不能分割”。格式塔理論中元素之知見的原則分別為臨近，相似，連續，封閉和連接。
在我們的現實的生活中有很多自然規律中遵守了格式塔原則，比如說每到秋天，北方的嚴寒氣候不再適合大雁生存，這時候大雁便會飛往較暖和的南方，當人們看到天空正在南飛的大雁隊伍，它們組織鏈接得十分嚴密，並且群體在同一個方向移動，所以隊伍的形狀在我們的大腦中將它們視為一個群組的一部分，產生人字形或一字形的圖形。
1.3信息框架
剛剛我們也介紹了視覺層級結構和格式塔理論，接下來簡單介紹一下信息框架，它也是在系統佈局中需要考慮的內容。信息框架是將信息內容進行組織分層，一個產品的信息框架取決於其特有的業務，他與業務強相關並且需要了解用戶群體目標。根據業務和用戶目標將內容組織搭建信息框架，形成系統佈局的骨架，方便用戶在瀏覽或操作頁面時能夠快速找到重點內容，提升用戶使用效率。我們用今日頭條Web端和飛書Web端兩個線上產品作為案例分析吧，今日頭條和飛書屬於兩種完全不同類型的產品，那麼其信息架構也完全不同。
今日頭條屬於門戶類新聞客戶端，主要是生產內容展現給用戶，首先進入到產品映入眼簾的是無窮式的信息流，它不需要用戶登錄/註冊作為身份門檻，而是直觀的把內容展示給用戶，推送用戶感興趣的內容，也不需要用戶決策任何選擇，用戶只需沉浸式的閱讀體驗即可，目的是方便第一時間抓取用戶、吸引用戶達到留住用戶的目的。當用戶產生興趣以後想要進入下一步操作如：點贊、評論時才會彈出登錄/註冊，一方面是獲取用戶的身份等信息，另一方面是間接性的把用戶留下來。從產品業務屬性來看，今日頭條的佈局把重要的內容放入中間，並且佔有整個佈局的一半大小，其次放在內容兩側；
飛書屬於工具協作類產品，用戶第一次打開產品需要註冊才能使用。與新聞閱讀類產品不同的是工具類型產品用戶目的比較明確，所以首頁做成一個功能介紹頁面，作用是引導用戶了解產品核心功能從而轉化成產品的用戶。當然功能介紹頁也是一個網站的門面，首頁想要出彩，不僅需要在佈局上做的合理還需要考慮網站的色彩、插圖等元素的統一性。在設計網站時，首頁的功能介紹頁一定要充分突出自身產品特色，強調出自身產品的優勢和亮點，如飛書首頁主要是想突出其產品能夠提高工作效率，所以直接把“在飛書，享高效”slogan這句話放在了首頁的第一屏，輔助文案詳細的介紹了產品的核心功能，直接抓住用戶的痛點。用戶完成註冊以後，進入到功能頁面，如右下圖可以看出，其係統佈局的模塊分成三份，佔面積最大的模塊屬於產品最核心的部分也就是聊天窗口，較重要部分是聯繫人部分，最小區域是功能Tab部分。
1.4小結
所以對於設計師而言，在設計頁面時必須熟練掌握一些基本設計基礎知識，並且將這些知識靈活運用到實際的工作當中。比如設計師在搭建系統佈局時需要熟知頁面視覺層次、格式塔理論、信息框架等知識才可創建合理的佈局基礎。當然佈局框架只是整個產品的基礎骨架，在骨架確定之後，設計師才可進行下一步的設計，如統一的視覺表達元素，清晰的功能操作，流暢的交互表達。
2、佈局的設計原則
系統佈局規範，需要通過統一的設計元素和間距規範去引導使用者們（使用規範的設計師）跨平台使用並且能夠適配不同屏幕尺寸，目的是達到一致性，可適配、可控性原則。
一致性：對於界面來講，界面中的元素和結構需要保持一致性，如：在使用佈局時應當使用一致的網格，基準線和填充，在使用設計元素時配色、圖標、文本等需保持一致。
可適配：佈局是可自適應的，跟據用不在不同的設計環境下能夠通過交互動效、界面樣式有效作出極致適配反應。用戶操作後需給出即時反應。
可控性：當用戶看到界面時應直觀有效傳遞內容，如界面中模塊區域明確、內容組織明確、表意明確都能使得用戶快速理解。界面需要簡單直白，讓用戶快速識別，減少用戶記憶負擔。
3、適配方案
在設計過程中，為了減少設計師們的日常溝通和理解成本，在設計內部我們統一了一套設計畫板尺寸為1280。經過我們官方調研得出在中台系統中用戶使用的電腦屏幕主流分辨率分別為： 1440*900、1366*768、1920*1080、1280*800 ，而1280是主流分辨率中最小且最為保險的的一個尺寸，在設計頁面時設計師如果能夠在1280尺寸下，縮小寬度或拉升頁面寬度都能保證沒有遮擋或擠壓問題，那麼設計是合理的。在我們的規範中頁面再小於1280時需要吊起系統的橫向滾動條。在中台系統中考慮到用戶效率問題很少做響應式，所以常規情況下設計師會限定界面的一個最小值。如果設計師把畫板設置為1440或者1366時可能會存在其在畫板中頁面大小正好合適，但是頁面上線以後縮小瀏覽器可能會發生遮擋或擠壓的情況。所以我們建議設計師們使用1280寬度畫板畫圖。
4、框架
首先先分析一下頁面框架，我們將頁面的用戶操作行為進行層級區分。我們至下而上將元素進行層級分層，目的是把用戶界面模塊化。界面可分成背景區域、內容層、全局控制層、內容彈層，每一層都具備獨特性，將界面中所有的信息層級提取分類並且按結構屬性分層，目的是能夠使得頁面視覺和交互邏輯符合用戶的習慣認知。之前我們有提到過視覺層次、格式塔理論和信息框架，設計師在創建這一步的時候可以用來指導搭建一套合理的頁面信息層級，一個內容模塊都屬於一個容器，容器可以承載各種內容元素。
4.1背景層
背景層樣式固定，在界面中永遠置於界面底部，並且一般會給予背景層中性色，作用是方便突出內容層和全局控制層。
4.2內容層
視圖結構中最核心和復雜的一層，他與業務強相關，內容層的容器承載了業務場景的用戶需要獲取的核心信息以及輔助核心任務的操作。容器承載了內容，從Material Design中的Elevation（海拔）概念中可以了解到，它屬於第二層級內容，基本佈局結構有平行結構或者父子結構。如下圖卡片屬於容器，卡片中承載了數據圖表等內容，整個卡片+內容就屬於內容層。
4.3全局控制層
全局控制層我們定義他在內容層之上，屬於頁面第三層級內容，一般在業務場景中對整個網站的控制以及導航功能如：Header menu、Sidebar menu組件，如下圖中Header menu浮在內容層之上。
4.4內容彈層
當前任務或者內容相關的臨時出現層，優先級高於內容層，一般承載當前需要臨時處理的任務或者需要進行內容補充說明等功能。如：Modal（Dialog各個平台叫法不一致）、Tooltip、Popover、Notification等組件 。其中Modal是以滑出或者彈出的形式展現給用戶。 Modal它包括兩種類型，一種是模態內容層不可操控，被蒙版遮罩禁用，比如在業務中需要較為聚焦的分支流程操作時使用。另一種是非模態，吊起彈出層後不印象內容層操作。當然，Tooltip、Popover、Notification都屬於非模態，反饋較輕，不干擾用戶使用界面。如下圖的頁面中的內容彈層使用了Popover，在次頁面它的功能就是加以補充說明。
網格基礎
1、單位
科技高速發展，屏幕分辨率也越來越多樣化對於UI/UX設計師來講必須熟練的基本知識方便日常工作所需。首先我們先了解一下屏幕中的一些單位。
【PX】 pixel，像素，大多數電子設備成像的基本單元，同樣尺寸的屏幕成像單元越細小、越密集的屏幕，分辨率就越高；
【PT】 point，點，這個單位，就同時出現在iOS、CSS、還有傳統的平面設計裡，與px相比px是相對單位而pt絕對單位，如在設計稿中如果導出一倍圖1px =1pt那麼導出二倍圖就是2px=1pt，它是一個絕對長度，為1/72英寸；
【PPI】 pixel per inch，每英寸像素數，決定電子設備的物理顯示尺寸，只有涉及到顯示才有意義。該值越高，則屏幕越細膩；
【DPI】 dot per inch，與PPI一致，唯一區別是它表示每英寸多少點，該值越高，則圖片越細膩；
【DP】 density-independent pixel，是安卓開髮用的長度單位，1dp等於屏幕像素密度為160ppi時1px的長度，因此dp在整個系統大小是固定的。
【SP】 scale-independent pixel，安卓開髮用的字體大小單位，可以認為SP=DP。
2、像素密度
在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能導致開發實現稿的視覺不符合設計師心理預期，比如：相同像素尺寸的UI元素在低密度屏幕上顯得較模糊，而在高密度屏幕上則比較清楚。同一物理尺寸（肉眼所見尺寸）下，低密度顯示器的像素個數明顯小於高密度顯示器的像素個數。
其實像素是與密度沒有關聯，我們簡稱密度為DP(讀作DIP，英文全稱Density-independent pixel)，它是可縮放的靈活單位，可在任何屏幕下現實相同的尺寸，如圖顯示，紅色網格為像素密度，被放大內容為UI元素物理尺寸。
所以我們可以得出，DP可以自適應屏幕的密度，不管屏幕密度怎麼變化，實際顯示的物理尺寸相同，DP可以保證物理尺寸的一致性，所以DP是目前比較適合UI設計的單位。當屏幕的密度為160的一個物理像素時，1PD=1PX。要計算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。
3、網格
3.1關於網格
網格線(Grid Line)
網格線又稱佈局分割線，它是構成網格結構的分界線。一般在佈局中它們是由行網格線和列網格線組成。如下圖是模擬網格做了一個示意，其中橘黃色兩根線分別是行網格線和列網格線。
網格軌道(Grid Track)
兩個相鄰網格線之間的空間。你可以把它們想像成網格的行或列。如下圖橘黃色的行網格線和列網格線之間的空間既是網格軌道。
網格單元格(Grid Cell)
兩個相鄰的行網格線和兩個相鄰的列網格線之間的空間屬於網格單元格。這是網格系統的一個“單元”。如下圖橘黃色的行網格線和列網格線交叉處即是網格單元格。
網格區域(Grid Area)
由單個或多個網格單元格組成，它是可以用來擺放頁面元素。如下圖所示，橘黃色的行網格線和列網格線交叉處即是網格區域。
3.2網格設置
在設計界面時可以通過網格定制能夠使界面更加有序、整齊、規範，網格的主要用途之一是保持設計元素對齊和排序。通過建立一個網格系統，設計師可以為自己創建一個結構來適配不同的屏幕寬度。
在我制定的規範中一般會把網格的基數設置為4，它不僅符合偶數的思路同時也能夠匹配多數主流的顯示設備，如中台系統的用戶主流分辨率用1440*900、1366*768 、1280*800。我們可以通過設置網格規範幫助設計師快速搭建頁面，使用有律可循的佈局空間的設計給到開發減少溝通成本。下圖所示設計佈局網格由三個元素組成：1.列寬，2.間距，3.邊距。
在Sketch中設置網格，在菜單欄中找【視圖】-【畫布】-【網格設置】-彈出浮層可設置網格大小，網格設置的基數設置成4，之後在設計界面時可按照網格基礎的倍數作為組件的大小和頁面元素間距分割，如下圖：
我們放大頁面局部大家可以看到，把網格基數設置成4，每個網格單元格為4*4大小。同理，如果把網格基數設置成8以後，每個網格單元格大小為8*8大小。
定義佈局模塊
界面框架內系統佈局是頁面所有模塊的組合方式，我們定義一個頁面框架中基礎模塊和內容模塊的數量最好不超過3個。經過調研和歸納總結出3大佈局類型，分別是上下佈局、左右佈局、T字型佈局。
上下佈局
上下佈局佈局是Web端運用最廣泛的佈局方式之一，頁面內容區以feed流形式展現，一般用在Web端官網首頁。設計師普遍做法是對兩邊留白區域為內容區並進行最小值的定義一般定義值為1200較多（具體寬度要設計師如何設置柵格，後面會講到如何設置柵格），當留白區域到達極小超過極限值之後需要對中間的內容區域進行動態縮放或遮擋，此邏輯需設計師根據業務所需而定。也有少部分設計師會設計成全屏佈局，內容隨瀏覽器寬度自適應。
其優點是頁面結構清晰簡單，強突出內容區，但缺點是佈局的規矩呆板，變化少。設計師如果不注意合理的視覺元素和色彩細節變化，用戶很容易感覺到乏味,此佈局適用於層級較為簡單頁面。
巨量引擎（Ocean Engine）是字節跳動旗下的營銷服務品牌，整合了今日頭條、抖音短視頻、火山小視頻、西瓜視頻、懂車帝、Faceu激萌、輕顏、穿山甲等產品的營銷能力，為全球廣告主提供綜合的數字營銷解決方案。我在設計此官網時正是採用了上下佈局作為頁面佈局，頂部導航整合了所有子頁面的內容，導航下方為主要內容區並且內容定寬，當時採用此佈局原因第一是因為次官網層級較簡單只有三個層級內容，第二是官網更需要的是突出內容區，所有頁面使用次佈局更為合適。
左右佈局
設計師在設計重內容，輕導航類型網站是常用左右佈局作為基礎框架進行頁面設計。此佈局把系統頁面分為兩大模塊，其中設計師常見的做法是將左側設置成導航欄模塊並且固定，常常用來控制全局內容。而右側區域設置成工作區域或內容區，內容區可進行動態縮放。
下圖為飛書溝通窗口截圖，由於關係到內部信息保密性我把內容進行了模糊，從外觀結構上看還是能大致了解飛書結構是採用了左右佈局，整個佈局結構清晰有理也是符合左右佈局特點。從交互體驗分析左側屬於導航區，它承載了不同功能並且固定。飛書屬於即時溝通產品設計師考慮到瀏覽器窗口有限所以對導航設計成較小模塊，而右邊為聊天窗口對於業務屬性分析它更為重要，所以模塊較大。其導航欄固定，內容區可進行動態縮放。
T字型佈局
T字型佈局常用在Web端的中台系統中，因為中台系統業務結構複雜、層級多，而T字型佈局能夠解決複雜結構的問題。使用此結構能夠把頁面結構清晰化，主次更加分明。設計師常常的做法是將頂部作為一級導航欄方便控制全局，二左邊設計成是二級導航並且固定導航欄固定，右邊的內區域可進行動態縮放(一般會把其設計成柵格動態區域)，內容隨瀏覽器寬度自適應。
下圖是Material Design設計文檔，首先簡單介紹一下Material Design它是由谷歌的設計團隊創建的一種語言，宗旨是幫助設計師們創建易用性和實用性較強的網站和應用程序，其設計理念是將現實中的物理學帶入進設計中。 Material Design設計文檔中的結構使用了T字型佈局作為基礎佈局。頁面分為了三個模塊，其中頂部導航作為頁面一級內容進行全局控制，接下來左邊為側邊導航作為二級內容控制頁面，右邊是內容區滿足用戶使用瀏覽。從放眼望去整個頁面架構清晰明了。
小節
以上為Web最常見的三大佈局，但是需要大家在實際的工作中靈活運用。設計師在日常工作中可能會遇到更為特殊的業務場景，設計師可以通過整理基礎模塊然後分析其業務的信息框架，將模塊進行相互組合、嵌套歸納可以總結出更多的Web端佈局框架並落地到業務中。
網頁柵格
剛剛在定義佈局模塊中已經分析過了三大佈局類型，接下要分享的是UI設計師更為關注內容“網頁柵格”。網頁柵格也是設計師口中常常提及的柵格系統。其實網頁柵格系統是從平面柵格系統中發展而來，它延續了平面設計的方法與風格，在網頁中使用柵格能夠使得網頁信息展現更加清晰明了、美觀易讀。
首先網頁柵格系統基本由是柵格總寬度/頁面總寬度（W）、一個柵格的寬度（a）、柵格與柵格之間的間隙（i）、一個單元的寬度（A）、外邊距（M）組成。
列寬
一個柵格的寬度（a），我們稱之為列寬，一個列寬包涵了N個網格單元格（Grid Cell）我們也可以把它看成一個網格區域(Grid Area)，在上面我們已經講到過網格的內容，主要目的正是為柵格做鋪墊。其中我把一個網格單元格設置為4（原因在網格中也解釋過，如果忘記的同學可以爬樓看下）。由此可見列寬非固定值，這樣可以使內容自由適配任何屏幕尺寸。在柵格中列寬由屏幕尺寸決定。
水槽
柵格與柵格之間的間隙（i），我們稱之為水槽，一個水槽寬度大於等於1個網格單元（Grid Cell）。在柵格中水槽為一個定值，寬度可以是N個網格單元，如網格單元格設置成4，那麼水槽可以是4、8、12、16…N*4
柵格單元
1個列寬+1個水槽寬度即一個單元的寬度，一個柵格總寬是由N個柵格單元組成，次寬度不固定，由屏幕尺寸決定。
柵格總寬
列寬+水槽再成以N即是一個柵格的總寬，公式為：W=(A*n)-i。
柵格設置
經過調研我們得出常見的柵格分為12列柵格系統和24列柵格系統。其中12列柵格系統在流行的前端開發開源工具庫Bootstrap與Foundation中廣泛使用，適用於業務信息分組較少、業務結構較簡，單個盒子內信息體積較大的中後台頁面設計。 24等分的柵格系統適用於業務信息量大、信息分組較多、單個盒子內信息體積較小的中後台頁面設計；相對12柵格系統，24柵格系統變化更加靈活，更適合內容比較多樣複雜的場景。如下圖分別是12柵格系統（左）和24柵格系統（右）。
小結
在柵格系統結合佈局結構和網格做了我做了一些知識結合，其實前面所講的網格版塊和佈局版塊都是為柵格做一個鋪墊，利於同學們更加深入的了解網格、佈局、柵格三者的關係。
寫在最後
系統佈局只是網頁中的基礎部分，但也是核心內容，一個產品佈局需要根據其業務屬性決定。佈局搭的好相當地基打好的，但是同時能夠在對美感的追求之上，還應當結合可用性來看待設計。在實際的工作中肯定還會遇到各種形形色色較奇葩的需求，所以希望這篇文章能夠做的不是限製而是啟發，大家可根據此次分享內容能夠進行舉一反三利用到實際的工作當中。
參考文獻：
https://material.io/design/layout/understanding-layout.html#usage
https://panjiachen.github.io/vue-element-admin-site/zh/
https://mp.weixin.qq.com/s/BVQSDHSalSl0rKO3lySu1A
https://design4users.com/?s=grid
