第二部分 (Part II)

Now that you have a basic understanding of how to use grids, you might be wondering how to apply them to layouts you see on the web. Responsive grids are a method to systematically align your designs, to give order, establish hierarchy, and “logic” to your designs. It makes things look less floaty, and you can generally tell who is and who is not using a grid. As people become better designers, their eyes are constantly drawing horizontal and vertical lines everywhere to create that order and alignment.

現在，您已經對如何使用網格有了基本的了解，您可能想知道如何將其應用于您在網絡上看到的布局。 響應式網格是一種系統地調整您的設計，確定訂單，建立層次結構和“邏輯”設計的方法。 它使事情看起來不那么浮動，您通常可以分辨出誰在使用網格。 隨著人們成為更好的設計師，他們的眼睛不斷在各處繪制水平和垂直線條，以創建這種順序和對齊方式。

On that note, I often get questions like “Wait, how do sticky panels work in a grid layout?” or “What do you do for a web app where things go edge to edge?” We’ll look at some applications of the responsive grid and also how they scale down to mobile. More importantly, I want to teach you how to mix and match your layouts to cater to your design needs.

在該注釋上，我經常會遇到諸如“等等，粘性面板在網格布局中如何工作？”之類的問題。 或“您對端到端的Web應用程序做什么？” 我們將研究響應式網格的一些應用程序，以及它們如何擴展到移動應用程序。 更重要的是，我想教你如何混合和匹配布局，以滿足您的設計需求。

If you’re not sure how to use grids in responsive design, read up on part one: Responsive grids and how to actually them. Or just go with the flow, all good.

如果不確定如何在響應式設計中使用網格，請閱讀第一部分： 響應式網格以及如何實際使用它們 。 或順其自然，一切都很好。

Disclaimer: I do not work at any of these companies nor do I know how they set up their grids. This is purely a learning exercise, and I am just using these sites as examples.

免責聲明： 我不在這些公司中任職，也不知道他們如何建立自己的網格。 這純粹是一個學習練習，我僅以這些網站為例。

單列布局 (Single Column Layout)

Aka full page layout. This is the most simple layout and is used for landing pages. You have all the space to display large images to create a statement that will enhance your product or brand. Things inside your one-column layout act as individual modules, and is easy to scale on mobile because things are already stacked in the order you want them to show. Because it is extremely powerful in provoking emotions, this is a common layout for home pages, introductions, how-tos, or new products, etc. Even though within the module there might be things split into different grid columns, as a whole the layout is utilizing 12 columns for main content.

又名全頁布局。 這是最簡單的布局，用于登錄頁面。 您有足夠的空間來顯示大圖像，以創建可增強您的產品或品牌的聲明。 一欄式布局中的事物充當單獨的模塊，并且易于在移動設備上擴展，因為事物已經按照您希望它們顯示的順序進行了堆疊。 因為它在激發情緒方面非常強大，所以這是主頁，簡介，操作指南或新產品等的通用布局。即使在模塊中，也有可能將事物分成不同的網格列，整體而言正在利用12列作為主要內容 。

網格使用 (Grid usage)

You can clearly see that WeWork is using grids in their designs because everything lines up despite being divided within each row. An easy giveaway is that the amount of padding between elements is consistent (between the 4 cards and the two customer success stories), and the outer edges are the same width, which makes this design very pleasing to the eye. I also like this example because it shows that you can still break up the page in interesting ways while still doing row-based modules.

您可以清楚地看到WeWork在其設計中使用了網格，因為盡管每一行都劃分了所有內容，但它們仍然排列在一起。 一個簡單的贈品是，元素之間的填充量是一致的(在4張卡片和兩個客戶成功案例之間)，并且外部邊緣的寬度相同，這使此設計令人賞心悅目。 我也喜歡這個示例，因為它表明您仍然可以在執行基于行的模塊的同時以有趣的方式分解頁面。

例子 (Examples)

Here are some other examples of one column layouts. Notice how elements inside the parent element might be divided into different columns, but the overall parent element sits under one main container.

