If you』ve never dabbled with using grids in your designs, this article is written for you. In it, you』ll learn the basic lingo, theory, and will see through examples of genuine websites how grids are used in the wild.
如果你曾經有過關於設計中網格的運用的疑問， 這篇文章就是為你量身定做的。文章中，我們不僅會介紹基礎的理論和術語，還會通過真實的網站例子分析幫助你快速學習到網格在實際運用中的技巧。
Topics
In this guide, we』ll be covering quite a lot, including:
Grids?TerminologyRule Of Thirds12 Unit GridEmphasisLimitationsMental Map主題
文章中我們會介紹以下的主題：
● 網格是什麼
● 術語
● 三分法則
● 12列柵格
● 重點突出
● 局限性
● 腦圖
Grids?
A grid can create a basic structure, a skeleton for your design. They consist of 「invisible」 lines upon which your design elements can be placed. Doing so ties them together in an overall 「system」 and supports your composition—rationally.
什麼是柵格？
柵格組成了一個基本結構，這個結構可以被理解成設計的「骨架」。 通過輔助線條來編排和放置設計中的各個設計元素。 這樣做可以使設計稿有體系地聯繫在一起，同時也保持設計的一致性與合理性。
BBC
Grids help you to achieve effective alignment and consistency with little effort. 「Winging it」 and relying on your gut does not scale so well. If executed properly, your designs will appear thoughtful, organized, neat and structurally sound.
柵格可幫助你輕鬆將界面上的元素對齊，有效實現一致性。 設計中，有時候，僅靠感覺和大致方向來猜測布局的效果可能不會太理想。所以正確使用網格，會讓設計顯得有條理，結構合理，整潔並且思考周到。
Good alignment, like much of design, should almost go unnoticed by your users. Less is more. Be too clever and you risk distracting the user from their primary goal of searching for specific content and digesting it quickly. That should be your focus—not showing off how nifty you can be with your design skills. Even worse would be reinventing the wheel to proove a point. A lack of alignment is very noticeable and creates a sloppy impression. This might very well result in a lack of trust from users who consume your design—unless the lack of alignment is something you are going for on purpose for whatever creative reason.
一個整潔對齊的界面很多時候都不應該引起用戶的注意。少即是多， less is more。 界面設計中，嘗試過於革新的手段反而會分散用戶對特定內容的注意力，從而影響用戶的理解。因此，不要炫耀設計技巧有多麼精妙，確保用戶注意力和內容的簡明才應該是重點。
如果說還有什麼比過度炫技效果更糟糕的一點，可能是使用完全不符合常規布局的基礎規則。一個沒有對齊的界面很容易給用戶留下草率的印象，這樣的印象可能會使用戶難以對你的產品專業度建立起信任 —— 當然，除非不對齊是你為了創作嘗試而專門做的決定。
Terminology
Unit
Units are the basic building blocks of every grid. Multiple units form the overall grid. In the example below from the BBC you are looking at a 12-unit grid. The purple stripes each represent one unit.
術語
單元列
單元列是每個柵格的基本構建塊。 一個柵格由多個單元列構成。 下面的BBC示例就是一個由12個列柵格。 一個紫色矩形框代表一個單元列。
Gutter
The narrow yellow stripes on the illustration below represent the gutters which separate each of the units. Gutters are a form of micro whitespace which give the grid some breathing room.
水槽
下圖上的黃色細條矩形表示將各個單元列分開的裝訂線。 水槽是製造微小空白空間的一種形式，為柵格提供一些的呼吸空間。
Column
Now it gets more interesting. Multiple units and gutters together form columns which are effectively containers in which to place your content—strategically. It may not appear to be the case initially, but working within such constraints can be liberating. Constraints can make decisions about where to place content much easier and faster.
In the example below, you can see three different columns at work. Each column is sized for a particular form of content or for creating emphasis.
欄
有了之前的鋪墊，我們就可以了解一些更有趣的內容了。 多個單元列和裝訂線一起便形成了一欄，這些欄實際上是從策略的角度將內容材料放置在其中的容器。這些欄看起來似乎很禁錮，事實上在有調理的約束下設計會產生更多自由的空間。約束條件可以幫助你決策元素放置的位置，同時還能使這個過程容易並且快捷。
在下面的示例中，你會看到三種不同的欄在布局上起作用。 每個欄的大小分別受著制約，或是為了適用不同形式的內容，或是形成強調作用來裁定。
As you can see, you have lots of options to mix up different forms of content and design elements. What you can also observe is that these columns together form a solid structure which breathes consistency and order via alignment. Not a bad price to pay for setting up a few lines and for some constraints, no?
就像例子中呈現的，布局中有很多方式來混合不同形式的內容和設計元素。通過排列這些欄，界面上可以形成堅固的結構。另一方面，良好的對齊又讓設計產生了一致性和有序性。 這些益處單是通過設置幾個單元列和一些視覺約束就能輕鬆實現，是否讓你覺得事半功倍呢？
Field
Columns of content form fields that are horizontal divisions of pages. It’s not a bad idea to strive for fields of equal height going down your pages. In practice this is not always straightforward to achieve. If your fields end up with the same height and it works for your designs, great, if not, move on and fry bigger fish.
區域
不同的內容欄排在一起就形成了一個區域。這些區域又將整個頁面水平劃分。讓頁面上所有的區域都等高是個挺好的保持整潔的辦法，雖然在現實設計中並不是這麼容易實現。所以，如果等高的區域既可行又契合你的設計要求，那自然是再好不過。但是要是不能實現的話，就將目光放在宏觀一些的設計要求上吧。
Rule of Thirds
The 「rule of thirds」 uses a mini grid and implies that when you place content on certain lines that divide content into thirds, the result will be more pleasing to the human eye. This is an approach very often used in photography, for example. Although it might be a good starting point and often gets you in the right ballpark, I』d suggest taking this with a grain of salt.
三分法則
「三分法則」就是通過使用一個簡易柵格，來確保在界面加入元素的時候會放置在某個三等分的行上。這樣的布局會更看起來更使人愉快， 比如在攝影當中，三分法則就是個十分常用的方法。但是，儘管這個方式可能是一個很好的設計起點，也通常能夠幫你做出正確的選擇，我還是建議你在具體情況下具體分析它是否是最合適的解決辦法。
When people talk about 「magic intersections」 which are supposed to help you place design elements, I』d urge you to take a breath and consider the potential for fluff. It’s easy to just drink the cool aid, especially since it’s not hard to follow this 「rule」, but nothing about this seems mathematically or biologically special in any way—and it’s definitely not magical.
人們有時候高談闊論三分法則中的「神奇交叉點」可以如此這般提升你的設計，但我更建議理性地對待這個說法。說三分法則是一個長青不敗的設計「法則」是件容易的事情， 尤其這一法則也非常容易去遵循。但是事實上，無論是從數學的角度還是人類對「美」的認知來講，三分法則都沒有什麼特別之處，而且也絕對不是神奇的。
And don’t forget that we don’t all visually perceive the world the same way. We are all different. We are not machines that adhere to some mathematically precise point of view when looking at the world. Take a look at Reddit for example. Does it look like they care about magical intersections?
另一個重要的基礎便是，並非所有人都以相同的視覺方式來感知世界。 我們都不同。 當我們看世界時，我們不是機器，也不會全都去硬生生重複數字比例精確而帶來美感， 以Reddit為例。 他們看起來像是會去在意「神奇交叉點「嗎？
Yes, the rule of thirds is a good guideline—or can be at least—when it fits and 「aligns」 with the image, design or whatever, but don’t take it too seriously. Break the rules whenever it makes sense. Do what feels right and go with your gut within the guidelines and techniques that you learn for your design work. 「Nothing is true, everything is permitted」 in design—to cite some Nietzsche out of context. Philosophically this can be argued to death—rightfully so, but in design, this represents a firm guideline to explore your creativity without 「magical」 restrictions.
Go crazy, break the rules, have some fun and if you are lucky, find new frontiers!
我不否認當你的圖片或設計在適合三分法則的情況下，它是一個很好的準則，或者至少可以是，但是我認為無需太重視這些法則。設計中，只要有道理就可以打破規則。相信自己的直覺，以自己在設計中學到的技巧和經驗作為基準，做你覺得對的事情。用尼採的話來說，就是設計中的「沒有什麼是真的，一切都被允許」 。哲學上，這個立場是否正確可以被一直討論下去 — 也應如此。但是在設計中，它代表著一種堅定探索你的創造力的準則，並且在探索中，沒有任何「神奇交叉點」能限制你。
自由發揮，打破規則，找點樂子，如果你很幸運的話，說不定還會找到一套全新的網頁設計準則！
Divine Proportions?
While we are in the magical realm of things in design, let me rant a sec about something related: people have long believed that using the 「divine」 proportion of the golden ratio results in something special, divine and pleasing to the human eye. There have been experiments that question these 「pre-modern」 assumptions with good cause.
黃金分割（神聖比例）？
趁著我們在討論設計中「神奇」的事物，讓我對另一個相關的話題也展開一下：長期以來，人們一直認為使用黃金比例（「神聖」比例）會給人眼帶來一些特殊，令人愉悅的感覺。但目前為止，也有了不少的實驗以充分的理由質疑這些現代化之前的假設。
The final verdict is still out on these issues I guess—and might be for a long time—but nothing should hinder us from keeping an open mind to question these passed down assumptions. We really should go beyond magical thinking. For a while it made sense to me that the 「golden mean」 might be super pleasing to us humans because in nature we are well surrounded by it. But then again, convincing evidence would be nice. Maybe, maybe not, but this is not something I want to take for granted and build upon.
這個問題的裁決還在進行中，而且看樣子可能會持續很長時間，但是它不應該使我們放棄以開放的態度來質疑這些傳承下來的假設。我們應該在思維上超越這些「神聖」的東西。或許因為黃金比例在自然界重複率很高，一段時間內認定它是美的標準是合理的。可是話說回來，在沒有確鑿的科學依據之前，就它本身依然很難形成決定性的標準。黃金比例也許是美的標準，也許不是，但是我不希望它僅僅因此而成為一種理所當然，甚至形成設計的基礎。
Twelve Unit Grid
Back to more pragmatic waters. I would like to discuss a very versatile grid and get you started with something concrete that makes for a good first system to build your layouts. A twelve unit grid is your friend.
十二列柵格
現在回到更具體範圍來，我想通過一個非常通用的網格使用方法來幫助你形成你的第一個布局構建體系。十二列柵格是個很好的助手。
Etsy
Why are twelve units that handy? For starters, because they break nicely into three, four and six columns, which is flexible enough to handle all sorts of content rather easily. On top of that, you can make them symmetrical or asymmetrical—which gives you plenty of options to either play it safe or to create some dynamic layouts that go beyond simple symmetry.
Let’s look at couple of layouts that make use of the flexibility this grid has to offer.
為什麼十二列柵格那麼方便？ 對於初學者來說，這個柵格可以同時被作為三，四和六列柵格使用，所以它足夠靈活，處理各種不同的內容材料的時候遊刃有餘。 最重要的是，使用中你可以將它以對稱的形式和不對稱的形式來使用 -- 這樣的可能性為設計提供了很多選擇，無論你選擇使用傳統的，安全的布局還是超出簡單對稱的動態布局。
讓我們看一下使用了這個柵格的高靈活度的幾種布局
Four Column Grid
The main benefits of a four column grid is its simplicity, its balance and that it’s also very dependable. Each column here spans three units. The flip side is that it’s very symmetrical which can look a bit boring.
Often, you need a main section for the emphasized content and then a sidebar for secondary concerns. In the first example below, you can see that the first column is used for branding, the middle two columns are for the main content, while the last is for content that needs less highlighting.
四列柵格
四列網格的主要優點是它很簡單，它有很強的平衡界面能力以及可靠性。 這個例子裡面每個柵格跨越三個列。 它的缺點是過於對稱的特點有時候讓它看起來有些無聊。
常見的設計的需求會有一個主要部分排版需要強調的內容，然後一個側欄來放置次要內容。 在下面的第一個示例中，你可以看到第一列用於品牌宣傳，中間兩列用於主要內容，而最後一列用於不太需要突出顯示的內容。
form
Harvard Design Magazine
Etsy
Wallpaper
marie claire
Three Column Grid
With this grid, each column spans four units. This variation is a bit more involved since it’s an asymmetrical grid and you need to be smarter about finding balance in your designs. Asymmetrical layouts like these are often considered more active and more skillful. That can and should be questioned of course!
三列柵格
這個柵格的每欄都包含了4列，由於它是一個不對稱的網格，因此涉及的方面更多一些，所以使用中，需要用更加聰明的方式在設計中找到平衡點。 像這樣的不對稱布局通常被認為更活躍，更熟練的技術運用。當然這個說法可以而且應該受到質疑！
Wallpaper
Kickstarter
Kickstarter
Wallpaper
WIRED
Six Column Grid
In this example each column spans two units, making things a little more challenging than the three column grid. It splits up each column of a three column grid into two further columns. The six column grid provides you with more options and opportunities to fine tune smaller details. If you are working on a content-rich site and need to park a lot of information, a six column grid could be a smart starting point for experimentation. Since it maybe an advanced grid, I would maybe not recommend starting out with it on your first rodeo.
六列柵格
文中的例子裡，這個六列柵格每欄跨越兩個單元列，這使它比三列柵格更有挑戰性一些。
它將三列柵格中每一列另外拆分為兩列。 六列柵格給設計帶來更多選擇和機會，讓你可以更方便地微調較小的細節。如果你需要設計一個內容非常豐富並且需要存放大量信息的網頁，六列柵格是個明智的起點。 但由於它是個更有難度的網格，我不建議在第一個項目就開始使用它。
Wallpaper
The New York Times
Combinations
You can also combine grids within your designs, which is why a twelve unit grid system is very handy. It easily allows you to combine blocks of three, four and six columns neatly.
組合
設計中，你還可以考慮合併使用不同的柵格。組合也是十二欄柵格作為一個界面輔助系統非常方便的原因。 它能輕鬆地將三，四和六列的柵格整齊地組合在一起。
Etsy
BBC
Etsy
Etsy
BBC
Etsy
Etsy
Etsy
Emphasis
Balanced and simple layouts often feel more comfortable than overly complicated ones. The flip side is that you have to be careful not play it too safe all the time and risk looking boring. For emphasis, you can break away from the grid or highlight certain design elements through size—by combining multiple columns, for example. This can create visual interest and establish a better hierarchy within your main design elements.
重點
平衡而簡單的布局通常比過於複雜的布局更讓人舒適。 對立面是，設計中需要注意不要太過安全，否則設計可能會顯得無聊。 為了強調某些內容，可以嘗試讓它脫離柵格或通過大小來實現突顯（例如，通過合併列）。 這樣可以有效地引起用戶的興趣並在主要設計元素中形成更好的層次結構。
Etsy
Breaking out of the grid to create emphasis can either massively improve your design by highlighting essential pieces, or it can look really, well, dumb. Wallpaper did a great job at breaking out from the four columns and heavily emphasize the video they want you to watch.
通過讓某些特定元素脫離柵格的方式來實現重點的突出，要麼會讓你的設計非常出彩，但是不夠高明的使用則會讓設計看起來很笨拙。 Wallpaper在突破四列柵格的表現方面做得非常出色，並且也很有力地強調出了他們希望用戶觀看的視頻。
Wallpaper
form
Wallpaper
But you need to be careful, breaking the rhythm of your grid too often results in a layout that looks broken or overemphasizes too many parts so nothing sticks out anymore.
但是過多地破壞柵格的節奏會導致布局看起來殘破，不完整，或過分強調了太多零碎的內容。因此在使用這個方式的時候需要小心，以免內容不明確，用戶無法記住重點信息。
Limitations
A question which frequently arises is when to use a grid in design? Always! It’s always a good decision to go with a grid because they help with balance, hierarchy, alignment and consistency.
Then there is always the argument that a grid constrains your work. But that is a good thing since a grid can actually facilitate your creativity and guide your decisions in a constructive manner. Such restrictions can be a good starting point for your work. So when you have constants, like the size of ads that are given to you by your client, you have a starting point to build your designs around it. The size of your grid can and should pay attention to such limitations.
In the example below from the The Wall Street Journal, you can see that the size of an ad, marked in green, resulted in a design decision to build part of the grid with that dimension in mind.
局限性
關於柵格經常出現的問題之一，便是在設計中，什麼時候才應該使用柵格，答案是： 所有時候！ 選擇柵格永遠都是個好決定，因為它們有助於保持設計平衡，層次結構，頁面整齊和一致性。
總是有一個爭論，認為柵格限制了設計。 柵格雖然會形成限制，但是這種限制是一件好事，因為它實際上可以促進創造力的發生，還能用有建設性的方式指導設計決策。 所以，這樣的限制事實上是當你開始一個項目時很好的起點。當你有了外界設計限制時（例如客戶提供給你的廣告的大小尺寸）時，便同時有了一個柵格來圍繞它進行設計。 你對柵格的選擇可以也應該要考慮到這些限制。
在下面《華爾街日報》的示例中，可以看到標記綠色的廣告尺寸是設計師通過柵格的協助來做的設計決定。
Mental Map
If you are successful, your grid will help with building a mental model of your site and its individual pages. That also implies that the structure of your pages should not be completely different from each other—a common denominator which adjusts to the each page’s affordances should be part of your plan.
Let’s look again at a few examples of how Etsy successfully solved this. Only this time, let’s focus on how their grids supports their different content needs and how they mix them up from page to page. In my opinion, they did a great job at keeping some sort of consistency that creates a unified impression, tying the pages together neatly. Thereby, they guide the user through the content and the user knows what to expect. Their mental map is sound and has no surprises that can derail the user experience structurally.
腦圖
使用柵格很成功的情況下，它應該也會幫助你構建網站和它包含的各個頁面的思維模型。 這同時也意味著同一個網站的各個頁面的結構不應完全不同—— 調整每個頁面使其有共同點來實現一致性應作為設計計劃的一部分。
讓我們再來看一些Etsy成功解決此問題的示例。 但是這次，我們集中討論柵格如何滿足其對不同的內容需求，以及在需要的時候如何將它們逐頁地混合在一起。 我認為他們在保持某種一致性方面做得非常出色。這種一致性創造了統一的印象，還將頁面整齊地綁在一起。這樣一來，用戶在瀏覽的時候，全程都有指引，並且也明白對不熟悉的頁面應該有什麼樣期望。 他們的思維導圖是健全的，因此不會出現任何結構上的意外來破壞用戶體驗。
They created a nice rhythm for their pages and their grid looks elegant because they played it simple.
他們為頁面創造了一個很好的節奏，加上簡潔的重複使用，他們的柵格看起來很優雅大方。
Final Thoughts
Overall, aligning content systematically is the key thing to take away from this whole topic. Nothing is more effective in tying various forms of content together than consistent grid lines. Create a strong axis that a user can follow for orientation and for guiding their eyes and actions like visual anchors. This typically results in stronger relationships that bind your work together and creates cohesion. Keep it simple! Your designs will be easier to maintain and to build upon.
最後的想法
總體而言，系統地規劃內容排版是整篇文章主題的關鍵。 要將各種形式的內容捆綁在一起，一致的柵格是最有效的工具。統一的柵格會建立一個強軸，這個強軸會引導用戶的眼睛和動作（例如視覺錨點），將你設計的各個部分綁定在一起並產生凝聚力，建立更牢固的關係。 保持設計的簡單！ 讓你的設計更易於構建和維護。
原文作者：Ed Wassermann
原文連結： https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521