在以往的學(xué)習(xí)過程中，我發(fā)現(xiàn)市面上大部分文章對于Web端系統(tǒng)布局內(nèi)容講的比較籠統(tǒng)，一般提及較多的是網(wǎng)頁柵格相關(guān)的內(nèi)容，但是一些關(guān)聯(lián)性和原子結(jié)構(gòu)等相關(guān)內(nèi)容較少。比如，了解布局時(shí)應(yīng)該需要了解哪些方法論？什么是網(wǎng)格？網(wǎng)格與柵格之間是什么關(guān)系？柵格與布局之間是什么關(guān)系等。我會從這些缺失出發(fā)，結(jié)合工作經(jīng)驗(yàn)與實(shí)際案例為大家進(jìn)行分享。

用戶在操作系統(tǒng)時(shí)所看到的頁面框架其實(shí)就是系統(tǒng)布局，它是一個(gè)產(chǎn)品最外層的框架結(jié)構(gòu)，一般包含了頂部導(dǎo)航、側(cè)邊導(dǎo)航欄、面包屑、圖文、卡片、內(nèi)容等元素。

對于設(shè)計(jì)師而言，想要了解一個(gè)中臺，首先要了解它的系統(tǒng)布局，系統(tǒng)布局是頁面設(shè)計(jì)的基礎(chǔ)，它與頁面的關(guān)系，就如同建筑與地基的關(guān)系。日常完成需求時(shí)，UI界面反復(fù)的調(diào)試頁面寬度與卡片比例會占用我們大量的時(shí)間。為了提高工作效率,并且把更多的時(shí)間放在業(yè)務(wù)、視覺創(chuàng)新等方面，我們就應(yīng)該需要一套完整的布局規(guī)范。

對整個(gè)公司產(chǎn)品體系而言，內(nèi)部員工與普通用戶使用的操作系統(tǒng)達(dá)到幾十甚至上百個(gè)，單一的頁面布局滿足不了各個(gè)子項(xiàng)目的使用場景。所以我們從前期的布局框架設(shè)計(jì)調(diào)研到產(chǎn)品業(yè)務(wù)的特性，定義了中臺界面的幾大類型，并且在我們的設(shè)計(jì)規(guī)范中定義了幾大類型系統(tǒng)布局方式，根據(jù)其布局方式定制好柵格，方便日后在各個(gè)業(yè)務(wù)場景中使用，從而能夠保持一致性、并且可擴(kuò)展，方便快速迭代和維護(hù)。

重點(diǎn)概覽

一、了解布局

二、網(wǎng)格基礎(chǔ)

三、定義布局模塊

四、網(wǎng)頁柵格

五、寫在最后

了解布局

1、布局方法論

1.1 視覺層次

對于中臺的UI設(shè)計(jì)師們而言，良好的理性思維相對比感性的視覺思維更加重要，因?yàn)樵赨I設(shè)計(jì)師設(shè)計(jì)頁面時(shí)需要把很多互不相關(guān)的元素有秩序的組織在一起，正確引導(dǎo)用戶操作與使用。亨利.亞當(dāng)斯（Henry Adams）曾經(jīng)說過：“混沌是自然法則，秩序是人類的夢想”。人們總是喜歡秩序，因?yàn)橹刃蚩梢宰屖虑樽兊酶菀桌斫?。這同樣適用于數(shù)字產(chǎn)品的用戶界面，當(dāng)UI元素被有序組合和結(jié)構(gòu)化時(shí)，人們可以輕松的使用應(yīng)用程序和網(wǎng)站，并對產(chǎn)品感到滿意，所以設(shè)計(jì)頁面時(shí)需要結(jié)合視覺層次理論。視覺層次理論是設(shè)計(jì)過程的核心方法之一。最初是建立在格式塔原理的基礎(chǔ)上，它觀察到了用戶對相互關(guān)聯(lián)元素的視覺感知，并展示了人們?nèi)绾螌⒁曈X元素歸為一類。那么什么是視覺層次呢？官方概括：視覺層次結(jié)構(gòu)致力于一種用戶能夠理解的方式呈現(xiàn)產(chǎn)品的內(nèi)容，以便用戶可以理解每個(gè)元素的重要性級別。它可以組織頁面內(nèi)容，以便大腦可以根據(jù)物理差異例如：大小，顏色，對比度，樣式等區(qū)分對象。

