ui邊框設(shè)計(jì)圖

第2部分 (Part 2)

Welcome to the second part of the UI Design shapes basics. This time we’ll cover two of the most essential properties of a shape — fills and borders. This is also a part of the free chapters from Designing User Interfaces.

歡迎使用UI設(shè)計(jì)形狀基礎(chǔ)的第二部分。 這次，我們將介紹形狀的兩個(gè)最重要的屬性-填充和邊框。 這也是《 設(shè)計(jì)用戶界面 》中免費(fèi)章節(jié)的一部分。

填充 (Fills)

As we have stated in part 1 of this series, most of UI design is about moving rectangles around. So let’s start with a humble rectangle. In most design tools you can draw it by pressing the R key.

正如我們?cè)诒鞠盗械牡?部分中所述，大多數(shù)UI設(shè)計(jì)都是圍繞移動(dòng)矩形 。 因此，讓我們從一個(gè)不起眼的矩形開始。 在大多數(shù)設(shè)計(jì)工具中，您可以通過(guò)按R鍵來(lái)繪制它。

When you create a new rectangle, it usually already has a fill attached to it. In most cases it’s simply grey, so you will remember to change the color yourself. Sometimes it has a border too.

創(chuàng)建新矩形時(shí)，通常通常已經(jīng)附加了填充。 在大多數(shù)情況下，它只是灰色，因此您會(huì)記得自己更改顏色。 有時(shí)它也有邊框。

Back in the very early Sketch days it only had an outline, and you could selectively switch off parts of it. But luckily this is now a thing of the past.

在Sketch的早期，它只有一個(gè)輪廓，您可以有選擇地關(guān)閉它的一部分。 但是幸運(yùn)的是，這已經(jīng)成為過(guò)去。

I made a video a while ago, trying to make a design in a nearly 10 year old version of Sketch and trust me, now is a lot better of a time to start :)我前段時(shí)間制作了一個(gè)視頻，試圖用將近10年的Sketch版本進(jìn)行設(shè)計(jì)并相信我，現(xiàn)在開始的時(shí)間要好很多了：)

The reason for this predefined color is because grey is neutral enough so adding a new shape won’t ruin your already beautifully crafted interface, but yet you’ll still be able to see that new object.

使用這種預(yù)定義顏色的原因是，灰色足夠中性，因此添加新形狀不會(huì)破壞您本來(lái)就精美的界面，但是您仍然可以看到該新對(duì)象。

To make it simple fill is another name for the object’s background. It can be a color, a gradient, or a photo. Each of these can also have a different level of opacity (transparency) ranging from 0 (fully transparent — invisible) to 100 (fully opaque, with no transparency).

為了簡(jiǎn)單起見，填充是對(duì)象背景的另一個(gè)名稱。 它可以是顏色，漸變或照片。 這些中的每一個(gè)還可以具有不同的不透明度(透明度)級(jí)別，范圍從0(完全透明-不可見)到100(完全不透明，沒有透明度)。

The image above shows three rectangles. The one on the left is completely invisible because it has opacity 0, then a translucent one with opacity 50%, and then a fully visible one on the right.上圖顯示了三個(gè)矩形。 左邊的一個(gè)是完全不可見的，因?yàn)樗牟煌该鞫葹?，然后是不透明度為50％的半透明的，而右邊是完全可見的。

Pro tip:

專家提示：

Most of the modern design tools allow you to set opacity with the number keys on your keyboard. Just select an object and press 1 (for 10%), 2 (for 20%) and so on. Pushing 0 will switch between 0% and 100% opacity (so you sometimes need to press it twice).

大多數(shù)現(xiàn)代設(shè)計(jì)工具都允許您使用鍵盤上的數(shù)字鍵設(shè)置不透明度。 只需選擇一個(gè)對(duì)象，然后按1(代表10％)，2(代表20％)，依此類推。 按下0將在0％和100％不透明度之間切換(因此有時(shí)您需要按兩次)。

If an object doesn’t have a fill, is also lacking a border or an effect, it won’t be visible in the interface as it requires some defining characteristics to be visible. You’ll still be able to select it, however, move it around, and modify it. It will also still exist in the layers list.

如果對(duì)象沒有填充，也沒有邊框或效果，則它在界面中將不可見，因?yàn)樗枰恍┒x的特征才能可見。 您仍然可以選擇它，但是可以四處移動(dòng)并修改它。 它也將仍然存在于圖層列表中。

填充類型 (The types of fill)

There are three main possibilities of a fill and an absence of one. So you can either have NO FILL, or have a single color, gradient or image backgrounds.

填充和不存在三種主要可能性。 因此，您可以沒有填充，也可以只有一種顏色，漸變或圖像背景。

A while ago patterns were considered another kind of a fill, but in reality they’re just images with a potential to tile them, so they fall into the image category.

前一段時(shí)間，圖案被認(rèn)為是另一種填充，但實(shí)際上它們只是具有平鋪潛力的圖像，因此它們屬于圖像類別。

