響應(yīng)式網(wǎng)格項(xiàng)目動(dòng)畫(huà)布局

重點(diǎn) (Top highlight)

第二部分 (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 “l(fā)ogic” 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.

現(xiàn)在，您已經(jīng)對(duì)如何使用網(wǎng)格有了基本的了解，您可能想知道如何將其應(yīng)用于您在網(wǎng)絡(luò)上看到的布局。 響應(yīng)式網(wǎng)格是一種系統(tǒng)地調(diào)整您的設(shè)計(jì)，確定訂單，建立層次結(jié)構(gòu)和“邏輯”設(shè)計(jì)的方法。 它使事情看起來(lái)不那么浮動(dòng)，您通常可以分辨出誰(shuí)在使用網(wǎng)格。 隨著人們成為更好的設(shè)計(jì)師，他們的眼睛不斷在各處繪制水平和垂直線條，以創(chuàng)建這種順序和對(duì)齊方式。

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.

在該注釋上，我經(jīng)常會(huì)遇到諸如“等等，粘性面板在網(wǎng)格布局中如何工作？”之類的問(wèn)題。 或“您對(duì)端到端的Web應(yīng)用程序做什么？” 我們將研究響應(yīng)式網(wǎng)格的一些應(yīng)用程序，以及它們?nèi)绾螖U(kuò)展到移動(dòng)應(yīng)用程序。 更重要的是，我想教你如何混合和匹配布局，以滿足您的設(shè)計(jì)需求。

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.

如果不確定如何在響應(yīng)式設(shè)計(jì)中使用網(wǎng)格，請(qǐng)閱讀第一部分： 響應(yīng)式網(wǎng)格以及如何實(shí)際使用它們 。 或順其自然，一切都很好。

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.

免責(zé)聲明： 我不在這些公司中任職，也不知道他們?nèi)绾谓⒆约旱木W(wǎng)格。 這純粹是一個(gè)學(xué)習(xí)練習(xí)，我僅以這些網(wǎng)站為例。

單列布局 (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.

又名全頁(yè)布局。 這是最簡(jiǎn)單的布局，用于登錄頁(yè)面。 您有足夠的空間來(lái)顯示大圖像，以創(chuàng)建可增強(qiáng)您的產(chǎn)品或品牌的聲明。 一欄式布局中的事物充當(dāng)單獨(dú)的模塊，并且易于在移動(dòng)設(shè)備上擴(kuò)展，因?yàn)槭挛镆呀?jīng)按照您希望它們顯示的順序進(jìn)行了堆疊。 因?yàn)樗诩ぐl(fā)情緒方面非常強(qiáng)大，所以這是主頁(yè)，簡(jiǎn)介，操作指南或新產(chǎn)品等的通用布局。即使在模塊中，也有可能將事物分成不同的網(wǎng)格列，整體而言正在利用12列作為主要內(nèi)容 。

WeWork’s home page with (right) and without (left) a 12 column grid overlayWeWork的主頁(yè)(帶有(右)和不帶有(左)12列網(wǎng)格覆蓋) Wework’s landing page with highlighted columns and elementsWework的著陸頁(yè)，其中突出顯示了列和元素

網(wǎng)格使用 (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在其設(shè)計(jì)中使用了網(wǎng)格，因?yàn)楸M管每一行都劃分了所有內(nèi)容，但它們?nèi)匀慌帕性谝黄稹?一個(gè)簡(jiǎn)單的贈(zèng)品是，元素之間的填充量是一致的(在4張卡片和兩個(gè)客戶成功案例之間)，并且外部邊緣的寬度相同，這使此設(shè)計(jì)令人賞心悅目。 我也喜歡這個(gè)示例，因?yàn)樗砻髂匀豢梢栽趫?zhí)行基于行的模塊的同時(shí)以有趣的方式分解頁(yè)面。

