本文主要介紹部落沖突5本最強(qiáng)布陣2021(部落沖突家鄉(xiāng)五本)，下面一起看看部落沖突5本最強(qiáng)布陣2021(部落沖突家鄉(xiāng)五本)相關(guān)資訊。
在當(dāng)今多終端多設(shè)備的場(chǎng)景下，多屏設(shè)計(jì)已經(jīng)成為當(dāng)今產(chǎn)品設(shè)計(jì)需要考慮的重要點(diǎn)，也是商業(yè)設(shè)計(jì)不可或缺的一部分。網(wǎng)格系統(tǒng)可以輔助設(shè)計(jì)師進(jìn)行界面布局，優(yōu)化用戶體驗(yàn)。本文詳細(xì)介紹了該系統(tǒng)設(shè)計(jì)，
希望對(duì)你有幫助。
如今，在多終端、多設(shè)備尺寸的加持下，多屏設(shè)計(jì)已經(jīng)成為商業(yè)設(shè)計(jì)中不可或缺的一部分。為了使所用界面的視覺(jué)表達(dá)統(tǒng)一一致，同時(shí)在不同系統(tǒng)和不同大小的設(shè)備上保持良好的用戶體驗(yàn)，網(wǎng)格系統(tǒng)顯得尤為重要。
可以輔助設(shè)計(jì)師制作界面排版的版面方案，將多個(gè)元素/內(nèi)容以網(wǎng)格的形式鏈接在一起，實(shí)現(xiàn)多平臺(tái)、多尺寸適配，大大提高設(shè)計(jì)美感和工作效率。
一些優(yōu)秀的產(chǎn)品正在使用網(wǎng)格來(lái)規(guī)范界面信息的布局。雖然只是傳統(tǒng)設(shè)計(jì)方法的一部分，但只要不是太麻煩，網(wǎng)格系統(tǒng)可以用來(lái)解決很多設(shè)計(jì)布局問(wèn)題。
很多設(shè)計(jì)師都知道網(wǎng)格的重要性，但是由于自己對(duì)網(wǎng)格的了解不多，在設(shè)計(jì)中總會(huì)有一些方法可以入手。在本文中，作者將從自己瀏覽的大量文章和自己的工作經(jīng)驗(yàn)中對(duì)網(wǎng)格進(jìn)行系統(tǒng)的研究總結(jié)，
希望可以幫助初/中級(jí)設(shè)計(jì)師對(duì)網(wǎng)格有更深入的了解。
一.網(wǎng)格1的定義和重要性。網(wǎng)格源網(wǎng)格的概念來(lái)源于平面設(shè)計(jì)中的“網(wǎng)格”。早在13世紀(jì)，法國(guó)建筑師維拉德霍內(nèi)考特(villard de honnecourt)就創(chuàng)造了一種圖表，試圖實(shí)現(xiàn)“和諧設(shè)計(jì)”。
這也是黃金比例之后第一次將網(wǎng)格與之結(jié)合，從而產(chǎn)生固定比例的頁(yè)面布局。
18世紀(jì)工業(yè)革命大規(guī)模生產(chǎn)之初，隨著報(bào)紙、傳單等主流印刷材料的興起，設(shè)計(jì)師需要解決“向不同的人傳達(dá)不同的信息并自然瀏覽，同時(shí)還要防止不同部分爭(zhēng)奪讀者注意力”的問(wèn)題。網(wǎng)格的雛形已經(jīng)出現(xiàn)。
20世紀(jì)初，設(shè)計(jì)師發(fā)現(xiàn)用網(wǎng)格設(shè)計(jì)印刷作品，可以使排版布局更清晰，信息傳遞更有效，這就演變成了平面設(shè)計(jì)中的一種方法。
20世紀(jì)中期，約瑟夫米勒-布羅克曼寫(xiě)了《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》這本書(shū)，影響設(shè)計(jì)界至今。
不難發(fā)現(xiàn)，無(wú)論是前幾個(gè)世紀(jì)的印刷出版物，還是今天的互聯(lián)網(wǎng)產(chǎn)品的界面布局，網(wǎng)格都可以作為組織信息的工具，幫助設(shè)計(jì)師實(shí)現(xiàn)一致和諧的信息布局。
2.什么是網(wǎng)格grid和a grid在英文中都用“grid”來(lái)表示。其本質(zhì)是為版面提供一個(gè)基本的設(shè)計(jì)框架，這也是實(shí)現(xiàn)組織化設(shè)計(jì)的方法之一。在平面設(shè)計(jì)中被稱(chēng)為“網(wǎng)格”，在網(wǎng)頁(yè)/移動(dòng)終端中更多地被稱(chēng)為“網(wǎng)格”。
網(wǎng)格是根據(jù)平面中的網(wǎng)格來(lái)開(kāi)發(fā)的，通過(guò)設(shè)置一定的規(guī)則和合理的基線來(lái)規(guī)范界面中的元素(文本/圖像)，使各個(gè)區(qū)域可以相對(duì)獨(dú)立但又相互聯(lián)系，形成整個(gè)界面，最終呈現(xiàn)出清晰可讀的信息布局。
3.為什么要用網(wǎng)格？首先，對(duì)于用戶來(lái)說(shuō)，使用網(wǎng)格可以讓內(nèi)容布局有規(guī)律。通過(guò)定義留白、對(duì)齊、分段等各種比例關(guān)系，既能降低用戶的認(rèn)知成本，又能使信息更加清晰，有效提高用戶的瀏覽和接收效率。
其次，對(duì)于r&d團(tuán)隊(duì)來(lái)說(shuō)，網(wǎng)格通過(guò)統(tǒng)一的標(biāo)準(zhǔn)和規(guī)范來(lái)約束設(shè)計(jì)師，在協(xié)調(diào)中產(chǎn)生一致的視覺(jué)效果，從而避免一人一風(fēng)格的混亂場(chǎng)景，同時(shí)減少一些細(xì)節(jié)的溝通，提高決策和輸出的效率。在開(kāi)發(fā)過(guò)程中，
程序員可以根據(jù)設(shè)計(jì)的規(guī)則封裝調(diào)用一些組件和模塊，不僅高度還原了設(shè)計(jì)效果，還提高了開(kāi)發(fā)效率。
此外，在設(shè)計(jì)web界面時(shí)，網(wǎng)格系統(tǒng)可以適應(yīng)不同的設(shè)備大小，如電腦、平板電腦、手機(jī)等。合理兼容多終端、多系統(tǒng)條件下的自適應(yīng)效果。
二、網(wǎng)格系統(tǒng)的構(gòu)成網(wǎng)格系統(tǒng)沒(méi)有我們想象的那么復(fù)雜。它主要由網(wǎng)格、列、匯、邊距、總寬度、容器和盒子組成。只要把它們之間的關(guān)系和定義搞清楚了，我們就一個(gè)一個(gè)來(lái)理解：
1.網(wǎng)格grid(網(wǎng)格)是由基本單位“細(xì)胞”組成的，也稱(chēng)為最小細(xì)胞，網(wǎng)格是由一系列規(guī)則的網(wǎng)格組成的。通常我們會(huì)用8作為網(wǎng)格中最小的單位來(lái)增量。
為什么用8作為基數(shù)倍數(shù)？
首先，作為一個(gè)偶數(shù)，程序經(jīng)過(guò)單位轉(zhuǎn)換后可以整除，避免像素中的小數(shù)點(diǎn)；其次，8是一個(gè)增量單位，既不會(huì)顯得瑣碎，也不會(huì)使內(nèi)容過(guò)于分散。當(dāng)界面中所有元素都是8的倍數(shù)時(shí)，元素的大小和間距都有規(guī)律可循。
之前筆者曾寫(xiě)過(guò)一篇「間距」類(lèi)的文章，感興趣的伙伴可以去看一下。
2. 列（column）列（column）指的是柵格數(shù)量，如12柵格有12個(gè)列、24柵格就是24個(gè)列，主要用來(lái)對(duì)齊內(nèi)容。通過(guò)柵格的列數(shù)來(lái)控制版面的呼吸感及節(jié)奏感，列數(shù)越多、內(nèi)容排版越精細(xì)，
反之列數(shù)越少、內(nèi)容排版就越疏松。
3. 水槽（gutter）水槽（gutter）是指列與列之間的間距，通過(guò)留白以實(shí)現(xiàn)界面中的信息元素分割及版式呼吸感。水槽的寬度對(duì)設(shè)計(jì)風(fēng)格會(huì)存在一定影響，水槽越大留白就越多、其呼吸感就越好，
反之留白就越少、內(nèi)容也會(huì)變得較為緊湊。
4. 邊距（margin）邊距（margin）是指界面內(nèi)容到屏幕邊緣的距離，主要用來(lái)控制核心內(nèi)容的展示邊界，所以是禁止放置任何內(nèi)容的（部分浮窗、返回頂部按鈕、右側(cè)吸附邊欄除外）。
邊距值的大小會(huì)直接影響到柵格區(qū)域空間，這點(diǎn)大家自行理解即可。
5. 柵格總寬（container）柵格總寬（container）是指所有列加所有水槽再加上兩側(cè)邊距的總和，即整個(gè)柵格系統(tǒng)的總寬度。
6. 容器盒子（col-n）容器盒子（col-n）是指布局信息的版面區(qū)域，通常設(shè)計(jì)師在設(shè)定好基礎(chǔ)柵格后，會(huì)根據(jù)實(shí)際情況去定義一塊內(nèi)容需占用幾個(gè)列的寬度并形成容器，后續(xù)在設(shè)計(jì)過(guò)程中，
會(huì)將文字、圖片、按鈕等元素約束在限定的容器寬度以內(nèi)形成復(fù)用組件，最終組合拼裝成完整的設(shè)計(jì)方案。
三、柵格系統(tǒng)制作流程1. 設(shè)計(jì)柵格寬度在設(shè)計(jì)web端界面時(shí)設(shè)計(jì)師需要先根據(jù)實(shí)際使用場(chǎng)景確定好布局后，再來(lái)設(shè)定柵格區(qū)域，如下列布局：
屏幕寬度并不等于柵格的寬度，大多數(shù)情況下，我們會(huì)基于1920、1440這兩個(gè)尺寸來(lái)定義設(shè)計(jì)稿的寬度，但真正放置信息內(nèi)容的區(qū)域并非設(shè)計(jì)稿尺寸，需要做到多平臺(tái)、多尺寸顯示器的適配，
通常會(huì)將柵格寬度定義在1024px~1400px之間。
例如：常見(jiàn)的1024px、1200px、1280px、1400px等，可滿足絕大多數(shù)主流顯示器，如果柵格寬度超過(guò)1400px，在很多筆記本電腦上瀏覽頁(yè)面時(shí)，會(huì)出現(xiàn)左右滾動(dòng)條，體驗(yàn)非常不友好。
2. 選擇柵格列數(shù)1）12柵格
12列柵格很常見(jiàn)，一些業(yè)務(wù)信息分組較少的商業(yè)網(wǎng)站、門(mén)戶網(wǎng)站等使用的就是12柵格，它能夠被2、3、4、6 整除，很容易滿足信息較為復(fù)雜的等分布局場(chǎng)景。
另外，針對(duì)不對(duì)稱(chēng)布局的容器組合也能將信息體現(xiàn)的很和諧，如雙欄布局使用4+8、3+9柵格，三欄布局使用2+8+2、3+3+6 柵格等，變化較為靈活。
2）24柵格
24列柵格適合信息量大、分組多且多樣復(fù)雜的使用場(chǎng)景，很多視覺(jué)區(qū)域較大、需要精細(xì)化布局的b端web設(shè)計(jì)采用的就是24柵格，相比12柵格，有更多的區(qū)域劃分空間，其布局的靈活性也更強(qiáng)。
需要注意的是，24柵格因列的數(shù)量比較多，很多時(shí)候列寬無(wú)法被精準(zhǔn)整除，不過(guò)相差的像素?cái)?shù)值極小，往往無(wú)法被用戶肉眼覺(jué)察，無(wú)傷大雅。柵格本身的目的就是為了保持視覺(jué)效果的協(xié)調(diào)與統(tǒng)一，并非為了死磕某個(gè)像素，
特殊情況區(qū)別對(duì)待即可。
3）5柵格
5列柵格一般用在移動(dòng)端設(shè)計(jì)中，因設(shè)備屏幕的橫向空間有限，所以很少使用，例如：針對(duì)“金剛區(qū)”的5圖標(biāo)（一行）、10圖標(biāo)（兩行）的規(guī)范化排版。如果想進(jìn)一步追求后續(xù)的靈活性、避免奇數(shù)的不便，
也可將5列柵格拆分成10列，布局、視覺(jué)效果基本能保持一致。
其實(shí)在實(shí)際設(shè)計(jì)中，設(shè)計(jì)師們大多會(huì)使用間距來(lái)規(guī)范界面的排版與布局，相比5列柵格會(huì)更靈活、更便捷。
3. 定義水槽與邊距水槽就是列的間隔，其定義方式可以延用間距系統(tǒng)的制定標(biāo)準(zhǔn)，以8px為最小單位進(jìn)行推導(dǎo)，如s=8px、m=16px、l=24px、xl=32px、xxl=40px、…等，
這樣更容易保持視覺(jué)的一致性，最終到底使用哪個(gè)值沒(méi)有絕對(duì)的要求，這還需要根據(jù)產(chǎn)品的調(diào)性及設(shè)計(jì)風(fēng)格來(lái)決定，水槽的數(shù)值越大，頁(yè)面的留白間隙就越多。
當(dāng)我們確定好內(nèi)容區(qū)寬度、水槽寬度及數(shù)量后，計(jì)算出列寬（上述有提到不一定整除）并將整體進(jìn)行居中顯示，兩側(cè)即自動(dòng)形成邊距。
四、柵格與響應(yīng)式的結(jié)合1. 自適應(yīng)與響應(yīng)式1）自適應(yīng)
自適應(yīng)布局是為了讓網(wǎng)頁(yè)內(nèi)容根據(jù)不同終端來(lái)自行適配布局，設(shè)計(jì)師需要制定好同一設(shè)計(jì)稿的變化規(guī)則，程序員在開(kāi)發(fā)時(shí)創(chuàng)建多個(gè)布局，對(duì)不同的終端分別提供一套獨(dú)立的前端代碼，
系統(tǒng)就能自行判斷當(dāng)前訪問(wèn)的是pc端、平板還是手機(jī)。
我們可以做一個(gè)測(cè)試，對(duì)自適應(yīng)網(wǎng)頁(yè)窗口的寬度進(jìn)行調(diào)整，就會(huì)發(fā)現(xiàn)每經(jīng)過(guò)一個(gè)斷點(diǎn)時(shí)，頁(yè)面的元素位置就會(huì)發(fā)生改變，呈現(xiàn)出不同的布局效果。需要明確的是，當(dāng)窗口寬度未達(dá)到下一個(gè)斷點(diǎn)之前，
元素不會(huì)隨著窗口的調(diào)整而變化。
自適應(yīng)效果因需要前端為每個(gè)終端提供獨(dú)立的代碼，固開(kāi)發(fā)成本較高，在設(shè)計(jì)時(shí)，元素的大小、位置變化不必太過(guò)復(fù)雜，只需保留必要的功能入口即可。
2）響應(yīng)式
響應(yīng)式?jīng)]有自適應(yīng)那么多的控制，前端只需通過(guò)一套代碼即可無(wú)縫銜接電腦端、平板和手機(jī)，可多端同步生效，其開(kāi)發(fā)成本及設(shè)計(jì)成本都相對(duì)較低，適應(yīng)性更強(qiáng)。
響應(yīng)式布局最典型的就是當(dāng)頁(yè)面窗口寬度發(fā)生變化時(shí)，元素的大小隨時(shí)都在發(fā)生變化，特別是圖片的伸縮、整行文字的長(zhǎng)短變化尤為明顯。
2. 柵格行為變化1）固定柵格
將自適應(yīng)關(guān)聯(lián)到柵格上，簡(jiǎn)單來(lái)說(shuō)，就是頁(yè)面寬度在變化過(guò)程中未達(dá)到下一個(gè)斷點(diǎn)時(shí)，柵格的列與水槽寬度不變，頁(yè)面布局不會(huì)產(chǎn)生變化。當(dāng)達(dá)到預(yù)設(shè)斷點(diǎn)，柵格的列數(shù)與水槽會(huì)相應(yīng)增加或減少，頁(yè)面右側(cè)的內(nèi)容也會(huì)隨之增減，
但元素之間的尺寸與間距依然是固定的。
固定柵格的適配規(guī)則簡(jiǎn)單，實(shí)現(xiàn)成本也相對(duì)較低，但是因?yàn)樵诶爝^(guò)程中邊距的不固定性，局限了其適用范圍，一般只適合用在內(nèi)容居中、上下結(jié)構(gòu)布局類(lèi)型的產(chǎn)品中。需要注意的是，在過(guò)大或過(guò)小尺寸的屏幕上，
比例可能會(huì)顯得不夠協(xié)調(diào)。
2）流動(dòng)?xùn)鸥?
流動(dòng)?xùn)鸥竦倪吘?、水槽寬度是固定不變的，在達(dá)到下一個(gè)斷點(diǎn)前，列的數(shù)量也不會(huì)增加，列寬會(huì)跟隨頁(yè)面寬度左右伸縮，變化規(guī)則不一定是最小單位（8px）倍數(shù)，內(nèi)容元素也會(huì)隨著頁(yè)面寬度的變化而變化，
以保持頁(yè)面內(nèi)容始終充滿屏幕的可用空間。
我們可以將流動(dòng)?xùn)鸥竦囊曈X(jué)呈現(xiàn)方式稱(chēng)之為響應(yīng)式彈性布局，這種布局的兼容性很高，能很好的適應(yīng)多端設(shè)備及不同的屏幕分辨率。對(duì)于不同尺寸的卡片混排也能平滑過(guò)渡，不會(huì)顯得突兀，
例如：圖像、視頻、內(nèi)容編輯器、數(shù)據(jù)可視化等，除斷點(diǎn)變化外，內(nèi)容元素的縮放不會(huì)改變頁(yè)面的排版布局。
3）混合柵格
絕大多數(shù)的網(wǎng)站使用的都是流動(dòng)?xùn)鸥?，但一些后臺(tái)管理系統(tǒng)及工具型界面設(shè)計(jì)為了使布局既有固定的寬度、也有流動(dòng)的寬度，就會(huì)采用混合柵格的形式。
混合柵格的靈活性很高，特別是內(nèi)容較為復(fù)雜的產(chǎn)品會(huì)顯得更加友好，在不同分辨率的屏幕上都能達(dá)到理想的視覺(jué)效果。不過(guò)對(duì)于開(kāi)發(fā)來(lái)說(shuō)，規(guī)則相對(duì)復(fù)雜，實(shí)現(xiàn)成本較高。
五、部分問(wèn)題及處理方式1. 水槽中不要留下元素這里所說(shuō)的并非水槽中不能存在內(nèi)容，而是不要將單個(gè)元素或元素的邊緣置于水槽內(nèi)，否則就會(huì)參差不齊，違背了柵格的目的。如果你的元素過(guò)大，就讓他跨越柵格，
到達(dá)下一個(gè)列的右側(cè)邊緣。
2. 柵格不一定整除雖說(shuō)設(shè)計(jì)師對(duì)于每一個(gè)像素的的追求都很執(zhí)著，但大部分情況下柵格都是無(wú)法整除的，而相差的像素也無(wú)法被用戶以肉眼覺(jué)察。我們需要理解的是，柵格的目的是為了保持視覺(jué)的協(xié)調(diào)與統(tǒng)一，
而非像素級(jí)的精確。
舉個(gè)例子，以1920px的寬度、12柵格為例，內(nèi)容區(qū)寬度可以是1000px、1200px、1400px、1600px…，每一次內(nèi)容區(qū)寬度的變化都要將柵格的列寬重新調(diào)整，永遠(yuǎn)無(wú)法將柵格每次整除，
即便偶爾也是例外。
3. 柵格區(qū)域外的內(nèi)容柵格是為了規(guī)范內(nèi)容，并不是所有的內(nèi)容都需要柵格。大多數(shù)情況下我們只需要將主要內(nèi)容區(qū)域遵循柵格系統(tǒng)即可，
其他部分如固定導(dǎo)航、側(cè)邊懸浮欄、右下角彈窗…等不一定要跟隨屏幕尺寸或內(nèi)容的變化而變化。
4. 合理的打破柵格對(duì)齊對(duì)齊在柵格系統(tǒng)中的地位可謂是舉足輕重，不過(guò)在一些特殊場(chǎng)景中不必為了對(duì)齊而對(duì)齊，在不影響視覺(jué)效果的前提下，可以根據(jù)實(shí)際情況合理的打破對(duì)齊。
如下圖中的照片墻，利用極小的間距將一些寬度不同的照片排列在一起，雖然沒(méi)有同柵格的列寬對(duì)齊，但我們第一眼很容易將這些照片聯(lián)想成一個(gè)整體，同時(shí)又能輕松的單獨(dú)區(qū)分開(kāi)來(lái)，也不會(huì)影響整體布局。
5. 子父級(jí)模塊對(duì)齊父級(jí)在部分場(chǎng)景中，當(dāng)我們以卡片的形式將多個(gè)內(nèi)容形成一個(gè)信息組，這時(shí)可以忽略子級(jí)元素的對(duì)齊方式，父級(jí)卡片遵守柵格對(duì)齊即可。
結(jié)語(yǔ)柵格系統(tǒng)能為設(shè)計(jì)提供便捷，有助于設(shè)計(jì)效率的提升，很多設(shè)計(jì)師都會(huì)去關(guān)注柵格為什么重要，卻容易忽略柵格在實(shí)際項(xiàng)目中的使用原則，同時(shí)還要伴隨一些限制條件，所以并沒(méi)有平常想象的那么簡(jiǎn)單。
本篇文章提供了柵格系統(tǒng)的基礎(chǔ)知識(shí)，希望能夠拋磚引玉，幫助大家解決在使用過(guò)程中遇到的常見(jiàn)問(wèn)題，讓柵格更好的服務(wù)于設(shè)計(jì)，若有不足之處，歡迎補(bǔ)充。
專(zhuān)欄作家
大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自u(píng)nsplash，基于cc0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。