UI设计｜五大视觉元素，以及如何使用它们的5个技巧
是什么让一个网站变得好看？漂亮的设计需要遵循最终的设计规则吗？ 答案：是的，但你必须知道如何发现它们包含的重复可视化UI元素。
在这篇文章中，您将了解：
∙五大主要视觉元素
∙如何识别它们（带示例）
∙关于如何在实践中使用它们的五个技巧
UI中的视觉元素是什么？
视觉元素（甚至艺术元素）构成任何类型的视觉传达的基本构件，如线条、形状、颜、纹理和图案，就像语言中的单词一样，它们本身的意义是有限的，但是一旦你开始将它们组合起来，你就可以讲述无数的故事。
学习好的视觉系统就像学习一门新的语言。 为了理解它们，你需要一点一点地检查它们，直到你到它们最基本的元素。 这就是我们用户体验公司的设计师在项目中的工作方式。 让我们来看看每个人的一些例子。
1. 线条: 视觉引导
与数学不同，设计中的线条可以有宽度和深度。 实际上，这种视觉元素构成了它们中最通用的元素，因为它可以显示许多其他形状、图案和纹理。
我们可以用线条来引导我们的眼睛看向某些事物，或者把事物彼此分开。 它甚至可以提出完全抽象的概念，如时间(长或短)或节奏(直或波)。
在这个示例中，水平线将文章的主要部分相互分离，但在向下滚动页面时也会产生节奏。 ( 来源: misplaced.design )
形状: 空间的幻觉
形状由一条或多条线组成，但由于其定义的边界，它们与周围的环境截然不同。 他们可以走
出二维世界，创造空间和深度的错觉。
当前的极简主义时代使得二维世界更加普遍。然而，每次您在CTA按钮上放置一个投影时，您就会产生这种错觉！
几何形状和有机形状提供了一种不同的分组方式。 几何意味着秩序和可预测性，在用户体验中很重要。另一方面，在我们的眼中，有机形式显得更加自然和人性化。
来源: conference.awwwards
我喜欢一个微妙的变化可以使简单的形状，如矩形变得有趣。 在上面的例子中，图像的角度不同于周围的红矩形。 反过来，这在两者之间创造了一种有趣的张力。
这三个对象之间的位置和大小差异使组合具有动态性，有助于创建层次结构。
颜: 情绪的主要触发器
当然，这个元素也不能单独存在。 颜需要一个存在的平台。 请记住，不同的颜不一定会引发积极或消极的情绪，只是引发不同的情绪。
想想中性（黑、白、灰）、刺激更多情绪的暖（红）和冷（蓝），它们能更快地让我们平静下来。 但更复杂的是，颜不仅仅意味着它本身， 他们也互相影响。
如何组合颜可以增强网站的信息。 单、类比、互补和三组成了四种基本配方案。
1. 单
单方案使用一种主调，所有调从白到黑。 人们经常在强调内容本身的简约主义网站上使用它。 电子商务时尚品牌通常都是很好的例子。
2. 类比
在轮上，类比彼此相邻。 在下面的例子中，Forest 使用了不同深浅的绿和蓝来创建一个和谐的外观。 我们经常在自然界中发现这种方案（想象一个真实的森林），这就解释了它的视觉吸引力。
ui设计师资格证怎么考3. 互补
互补在轮上是相对的，这些配对使得彼此更加鲜明——相互对比看起来更加生动。
在这里，黄的CTA按钮与深紫的背景相比显得非常明亮。粗体的白段落使这种对比更加鲜明。 不管你喜欢还是讨厌，这些颜组合都会引起你的注意。
来源: flixxo
4. 三元
三元配方案使用三种主要颜完美地平衡彼此， 它们在环上形成一个正三角形。
对于拥有大量用户的网站来说，这是一个安全的选择，它给人一种平静、和谐的感觉，没有惊喜。 Slack 使用了这个方案的紫黄绿调板。 这里的一切都很平衡，元素之间不会相互压制。
来源: Slack
纹理: 模仿现实世界
由于设计网站将我们锁定在2D空间，我们只能模仿现实生活中的纹理。 视觉纹理给人二维
表面纹理的错觉。 我们只能通过眼睛而不是手来感知它。
来源: chiran-omoire
我们可以使用图片作为显示纹理的强大工具。
在这个例子中，粗糙的灰茶壶和茶叶与前景中精致的白茶杯形成了有趣的对比。 图片的强烈对称性引导我们的视线转向中间，在那里一杯清香的绿茶正等着我们品尝。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。