例子 (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.

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

Homepage designs from Abstract (left), OneMedical (center), and Apple (right)主頁(yè)設(shè)計(jì)來(lái)自Abstract(左)，OneMedical(中)和Apple(右)

兩列布局 (Two Column Layout)

Reddit’s two-column 8–4 layout.Reddit的兩欄式8-4布局。

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.

這可能是最常見(jiàn)的布局之一，只是因?yàn)槟幌Ｍ谋镜膶挾瘸^(guò)6-8列。 另一個(gè)好處是您可以將其他元素置于折疊上方，并使用此側(cè)欄進(jìn)行導(dǎo)航，廣告，號(hào)召性用語(yǔ)，類似清單等。您應(yīng)將8欄用作主要內(nèi)容，并將4欄用作一側(cè)內(nèi)容。 這樣，您的兩面都是偶數(shù)，如果需要，您可以將主要內(nèi)容切成兩半，以很好地并排顯示內(nèi)容。

“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 “l(fā)ess space” thing is a non-issue, and will even make your design better.

“但是等等，有8列？ 然后我的設(shè)計(jì)空間就大大減少了！” 你可能會(huì)說(shuō)。 在網(wǎng)絡(luò)上，您永遠(yuǎn)不要讓文本使用全部12列。 這是一個(gè)基本的排版原則，舒適的閱讀寬度在16px處約為60–80個(gè)字符，而在桌面上恰好不超過(guò)8列。 其實(shí)8列是真正推動(dòng)它，因?yàn)槟惚仨氁紤]那些誰(shuí)使用了大量的桌面，所以我不會(huì)設(shè)計(jì)的東西不止于此。 即使在單列主頁(yè)布局中，內(nèi)容也居中并具有最大寬度。 因此，“更少的空間”確實(shí)是沒(méi)有問(wèn)題的，甚至可以使您的設(shè)計(jì)更好。

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.

這種布局非常通用，適用于網(wǎng)站的內(nèi)部頁(yè)面，例如當(dāng)您有大量文本要閱讀時(shí)。 一些頁(yè)面示例是博客，說(shuō)明，常見(jiàn)問(wèn)題解答，操作方法，您希望在其中使導(dǎo)航或其他便于用戶使用的內(nèi)容。

例子 (Examples)

Mango Learning uses the left column for navigation to different chapter lessons.芒果學(xué)習(xí)使用左列導(dǎo)航到不同的章節(jié)課程。 Discord’s FAQ has a list of common questions on the left and shows you which one you are currently on.Discord的FAQ在左側(cè)有一個(gè)常見(jiàn)問(wèn)題列表，并向您顯示您當(dāng)前正在處理的問(wèn)題。 Merriam-Webster’s dictionary has resources displayed as points of interest on the right sideMerriam-Webster的詞典的資源在右側(cè)顯示為興趣點(diǎn) The Points Guy has partner advertisements on the right, as well as other articles you might like.積分專家在右側(cè)有合作伙伴廣告，以及您可能喜歡的其他文章。 Recipes from Food&Wine display other recipes on the right rail to keep readers engaged on the site longer.Food＆Wine的食譜會(huì)在右側(cè)欄顯示其他食譜，以使讀者在該站點(diǎn)上的互動(dòng)時(shí)間更長(zhǎng)。

移動(dòng) (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.

在移動(dòng)設(shè)備上，這是一個(gè)簡(jiǎn)單的層次結(jié)構(gòu)問(wèn)題。 您需要根據(jù)側(cè)面板中的內(nèi)容做出堆疊決策。 如果側(cè)面板是導(dǎo)航或關(guān)于FAQ的一系列問(wèn)題，則應(yīng)將其放在主要內(nèi)容之前。 如果側(cè)面板是“”或“其他建議”，則應(yīng)將堆棧放在主要內(nèi)容的底部。

Mango Learning (left) and Discord (center) both have their side panels at the top since they are navigational items, whereas Food and Wine (right) tucks their other recipes to the the bottom of the main content.芒果學(xué)習(xí)(左)和不和諧(中)都在其頂部，因?yàn)樗鼈兪菍?dǎo)航項(xiàng)，而食品和葡萄酒(右)則將其他食譜放在主要內(nèi)容的底部。