蘋果的設(shè)計(jì)一直以來都是引領(lǐng)著設(shè)計(jì)趨勢，其設(shè)計(jì)被國內(nèi)外用戶所認(rèn)可，所以就以蘋果官網(wǎng)作為案例。其中，字重對比：蘋果官網(wǎng)在字重上給人眼前一亮的感覺，它采用Medium+Bold的字重使得標(biāo)題與詳情內(nèi)容產(chǎn)生強(qiáng)烈的大小對比，用戶進(jìn)入官網(wǎng)的第一眼便能了解核心內(nèi)容。顏色對比：在顏色上使用黑色背景承托產(chǎn)品和內(nèi)容，強(qiáng)烈的黑白對比增強(qiáng)了信息傳播中的識別度和對比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁面層次感更加的豐富。如下圖：

1.2 格式塔理論

往往用戶打開頁面進(jìn)行閱讀或者操作界面時(shí)視覺的第一感受是產(chǎn)品的整體效果，而并不會感知到一些較細(xì)節(jié)的元素。往宏觀來講當(dāng)人們感知一個(gè)物體到由許多元素組成的復(fù)雜對象時(shí)，人們會采用有意識或無意識的方法將這些部分安排到整個(gè)組織的系統(tǒng)中，而不只是簡單的元素級。它適用于不同級別的感知，但是視覺部分似乎是設(shè)計(jì)師設(shè)計(jì)界面時(shí)最能體現(xiàn)價(jià)值的部分，這其實(shí)就是格式塔理論，格式塔（Gestalt）這個(gè)術(shù)語來自德語單詞Gestalt，中文翻譯為“形狀，形式”。

格式塔心理學(xué)家?guī)鞝柼亍た品蚩ǎ↘urt Koffka）的一句話可以捕捉到這一運(yùn)動背后的基本思想：“整體不是元素基因的總和”。官網(wǎng)概括：“在心理現(xiàn)象中，人們對客觀對象的感受源于整體關(guān)系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個(gè)統(tǒng)一的整體，部分之和不等于整體，因此整體不能分割”。格式塔理論中元素之知見的原則分別為臨近，相似，連續(xù)，封閉和連接。

在我們的現(xiàn)實(shí)的生活中有很多自然規(guī)律中遵守了格式塔原則，比如說每到秋天，北方的嚴(yán)寒氣候不再適合大雁生存，這時(shí)候大雁便會飛往較暖和的南方，當(dāng)人們看到天空正在南飛的大雁隊(duì)伍，它們組織鏈接得十分嚴(yán)密，并且群體在同一個(gè)方向移動，所以隊(duì)伍的形狀在我們的大腦中將它們視為一個(gè)群組的一部分，產(chǎn)生人字形或一字形的圖形。

1.3 信息框架

剛剛我們也介紹了視覺層級結(jié)構(gòu)和格式塔理論，接下來簡單介紹一下信息框架，它也是在系統(tǒng)布局中需要考慮的內(nèi)容。信息框架是將信息內(nèi)容進(jìn)行組織分層，一個(gè)產(chǎn)品的信息框架取決于其特有的業(yè)務(wù)，他與業(yè)務(wù)強(qiáng)相關(guān)并且需要了解用戶群體目標(biāo)。根據(jù)業(yè)務(wù)和用戶目標(biāo)將內(nèi)容組織搭建信息框架，形成系統(tǒng)布局的骨架，方便用戶在瀏覽或操作頁面時(shí)能夠快速找到重點(diǎn)內(nèi)容，提升用戶使用效率。我們用今日頭條Web端和飛書Web端兩個(gè)線上產(chǎn)品作為案例分析吧，今日頭條和飛書屬于兩種完全不同類型的產(chǎn)品，那么其信息架構(gòu)也完全不同。

