随着技术和用户界面的变化，视觉设计中对设计技能的需求持续增长。每年都有新的典型用户界面示例出现，我们对视觉层次，感知和构图的基本理解是否发生了变化？

 

视觉感知的现代概念不仅扎根于科学，而且扎根于心理学。因此，无论用户界面不断变化，我们看到和感知视觉信息的方式都将保持不变。考虑到这一点，当代交互设计是否有可能在图形组成和视觉层次的基础上进行改进？

 

视觉感知的基本规则对于任何视觉设计都至关重要，因为它们指示了如何尽可能快地传达具有内在含义的信息。但是，由于视觉设计是图形设计的近亲，因此这些标准是为印刷媒体建立的，尚未针对数字进行重新定义。

 

诸如“数字包豪斯学校”之类的可能建立新设计原则的事物尚未形成。当人们以与印刷完全不同的方式体验UI时，视觉层次结构和构成规则不仅过时，而且还只是在用户界面中折叠。

 

在大多数情况下，设计人员仍然倾向于将屏幕视为静态的二维对象，而交互式设计人员所面临的挑战是进行创新，而不仅仅是将打印格式应用于其数字媒体项目。但是在进行新设计之前，需要重新考虑对视觉层次，感知和构图的基本理解。

视觉组成理解

什么是视觉层次结构，为什么重要？视觉层次结构是构成内容的布局，以便有效地传达信息并传达含义。视觉层次结构首先将观众定向到最重要的信息，然后再定向到次要内容。

 

通过适当地使用尺寸，颜色，形状，距离，比例和方向来建立构图的意义，概念和氛围，这是通过创造性地使用确定视觉层次的图形元素来传达的。

 

设计师如何使用尺寸，颜色，形状和方向传达设计中的含义和心情？

视觉层次结构对于每种视觉设计类型都是至关重要的，无论是需要引导访问者眼球的登录页面还是移动UI的导航。用户对每个元素的理解都取决于构图及其上下文中的其他元素。对组成元素进行相应处理，以形成视觉关系，从而在整个设计中建立视觉层次。

颜色

视觉层次结构的许多规则看似很简单，甚至平庸，但它们是良好视觉设计的关键基础。例如，色彩是视觉设计中最具影响力的创意元素。

 

考虑红十字与单色十字的直接含义。几乎普遍来说，红叉表示中立和保护。这就是使用颜色立即进行交流的潜力。颜色通常也用于标识组，因为当以某种方式突出显示三个单色中的一个红色十字时，它会更显着。

 

明亮，丰富的色彩比柔和的色彩更突出，因此具有更大的视觉冲击力。在界面中，颜色可用于呈现结构感并指向可用的交互。单色界面中的单色可以区分选择，甚至可以提示用户将鼠标悬停在按钮之外的内容。

 

单色设计元素中的颜色（或缺少颜色）可用于概述UI元素，并在潜意识水平上吸引用户。

颜色还可以通过含义和情感来播种，这些含义和情感可以向观看者的潜意识传递明确的信息。在品牌方面，已经对色彩进行了大量的心理学研究，因为它在消费者与品牌进行任何有意义的交互之前会在消费者身上产生内在的反应。例如，蓝色通常被认为是可靠，安全和镇定的，而红色则在刺激人心，并且已知会增加人们的心率。但是，根据文化的不同，颜色可能具有不同的意义。

 

在Web设计中有意义地，结构性地使用颜色的一个很好的例子是The Names for Change网站。该站点通过使用颜色立即传达其结构；该组织默认情况下是分散的，但可以按主题和/或颜色重新排列。

 

但是，选择的音调有助于克服站点含义的潜在困难之一。袜子或卫生棉条等日常用品的筹款活动不足以自我推销，因此网站的激进图形基调可以提高日常用品的感知价值，同时建立必要的基础组织结构。

 

使用颜色来支持视觉层次结构和结构。

 

大小

让我们想象一下，一只大鸟坐在三只小鸟旁边的插图。无需任何其他信息，此简单图形即可立即传达其元素之间的关系：父母与子女共同传达家庭的信息。

 

在传统的图形设计中，典型的策略是使最重要的元素最大，然后逐步缩小元素的大小。大小建立了视觉层次结构，因为最大的元素首先会吸引注意力，因此似乎是最重要的。

 

在正文中还经常使用不同的字体大小来表示明显的差异，例如标题，节和引号。辅助内容（例如图像标题）通常较小，以免与文本主体竞争。

对齐

视觉层次结构中的对齐通过在空间上连接元素来传达秩序感。就像非线性小说中的章节一样，想象一个正方形在图形组成中脱颖而出。当单个元素破坏已建立的结构时，它会从组合物中脱颖而出，从而相对于其余元素具有意义。

 