三列布局 (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.

由于您要處理三列，因此您可以選擇如何分配它們。 讓我們先來(lái)看一個(gè)簡(jiǎn)單的示例-均勻的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.

當(dāng)您需要張貼大量圖像時(shí)，這對(duì)于布局很有用。 如果設(shè)計(jì)不使用最大寬度，則可以選擇。 我在下面顯示了兩個(gè)示例。

Unsplash (left) does a masonry grid design that has a max width, and Dribbble (right) has a scaling design for their images where thumbnails will go edge to edge.Unsplash(左)進(jìn)行了具有最大寬度的砌體網(wǎng)格設(shè)計(jì)，Dribbble(右)針對(duì)其圖像進(jìn)行了縮放設(shè)計(jì)，其中縮略圖會(huì)邊到邊。

分布不均(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.

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

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設(shè)計(jì)工作板上3–6–3布局的示例。 紫色輪廓指示內(nèi)容位于網(wǎng)格上的位置，紫色塊指示它們?yōu)樵靥峁┑钠渌畛洹?我非常喜歡這個(gè)示例，因?yàn)樗嵝涯灰S意拆分頁(yè)面。 在這里，標(biāo)題和大號(hào)CTA是一個(gè)模塊，用作三列之前的標(biāo)題語(yǔ)句。 但是，如果仔細(xì)看，它實(shí)際上仍在中間的6列之內(nèi)。

移動(dòng) (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.

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

Dribble’s 3 column layout changes into 2 columns on tablet (left). On mobile, the right panel gets tucked into a filter button (center). Clicking on the filter button expands the section and pushes content below (right).Dribble的3列布局更改為平板電腦上的2列(左)。 在移動(dòng)設(shè)備上，右側(cè)面板會(huì)塞入過(guò)濾器按鈕(中間)。 單擊過(guò)濾器按鈕將展開(kāi)該部分并將內(nèi)容推入下方(右)。

分布不均(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使用這種布局，其中主要內(nèi)容是Feed的長(zhǎng)滾動(dòng)區(qū)域。 您可能會(huì)注意到左側(cè)和右側(cè)的列數(shù)不均。 他們的左側(cè)面板是導(dǎo)航欄，右側(cè)是一列較寬的欄，其中包含生日，精彩集錦，提醒和趨勢(shì)等雜項(xiàng)。 經(jīng)過(guò)仔細(xì)檢查，看起來(lái)Twitter正在使用10列，分為2–5–3。

Twitter’s home page with a 2–5–3 ten column layout.Twitter的主頁(yè)，布局為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列是臺(tái)式機(jī)上最基本和最標(biāo)準(zhǔn)的列，但這并不意味著您需要使用它。 不同的頁(yè)面可能需要不同的網(wǎng)格設(shè)置，具體取決于您的產(chǎn)品。 在這里，布局之所以起作用，是因?yàn)樘嵋恍枰敲磳?#xff0c;并且分布不均勻可以使提要獲得層次結(jié)構(gòu)和注意力。

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.

基本上，您可以按自己的喜好分割網(wǎng)格，只需要認(rèn)真考慮站點(diǎn)的目的以及削減的層次結(jié)構(gòu)將如何支持該目的。 如果站點(diǎn)的目的是主要閱讀長(zhǎng)篇小說(shuō)或查看大圖像，則我不會(huì)使用三列布局，因?yàn)槲蚁胧褂酶嗟乃娇臻g。 取而代之的是，我將導(dǎo)航放在頂部，并使用兩列布局。 或者，如果我需要一個(gè)介于圖像和文本之間的不錯(cuò)的選擇，那也將是使用兩列布局的一個(gè)很好的理由，例如Reddit的當(dāng)前設(shè)計(jì)。

粘板 (Sticky Panels)

