sketch放入app組件

首先定義您的網(wǎng)格 (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個內(nèi)置的布局功能-布局和網(wǎng)格。 在大多數(shù)情況下，布局是一種利用12列網(wǎng)格在典型網(wǎng)站上組織內(nèi)容的好方法。 但是，對于本練習(xí)，我們將設(shè)計一個具有各種組件的動態(tài)布局。

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.

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

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條價值較高)。 我們的網(wǎng)格應(yīng)被4和2整除。

Setting up a grid in Sketch在Sketch中設(shè)置網(wǎng)格

思維流暢 (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.

畫板和網(wǎng)格塊的大小并不完全相關(guān)，因為布局應(yīng)根據(jù)屏幕大小輕松流動。 但是，為了簡化設(shè)計，我將創(chuàng)建一個1760px x 2860px的畫板。 這意味著我們的網(wǎng)格塊大小為220px x 220px。

移動優(yōu)先，臺式機優(yōu)先 (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.

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

Reusable components可重復(fù)使用的組件

創(chuàng)建視覺資產(chǎn) (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.

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

Heading and body copy sizing標題和正文復(fù)制大小

利用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中設(shè)計最被低估的方面之一是它限制了您只能使用可用CSS屬性。 這大大增加了最終設(shè)計能夠被編程的可能性。

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還允許您從已創(chuàng)建的組件中獲取可用CSS，諸如CSS漸變之類的東西(不一定很難編程，但代碼繁瑣)卻可以輕松地復(fù)制并粘貼到樣式表中。

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.

盡可能將插圖或圖標創(chuàng)建為矢量，并輸出為SVG文件。 我在Adobe Illustrator中創(chuàng)建了插圖，然后將其導(dǎo)入到Sketch中-使其保持矢量格式。 這將確保無論使用哪種設(shè)備，您的內(nèi)容都將保持其質(zhì)量。 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.

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

FontAwesome — https://fontawesome.comFontAwesome — https://fontawesome.com

動態(tài)背景圖片 (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.

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

Background image — Larger than container背景圖片-比容器大

組裝設(shè)計 (Assembling the design)

Wireframe layout線框布局

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.

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

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.

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

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

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

Using Layers in Sketch在草圖中使用圖層

讓我們開始編碼 (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開始。 建立內(nèi)容的整體結(jié)構(gòu)和層次結(jié)構(gòu)。 創(chuàng)建嵌套網(wǎng)格項時，有兩種方法可以使用CSS定位它們。 最簡單的方法是為每個容器(div)賦予唯一的類名，例如“ hero”。 這將使我們在編寫CSS時更容易參考。 另外，如果我們想保持HTML的整潔，或者HTML是自動循環(huán)輸出的(例如使用React構(gòu)建的應(yīng)用程序，可以循環(huán)遍歷JSON文件中的數(shù)據(jù))，則可以使用偽類來定位內(nèi)部div。

The above achieves the same goal. The left example targets divs with unique classes while the right example looks at nested divs (all with the same class name) and targets them in order of their appearance.以上實現(xiàn)了相同的目標。 左邊的示例針對具有唯一類的div，而右邊的示例查看嵌套的div(均具有相同的類名)并按其出現(xiàn)順序?qū)ζ溥M行定位。

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網(wǎng)格可以使用大量的屬性選項，但是為了使事情變得簡單并專注于設(shè)計，我們將僅使用“ 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).

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

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

一旦名稱被建立并與容器相關(guān)聯(lián)，我們就寫出HTML。

HTML StructureHTML結(jié)構(gòu) Visual representation of HTML code structureHTML代碼結(jié)構(gòu)的可視表示

使事物響應(yīng)(自適應(yīng)) (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.

在談?wù)搶⒆烂嬲军c轉(zhuǎn)換為具有較小屏幕的設(shè)備時，通常使用術(shù)語“響應(yīng)式”-布局響應(yīng)屏幕尺寸。 實際上，只要正確完成，我們應(yīng)該創(chuàng)建的布局就是“自適應(yīng)”布局。 我們不希望內(nèi)容只是為了較小的屏幕大小而漫無目的地打亂，我們希望內(nèi)容以優(yōu)化的方式進行定向，以實現(xiàn)最佳的用戶體驗。

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使這一操作變得非常簡單。 “網(wǎng)格模板區(qū)域”屬性使我們可以通過將網(wǎng)格區(qū)域名稱引用為網(wǎng)格中的單元格來構(gòu)建網(wǎng)格。

Using grid-template-areas in CSS在CSS中使用網(wǎng)格模板區(qū)域

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行建立了我們的網(wǎng)格。 我們首先將容器設(shè)置為顯示為“網(wǎng)格”。 132行設(shè)置了我們的列。 代碼轉(zhuǎn)換為8個相等的列。 “ 1fr”表示整個寬度的“一個分數(shù)”(因此，簡而言之，是8個相等的分數(shù))。 第133行使用與上述相同的方法設(shè)置行。

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.

使用樣式表中定義的網(wǎng)格區(qū)域名稱，我們?nèi)缟纤鲋鹦泄ぷ鳌?在第135、136和137行，我們看到“英雄”占據(jù)了8個單元格，向下占據(jù)了3個單元格。 在第138和139行，我們看到“ dorado”占據(jù)了第四行和第五行的前4個單元格，而“ great-white-shark”占據(jù)了同一行的最后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.

在使布局自適應(yīng)時，我們只需要使用媒體查詢來確定屏幕尺寸，然后調(diào)整“網(wǎng)格模板區(qū)域”屬性的值即可。

Responsive programming — grid-template-area -for devices with screen sizes smaller than 600px in width響應(yīng)式編程—網(wǎng)格模板區(qū)域-用于屏幕寬度小于600像素的設(shè)備

最終產(chǎn)品 (The Final Product)

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

最終產(chǎn)品是輕巧且易于適應(yīng)的布局，以增強整體用戶體驗。

Animal Crossing — June Fish Guide — Desktop view動物穿越-六月魚指南-桌面視圖 Animal Crossing — June Fish Guide —Mobile view動物穿越-六月魚指南-移動視圖

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.

設(shè)計要使用CSS Grid進行編程的布局的最佳方法是每次只一步一步地始終預(yù)期對象在多個設(shè)備之間的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.

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

翻譯自: https://uxdesign.cc/designing-for-css-grid-using-sketch-app-41807be1802e

sketch放入app組件

總結(jié)

以上是生活随笔為你收集整理的sketch放入app组件_使用Sketch App设计CSS网格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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