這是一列布局的其他一些示例。 請注意，父元素內的元素可能如何劃分為不同的列，但整個父元素位于一個主容器下。

兩列布局 (Two Column Layout)

This is probably one of the most common layouts, simply because you do not want your text to reach more than 6–8 columns wide. The other benefit is you can surface other elements much higher above the fold, and use this side column for navigation, advertisements, call to actions, similar listings, etc. You should use 8 columns for your main content, and 4 columns for your side content. This way, you have an even number for both sides, and if need be you can cut your main content in half to nicely display things side by side.

這可能是最常見的布局之一，只是因為您不希望文本的寬度超過6-8列。 另一個好處是您可以將其他元素置于折疊上方，并使用此側欄進行導航，廣告，號召性用語，類似清單等。您應將8欄用作主要內容，并將4欄用作一側內容。 這樣，您的兩面都是偶數，如果需要，您可以將主要內容切成兩半，以很好地并排顯示內容。

“But wait, 8 columns? Then I have so much less space to design with!” you might say. On the web you should never let text use all 12 columns. This is a basic typography principle, where comfortable reading width is around 60–80 characters at 16px, and that happens to be about no more than 8 columns on a desktop. Actually 8 columns is really pushing it because you have to consider those who use a large desktop, so I wouldn’t design something more than that. Even in the single-column home page layouts, things are centered and have a max-width. So really the “less space” thing is a non-issue, and will even make your design better.

“但是等等，有8列？ 然后我的設計空間就大大減少了！” 你可能會說。 在網絡上，您永遠不要讓文本使用全部12列。 這是一個基本的排版原則，舒適的閱讀寬度在16px處約為60–80個字符，而在桌面上恰好不超過8列。 其實8列是真正推動它，因為你必須要考慮那些誰使用了大量的桌面，所以我不會設計的東西不止于此。 即使在單列主頁布局中，內容也居中并具有最大寬度。 因此，“更少的空間”確實是沒有問題的，甚至可以使您的設計更好。

This layout is very versatile and is suitable for inner pages of the website, such as when you have lots of text to read. Some page examples are blogs, instructions, FAQs, how-tos, where you want to keep navigation or other things handy for the user on the side.

這種布局非常通用，適用于網站的內部頁面，例如當您有大量文本要閱讀時。 一些頁面示例是博客，說明，常見問題解答，操作方法，您希望在其中使導航或其他便于用戶使用的內容。

例子 (Examples)

移動 (Mobile)

On mobile it’s a simple question of hierarchy. You need to make stacking decisions depending on what was in your side panel. If the side panel was navigation or a set of questions for an FAQ, you should put that first before the main content. If the side panel was “read more,” or “other suggestions,” you should put stack that at the bottom of your main content.

在移動設備上，這是一個簡單的層次結構問題。 您需要根據側面板中的內容做出堆疊決策。 如果側面板是導航或關于FAQ的一系列問題，則應將其放在主要內容之前。 如果側面板是“”或“其他建議”，則應將堆棧放在主要內容的底部。

三列布局 (Three Column Layout)

Since you are dealing with three columns, you have some choices on how you want to distribute them. Let’s go with the easy example first — an even 4–4–4 distribution.

由于您要處理三列，因此您可以選擇如何分配它們。 讓我們先來看一個簡單的示例-均勻的4–4–4分布。

4–4–4分布 (4–4–4 distribution)

This is nice for layouts when you need to post up a lot of images. And it can be your choice if the design will utilize a max-width or not. I've shown examples of both below.

當您需要張貼大量圖像時，這對于布局很有用。 如果設計不使用最大寬度，則可以選擇。 我在下面顯示了兩個示例。

分布不均(3–6–3) (Uneven distribution (3–6–3))

An uneven distribution is a layout for when you have a product that handles a long scroll of content, where you also want to highlight other things the user can do. It is most suitable when the main content doesn’t require a lot of horizontal space.

分布不均勻是一種布局，用于當您擁有可以處理較長內容的產品時，還希望突出顯示用戶可以執行的其他操作。 當主要內容不需要很多水平空間時，它最適合。