今日頭條屬于門戶類新聞客戶端，主要是生產(chǎn)內(nèi)容展現(xiàn)給用戶，首先進(jìn)入到產(chǎn)品映入眼簾的是無窮式的信息流，它不需要用戶登錄/注冊作為身份門檻，而是直觀的把內(nèi)容展示給用戶，推送用戶感興趣的內(nèi)容，也不需要用戶決策任何選擇，用戶只需沉浸式的閱讀體驗(yàn)即可，目的是方便第一時(shí)間抓取用戶、吸引用戶達(dá)到留住用戶的目的。當(dāng)用戶產(chǎn)生興趣以后想要進(jìn)入下一步操作如：點(diǎn)贊、評論時(shí)才會彈出登錄/注冊，一方面是獲取用戶的身份等信息，另一方面是間接性的把用戶留下來。從產(chǎn)品業(yè)務(wù)屬性來看，今日頭條的布局把重要的內(nèi)容放入中間，并且占有整個(gè)布局的一半大小，其次放在內(nèi)容兩側(cè)；

飛書屬于工具協(xié)作類產(chǎn)品，用戶第一次打開產(chǎn)品需要注冊才能使用。與新聞閱讀類產(chǎn)品不同的是工具類型產(chǎn)品用戶目的比較明確，所以首頁做成一個(gè)功能介紹頁面，作用是引導(dǎo)用戶了解產(chǎn)品核心功能從而轉(zhuǎn)化成產(chǎn)品的用戶。當(dāng)然功能介紹頁也是一個(gè)網(wǎng)站的門面，首頁想要出彩，不僅需要在布局上做的合理還需要考慮網(wǎng)站的色彩、插圖等元素的統(tǒng)一性。在設(shè)計(jì)網(wǎng)站時(shí)，首頁的功能介紹頁一定要充分突出自身產(chǎn)品特色，強(qiáng)調(diào)出自身產(chǎn)品的優(yōu)勢和亮點(diǎn)，如飛書首頁主要是想突出其產(chǎn)品能夠提高工作效率，所以直接把“在飛書，享高效”slogan這句話放在了首頁的第一屏，輔助文案詳細(xì)的介紹了產(chǎn)品的核心功能，直接抓住用戶的痛點(diǎn)。用戶完成注冊以后，進(jìn)入到功能頁面，如右下圖可以看出，其系統(tǒng)布局的模塊分成三份，占面積最大的模塊屬于產(chǎn)品最核心的部分也就是聊天窗口，較重要部分是聯(lián)系人部分，最小區(qū)域是功能Tab部分。

1.4 小結(jié)

所以對于設(shè)計(jì)師而言，在設(shè)計(jì)頁面時(shí)必須熟練掌握一些基本設(shè)計(jì)基礎(chǔ)知識，并且將這些知識靈活運(yùn)用到實(shí)際的工作當(dāng)中。比如設(shè)計(jì)師在搭建系統(tǒng)布局時(shí)需要熟知頁面視覺層次、格式塔理論、信息框架等知識才可創(chuàng)建合理的布局基礎(chǔ)。當(dāng)然布局框架只是整個(gè)產(chǎn)品的基礎(chǔ)骨架，在骨架確定之后，設(shè)計(jì)師才可進(jìn)行下一步的設(shè)計(jì)，如統(tǒng)一的視覺表達(dá)元素，清晰的功能操作，流暢的交互表達(dá)。

2、布局的設(shè)計(jì)原則

系統(tǒng)布局規(guī)范，需要通過統(tǒng)一的設(shè)計(jì)元素和間距規(guī)范去引導(dǎo)使用者們（使用規(guī)范的設(shè)計(jì)師）跨平臺使用并且能夠適配不同屏幕尺寸，目的是達(dá)到一致性，可適配、可控性原則。

一致性：對于界面來講，界面中的元素和結(jié)構(gòu)需要保持一致性，如：在使用布局時(shí)應(yīng)當(dāng)使用一致的網(wǎng)格，基準(zhǔn)線和填充，在使用設(shè)計(jì)元素時(shí)配色、圖標(biāo)、文本等需保持一致。

可適配：布局是可自適應(yīng)的，跟據(jù)用不在不同的設(shè)計(jì)環(huán)境下能夠通過交互動效、界面樣式有效作出極致適配反應(yīng)。用戶操作后需給出即時(shí)反應(yīng)。