Airbnb’s listings page shows a sticky right panel for users to easily book a stay.Airbnb的列表頁(yè)面顯示了一個(gè)粘性右側(cè)面板，方便用戶預(yù)訂住宿。

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.

粘性面板是指您有一個(gè)粘性區(qū)域，或者在用戶向下滾動(dòng)頁(yè)面時(shí)“跟隨”用戶。 粘性面板中的信息可以是靜態(tài)的，例如帶有號(hào)召性用語(yǔ)的警告消息，也可以是動(dòng)態(tài)面板，該面板會(huì)在您更改信息時(shí)進(jìn)行更新。 布局本身與兩欄布局相同，但粘性內(nèi)容要短得多。 它之所以令人難以置信，是因?yàn)樗捎糜诜从秤脩粼诜钦承苑矫嫠龅氖虑?#xff0c;并始終吸引號(hào)召性用語(yǔ)。 使號(hào)召性用語(yǔ)保持一致很重要，因?yàn)樗梢蕴嵝延脩粝乱徊綉?yīng)該做什么，從而增加轉(zhuǎn)化次數(shù)。 與滾動(dòng)的兩列布局相比，當(dāng)您要突出顯示用戶可以執(zhí)行的單個(gè)操作時(shí)，最好使用粘性列，而對(duì)于多個(gè)操作則最好使用非粘性列。

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.

如果使用網(wǎng)格系統(tǒng)進(jìn)行設(shè)計(jì)，則面板應(yīng)位于網(wǎng)格內(nèi)部。 在臺(tái)式機(jī)上，面板將占用外部3或4列。 其余的，無(wú)論是右側(cè)還是左側(cè)，將是滾動(dòng)的8列或9列。

Airbnb’s detail page is split into a two column 8–4 layout, where the 4 columns are a sticky panel.Airbnb的詳細(xì)信息頁(yè)面分為兩列8–4布局，其中四列為粘性面板。

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.

重要：如果您決定設(shè)計(jì)粘性面板，則該面板必須足夠短，以使其在所有桌面屏幕上都可見(jiàn)。 因此，它必須簡(jiǎn)明扼要，并且如果它是動(dòng)態(tài)的或具有展開(kāi)和折疊狀態(tài)，請(qǐng)確保未在最大高度處剪切內(nèi)容。