除非元素从视觉网格（即从秩序感）中脱颖而出，否则刚性作品可能会停滞不前并且在视觉上无趣。错位或“破坏网格”是赋予图形元素更多视觉效果的机会。这个概念是设计中视觉层次结构的基础。

 

根据传统视觉设计中的原理，放置在框架中央的元素显得更为重要。例如，主要内容或界面元素可以放在中间，而导航，菜单和其他次要内容则经常放在侧面。

 

但是，开创性的设计师喜欢挑战现状。当交互式设计应用基本的视觉层次结构原理，然后将边界推向创新的视觉构图时，就会创建有趣的新体验。通过使用不同的对齐方式，可以在元素之间建立新的关联和含义。

形状

在形状方面，让我们考虑一下简单的心形形状如何立即传达其在大多数社交网络用户界面中“喜欢”的潜在用途。要建立重要性或群体，请考虑四个圈子中的一颗心。几何形式就像颜色，因为形状带有某些赋予元素个性或含义的含义。

 

在交互式设计中，几何形状对于有效交流至关重要，因为它们比文本更快速，更通用地传达含义。通常是简单的几何形状的图标（符号）已取代文本，而已成为大多数导航系统和UI的模拟。

 

“喜欢”图像，下载文件，拨打电话或检查消息的目的是通过图标（几何形状）直接简单地传达的。在全球市场中，数字产品通常以多种语言服务于广大国际观众，这种有效的视觉交流形式变得越来越重要。

 

要突出显示传统印刷媒体和数字媒体之间的不同交互方式，请考虑在实际报纸中搜索“艺术”部分与在大多数应用程序中使用搜索图标之间的区别。直到最近，大多数报纸网站的版面设置都与印刷版相同，而且浏览内容的经验既笨拙又迷失方向。

 

直到最近，大多数报纸网站的版面设置都与印刷版相同，而且浏览内容的经验既笨拙又迷失方向。

 

 

Signes du Quotidien网站突破了传统的Web布局，以微妙的方式使用基本的正方形和圆形形状来呈现独特的视觉层次结构，从而引导访问者浏览内容。菜单位于页面中心，当访问者单击它时，将显示代表站点四个部分的四个彩色圆点。然后，访客将其中一个点拖到正方形中以转到该部分。

运动

运动元素在一组停滞元素中将承担更大的视觉重量，视觉层次结构中的运动是一项原则，虽然无法在印刷品中使用，但绝对可以包含在视觉设计师的工具包中。

 

运动除了本身的字面翻译外还能传达什么？运动通常在UI中用作可以与元素进行交互的线索。可以进一步推动运动的使用并将其用作传达独特事物的方式吗？如果视觉等级制度不仅与沟通的效率有关，而且与嵌入的意义有关，那么如何将运动用作基本的视觉传达工具？

声音

声音是无法在印刷媒体中使用的另一种工具，但尚需在层次结构原则内进行开发。由于声音完全是非视觉的，因此没有可参考的规则。但是声音也可以是一种有效传达内容，情绪或含义的设计工具。带有某些声音的设计元素可以彼此相对地分组，而那些最粗体的设计元素似乎是最重要的，或者表示与该组分离。

 

附加到元素上的声音的质量应快速识别，表征或帮助构建内容。与其关联的视觉元素形成对比的声音如何传达新的含义？

 

声音本身可能非常复杂，以至于在感知到任何视觉效果之前就建立了整个情绪或设计的信息。就像彩色的背景营造出一种氛围一样，声音可以坐在背景中，也可以在UI中提供反馈，例如响应移动设备上的按钮点击。该技术的原理是基本的，但是可以利用它的创造力就是发生魔术的地方。

概念

视觉层次结构是一个简单的概念，与设计者执行结构良好的构图的实际能力相比，理解理论实际上更容易。然而，在保持良好设计的同时在新媒体中进行发明具有挑战性。

 

新媒体一直在出现，充满挑战的局面不会减弱-相反。如今，有200多种不同的屏幕尺寸正在使用中。那只是二维的。首先是互联网，台式机浏览器，然后是手机和平板电脑，现在我们通过交互式电视，IoT，可穿戴设备，虚拟和增强现实等技术进入新领域。

 

真正突破数字媒体界限的设计仍处于起步阶段。希望视觉层次结构和良好设计的原理将与技术的飞速发展保持同步，从而使我们在数字媒体方面的经验仍然充满意义和乐趣。

 

还可以阅读

如何在设计中建立良好的视觉层次结构

 

原作者：Miklos