首先定義您的網格 (Start by defining your grid)

Sketch has 2 built-in layout features — Layout and Grid. In most cases, layout is a great way to organize content on a typical website utilizing a 12 column grid. However for this exercise we will be designing a more dynamic layout with various components.

Sketch具有2個內置的布局功能-布局和網格。 在大多數情況下，布局是一種利用12列網格在典型網站上組織內容的好方法。 但是，對于本練習，我們將設計一個具有各種組件的動態布局。

The subject matter for this project will be based on Nintendo’s Animal Crossing: New Horizons. Each month a new set of fish becomes available. What we will be designing is a visual representation of this highlighting the most valuable, their location & time as well as the value of each fish.

該項目的主題將基于任天堂的《動物穿越：新視野》。 每個月都會有一套新的魚。 我們將要設計的是視覺呈現，突出最有價值的東西，它們的位置和時間以及每條魚的價值。

There are 14 new fish being added (2 of which are of a higher value). Our grid should be divisible by 4 and 2.

添加了14條新魚(其中2條價值較高)。 我們的網格應被4和2整除。

思維流暢 (Think fluid)

The artboard and grid block size isn’t entirely relevant because the layouts should flow easily based on screen size. However to make it easy to design, I will be creating an artboard that is 1760px by 2860px. This means that our grid block size is 220px by 220px.

畫板和網格塊的大小并不完全相關，因為布局應根據屏幕大小輕松流動。 但是，為了簡化設計，我將創建一個1760px x 2860px的畫板。 這意味著我們的網格塊大小為220px x 220px。

移動優先，臺式機優先 (Mobile-first… and also desktop first)

Mobile-first has been a big term used over the past few years. In short it means to design for mobile users first because, odds are most people use their phones as their primary device when browsing the internet. This doesn’t mean that we should ignore desktop. So we will be designing for desktop first but will keep in mind how we want things to flow when they end up on a mobile device. Since we will have 2 variations for displaying our fish (featured fish taking up a 4x2 space and general fish taking ups a 2x2 space) we can reuse these components when adapting our content.

在過去的幾年中，“移動優先”一直是一個重要術語。 簡而言之，這意味著首先要為移動用戶設計，因為大多數人瀏覽互聯網時都以手機為主要設備。 這并不意味著我們應該忽略桌面。 因此，我們將首先針對臺式機進行設計，但請記住，當事情最終出現在移動設備上時，我們希望它們如何流動。 由于我們將有2種變體來顯示魚(功能魚占4x2的空間，普通魚占2x2的空間)，因此我們可以在調整內容時重用這些組件。

創建視覺資產 (Creating your visual assets)

When creating the components of your design, keep some kind of hierarchy to the content. Also make sure to create re-usable items. This will not only reduce the overall weight of the project, but it will also help to create a cohesive message. Start with a baseline for your heading 1 then work your way down.

在創建設計的組件時，請對內容保持某種層次。 另外，請確保創建可重復使用的項目。 這不僅將減輕項目的總體負擔，而且還將有助于創建凝聚力的信息。 從標題1的基線開始，然后逐步下降。

利用CSS屬性 (Utilize CSS properties)

One of the most undervalued aspects of designing in Sketch is that it limits you to only work with available CSS attributes. This significantly increases the possibility that your final designs are able to be programmed.

Sketch中設計最被低估的方面之一是它限制了您只能使用可用CSS屬性。 這大大增加了最終設計能夠被編程的可能性。

Sketch also allows you to grab usable CSS from components that you have created, Things like CSS gradients (not necessarily hard to program but are tedious to code), can be easily copied and pasted into your stylesheet.

Sketch還允許您從已創建的組件中獲取可用CSS，諸如CSS漸變之類的東西(不一定很難編程，但代碼繁瑣)卻可以輕松地復制并粘貼到樣式表中。

SVG和FontAwesome (SVGs & FontAwesome)

If at all possible create your illustrations or icons as vectors and output as an SVG file. I created my illustrations in Adobe Illustrator, then imported them into Sketch — keeping them in a vector format. This will ensure that your content will retain its quality no matter what the device. SVGs are also often much smaller than JPGs or PNGs.