堆積填充 (Stacking fills)

You can also add more than one type of fill to the image. Obviously for this to work the fill layers need to be at least partially transparent, or you’ll only going to see the top one. In this example from Sketch you see an image fill as the base, and a semi-transparent gradient fill on top of it.

您還可以為圖像添加多種類型的填充。 顯然，要使填充層起作用，填充層至少必須部分透明，否則您只會(huì)看到最上面的一層。 在Sketch的此示例中，您將看到圖像填充為基礎(chǔ)，并且在其頂部為半透明漸變填充。

多梯度 (The multi-gradient)

You can use this principle to achieve some pretty interesting, organic effects of multiple overlapping gradients like in the example above. To do this, simply create four radial gradients that start at each corner of your shape, and fade out towards the center. Experiment with their size and position until you like the result.

您可以使用此原理來(lái)實(shí)現(xiàn)多個(gè)重疊漸變的一些非常有趣的有機(jī)效果，如上例所示。 為此，只需創(chuàng)建四個(gè)徑向漸變，這些漸變從形狀的每個(gè)角開始并向中心逐漸淡出。 試驗(yàn)它們的大小和位置，直到您滿意為止。

The most common fills you’re probably going to use however, are color and gradient.

但是，您可能要使用的最常見的填充是顏色和漸變。

邊框 (Borders)

Borders are after the fill, the second styling an object can have.

填充之后是邊框，對(duì)象可以具有第二種樣式。

The border is a line that goes around our object. It can go inside (inner border), outside (outer border), or between them (center). Remember that only the inner border doesn’t visually make the object larger.

邊框是圍繞我們對(duì)象的一條線。 它可以進(jìn)入內(nèi)部(內(nèi)部邊界)，外部(外部邊界)或它們之間(中間)。 請(qǐng)記住，只有內(nèi)部邊框不會(huì)在視覺上使對(duì)象變大。

In the example above, the box is 60 x 60 points. The border is 10 points thick. In the middle image, that makes our box larger by 5 points on each side. In the third example, the border is completely outside, making the box larger by 10points in every direction.

在上面的示例中，該框?yàn)?0 x 60點(diǎn)。 邊框是10點(diǎn)粗。 在中間的圖像中，這使我們的盒子每邊大5個(gè)點(diǎn)。 在第三個(gè)示例中，邊框完全在外部，使框在每個(gè)方向上都擴(kuò)大了10個(gè)點(diǎn)。

邊框樣式 (Border styles)

The border can have different weights (width) in points and can be a dashed or dotted line. We can also fill it with both a color and a gradient.

邊框的磅數(shù)可以有不同的權(quán)重(寬度)，可以是虛線或虛線。 我們也可以用顏色和漸變填充它。

Most of the design tools allow you also to modify the endings and joints of your lines (also known as paths).

大多數(shù)設(shè)計(jì)工具還允許您修改線條(也稱為路徑)的末端和接縫。

The ends can be open, flat, or rounded while the joints can be sharp, rounded, or angled.

末端可以是開放的，平坦的或圓形的，而接頭可以是銳利的，圓形的或成角度的。

The roundness of joints and endings can work well if your interface is generally rounded. If not, then just keep it at the default setting.

如果您的界面通常是圓形的，則關(guān)節(jié)和末端的圓度可以很好地工作。 如果不是，則將其保留為默認(rèn)設(shè)置。

Thanks for getting this far. I believe it’s worth to sometimes revisit the very basics of a craft and that’s what this series is all about. Borders and fills are an essential part of UI, so it’s good to be able to bend them to your needs every time. In the next installment, we’ll cover all types of Shadows in UI design.

感謝您的幫助。 我認(rèn)為有時(shí)值得回顧一下手Craft.io品的基本知識(shí)，這就是本系列的全部?jī)?nèi)容。 邊框和填充是UI的重要組成部分，因此每次都可以根據(jù)需要彎曲邊框和填充是很好的。 在下一部分中，我們將介紹UI設(shè)計(jì)中的所有類型的Shadows。

If you want to read more about the shapes and UI design in general, check out our 📘 book at www.designingui.com — there are free chapters there as well.

如果您想全面了解形狀和UI設(shè)計(jì)的更多信息，請(qǐng)?jiān)L問(wèn)我們的design書，網(wǎng)址為www.designingui.com -那里也有免費(fèi)的章節(jié)。

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個(gè)巴西組織，致力于通過(guò)采取行動(dòng)，賦權(quán)和知識(shí)共享的舉措來(lái)促進(jìn)科技行業(yè)中的黑人女性平等。 對(duì)系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計(jì)社區(qū)。

翻譯自: https://uxdesign.cc/ui-design-shapes-objects-basics-fills-and-borders-ed294a17bcbb

ui邊框設(shè)計(jì)圖

總結(jié)

以上是生活随笔為你收集整理的ui边框设计图_UI设计形状和对象基础知识：填充和边框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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