原文網(wǎng)址：https://medium.com/codeart-mk/law-and-order-in-ui-design-grids-894a267d7868
開始一個(gè)新項(xiàng)目會(huì)令人興奮,但是這也意味著要從一個(gè)令人害怕的空白頁面著手阵赠。今常會(huì)遇到“如何開始淌喻？”、“首先應(yīng)該做什么？”這樣的問題匾二，其實(shí)沒有正確答案，不如先行動(dòng)起來。
在紙、畫布棺亭、畫板上排列基礎(chǔ)參考線或布局，會(huì)給對(duì)完成設(shè)計(jì)作品一個(gè)有力地支撐蟋软。
在網(wǎng)站設(shè)計(jì)镶摘、登陸頁面設(shè)計(jì)、網(wǎng)站應(yīng)用等設(shè)計(jì)逐漸相互影響時(shí)岳守，設(shè)計(jì)基礎(chǔ)布局中應(yīng)該使用網(wǎng)格系統(tǒng)凄敢。網(wǎng)格系統(tǒng)會(huì)幫助設(shè)計(jì)師在空間中安排合適的元素和空間，使視覺看起來結(jié)構(gòu)緊湊湿痢、合理涝缝。
什么是柵格
柵格是由水平線和垂直線追尋一定規(guī)律所組成的結(jié)構(gòu)線，他像骨架一樣將所有元素組織到一起蒙袍，支撐著畫面上的所有設(shè)計(jì)內(nèi)容俊卤。
柵格并不意味著對(duì)設(shè)計(jì)的限制嫩挤，而是讓畫面中的所有設(shè)計(jì)元素更統(tǒng)一害幅、有序、整體岂昭，這使你的設(shè)計(jì)內(nèi)容更易被使用以现，讓用戶更好地理解你的設(shè)計(jì)意圖。
使用柵格的目的是什么？
·使設(shè)計(jì)過程更快更簡單
使用柵格可以讓一切設(shè)計(jì)快速推進(jìn)邑遏，幫助將所有元素放在合適的位置佣赖，并且在水平線與垂直線上測量適當(dāng)?shù)木嚯x。當(dāng)建立起可以將所有元素緊密結(jié)合在一起的結(jié)構(gòu)后记盒，可以幫助你設(shè)計(jì)出更多完美的作品憎蛤。
·聚集與統(tǒng)一
將所有元素放入柵格系統(tǒng)可以使畫面產(chǎn)生結(jié)構(gòu)和韻律，更容易識(shí)別纪吮，與看起來凌亂渙散的碎片比起來俩檬，用戶更喜歡和諧、統(tǒng)一的設(shè)計(jì)碾盟。柵格可以幫助在屏幕合理的位置擺放設(shè)計(jì)元素棚辽，同時(shí)保證所有元素是有序的狀態(tài)。
·響應(yīng)式設(shè)計(jì)
在現(xiàn)代設(shè)計(jì)中冰肴，界面設(shè)計(jì)指可以在各種設(shè)備屈藐、屏幕體驗(yàn)到的數(shù)字產(chǎn)品，小到手機(jī)的屏幕熙尉，大到電視屏幕联逻。在所有的應(yīng)用場景中，像素清晰骡尽、界面簡練遣妥、易懂、流暢攀细。在固定的屏幕大小箫踩，網(wǎng)格系統(tǒng)可以幫助重新組織設(shè)計(jì)元素，同時(shí)能保持所有元素看起來是有序的構(gòu)成谭贪。
·設(shè)計(jì)師與開發(fā)者更好的協(xié)作
當(dāng)我們拿出設(shè)計(jì)文件與開發(fā)溝通時(shí)境钟，會(huì)希望每件事情都按照我們的希望方向去發(fā)展.如果我們的設(shè)計(jì)稿中包含網(wǎng)格系統(tǒng)，那么開發(fā)者會(huì)很快的理解怎樣界定邊界與填充內(nèi)容俭识，在沒有確定規(guī)范的情況下慨削，網(wǎng)格可以同時(shí)幫助設(shè)計(jì)師與開發(fā)者得到理想的結(jié)果，減少不必要的麻煩和混亂套媚。
網(wǎng)格系統(tǒng)術(shù)語
·欄缚态，像是網(wǎng)格系統(tǒng)的建筑模塊，從頁面頂部到底部的垂直面相同堤瘤，并且規(guī)定了每一行的寬度玫芦。臺(tái)式機(jī)設(shè)計(jì)一般采用12欄的網(wǎng)格系統(tǒng)，平板電腦采用8欄網(wǎng)格系統(tǒng)本辐，移動(dòng)端采用2欄或4欄網(wǎng)格系統(tǒng)（公司手機(jī)端是4欄）桥帆，一般一欄的寬度在60-80px,具體取決于我們最終應(yīng)用場景的尺寸医增。
·行，是指從頁面左端到右端尺寸相同的水平模塊老虫，很少和欄一起使用叶骨，因?yàn)樵O(shè)計(jì)元素的高度通常是由內(nèi)容量來決定的。
·欄間距祈匙，是在欄或行之間的空白尺寸忽刽，留有一定的呼吸空間，幫助在水平或垂直空間找到合適的距離夺欲，這個(gè)寬度經(jīng)常在10-30px之間缔恳。
·頁邊距，指在頁面左右兩端空白的面積洁闰，在網(wǎng)格欄的外面歉甚。留給設(shè)計(jì)元素空白的呼吸空間，使屏幕上的元素在遇到下一部分前足夠的緊湊扑眉。臺(tái)式機(jī)和平板電腦的頁邊距要參照網(wǎng)格系統(tǒng)欄的大小來設(shè)置纸泄，手機(jī)端頁邊距大小在10-20px范圍之間。
為什么要用12欄的網(wǎng)格系統(tǒng)腰素？
這是最著名的網(wǎng)格系統(tǒng)聘裁，并且用數(shù)學(xué)的方式合理的解釋了為什么，12很容易被1弓千、2衡便、3、4洋访、6镣陕、12整除，給設(shè)計(jì)元素帶來更多的靈活操作空間姻政。所以開發(fā)者經(jīng)常使用這種網(wǎng)格結(jié)構(gòu)作為輔助系統(tǒng)呆抑，通過12欄網(wǎng)格在開發(fā)者和設(shè)計(jì)師之間建立共生的設(shè)計(jì)溝通系統(tǒng)。盡管有像8欄汁展、不設(shè)計(jì)欄數(shù)等網(wǎng)格系統(tǒng)鹊碍，但是今天我們聚焦于12欄網(wǎng)格系統(tǒng)的案例和設(shè)計(jì)規(guī)范。
規(guī)范與案例
·將設(shè)計(jì)元素放在欄內(nèi)食绿，用欄間距作為一個(gè)平衡的呼吸空間置入在設(shè)計(jì)中侈咕，不要讓設(shè)計(jì)元素?cái)U(kuò)大到欄間距上。
·水平空間元素也要保持視覺上的聯(lián)系器紧，尤其是相互呼應(yīng)的元素耀销。
·像卡片、圖片這種方形的素材放入比較容易放入網(wǎng)格系統(tǒng)中品洛，如果是不規(guī)則或開放的圖形使用網(wǎng)格系統(tǒng)有時(shí)不會(huì)那么容易树姨。
·在母圖形的小元素不需要遵循網(wǎng)格系統(tǒng)，只要是母圖形被放在恰當(dāng)?shù)奈恢们抛矗敲此鼉?nèi)部的小元素會(huì)有自己的構(gòu)圖帽揪。
·對(duì)于確定的排版部分不需要一味的遵循12欄。如果沒有足夠的空間劃分12欄或者視覺上看起來很好辅斟，同樣也可以使用8欄或10欄转晰。特別適用于文字排版，因?yàn)闄跀?shù)過多會(huì)導(dǎo)致文字反復(fù)折行士飒，用戶閱讀體驗(yàn)被打斷查邢，并且很難快速理解文字的大體內(nèi)容。
·自適應(yīng)
自適應(yīng)經(jīng)常在12欄的大屏電腦酵幕、8欄的筆記本電腦扰藕、4欄的平板電腦、2欄的手機(jī)資料芳撒，切換邓深。當(dāng)大屏切換到小屏?xí)r一定要注意，因?yàn)樵谛∑恋娘@示欄間距可能會(huì)小于大屏笔刹，如果大屏的欄間距設(shè)置為30px芥备，10至15px可以滿足自動(dòng)端的使用需求。
打破規(guī)則
時(shí)不時(shí)的“去網(wǎng)格化”被視為明智之舉舌菜。確定一切都在網(wǎng)格系統(tǒng)內(nèi)排列后萌壳，不要擔(dān)心部分元素跳出網(wǎng)格，因?yàn)榭梢宰屧O(shè)計(jì)變得更有趣日月，突出部分視覺焦點(diǎn)袱瓮。
舉例說明如何打破網(wǎng)格進(jìn)行設(shè)計(jì)
·標(biāo)題標(biāo)題跳出網(wǎng)格視覺上更突出，但是要注意不要將標(biāo)題（標(biāo)志或菜單）放在太靠近頁面邊緣的位置爱咬，距離兩端的距離至少各保留50px懂讯。
·特點(diǎn)部分
當(dāng)其他所有元素排版到適當(dāng)位置，通過打破節(jié)奏使超出規(guī)則的部分更加引人注意台颠，而仍然保持在網(wǎng)格內(nèi)部的部分依舊收到規(guī)則的影響褐望。
·裝飾元素
在頁面的任何位置，圖形和表格都可以增加設(shè)計(jì)的趣味性和裝飾性串前，有些在網(wǎng)格之外瘫里，有些與網(wǎng)格相鄰，而有些則在元素之間或在元素的后面荡碾，這樣做不是為了破壞網(wǎng)格參考線谨读，而是為了讓設(shè)計(jì)看起來更有趣。
·打破網(wǎng)格的圖片
沒有合適的矩形空間去放置一張圖片或者一些元素位置超出了圖片的范圍在設(shè)計(jì)中是很常見的事情坛吁，元素脫穎而出在視覺上看起來更吸引人劳殖，也適用于圖片和文字各占一半的排版方式铐尚。
·其他設(shè)計(jì)
當(dāng)你真的理解了網(wǎng)格系統(tǒng)并且感覺很好用，那么恭喜你哆姻，打開了新世界的大門宣增。當(dāng)你開始打破規(guī)則的使用網(wǎng)格系統(tǒng)時(shí)你的設(shè)計(jì)視覺上仍然使統(tǒng)一、平衡的矛缨。當(dāng)你堅(jiān)持使用或者想讓某些元素表現(xiàn)突出爹脾，認(rèn)真的徹底學(xué)習(xí)網(wǎng)格系統(tǒng)會(huì)給你帶來一定的指導(dǎo)。
學(xué)會(huì)使用網(wǎng)格系統(tǒng)箕昭、準(zhǔn)尋規(guī)則需要一定的時(shí)間灵妨，它可以讓設(shè)計(jì)變得更出彩、更有意義落竹。目前為止泌霍、網(wǎng)格系統(tǒng)是我在設(shè)計(jì)學(xué)習(xí)過程中遇到的最好用的東西，它給我們提供了一個(gè)可以讓設(shè)計(jì)師與開發(fā)者互相理解述召、相互協(xié)作的橋梁和準(zhǔn)則烹吵。
（完）