盡可能將插圖或圖標創建為矢量，并輸出為SVG文件。 我在Adobe Illustrator中創建了插圖，然后將其導入到Sketch中-使其保持矢量格式。 這將確保無論使用哪種設備，您的內容都將保持其質量。 SVG通常也比JPG或PNG小得多。

Another great tool for gathering assets for your design that is both light-weight and scalable is FontAwesome — The internet’s most popular icon set and toolkit. Simply download FontAwesome to your computer and install it like any other font. Once installed visit their icon page and search for the icons you want to use. When you find the right icon, you can copy it to your artboard then return to Sketch to paste it in your text field with the FontAwesome font selected.

輕巧且可擴展的另一種為您的設計收集資產的出色工具是FontAwesome -Internet上最受歡迎的圖標集和工具包。 只需將FontAwesome下載到您的計算機上，然后像安裝其他任何字體一樣安裝它。 安裝完成后，請訪問其圖標頁面并搜索要使用的圖標。 找到正確的圖標后，可以將其復制到畫板上，然后返回“草圖”以將其粘貼到文本字段中，并選擇FontAwesome字體。

動態背景圖片 (Dynamic background images)

We have already established that you must create fluid designs. This becomes challenging when working with busy bitmap images. Luckily there is a CSS attribute that helps make background images adapt with ease. When appending a background image, there is a property known as “background-size”. One of the values of background size is “cover”. What this does is fit your image to the allocated area by scaling and cropping the top and bottom of the image as the viewport changes in size. So when choosing your background image be sure to have some extra room all around the main focal point so if it does get cropped your main point of interest is protected.

我們已經確定您必須創建流暢的設計。 當處理繁忙的位圖圖像時，這變得具有挑戰性。 幸運的是，有一個CSS屬性可以幫助輕松地適應背景圖像。 附加背景圖像時，有一個稱為“ background-size”的屬性。 背景大小的值之一是“ cover”。 這是通過在視口尺寸改變時縮放和裁剪圖像的頂部和底部，使圖像適合分配的區域。 因此，在選擇背景圖像時，請確保在主要焦點周圍有一些額外的空間，這樣，如果確實被裁剪，您的主要興趣點就會受到保護。

組裝設計 (Assembling the design)

As you can see, the completed design works within the grid that we established in step one. Once your initial wireframe is established, then you can apply styles — colours, icons, images etc. As noted earlier, try and use as many CSS techniques as possible to ensure that your design is possible and that it can be developed in an efficient way.

如您所見，完成的設計在第一步中建立的網格內工作。 一旦建立了初始線框，便可以應用樣式-顏色，圖標，圖像等。如前所述，請嘗試并使用盡可能多CSS技術，以確保您的設計成為可能，并可以有效地進行開發。

Because our layout is fluid, the columns and row heights are based on the content inside. We use padding to keep enough white space around each object. In Sketch if you hold the “Option” key and mouse over the space between objects it will show you the space in pixels between each item. This allows us to keep consistent spacing which would be converted to padding or margins when being programmed.

因為我們的布局是流暢的，所以列和行的高度基于內部的內容。 我們使用填充來在每個對象周圍保留足夠的空白。 在Sketch中，如果按住“ Option”鍵并在對象之間的空間上移動鼠標，它將為您顯示每個項目之間的空間(以像素為單位)。 這使我們可以保持一致的間距，該間距在編程時會轉換為填充或邊距。

Keep your files clean. Make sure to group your items and create symbols for recurring items like, lists, highlights and callouts.

保持文件干凈。 確保將項目分組并為重復項目(例如列表，突出顯示和標注)創建符號。

讓我們開始編碼 (Let’s get coding)

HTML (HTML)

Start with your HTML. Build out the overall structure and hierarchy of your content. When creating the nested grid items, there are two ways we can target them with CSS. The easiest route would be to give each container (div) a unique class name — for example “hero”. This will make things easier to reference when we write the CSS. Alternatively if we want to keep the HTML clean, or if the HTML is automatically output in a loop (like an app built with React which could loop through data in a JSON file), we can target inner divs using pseudo-classes.

從您HTML開始。 建立內容的整體結構和層次結構。 創建嵌套網格項時，有兩種方法可以使用CSS定位它們。 最簡單的方法是為每個容器(div)賦予唯一的類名，例如“ hero”。 這將使我們在編寫CSS時更容易參考。 另外，如果我們想保持HTML的整潔，或者HTML是自動循環輸出的(例如使用React構建的應用程序，可以循環遍歷JSON文件中的數據)，則可以使用偽類來定位內部div。

