jmegrfhmbb1ded 2017-12-24

1。一套完整的柵格化系統，可以最佳化專案流程，提高開發效率，減少互動，設計，程式之間互相的溝通成本。

2。首先我們要知道柵格化的邏輯是什麼：把一個頁面，切開，分成N個網格單元（腦補下切方形蛋糕）然後我們把這個頁面的寬度代表為W，網格單元寬度為a，網格單元之間的間隙為i，然後把網格單元+網格單元之間的間隙代表為A。然後我們得知，A=a+i。然後我們又知道，W=（a×n）+（n-1）i ，寬度=（網格的寬度X數量）+（數量-1）X間隙的寬度，然後在換算一下，得出（A×n） – i = W，注：960是加上最後一個i（i=10）的長度，950是沒加上i的長度。

3。A是多少，W是多少，N又是多少。OK，首先，A 得是5的倍數，因為這樣在設計空間的時候很方便（一五得五，二五一十什麼的），W 得是正常一點的，不要總是搞些奇奇怪怪的數字，angry！，參考01資訊，知道大部分是950 /960，N 得是3的倍數，我們需要有一行三列的情況，同時不希望有重要資訊在最後面。所以是整個柵格能平均分成3列，i 保持為10PX。OK，開始計算下，得：3x*5y-10=W 其中x，y為整數 ，15x*y-10=w。

4。，一個完整的柵格系統完成。然後我們應用一下。

回憶8843166b 2017-12-24

首先我們必須要對柵格系統有一個基本的認知，我將這四個字拆分開成“柵格”和“系統”兩個詞來分別解釋。關於柵格：柵格是由網格演變而來的另一種說法，都是一個意思——格子，所以不要覺得柵格有多高深複雜，如果把他描述成格子，你還覺得它有多難理解嗎。其實我們都是柵格專家，因為在我們幾歲的時候，就已經接觸了很多柵格，比如方格本，再比如飛機格。關於系統：我個人理解，系統就是規則，例如ios系統，它有它的規則：螢幕尺寸規則，程式碼語言規則等等，想在它的系統裡做app，就需要遵循的它的規則。柵格有了規則，也就形成了我們所說的柵格系統。所以今天的重點來了，柵格系統（規則）到底包含哪些內容呢。我透過研究sketch軟體的一些柵格設定選項來反推柵格系統包含的內容，得到柵格系統基礎六要素，大綱如下：柵格的最小單位螢幕總寬度列數列寬水槽安全邊距1。 柵格的最小單位最小單位是需要優先定好的，因為後面的所有規則都基於它來制定。做介面設計會先依附於一個尺寸，由於內容的多少是不確定的，所以高度我們沒有辦法定死，但內容區的寬度是可以定的，sketch給我們的預設螢幕寬度是960，網頁設計中最受歡迎的一個尺寸：簡單來說就是整個介面縱向被分為幾欄，sketch預設幫我們分為12列，這是網頁端的常用分法，移動端一般是6等分。當960寬度的介面被縱向12等分後，我們可以輕易的計算出每一份的寬度是80，而這80的寬度其實又包含兩個內容，一個是列寬，一個是水槽，每一條灰色區域都是我們所說的一條列寬，sketch的預設列寬是60灰色區域是列寬，所以紅色區域自然就是水槽（間隔）了。畢竟介面內容之間是需要間隔的，不可能都堆在一起，所以水槽的作用就是將內容更規範的區分開來。

辰星kchpbc434681 2017-12-25

理論上，這肯定是最優的設計方法——所謂的定製化設計，大概就是這樣的。但其實，根據實際經驗來看，柵格系統的“變數”，似乎沒有這樣地大；也就是說，每個版式設計師，都可以有幾套自己保留的網格系統，用來解決大部分的內容——比如最簡單的三欄網格（源自瑞士的學院派理論），一些雜誌排版提倡的七欄／九欄分隔（相對更為靈活）。雖然我自己每次接受新的設計專案，都會重頭構造柵格，可實際上，每次都大同小異。（自己每次都重頭做，其實是工作習慣不好，沒有積累或製作一些精良的可複用模版。）