可控性：當(dāng)用戶看到界面時(shí)應(yīng)直觀有效傳遞內(nèi)容，如界面中模塊區(qū)域明確、內(nèi)容組織明確、表意明確都能使得用戶快速理解。界面需要簡單直白，讓用戶快速識別，減少用戶記憶負(fù)擔(dān)。

3、適配方案

在設(shè)計(jì)過程中，為了減少設(shè)計(jì)師們的日常溝通和理解成本，在設(shè)計(jì)內(nèi)部我們統(tǒng)一了一套設(shè)計(jì)畫板尺寸為1280。經(jīng)過我們官方調(diào)研得出在中臺系統(tǒng)中用戶使用的電腦屏幕主流分辨率分別為：1440*900、1366*768、1920*1080、1280*800，而1280是主流分辨率中最小且最為保險(xiǎn)的的一個(gè)尺寸，在設(shè)計(jì)頁面時(shí)設(shè)計(jì)師如果能夠在1280尺寸下，縮小寬度或拉升頁面寬度都能保證沒有遮擋或擠壓問題，那么設(shè)計(jì)是合理的。在我們的規(guī)范中頁面再小于1280時(shí)需要吊起系統(tǒng)的橫向滾動條。在中臺系統(tǒng)中考慮到用戶效率問題很少做響應(yīng)式，所以常規(guī)情況下設(shè)計(jì)師會限定界面的一個(gè)最小值。如果設(shè)計(jì)師把畫板設(shè)置為1440或者1366時(shí)可能會存在其在畫板中頁面大小正好合適，但是頁面上線以后縮小瀏覽器可能會發(fā)生遮擋或擠壓的情況。所以我們建議設(shè)計(jì)師們使用1280寬度畫板畫圖。

4、框架

首先先分析一下頁面框架，我們將頁面的用戶操作行為進(jìn)行層級區(qū)分。我們至下而上將元素進(jìn)行層級分層，目的是把用戶界面模塊化。界面可分成背景區(qū)域、內(nèi)容層、全局控制層、內(nèi)容彈層，每一層都具備獨(dú)特性，將界面中所有的信息層級提取分類并且按結(jié)構(gòu)屬性分層，目的是能夠使得頁面視覺和交互邏輯符合用戶的習(xí)慣認(rèn)知。之前我們有提到過視覺層次、格式塔理論和信息框架，設(shè)計(jì)師在創(chuàng)建這一步的時(shí)候可以用來指導(dǎo)搭建一套合理的頁面信息層級，一個(gè)內(nèi)容模塊都屬于一個(gè)容器，容器可以承載各種內(nèi)容元素。

4.1 背景層

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

4.2 內(nèi)容層

視圖結(jié)構(gòu)中最核心和復(fù)雜的一層，他與業(yè)務(wù)強(qiáng)相關(guān)，內(nèi)容層的容器承載了業(yè)務(wù)場景的用戶需要獲取的核心信息以及輔助核心任務(wù)的操作。容器承載了內(nèi)容，從Material Design中的Elevation（海拔）概念中可以了解到，它屬于第二層級內(nèi)容，基本布局結(jié)構(gòu)有平行結(jié)構(gòu)或者父子結(jié)構(gòu)。如下圖卡片屬于容器，卡片中承載了數(shù)據(jù)圖表等內(nèi)容，整個(gè)卡片+內(nèi)容就屬于內(nèi)容層。

4.3 全局控制層

全局控制層我們定義他在內(nèi)容層之上，屬于頁面第三層級內(nèi)容，一般在業(yè)務(wù)場景中對整個(gè)網(wǎng)站的控制以及導(dǎo)航功能如：Header menu、Sidebar menu組件，如下圖中Header menu浮在內(nèi)容層之上。

4.4 內(nèi)容彈層

當(dāng)前任務(wù)或者內(nèi)容相關(guān)的臨時(shí)出現(xiàn)層，優(yōu)先級高于內(nèi)容層，一般承載當(dāng)前需要臨時(shí)處理的任務(wù)或者需要進(jìn)行內(nèi)容補(bǔ)充說明等功能。如：Modal（Dialog各個(gè)平臺叫法不一致）、Tooltip、Popover、Notification等組件 。其中Modal是以滑出或者彈出的形式展現(xiàn)給用戶。Modal它包括兩種類型，一種是模態(tài)內(nèi)容層不可操控，被蒙版遮罩禁用，比如在業(yè)務(wù)中需要較為聚焦的分支流程操作時(shí)使用。另一種是非模態(tài)，吊起彈出層后不印象內(nèi)容層操作。當(dāng)然，Tooltip、Popover、Notification都屬于非模態(tài)，反饋較輕，不干擾用戶使用界面。如下圖的頁面中的內(nèi)容彈層使用了Popover，在次頁面它的功能就是加以補(bǔ)充說明。

