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.

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.

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.

运动模糊 (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

ui设计卡片阴影_UI设计形状和对象基础知识：阴影和模糊相关推荐

ui边框设计图_UI设计形状和对象基础知识：填充和边框
ui边框设计图第2部分 (Part 2) Welcome to the second part of the UI Design shapes basics. This time we'll cov ...
四旋翼飞行器2——自己设计四旋翼飞行器的硬件准备和基础知识
四旋翼飞行器2--自己设计四旋翼飞行器的硬件准备和基础知识文章目录四旋翼飞行器2--自己设计四旋翼飞行器的硬件准备和基础知识 DIY四轴需要准备什么零件 [基本原理与名词解释] 1.遥控器篇什么 ...
PX4模块设计之四十一：I2C/SPI Bus Instance基础知识
PX4模块设计之四十一:I2C/SPI Bus Instance基础知识 1. 基础知识 2. 基础类和定义 2.1 ListNode类 2.2 List类 2.3 BusCLIArguments类 ...
UI设计是什么_UI设计是学什么？
UI设计是什么? UI是User Interface的缩写,中文的意思是用户界面,再说直观一点就是,比如你在电脑上面或者手机上面能用眼睛看见都可以叫用户界面.UI设计其实是一个大通称,里面细化了有界面 ...
做设计需不需要学素描等美术基础知识 [转]
我看到越来越多的年轻人,设计是什么都搞不清楚,就在那里牛X.现在的年轻人眼高手低,不求刻苦,只图捷径.学会用PS等软件,只是有了一双可以做设计的手,再好的手,没有大脑的指挥,也是白痴的手,可是就有很多 ...
ui设计网络错误_UI设计人员常犯的10个错误
ui设计网络错误重点 (Top highlight) 1.不考虑范围 (1. Disregarding scope) It's not uncommon for designers to intr ...
java ui设计用什么_UI设计是什么？UI怎么设计？
UI设计,现在这个词语被更多的人提到,更多的人开始听说这个词语,开始了解这个行业,慢慢被它吸引,走入一个生机勃勃的趋势.那到底什么是UI设计呢? UI设计,全称 user interface,翻译成中 ...
基于机器学习的捡球机器人设计与实现(探索)第3篇——opencv基础知识学习（2019-02-02）
2019-02-02 by 崔斐然已经20多天没有更新了这些天忙于驾照和英语复习项目暂时搁置了(toulan) 接下来主要开始更新OpenCV的学习笔记,从零开始.笔记将归档于<机器视觉学 ...
【MySQL数据库设计与应用（一）】数据库基础知识
文章目录 1 基础知识 2 关系模型 2.1 关系模型的基本结构 2.2 关系模型的完整性约束 2.3 关系运算 1 基础知识数据库(DataBase):存储信息的仓库,累积信息的集合. 数据库系统 ...

ui设计卡片阴影_UI设计形状和对象基础知识：阴影和模糊