图片手机网站建设,jsp mysql开发网站开发,app制作网站制作完,seo属于技术还是营销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设计超级基础的第三部分。 这次我们将介绍两种最常用的效果- 阴影和模糊 。 Und…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中使用。 典型的阴影依赖于距中心(xy或两者)的偏移即模糊和不透明度值。 在上面的示例中阴影沿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. 任何阴影中最重要的部分是XY和模糊。 后者必须是大于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-e42bf2d32864ui设计卡片阴影