網(wǎng)格基礎(chǔ)

1、單位

科技高速發(fā)展，屏幕分辨率也越來越多樣化對于UI/UX設(shè)計(jì)師來講必須熟練的基本知識方便日常工作所需。首先我們先了解一下屏幕中的一些單位。

【PX】pixel，像素，大多數(shù)電子設(shè)備成像的基本單元，同樣尺寸的屏幕成像單元越細(xì)小、越密集的屏幕，分辨率就越高；

【PT】 point，點(diǎn)，這個(gè)單位，就同時(shí)出現(xiàn)在 iOS、CSS、還有傳統(tǒng)的平面設(shè)計(jì)里，與px相比px是相對單位而pt絕對單位，如在設(shè)計(jì)稿中如果導(dǎo)出一倍圖1px=1pt那么導(dǎo)出二倍圖就是2px=1pt，它是一個(gè)絕對長度，為1/72英寸；

【PPI】pixel per inch，每英寸像素?cái)?shù)，決定電子設(shè)備的物理顯示尺寸，只有涉及到顯示才有意義。該值越高，則屏幕越細(xì)膩；

【DPI】dot per inch，與PPI一致，唯一區(qū)別是它表示每英寸多少點(diǎn)，該值越高，則圖片越細(xì)膩；

【DP】density-independent pixel，是安卓開發(fā)用的長度單位，1dp等于屏幕像素密度為160ppi時(shí)1px的長度，因此dp在整個(gè)系統(tǒng)大小是固定的。

【SP】 scale-independent pixel，安卓開發(fā)用的字體大小單位，可以認(rèn)為SP=DP。

2、像素密度

在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能導(dǎo)致開發(fā)實(shí)現(xiàn)稿的視覺不符合設(shè)計(jì)師心理預(yù)期，比如：相同像素尺寸的UI元素在低密度屏幕上顯得較模糊，而在高密度屏幕上則比較清楚。同一物理尺寸（肉眼所見尺寸）下，低密度顯示器的像素個(gè)數(shù)明顯小于高密度顯示器的像素個(gè)數(shù)。

其實(shí)像素是與密度沒有關(guān)聯(lián)，我們簡稱密度為DP(讀作DIP，英文全稱 Density-independent pixel)，它是可縮放的靈活單位，可在任何屏幕下現(xiàn)實(shí)相同的尺寸，如圖顯示，紅色網(wǎng)格為像素密度，被放大內(nèi)容為UI元素物理尺寸。

所以我們可以得出，DP可以自適應(yīng)屏幕的密度，不管屏幕密度怎么變化，實(shí)際顯示的物理尺寸相同，DP可以保證物理尺寸的一致性，所以DP是目前比較適合UI設(shè)計(jì)的單位。當(dāng)屏幕的密度為160的一個(gè)物理像素時(shí)，1PD=1PX。要計(jì)算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。

3、網(wǎng)格

3.1 關(guān)于網(wǎng)格

網(wǎng)格線(Grid Line)

網(wǎng)格線又稱布局分割線，它是構(gòu)成網(wǎng)格結(jié)構(gòu)的分界線。一般在布局中它們是由行網(wǎng)格線和列網(wǎng)格線組成。如下圖是模擬網(wǎng)格做了一個(gè)示意，其中橘黃色兩根線分別是行網(wǎng)格線和列網(wǎng)格線。

網(wǎng)格軌道(Grid Track)

兩個(gè)相鄰網(wǎng)格線之間的空間。你可以把它們想像成網(wǎng)格的行或列。如下圖橘黃色的行網(wǎng)格線和列網(wǎng)格線之間的空間既是網(wǎng)格軌道。

網(wǎng)格單元格(Grid Cell)

