ui設計卡片陰影

第三部分 (Part 3)

Welcome to the third part of the UI Design super-basics. This time we’ll cover two of the most commonly used effects — shadows and blurs.

歡迎使用UI設計超級基礎的第三部分。 這次我們將介紹兩種最常用的效果- 陰影和模糊 。

Undertow (Shadows)

落影 (Drop Shadow)

Outer shadows (or drop-shadows) are easily the most common effect used in UI. A typical shadow relies on an offset from center (x, y, or both) a blur and an opacity value. In the example above the shadow is moved 20 points down on the Y axis and then blurred on the left side, or left without the blur on the right.

外部陰影(或陰影)很容易在UI中使用。 典型的陰影依賴于距中心(x，y或兩者)的偏移，即模糊和不透明度值。 在上面的示例中，陰影沿Y軸向下移動了20個點，然后在左側模糊，或者向左移動而右側沒有模糊。

Some tools like Sketch also have a “spread” value, which makes the shadow look like a smaller element is casting it.

諸如Sketch之類的某些工具也具有“ spread”值，這使陰影看起來像是在投射較小的元素。

The most important parts of any shadows are the X, the Y and the Blur. The latter has to be a number larger than 0, while X and Y can also be negative numbers, moving the shadow in practically every direction.

任何陰影中最重要的部分是X，Y和模糊。 后者必須是大于0的數字，而X和Y也可以是負數，從而幾乎在每個方向上移動陰影。

You can also stack shadows by adding more than one to the same object for pretty interesting results. The example below has three shadows in three darker shades of blue, each transposed by 3 points down.

您還可以通過向同一對象添加多個陰影來堆疊陰影，以獲得非常有趣的結果。 下面的示例在三個深藍色陰影中包含三個陰影，每個陰影向下移3個點。

同態 (Neumorphism)

Knowing that we simply have to mention Neumorphism again. This stacking of shadows and negative X and Y values are the core principles necessary for making Neumorphism work.

知道我們只需要再次提及神經同質。 陰影和負X和Y值的這種堆疊是使Neumorphism工作所需的核心原理。

看起來自然，陰影柔和 (Natural looking, soft shadows)

A natural-looking shadow is one of those elements that can make the biggest impact in a design. The most important part of looking natural is avoiding pure black shadows and using a shadow derived from our primary color instead. Pure black makes the contrast ratio too big to look natural. If you study real-life shadows, you’ll notice they often vary in shade and tone.

看起來自然的陰影是可以在設計中產生最大影響的元素之一。 看起來自然的最重要部分是避免純黑色陰影，而是使用從我們的原色派生的陰影。 純黑色會使對比度太大而看起來不自然。 如果您研究現實生活中的陰影，您會發現它們的陰影和色調通常會有所不同。

The default shadows are often too dark and can overtake the rest of the design.默認陰影通常太暗，可能會超過設計的其余部分。

The best way to fix your shadows is to change them from black (default) to a darker shade of your primary color. In the example above the shadow is a dark purple with decreased opacity.

修復陰影的最佳方法是將其從黑色(默認)更改為原色的較深陰影。 在上面的示例中，陰影為深紫色，透明度降低。

內在的陰影 (Inner shadows)

Inner shadows are relatively rare in UI. It has the same parameters as a drop shadow, but it appears inside of the object.

內部陰影在UI中相對較少。 它具有與陰影相同的參數，但它出現在對象內部。

They are not as popular because most interfaces are a series of layers stacked on top of one another. In that case, an outer shadow makes sense as it provides the depth. An inner shadow would suggest the object has a hole in it.

它們之所以不受歡迎，是因為大多數接口是一系列堆疊在一起的層。 在這種情況下，外部陰影會提供深度，因此很有意義。 內部陰影會表明該對象中有Kong。

The example on the left uses a classic stack of layers, as seen in most interfaces. Adding an inner shadow to any of the layers (right) can result in an illusion of a hole created in the layers. That can break the visual structure of the stack.如大多數界面所示，左側的示例使用經典的圖層堆棧。 向任何圖層(右)添加內部陰影可能會導致在圖層中創建Kong的錯覺。 這可能會破壞堆棧的視覺結構。

The only use-cases of this style are form inputs (both form fields and checkboxes or radio-buttons) and extruded shapes in the Neumorphism method. They can be used to make the objects appear more life-like in some instances but should only be used moderately.

這種風格的唯一用例是表單輸入(表單字段和復選框或單選按鈕)和Neumorphism方法中的拉伸形狀。 在某些情況下，可以使用它們使對象看起來更逼真，但應適度使用。

