别人家的设计更好？那是因为你还不知道交互设计中的5个视觉元素使用技巧！

是什么使一个网站有吸引力？我们很少停下来分析原因。出色漂亮的设计是否遵循最终的设计规则？答案是肯定的，但是作为设计师的你必须知道如何识别它们所包含的重复出现的视觉元素!

 在今天的这篇文章中，你将了解：

- 五个主要视觉元素

- 如何识别它们（带有示例）

- 如何在实践中使用它们的五个技巧

视觉元素是什么？

视觉元素（或者说是艺术元素）构成了任何类型的视觉交流的基本构件，例如线条，形状，颜色，纹理和图案。就像语言中的单词一样，它们本身的意义是有限的，但是一旦你把它们组合在一起，你就可以讲述无数个故事。研究好的视觉系统就像学习一门新的语言，为了理解它们，你需要逐个检查它们，直到找到它们最基本的元素。这就是我们公司的设计师在其项目中的工作方式，让我们来看看每一个例子吧。

 1  线 ：视觉指导

与数学不同，设计中的线条也可以有宽度和深度。实际上，这个视觉元素是所有元素中最通用的，因为它可以暗示许多其他形状、模式和纹理。我们可以用线条来引导我们的眼睛去看某物，或者将某物与其他事物分开。它甚至可以提出完全抽象的概念，如时间(长或短)或节奏(直或波)。

来源：misplaced.design

在此示例中，水平线将文章的主要部分彼此分开，但在向下滚动页面时也会产生节奏。

 2  形状：对空间的幻想

形状由一条或多条线组成，但是由于其定义的边界，它们在环境中脱颖而出。它们可以走出二维世界，创造出空间和深度的错觉。当前的极简主义时代使得坚持2D更为普遍。但是，每当你在CTA按钮上添加阴影时，你都会产生这种错觉！几何形状和有机形状提供了一种不同的分组方式。几何学意味着秩序和可预测性，在用户体验中非常重要。另一方面，在我们看来，有机的形式更自然、更人性化。

资料来源：conference.awwwards

一个微妙的变化可以使简单的形状（如矩形）变得有趣。在上面的例子中，图像的角度与周围红色矩形的角度不同。反过来，这在两者之间产生了有趣的张力。这三个对象之间的位置和大小差异使得组合是动态的，并有助于创建层次结构。

 3  颜色：情感的主要诱因

当然，这个元素也不能单独存在。颜色需要一个平台才能存在。请记住，不同的颜色不一定会引发积极或消极的情绪，它只是不同的情绪。想想中性色(黑色、白色、灰色)，暖色(红色)更刺激，冷色(蓝色)更能让我们平静下来。让事情变得更复杂的是，颜色本身并不意味着什么。它们也相互作用。如何组合颜色可以增强你的网站的信息。单色、类似、互补和三色系构成四种基本色系。我建议你使用Canva的色轮来帮助你选择正确的颜色组合。

图源：https://www.网址未加载/colors/color-wheel/

· 单色

单色方案使用一种主色调，所有色调从白色到黑色。人们经常在强调内容本身的简约网站上使用它。电子商务时尚品牌通常提供了很好的例子。

· 类似颜色

在色轮上，类似的颜色彼此相邻。在下面的例子中，Forest使用了不同深浅的绿色和蓝色来创建一个和谐的外观。我们经常在自然界中找到这种方案(想象一个真实的森林)，这可以解释其视觉吸引力。

资料来源：forestadmin

· 互补色

互补色在色轮上是相对的。这些配对会使彼此更显目——其中一个在配对的旁边看起来更生动。如下图示例，黄色的CTA按钮与深紫色的背景相比显得格外明亮。醒目的白色段落使这种对比更加鲜明。不管你喜不喜欢，这些色彩组合都能引起人们的注意。

资料来源：flixxo

· 三色系颜色

三色系使用三种主要的颜色，可以使彼此完美平衡。它们在色轮上形成一个等边三角形。对于拥有大量用户的网站来说，这是一个安全的选择，它可以带来平静，和谐的外观，而不会带来任何惊喜。Slack使用这种方案与其紫色-黄色-绿色调色板一起使用。一切都在这里达到平衡，元素之间不会相互压倒。