兩個(gè)相鄰的行網(wǎng)格線和兩個(gè)相鄰的列網(wǎng)格線之間的空間屬于網(wǎng)格單元格。這是網(wǎng)格系統(tǒng)的一個(gè)“單元”。如下圖橘黃色的行網(wǎng)格線和列網(wǎng)格線交叉處即是網(wǎng)格單元格。

網(wǎng)格區(qū)域(Grid Area)

由單個(gè)或多個(gè)網(wǎng)格單元格組成，它是可以用來擺放頁面元素。如下圖所示，橘黃色的行網(wǎng)格線和列網(wǎng)格線交叉處即是網(wǎng)格區(qū)域。

3.2 網(wǎng)格設(shè)置

在設(shè)計(jì)界面時(shí)可以通過網(wǎng)格定制能夠使界面更加有序、整齊、規(guī)范，網(wǎng)格的主要用途之一是保持設(shè)計(jì)元素對齊和排序。通過建立一個(gè)網(wǎng)格系統(tǒng)，設(shè)計(jì)師可以為自己創(chuàng)建一個(gè)結(jié)構(gòu)來適配不同的屏幕寬度。

在我制定的規(guī)范中一般會把網(wǎng)格的基數(shù)設(shè)置為4，它不僅符合偶數(shù)的思路同時(shí)也能夠匹配多數(shù)主流的顯示設(shè)備，如中臺系統(tǒng)的用戶主流分辨率用1440*900、1366*768、1280*800。我們可以通過設(shè)置網(wǎng)格規(guī)范幫助設(shè)計(jì)師快速搭建頁面，使用有律可循的布局空間的設(shè)計(jì)給到開發(fā)減少溝通成本。下圖所示設(shè)計(jì)布局網(wǎng)格由三個(gè)元素組成：1.列寬，2.間距，3.邊距。

在Sketch中設(shè)置網(wǎng)格，在菜單欄中找【視圖】-【畫布】-【網(wǎng)格設(shè)置】-彈出浮層可設(shè)置網(wǎng)格大小，網(wǎng)格設(shè)置的基數(shù)設(shè)置成4，之后在設(shè)計(jì)界面時(shí)可按照網(wǎng)格基礎(chǔ)的倍數(shù)作為組件的大小和頁面元素間距分割，如下圖：

我們放大頁面局部大家可以看到，把網(wǎng)格基數(shù)設(shè)置成4，每個(gè)網(wǎng)格單元格為4*4大小。同理，如果把網(wǎng)格基數(shù)設(shè)置成8以后，每個(gè)網(wǎng)格單元格大小為8*8大小。

定義布局模塊

界面框架內(nèi)系統(tǒng)布局是頁面所有模塊的組合方式，我們定義一個(gè)頁面框架中基礎(chǔ)模塊和內(nèi)容模塊的數(shù)量最好不超過3個(gè)。經(jīng)過調(diào)研和歸納總結(jié)出3大布局類型，分別是上下布局、左右布局、T字型布局。

上下布局

上下布局布局是Web端運(yùn)用最廣泛的布局方式之一，頁面內(nèi)容區(qū)以feed流形式展現(xiàn)，一般用在Web端官網(wǎng)首頁。設(shè)計(jì)師普遍做法是對兩邊留白區(qū)域?yàn)閮?nèi)容區(qū)并進(jìn)行最小值的定義一般定義值為1200較多（具體寬度要設(shè)計(jì)師如何設(shè)置柵格，后面會講到如何設(shè)置柵格），當(dāng)留白區(qū)域到達(dá)極小超過極限值之后需要對中間的內(nèi)容區(qū)域進(jìn)行動態(tài)縮放或遮擋，此邏輯需設(shè)計(jì)師根據(jù)業(yè)務(wù)所需而定。也有少部分設(shè)計(jì)師會設(shè)計(jì)成全屏布局，內(nèi)容隨瀏覽器寬度自適應(yīng)。

其優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰簡單，強(qiáng)突出內(nèi)容區(qū)，但缺點(diǎn)是布局的規(guī)矩呆板，變化少。設(shè)計(jì)師如果不注意合理的視覺元素和色彩細(xì)節(jié)變化，用戶很容易感覺到乏味,此布局適用于層級較為簡單頁面。