CSS (CSS)

There are a ton of property options to be used with CSS grid, but to keeps things simple and to keep the focus on design, we will only be utilizing the “grid-template-areas” property.

CSS網格可以使用大量的屬性選項，但是為了使事情變得簡單并專注于設計，我們將僅使用“ grid-template-areas”屬性。

Most of the heavy lifting when building our grid is going to be handled by the container. But before we get there we need to define our grid items. The best part about this is that we can give them easy to remember names (see image above).

建造網格時，大部分繁重的工作將由集裝箱來處理。 但是在到達那里之前，我們需要定義網格項。 最好的部分是，我們可以給他們起易于記憶的名稱(請參見上圖)。

Once the names are established and associated with a container we write out the HTML.

一旦名稱被建立并與容器相關聯，我們就寫出HTML。

使事物響應(自適應) (Making things responsive (Adaptive))

Often the term “responsive” is used when talking about the conversion of a desktop site to devices with smaller screens — the layouts respond to the screen size. In reality when done properly, the layouts we should be creating are “adaptive” layouts. We don’t want the content to just get shuffled around aimlessly for smaller screen sizes, we want the content to be oriented in a way that is optimized for the best user experience.

在談論將桌面站點轉換為具有較小屏幕的設備時，通常使用術語“響應式”-布局響應屏幕尺寸。 實際上，只要正確完成，我們應該創建的布局就是“自適應”布局。 我們不希望內容只是為了較小的屏幕大小而漫無目的地打亂，我們希望內容以優化的方式進行定向，以實現最佳的用戶體驗。

Luckily, CSS Grid makes this incredibly simple. The “grid-template-areas” property allows us to build out our grid by referencing our grid-area names as cells in the grid.

幸運的是，CSS Grid使這一操作變得非常簡單。 “網格模板區域”屬性使我們可以通過將網格區域名稱引用為網格中的單元格來構建網格。

Lines 131–133 set up our grid. We first set the container to be displayed as a “grid”. Line 132 sets up our columns. What the code translates to are 8 equal columns. “1fr” indicates “one fraction” of the entire width (so in short, 8 equal fractions). Line 133 sets up our rows using the same method as noted above.

第131–133行建立了我們的網格。 我們首先將容器設置為顯示為“網格”。 132行設置了我們的列。 代碼轉換為8個相等的列。 “ 1fr”表示整個寬度的“一個分數”(因此，簡而言之，是8個相等的分數)。 第133行使用與上述相同的方法設置行。

Using the grid area names defined in our stylesheet, we work row by row as seen above. On line 135, 136 & 137 we see “hero” taking up 8 cells across and 3 cells down. On lines 138 & 139 we see “dorado” taking up the first 4 cells in the fourth and fifth row while “great-white-shark” takes up the last 4 cells in the same row.

使用樣式表中定義的網格區域名稱，我們如上所述逐行工作。 在第135、136和137行，我們看到“英雄”占據了8個單元格，向下占據了3個單元格。 在第138和139行，我們看到“ dorado”占據了第四行和第五行的前4個單元格，而“ great-white-shark”占據了同一行的最后4個單元格。

When making the layout adaptive, we simply need to use a media query to target the screen size, then adjust the values of our “grid-template-areas” property.

在使布局自適應時，我們只需要使用媒體查詢來確定屏幕尺寸，然后調整“網格模板區域”屬性的值即可。

最終產品 (The Final Product)

The final product is a light-weight easily adaptable layout to enhance the overall user experience.

最終產品是輕巧且易于適應的布局，以增強整體用戶體驗。

The best approach to designing layouts to be programmed with CSS Grid is to take things one step at a time always anticipating how objects should react across multiple devices.

設計要使用CSS Grid進行編程的布局的最佳方法是每次只一步一步地始終預期對象在多個設備之間的React。

While this guide doesn’t provide extensive information around CSS programming as a whole, I hope that the information provided helps designers to get a better understanding of the relationship between code and design.

盡管本指南并未提供有關CSS編程的全面信息，但我希望所提供的信息有助于設計人員更好地理解代碼與設計之間的關系。