资料来源：Slack

 4  纹理：模仿现实世界 

由于设计网站将我们锁定在2D空间中，因此我们只能模拟现实世界的纹理。视觉纹理给人一种二维表面纹理的错觉。我们只能用眼睛感知它，而不是用手。

资料来源：chiran-omoire

我们可以使用图片作为显示纹理的强大工具。在上面这个例子中，粗糙的灰色茶壶和茶叶与前景中精致的白色茶杯形成了有趣的对比。画面的强烈对称性将我们的视线引向中间，一杯完美的绿茶正等着我们。

 5  模式：重复的力量

重复一个图案(或纹理)在一个表面创建一个模式。它们可以是自然的或人造的，有机的或几何的，重复的或随机的。

 资料来源：intercom

intercom彼此之间使用明亮多彩的图案来营造有趣而友好的语气。这些图案有手工制作的感觉，就像有人开始用蜡笔涂鸦一样。但是，请注意页面的主色仍然是白色，确保内容仍然是主要焦点。 

使用UI元素的5个技巧 

 1  遵守品牌准则和语气

不同的行业决定了你如何使用视觉效果,我们判断一个网站的可信度是基于浏览主页的几秒钟.你会相信一个在他们的网站上使用了疯狂的纹理和粉红色插图的律师事务所吗?你会有顾虑。当然，你可以创新，但你必须把你的品牌定位在与竞争对手相同的领域。视觉效果应该始终尊重公司所处的的行业和价值观。

 2   总是在系统中思考

视觉一致性是关键。因为它可以让你的用户更可能的浏览你的网站，记住你的品牌。它也代表着你们的实力和能力。如果你真的花时间去考虑你网站上的小细节，这意味着你可能也正在创造一个精心设计的产品。一致性还意味着面对无穷无尽的视觉元素组合，你应该有选择地选择它们。如果你使用一个轮廓图标集，坚持使用它。使用两到三种主色调。一个新的登录页面不一定能提供一个很好的理由来引入第三个,这些事情可能看起来微不足道，但它们是却很有意义。

 3  确保内容优先

视觉效果有助于更好地传达品牌信息。不要仅仅为了美化你的网站而使用它们(即使这是一个很酷的设计，它可以确保访问者会停留在你的网站上阅读你的内容)。虽然你可以通过写作来表达一些东西，也可以通过插图来表达，尤其是一个复杂的想法。视觉可以让你对你的产品有更深入的了解，表达品牌的个性，并帮助传达你所想表达的的情感。但是用户仍然需要找到他们要找的东西。用你的内容给人们带来价值。书面内容和视觉效果都有它们的位置，二者配合缺一不可。

 4   尊重负空间。

我们称设计元素之间的区域为负空间或空白。不要让“白色”这个词欺骗你;让它成为你心中渴望的任何颜色。但是请记住一件事:留白并不意味着浪费空间。人们总是匆匆忙忙，想尽快找到东西.把你产品的每一点信息都塞进一个页面，没有什么会脱颖而出。引导访问者的视线，让他们了解最重要的信息，并消除任何干扰因素。负空间可以帮助你:当大脑处理新信息时，它可以让疲惫的眼睛休息一下

 5  实验

视觉元素可以被证明是多种多样的，而将某物可视化可以有多种好的解决方案。不要回避尝试多个解决方案，只要确保测试哪一个性能更好。它可以是一个小的东西，比如一个登陆页面，或者你如何定位你的品牌。Slack给我们举了一个最近的例子。他们的新标识震惊了全世界的设计界。我不想讨论这个问题，只是提一下Slack也有了一个新的网站设计。它们取代了非常具有说明性的、有趣的和年轻的那个设计。新版本使用了更多的真实人物和工作场所的图片，专注于案例研究和更大的企业。但很多东西都保持不变:颜色、友好的语音语调、简单的导航系统、对人们一起工作的关注。

我希望这些示例可以帮助您在偶然发现一个酷网站时更加注意视觉元素！