Here is an example of a 3–6–3 layout from Dribble’s design job board. The purple outline indicates where on the grid the content is sitting on, and the purple blocks indicate additional padding they have given to the element. I really like this example because it’s a reminder than you can break up the page how you like. Here, the title and a large CTA is a module that works as a header statement before the three columns. If you look carefully though, it’s actually still within the center 6 columns.

這是Dribble設計工作板上3–6–3布局的示例。 紫色輪廓指示內容位于網格上的位置，紫色塊指示它們為元素提供的其他填充。 我非常喜歡這個示例，因為它提醒您不要隨意拆分頁面。 在這里，標題和大號CTA是一個模塊，用作三列之前的標題語句。 但是，如果仔細看，它實際上仍在中間的6列之內。

移動 (Mobile)

Like a two-column layout, you need to make decisions on how you want to display your content, and that’s dependent on how important your information is. Using the same Dribbble example, on tablet, the left panel disappears completely. On mobile, the right panel gets tucked into a filter button. Clicking on the filter button expands the section and pushes content below. Just for some theory crafting, if the left-hand side was navigation, you could either stack it on top of your main content, put it in a drawer, try a horizontally scrolling anchor, or create a sticky footer with navigational elements.

就像兩列布局一樣，您需要決定如何顯示內容，這取決于信息的重要性。 使用相同的Dribbble示例，在平板電腦上，左面板完全消失。 在移動設備上，右側面板會塞入過濾器按鈕。 單擊過濾器按鈕可展開該部分并將內容推入下面。 僅出于理論上的考慮，如果左側是導航，則可以將其堆疊在主要內容的頂部，放在抽屜中，嘗試水平滾動的錨點，或者創建帶有導航元素的粘性頁腳。

分布不均(2–5–3) (Uneven distribution (2–5–3))

Facebook and Twitter use this layout where the main content is a long scrolling area of feeds. You might notice that the number of columns is uneven for the left and right side. Their left panel is navigation, and the right side is about a column wider with miscellaneous items like birthdays, highlights, reminders, and trends. On closer inspection, it looks like Twitter is using 10 columns, split into 2–5–3.

Facebook和Twitter使用這種布局，其中主要內容是Feed的長滾動區域。 您可能會注意到左側和右側的列數不均。 他們的左側面板是導航欄，右側是一列較寬的欄，其中包含生日，精彩集錦，提醒和趨勢等雜項。 經過仔細檢查，看起來Twitter正在使用10列，分為2–5–3。

If you recall from my previous article, 12 columns are the most basic and standard on desktop, but that doesn’t mean you need to use that. Different pages might need different grid settings, depending on your product. Here, the layout works because the feeds don’t need to be so wide, and the uneven distribution gives hierarchy and attention to the feeds.

如果您回想起我以前的文章 ，那么12列是臺式機上最基本和最標準的列，但這并不意味著您需要使用它。 不同的頁面可能需要不同的網格設置，具體取決于您的產品。 在這里，布局之所以起作用，是因為提要不需要那么寬，并且分布不均勻可以使提要獲得層次結構和注意力。

Basically you can cut up the grid however you like, you just need to be conscientious of the purpose of your site and how the hierarchy of the cut will support that purpose. If a site’s purpose was to primarily read long stories, or view large images, I would not be using a three-column layout because I would want to use more horizontal space. Instead, I would put the navigation at the top and utilize a two-column layout. Or if I needed a nice in-between for images and text, that would also be a good reason to use the two-column layout, such as Reddit’s current design.

基本上，您可以按自己的喜好分割網格，只需要認真考慮站點的目的以及削減的層次結構將如何支持該目的。 如果站點的目的是主要閱讀長篇小說或查看大圖像，則我不會使用三列布局，因為我想使用更多的水平空間。 取而代之的是，我將導航放在頂部，并使用兩列布局。 或者，如果我需要一個介于圖像和文本之間的不錯的選擇，那也將是使用兩列布局的一個很好的理由，例如Reddit的當前設計。

粘板 (Sticky Panels)