移動(dòng) (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.

您是否注意到臺(tái)式機(jī)與兩欄式布局相同，但側(cè)面板較短？ 區(qū)別在于移動(dòng)設(shè)備，面板被壓入了一個(gè)粘性頁(yè)腳。 另一個(gè)選擇是，它也可以是包含在內(nèi)容中間的另一個(gè)模塊。

On a mobile experience, Airbnb turns the sticky right panel into a sticky bottom footer (left). When the user clicks on “Reserve,” a modal with the booking details shows (center and right).在移動(dòng)體驗(yàn)上，Airbnb會(huì)將粘性的右面板變成粘性的底部頁(yè)腳(左)。 當(dāng)用戶單擊“預(yù)訂”時(shí)，將顯示一個(gè)帶有預(yù)訂詳細(xì)信息的模式(中間和右側(cè))。

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.

在移動(dòng)體驗(yàn)上，Airbnb會(huì)將粘性的右面板變成粘性的底部頁(yè)腳。 當(dāng)用戶單擊“預(yù)訂”時(shí)，將顯示帶有預(yù)訂詳細(xì)信息的模式。 通常，粘性頁(yè)腳會(huì)變得非常匯總，如果用戶單擊粘性頁(yè)腳，則可能會(huì)顯示一個(gè)模態(tài)或您可以像抽屜一樣將其拉起。 在移動(dòng)網(wǎng)絡(luò)上，與抽屜相比，該模式更易于開(kāi)發(fā)，但抽屜將模仿更近的桌面體驗(yàn)。

網(wǎng)絡(luò)應(yīng)用 (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.

某些站點(diǎn)具有持久的導(dǎo)航功能，該導(dǎo)航功能通常會(huì)粘在屏幕邊緣，通常在屏幕的頂部和左側(cè)。 這些粘性導(dǎo)航菜單可幫助用戶感覺(jué)就像在使用應(yīng)用程序，并且對(duì)于基于動(dòng)作的UI(用戶需要在不同目標(biāo)之間進(jìn)行切換)非常有用。 由于這樣的設(shè)計(jì)意味著導(dǎo)航始終存在，因此您可以利用它來(lái)簡(jiǎn)化內(nèi)容。

Spotify uses a web app design, featuring a sticky left and bottom panel.Spotify使用Web應(yīng)用程序設(shè)計(jì)，具有粘性的左側(cè)和底部面板。

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.

對(duì)于Web應(yīng)用程序設(shè)計(jì)，粘性導(dǎo)航實(shí)際上不屬于網(wǎng)格。 它留在它外面，因?yàn)樗鼘⒁恢贝嬖凇?網(wǎng)格將成為您的內(nèi)容，其外部還有粘性導(dǎo)航。 通常，此粘性導(dǎo)航的大小也是固定的。 在此示例中，Spotify的左側(cè)面板和底部面板具有粘性，并且在拉伸瀏覽器時(shí)，僅網(wǎng)格中的內(nèi)容會(huì)動(dòng)態(tài)更改大小。 大多數(shù)網(wǎng)絡(luò)應(yīng)用程序都保持網(wǎng)格流暢，以填充瀏覽器。

Google calendar’s web app has a sticky top header and left navigation for calendar controls.Google日歷的網(wǎng)絡(luò)應(yīng)用頂部頂部有一個(gè)標(biāo)頭，左側(cè)導(dǎo)航欄用于日歷控件。

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.

我必須是個(gè)天才，因?yàn)檫@是該網(wǎng)格如何工作的完美示例。 Google日歷行自然已經(jīng)有了網(wǎng)格線！ 哈！ 和Spotify一樣，它們具有固定的通用導(dǎo)航，并在左側(cè)具有粘性。

例子 (Examples)

Slack松弛 Google KeepGoogle Keep YouTube的YouTube

移動(dòng) (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應(yīng)用程序傾向于具有實(shí)際的移動(dòng)應(yīng)用程序(從應(yīng)用程序商店下載應(yīng)用程序)。 與移動(dòng)網(wǎng)絡(luò)相比，有了移動(dòng)應(yīng)用程序，您可以做更多的事情(在手機(jī)上以chrome打開(kāi)頁(yè)面)。 在移動(dòng)體驗(yàn)中，導(dǎo)航項(xiàng)往往會(huì)塞入漢堡菜單，因?yàn)椴藛雾?xiàng)很多。 如果在桌面上有一個(gè)頂部導(dǎo)航充當(dāng)總體導(dǎo)航，則它在移動(dòng)設(shè)備上可能仍會(huì)粘在頂部或底部。 為什么是底部？ 它離您的手更近，因此更容易接近。 因此，現(xiàn)在有幾家公司不再將導(dǎo)航放在其應(yīng)用程序的頂部。

Mobile solutions from Slack (left), Google Keep (center), and Youtube (right).來(lái)自Slack(左)，Google Keep(中)和Youtube(右)的移動(dòng)解決方案。

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的移動(dòng)應(yīng)用程序?qū)?dǎo)航隱藏在左上角的圖標(biāo)中。 Google Keep將導(dǎo)航隱藏在移動(dòng)應(yīng)用程序的漢堡菜單中，但還引入了新的即時(shí)貼按鈕來(lái)創(chuàng)建新的便箋。 Youtube的移動(dòng)網(wǎng)絡(luò)版本具有導(dǎo)航功能，可作為粘貼頁(yè)腳。

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.

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

翻譯自: https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-common-ui-layouts-7073293697f8

響應(yīng)式網(wǎng)格項(xiàng)目動(dòng)畫(huà)布局

總結(jié)

以上是生活随笔為你收集整理的响应式网格项目动画布局_响应式网格及其实际使用方式：常见的UI布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。