设计没有层次感?十个方法教你提升层次感!

我们在做设计时,经常因为画面太平而没有重点,其实主要原因是因为对层次的塑造不强,除了利用常见的z型模式和F型模式之外,我们还可以使用元素创建强大的视觉层次。以下常见的一些方法都是制造视觉层次非常有效的方法。

设计没有层次感?十个方法教你提升层次感!

1、大小和规模

比例尺是元素的大小或度量标准。它可以与其他设计原则(如强调)一起使用,以将查看者吸引到焦点。如果按比例绘制对象,则显示的对象具有正确的大小(尽管可以根据其实际大小进行缩小或放大)。您可以描绘比生命更大的物体,或将其放低以适合一张纸。

设计没有层次感?十个方法教你提升层次感!

2、质地和风格

即使视觉层次结构更多地是要优先考虑内容而不是美观,但在您的作品中添加纹理或设计样式会影响层次结构。

像大小或比例一样,纹理和样式可以帮助将用户的注意力吸引到设计的某些部分。纹理会产生深度和有趣的形状,但很快就会变得太大,因此请轻踩。过度纹理化的设计可能会分散注意力,使阅读和理解变得很费力。

风格或设计的美感可以帮助实现主题并吸引用户。样式可以包括从版式,颜色到间距的所有内容。一些流行的风格是扁平的,有机的,最小的,拟形的,复古的或插图的。使您的内容更加有效的一个好方法是将设计样式与内容相匹配。例如,如果内容是用于复古主题的活动,则可以使用复古样式将内容和设计联系起来。

设计没有层次感?十个方法教你提升层次感!

3、颜色和对比度

设计中两个或多个对象之间的差异称为对比度。物体的区别可能是明暗,薄而厚,小而大,明亮而暗淡,彩色又黑白。列表是无止境的。通过使用粗体或对比色,您可以创建一个使元素脱颖而出的设计。一个很好的例子是白灰色背景上的紫色按钮:您正在使用颜色和对比度使该元素成为页面上最引人注目的元素。

设计没有层次感?十个方法教你提升层次感!

4、平衡与对齐

设计中的物体承受的重量就像物理世界一样:称为视觉重量。物体相对于其他物体的对齐可以改变其重量。如果对象是单独的或向左对齐,则该元素将吸引用户的注意;乍一看,其他对象将融合在一起。

设计的视觉重量必须保持平衡。尺寸,形状甚至对比度都可以暗示平衡。尽管它可以利用对称性或相等性,但也可以通过不对称性实现平衡。将不对称性视为镜像的对立面:您看不到反射,而是看到均匀分布元素的东西。

设计没有层次感?十个方法教你提升层次感!

5、邻近和空白

空白或元素的接近度也是建立有效层次结构的好方法。如果给元素足够的呼吸空间,它可使用户更轻松地阅读和消化它们。大面积的空间还可以使对象看起来更生动,更重要。另一方面,没有足够的空格会使元素难以阅读和消化。

自设计之初就已经存在。从石碑时代到今天我们使用的电子设备,我们已经使用并继续使用设计来传达我们的重要信息。设计中的每个元素都应有助于改善用户体验,并更清楚地传达该信息。

设计没有层次感?十个方法教你提升层次感!

6、重复和空白

负空间可用于增加或减少项目的重要性。通常,给定项的负空间越大,该项越重要。负空间使您的眼睛更好地隔离并看到物品。这就是我们在标题的上方和下方都有空间的原因。这也是Apple设计理念的关键-许多空白对该空间中的物品产生了重要性。相反,空白可以使项目具有较小的比例感,并且可以以此方式降低重要性。

设计没有层次感?十个方法教你提升层次感!

7、发挥视角

大多数界面(例如网站和应用程序)都设计为二维的,并且通常看起来很平坦。通过透视,您可以在元素中创建距离和分隔的错觉,以帮助将焦点集中在设计中很重要的区域。

您可以通过几种方法增加透视的幻觉,即增加与周围物体相关的元素的大小。这会使这些元素看起来更接近您。向您的元素添加视差运动效果,使其移动速度比周围的元素慢或快,添加阴影或在背景或前景层上添加模糊效果也会产生戏剧性的效果。

看一下下面左侧的示例。所有元素看起来都是平坦的,没有深度。由于对比度会与背景竞争,因此文本难以阅读,并且没有阴影效果可帮助文本脱离图像。

设计没有层次感?十个方法教你提升层次感!

另一方面,在上面的右图中,将模糊添加到背景图像,并将阴影添加到文本。这有助于给这些元素一些距离,并使事情更容易可视化。

8、屏幕对齐

当沿着相同的路径对齐元素时,可以帮助它们感觉彼此相关联,从而使扫描周围其他相似内容更加容易。

想一想您在许多应用程序和网站中看到的表格。当您对齐每列中的内容时,实际上没有必要使用列边框,因为您的眼睛通过数据对齐来关联此列。

这在许多带有导航栏的网站上也可以看到。由于徽标和所有页面链接是水平对齐的,因此您可以立即将其与导航栏相关联,并熟悉每个页面链接和号召性用语之间的关系。

设计没有层次感?十个方法教你提升层次感!

图片来源Partha Sarathy Aila。

9、元素的接近度

将元素放在一起可以使读者感觉到它们是相关的,这将激励他们继续阅读或参与其中。

在下面的示例中,在元素彼此靠近之前,您的眼睛很难轻松地扫描内容。阅读标题时,由于摘要文本不在紧下方,因此您可能不太愿意跟进。当我们重新排列这些元素时,扫描内容要容易得多,增加了观看者参与度更高的机会。

设计没有层次感?十个方法教你提升层次感!

10、有效运用动作

还记得互联网还很新的时代,每个弹出窗口或标注都必须眨眨眼才能引起您的注意?这种做法确实引起了我们的注意,但是在此过程中,它牺牲了令人愉悦的体验,并给观众带来了烦人的感觉,这对参与度没有帮助。

如今,我们可以更细微的方式使用这些相同的运动原理来引起注意或重视某些领域。同样,我们可以简单地以巧克力为例,说明它们如何结合微妙的动作来吸引您的注意力并提供提示,促使您参与设计。

设计没有层次感?十个方法教你提升层次感!

动画信用只是巧克力。

当您在口味选择中滚动时,颜色会更改以匹配产品。当您将鼠标悬停在包装纸上时,它会打开一条条条,露出内部的巧克力,给您的印象是您可以将其打开以了解更多信息。

业界动态

新媒体人如何写好微信公众号文章标题?

2021-4-5 11:47:18

业界动态

将体验设计思维用到日常的工作中

2021-4-5 13:14:02

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索