A sticky panel is when you have an area that is sticky, or “follows” the user as they scroll down a page. The information in the sticky panel can be static, such as some warning message with a call to action, or a dynamic panel that updates as you change information. The layout itself is the same as the two-column layout, but with the sticky content being much shorter. It’s incredibly effective because it can be used to reflect what the user has done on the non-sticky side, and to always have the call to action in view. Having the call to action in consistent view is important because it reminds users what their next step should be, resulting in increased conversions. Compared to a scrolling two-column layout, a sticky column is best when you want to highlight a single action the user can take, whereas a nonsticky is best for multiple actions.

粘性面板是指您有一個粘性區域，或者在用戶向下滾動頁面時“跟隨”用戶。 粘性面板中的信息可以是靜態的，例如帶有號召性用語的警告消息，也可以是動態面板，該面板會在您更改信息時進行更新。 布局本身與兩欄布局相同，但粘性內容要短得多。 它之所以令人難以置信，是因為它可用于反映用戶在非粘性方面所做的事情，并始終吸引號召性用語。 使號召性用語保持一致很重要，因為它可以提醒用戶下一步應該做什么，從而增加轉化次數。 與滾動的兩列布局相比，當您要突出顯示用戶可以執行的單個操作時，最好使用粘性列，而對于多個操作則最好使用非粘性列。

If you are designing with a grid system, the panel should go inside the grid. On desktop, the panel would take the outside 3 or 4 columns. And the remainder, whether that be the right or left side, will be a scrolling 8 or 9 columns.

如果使用網格系統進行設計，則面板應位于網格內部。 在臺式機上，面板將占用外部3或4列。 其余的，無論是右側還是左側，將是滾動的8列或9列。

Important: If you decide to design a sticky panel, the panel needs to be short enough that it will be visible on all desktop screens. Therefore it needs to be concise, and if it is dynamic or has expand and collapses, be sure the content is not being cut off at its maximum height.

重要：如果您決定設計粘性面板，則該面板必須足夠短，以使其在所有桌面屏幕上都可見。 因此，它必須簡明扼要，并且如果它是動態的或具有展開和折疊狀態，請確保未在最大高度處剪切內容。

移動 (Mobile)

Did you notice that on desktop it’s the same as a two-column layout but with a shorter side panel? The difference is on mobile, the panel gets pushed into a sticky footer. Another option is it can also be another module tucked into the middle of the content.

您是否注意到臺式機與兩欄式布局相同，但側面板較短？ 區別在于移動設備，面板被壓入了一個粘性頁腳。 另一個選擇是，它也可以是包含在內容中間的另一個模塊。

On a mobile experience, Airbnb turns the sticky right panel into a sticky bottom footer. When the user clicks on “Reserve,” a modal with the booking details shows. Usually the sticky footer becomes very summarized, and if the user clicks the sticky footer, a modal might show or you could pull it up like a drawer. On mobile web, the modal is easier to develop compared to a drawer, but the drawer would mimic a closer desktop experience.

在移動體驗上，Airbnb會將粘性的右面板變成粘性的底部頁腳。 當用戶單擊“預訂”時，將顯示帶有預訂詳細信息的模式。 通常，粘性頁腳會變得非常匯總，如果用戶單擊粘性頁腳，則可能會顯示一個模態或您可以像抽屜一樣將其拉起。 在移動網絡上，與抽屜相比，該模式更易于開發，但抽屜將模仿更近的桌面體驗。

網絡應用 (Web app)

Some sites have persistent navigation that is sticky to the edges of the screen, typically on the top and the left. These sticky navigation menus help the users feel like they are using an app, and is useful for very action-based UIs where a user needs to hop between different objectives. Since a design like this means the navigation is always there, you can use that to your advantage to simplify the content.

某些站點具有持久的導航功能，該導航功能通常會粘在屏幕邊緣，通常在屏幕的頂部和左側。 這些粘性導航菜單可幫助用戶感覺就像在使用應用程序，并且對于基于動作的UI(用戶需要在不同目標之間進行切換)非常有用。 由于這樣的設計意味著導航始終存在，因此您可以利用它來簡化內容。