巨量引擎（Ocean Engine）是字節(jié)跳動旗下的營銷服務(wù)品牌，整合了今日頭條、抖音短視頻、火山小視頻、西瓜視頻、懂車帝、Faceu激萌、輕顏、穿山甲等產(chǎn)品的營銷能力，為全球廣告主提供綜合的數(shù)字營銷解決方案。我在設(shè)計(jì)此官網(wǎng)時(shí)正是采用了上下布局作為頁面布局，頂部導(dǎo)航整合了所有子頁面的內(nèi)容，導(dǎo)航下方為主要內(nèi)容區(qū)并且內(nèi)容定寬，當(dāng)時(shí)采用此布局原因第一是因?yàn)榇喂倬W(wǎng)層級較簡單只有三個(gè)層級內(nèi)容，第二是官網(wǎng)更需要的是突出內(nèi)容區(qū)，所有頁面使用次布局更為合適。

左右布局

設(shè)計(jì)師在設(shè)計(jì)重內(nèi)容，輕導(dǎo)航類型網(wǎng)站是常用左右布局作為基礎(chǔ)框架進(jìn)行頁面設(shè)計(jì)。此布局把系統(tǒng)頁面分為兩大模塊，其中設(shè)計(jì)師常見的做法是將左側(cè)設(shè)置成導(dǎo)航欄模塊并且固定，常常用來控制全局內(nèi)容。而右側(cè)區(qū)域設(shè)置成工作區(qū)域或內(nèi)容區(qū)，內(nèi)容區(qū)可進(jìn)行動態(tài)縮放。

下圖為飛書溝通窗口截圖，由于關(guān)系到內(nèi)部信息保密性我把內(nèi)容進(jìn)行了模糊，從外觀結(jié)構(gòu)上看還是能大致了解飛書結(jié)構(gòu)是采用了左右布局，整個(gè)布局結(jié)構(gòu)清晰有理也是符合左右布局特點(diǎn)。從交互體驗(yàn)分析左側(cè)屬于導(dǎo)航區(qū)，它承載了不同功能并且固定。飛書屬于即時(shí)溝通產(chǎn)品設(shè)計(jì)師考慮到瀏覽器窗口有限所以對導(dǎo)航設(shè)計(jì)成較小模塊，而右邊為聊天窗口對于業(yè)務(wù)屬性分析它更為重要，所以模塊較大。其導(dǎo)航欄固定，內(nèi)容區(qū)可進(jìn)行動態(tài)縮放。

T字型布局

T字型布局常用在Web端的中臺系統(tǒng)中，因?yàn)橹信_系統(tǒng)業(yè)務(wù)結(jié)構(gòu)復(fù)雜、層級多，而T字型布局能夠解決復(fù)雜結(jié)構(gòu)的問題。使用此結(jié)構(gòu)能夠把頁面結(jié)構(gòu)清晰化，主次更加分明。設(shè)計(jì)師常常的做法是將頂部作為一級導(dǎo)航欄方便控制全局，二左邊設(shè)計(jì)成是二級導(dǎo)航并且固定導(dǎo)航欄固定，右邊的內(nèi)區(qū)域可進(jìn)行動態(tài)縮放(一般會把其設(shè)計(jì)成柵格動態(tài)區(qū)域)，內(nèi)容隨瀏覽器寬度自適應(yīng)。

下圖是Material Design設(shè)計(jì)文檔，首先簡單介紹一下Material Design它是由谷歌的設(shè)計(jì)團(tuán)隊(duì)創(chuàng)建的一種語言，宗旨是幫助設(shè)計(jì)師們創(chuàng)建易用性和實(shí)用性較強(qiáng)的網(wǎng)站和應(yīng)用程序，其設(shè)計(jì)理念是將現(xiàn)實(shí)中的物理學(xué)帶入進(jìn)設(shè)計(jì)中。Material Design設(shè)計(jì)文檔中的結(jié)構(gòu)使用了T字型布局作為基礎(chǔ)布局。頁面分為了三個(gè)模塊，其中頂部導(dǎo)航作為頁面一級內(nèi)容進(jìn)行全局控制，接下來左邊為側(cè)邊導(dǎo)航作為二級內(nèi)容控制頁面，右邊是內(nèi)容區(qū)滿足用戶使用瀏覽。從放眼望去整個(gè)頁面架構(gòu)清晰明了。