You can achieve this effect by using inner shadows on objects, and reverse the direction of X and Y.您可以通過在對象上使用內部陰影并反轉X和Y的方向來實現此效果。

The main issue with Neumorphism is the notion of using inner shadows and extruded shapes as a “selected” state. The perceivable difference between the standard and selected state is so small, that even non-visually impaired users can sometimes completely miss it. This in turn leads to one of the biggest accessibility flaws of Neumorphism.

Neumorphism的主要問題是使用內部陰影和拉伸形狀作為“選定”狀態的概念。 標準狀態與選定狀態之間的可感知差異很小，以至于即使是非視覺障礙的用戶，有時也可能會完全錯過它。 反過來，這導致了Neumorphism的最大可訪問性缺陷之一。

模糊 (Blurs)

Most design tools nowadays have a Gaussian type blur that extends the effect in every direction evenly. Its primary value is the radius. The larger it gets, the more prominent the blur effect.

如今，大多數設計工具都具有高斯類型的模糊效果，可以在各個方向上均勻地擴展效果。 它的主要值是半徑。 它越大，模糊效果越突出。

Gaussian blur is the most often used blur type. You can employ it into transitions between screens, or show a bit of realistic depth of field by selectively blurring the background.

高斯模糊是最常用的模糊類型。 您可以將其用于屏幕之間的過渡，也可以通過選擇性地模糊背景來顯示一些真實的景深。

The larger the blur value, the more blurry the image — this one should be self explanatory :)模糊值越大，圖像越模糊-這應該是不言而喻的:)

高斯模糊為陰影 (Gaussian blur as a Shadow)

This type of blur can also help you generate non-standard, point-shadows under objects. Just blur an ellipse and place it under the object casting the shadow. You can either use it on its own or combine it with a standard drop shadow for an even more unique result.

這種類型的模糊還可以幫助您在對象下生成非標準的點陰影。 只需模糊橢圓并將其放置在投射陰影的對象下即可。 您既可以單獨使用它，也可以將其與標準投影效果結合使用，以獲得更加獨特的效果。

背景模糊 (Background blur)

Background blur became popular when Apple started using it in their OS to achieve that behind smoked-glass effect in some screens. An object with this effect applied blurs everything under it.

當蘋果開始在其操作系統中使用背景模糊以實現某些屏幕上的煙熏玻璃效果后，背景模糊變得很流行。 應用了此效果的對象會模糊其下的所有內容。

In this example a square overlay with 90% opacity and a background blur is placed on the right of the image. As you can see the three white dots behave differently when they are placed under an object “casting” a background blur.在此示例中，具有90％不透明度和背景模糊的正方形疊加層放置在圖像的右側。 如您所見，當將三個白點放置在“投射”背景模糊的對象下時，它們的行為會有所不同。

運動模糊 (Motion blur)

A motion blur simulates the movement of an object in a direction defined by the angle value. The blur value works the same as with Gaussian blur here.

運動模糊模擬對象在由角度值定義的方向上的運動。 模糊值的作用與此處的高斯模糊相同。

變焦模糊 (Zoom blur)

A zoom blur happens when the object becomes blurry from the inside out. It’s often used in photography, but not a great pick for interface design.

當物體從內到外變得模糊時，就會發生變焦模糊。 它常用于攝影中，但不是界面設計的理想選擇。

In this particular blur type, you can also set the origin of the blur. By moving that point around, you can achieve some interesting effects.

在這種特定的模糊類型中，您還可以設置模糊的來源。 通過移動該點，可以實現一些有趣的效果。

UI設計的基礎 (The basics of UI design)

This concludes our three part series on basics of shapes, objects and effects used in UI design. This has been a part of the free chapters of 📘 Designing User Interfaces Ebook, and you can download these chapters free 🍒 Learn the basics of design in this YouTube playlist:📺 Design Basics!

到此，我們結束了關于UI設計中使用的形狀，對象和效果的基礎知識的三部分系列文章。 這已經是📘Designing User Interfaces電子書的免費章節的一部分，您可以免費下載這些章節。 🍒在此YouTube播放列表中學習設計基礎 ：s 設計基礎 ！

You can find both the previous parts here:

您可以在這里找到前面的兩個部分：

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)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/ui-design-shapes-objects-basics-shadows-and-blurs-e42bf2d32864

ui設計卡片陰影

總結

以上是生活随笔為你收集整理的ui设计卡片阴影_UI设计形状和对象基础知识：阴影和模糊的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。