For a web app design, the sticky navigation actually does not belong in the grid. It stays outside of it because it will always be there. The grid will be your content, with the sticky navigation outside of it. Usually this sticky navigation is also fixed in size. In this example, Spotify features a sticky left and bottom panel, and when you stretch the browser only contents in the grid dynamically change sizes. Most web apps keep their grids fluid to fill the browser.

對于Web應用程序設計，粘性導航實際上不屬于網格。 它留在它外面，因為它將一直存在。 網格將成為您的內容，其外部還有粘性導航。 通常，此粘性導航的大小也是固定的。 在此示例中，Spotify的左側面板和底部面板具有粘性，并且在拉伸瀏覽器時，僅網格中的內容會動態更改大小。 大多數網絡應用程序都保持網格流暢，以填充瀏覽器。

I must be a genius because this is the PERFECT example for how this grid is working. The Google calendar lines naturally already have the grid lines! Ha! And like Spotify, they have universal navigation fixed and sticky to the left.

我必須是個天才，因為這是該網格如何工作的完美示例。 Google日歷行自然已經有了網格線！ 哈！ 和Spotify一樣，它們具有固定的通用導航，并在左側具有粘性。

例子 (Examples)

移動 (Mobile)

Usually, web apps tend to have an actual mobile app (downloading an app from the app store). When you have a mobile app you can do so much more compared to mobile web (opening the page on your phone in chrome). In a mobile experience, the navigational items tend to get tucked into a hamburger menu because there are a lot of menu items. If there was a top navigation that acted as an overarching one on desktop, it could still be sticky to the top or sticky to the bottom on mobile. Why bottom? It’s closer to where your hand is and is therefore easier to access. For this reason, several companies have now moved away from the navigation being at the top in their app.

通常，Web應用程序傾向于具有實際的移動應用程序(從應用程序商店下載應用程序)。 與移動網絡相比，有了移動應用程序，您可以做更多的事情(在手機上以chrome打開頁面)。 在移動體驗中，導航項往往會塞入漢堡菜單，因為菜單項很多。 如果在桌面上有一個頂部導航充當總體導航，則它在移動設備上可能仍會粘在頂部或底部。 為什么是底部？ 它離您的手更近，因此更容易接近。 因此，現在有幾家公司不再將導航放在其應用程序的頂部。

Slack’s mobile app hides the navigation in the upper left hand icon. Google Keep hides the navigation in a hamburger menu on the mobile app, but also introduces a new sticky button to create new notes. Youtube’s mobile web version features navigation as a sticky footer.

Slack的移動應用程序將導航隱藏在左上角的圖標中。 Google Keep將導航隱藏在移動應用程序的漢堡菜單中，但還引入了新的即時貼按鈕來創建新的便箋。 Youtube的移動網絡版本具有導航功能，可作為粘貼頁腳。

This isn’t the end all be all. There are so many other cool ways you can utilize a grid to make an awesome design. Sometimes you don’t have to use gutters, sometimes you don’t even have to do 12 columns on desktop (like the Twitter example). Your three column layout doesn’t even need to start at the very beginning of the page. This is only the beginning of how you might use grids in your design. And at the end, it’s an aid to help you think about hierarchy. Hopefully this article has helped you in the technical aspect, but more importantly in how to think about design and offer visual solutions to fit the purpose of the page. Good usability isn’t just whatever looks good, it’s about what works, scales, and converts.

這還不是全部。 您還可以利用許多其他很酷的方法來利用網格進行出色的設計。 有時您不必使用裝訂線，有時甚至不必在桌面上做12列(例如Twitter示例)。 您的三列布局甚至不需要從頁面的開頭開始。 這僅僅是在設計中如何使用網格的開始。 最后，它可以幫助您思考層次結構 。 希望本文能夠在技術方面為您提供幫助，但更重要的是，在如何考慮設計并提供適合頁面目的的可視化解決方案方面，您會有所幫助。 良好的可用性不僅取決于外觀，還在于有效，可擴展和可轉換的東西。