小節(jié)

以上為Web最常見的三大布局，但是需要大家在實(shí)際的工作中靈活運(yùn)用。設(shè)計(jì)師在日常工作中可能會遇到更為特殊的業(yè)務(wù)場景，設(shè)計(jì)師可以通過整理基礎(chǔ)模塊然后分析其業(yè)務(wù)的信息框架，將模塊進(jìn)行相互組合、嵌套歸納可以總結(jié)出更多的Web端布局框架并落地到業(yè)務(wù)中。

網(wǎng)頁柵格

剛剛在定義布局模塊中已經(jīng)分析過了三大布局類型，接下要分享的是UI設(shè)計(jì)師更為關(guān)注內(nèi)容“網(wǎng)頁柵格”。網(wǎng)頁柵格也是設(shè)計(jì)師口中常常提及的柵格系統(tǒng)。其實(shí)網(wǎng)頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來，它延續(xù)了平面設(shè)計(jì)的方法與風(fēng)格，在網(wǎng)頁中使用柵格能夠使得網(wǎng)頁信息展現(xiàn)更加清晰明了、美觀易讀。

首先網(wǎng)頁柵格系統(tǒng)基本由是柵格總寬度/頁面總寬度（W）、一個(gè)柵格的寬度（a）、柵格與柵格之間的間隙（i）、一個(gè)單元的寬度（A）、外邊距（M）組成。

列寬

一個(gè)柵格的寬度（a），我們稱之為列寬，一個(gè)列寬包涵了N個(gè)網(wǎng)格單元格（Grid Cell）我們也可以把它看成一個(gè)網(wǎng)格區(qū)域(Grid Area)，在上面我們已經(jīng)講到過網(wǎng)格的內(nèi)容，主要目的正是為柵格做鋪墊。其中我把一個(gè)網(wǎng)格單元格設(shè)置為4（原因在網(wǎng)格中也解釋過，如果忘記的同學(xué)可以爬樓看下）。由此可見列寬非固定值，這樣可以使內(nèi)容自由適配任何屏幕尺寸。在柵格中列寬由屏幕尺寸決定。

水槽

柵格與柵格之間的間隙（i），我們稱之為水槽，一個(gè)水槽寬度大于等于1個(gè)網(wǎng)格單元（Grid Cell）。在柵格中水槽為一個(gè)定值，寬度可以是N個(gè)網(wǎng)格單元，如網(wǎng)格單元格設(shè)置成4，那么水槽可以是4、8、12、16…N*4

柵格單元

1個(gè)列寬+1個(gè)水槽寬度即一個(gè)單元的寬度，一個(gè)柵格總寬是由N個(gè)柵格單元組成，次寬度不固定，由屏幕尺寸決定。

柵格總寬

列寬+水槽再成以N即是一個(gè)柵格的總寬，公式為：W=(A*n)-i。

柵格設(shè)置

經(jīng)過調(diào)研我們得出常見的柵格分為12列柵格系統(tǒng)和24列柵格系統(tǒng)。其中12列柵格系統(tǒng)在流行的前端開發(fā)開源工具庫Bootstrap與Foundation中廣泛使用，適用于業(yè)務(wù)信息分組較少、業(yè)務(wù)結(jié)構(gòu)較簡，單個(gè)盒子內(nèi)信息體積較大的中后臺頁面設(shè)計(jì)。24等分的柵格系統(tǒng)適用于業(yè)務(wù)信息量大、信息分組較多、單個(gè)盒子內(nèi)信息體積較小的中后臺頁面設(shè)計(jì)；相對12柵格系統(tǒng)，24柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場景。如下圖分別是12柵格系統(tǒng)（左）和24柵格系統(tǒng)（右）。

小結(jié)

在柵格系統(tǒng)結(jié)合布局結(jié)構(gòu)和網(wǎng)格做了我做了一些知識結(jié)合，其實(shí)前面所講的網(wǎng)格版塊和布局版塊都是為柵格做一個(gè)鋪墊，利于同學(xué)們更加深入的了解網(wǎng)格、布局、柵格三者的關(guān)系。