设计原则——视觉层次介绍

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

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

视觉感知的基本规则对于任何视觉设计都至关重要，因为它们指导如何尽快传达具有嵌入含义的信息。 然而，由于视觉设计是平面设计的近亲，这些标准是为印刷媒体建立的，尚未为数字媒体重新定义。

可能建立新设计原则的“数字包豪斯学校”之类的东西尚未形成。 由于人们以与印刷版完全不同的方式体验 UI，因此视觉层次和构图的规则不仅过时，而且只是在用户界面中崩溃。

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

视觉层次：交互界面视觉组合的新理解

什么是视觉层次，为什么它很重要？ 视觉层次是为了有效地传达信息和传达意义而对构图中的内容进行布局。 视觉层次结构将观众首先引导至最重要的信息，然后引导至次要内容。

通过适当使用大小、颜色、形状、距离、比例和方向来建立，构图的意义、概念和情绪是通过创造性地使用决定视觉层次的图形元素来传达的。

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

视觉层次中的颜色

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

考虑一下红十字与单色十字的直接含义。 几乎普遍地，红十字象征着中立和保护。 这就是使用颜色进行即时交流的潜力。 颜色也经常用于识别群体，例如当三个单色十字中的一个红色十字以某种方式突出时更为重要。

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

颜色还带有意义和情感，可以将明确的信息传递给观众的潜意识。 在品牌推广中，已经对颜色进行了大量的心理学研究，因为它会在消费者与品牌进行任何有意义的互动之前产生本能反应。 例如，蓝色通常被认为是可靠、安全和平静的，而红色则具有刺激性，并且已知会增加人们的心率。 但是，颜色可能具有不同的意义，具体取决于文化。

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

然而，选择的色调有助于克服网站意义的潜在困难之一。 为袜子或卫生棉条等日常用品筹款不足以推销自己，因此该网站激进的图形基调提高了日常用品的感知价值，同时建立了必要的底层组织结构。

视觉层次结构中的大小

让我们想象一下，一只大鸟坐在三只小鸟旁边。 没有任何进一步的信息，这个简单的图形立即传达了其元素之间的关系：父母和孩子，它们共同传达了一个家庭。

在传统的平面设计中，一个典型的策略是使最重要的元素最大，然后逐步缩小元素的层次。 尺寸建立视觉层次，因为最大的元素首先吸引注意力，因此看起来是最重要的。

不同的字体大小也经常用于正文中以表示显着差异，例如标题、部分和引号。 次要内容，例如图片说明，通常较小，以免与正文竞争。

考虑一些使用最广泛的可视化界面，例如 Instagram。 屏幕上没有任何东西可以与图像和视频竞争——它们占据了大多数屏幕的 60% 以上。 UI 的目的是直接的。

一个颠覆网页设计中视觉层次结构的典型结构的例子是艺术/设计工作室 Ro/Lu 的作品集网站。 他们不寻常的网站可能不是最直观的，但它挑战了典型在线创意组合的视觉安排。 由于他们不同项目的有意随机化，每次访问者访问该站点时，不同的项目似乎占主导地位，这使得每次访问都独一无二且有趣。

大多数创意设计工作室的作品集并没有按等级组织工作，因为每个项目都是独一无二的，并且被认为同样重要。 Ro/Lu 网站的设计创造了一个动态的组合，在每次访问时都有不同程度的兴趣，并鼓励观众调查工作室的广泛投资组合。 因此，设计工作室的不拘一格、跨学科性质通过内容的随机显示来体现。

视觉层次结构中的对齐

视觉层次中的对齐通过在空间上连接元素来传达一种秩序感。 与非线性小说中的章节一样，想象一个正方形在图形构图中突出。 当单个元素打破既定结构时，它就会从组合中脱颖而出，从而获得相对于其他元素的意义。

除非一个元素从视觉网格中脱颖而出，即从秩序感中脱颖而出，否则僵硬的构图可能会显得停滞不前并且在视觉上无趣。 错位或“打破网格”是赋予图形元素更多视觉重量的机会。 这个概念是设计中视觉层次的基础。

根据传统视觉设计中的一个原则，放置在框架中心的元素似乎更重要。 例如，主要内容或界面元素可能被放在中心，而导航、菜单和其他次要内容通常被放在两侧。

但先锋设计师喜欢挑战现状。 当交互式设计应用基本的视觉层次原则，然后将边界推入创新的视觉组合中时，就会创造出有趣的新体验。 通过使用不同的对齐方式，可以在元素之间建立新的关联和含义。

例如，DNA 项目是一个网站，它使用一系列不连贯的层次结构来传达音乐家专辑的创意结构。 该网站的结构很复杂，专辑的结构也很复杂。

首先，邀请访问者通过单击专辑曲目来聆听音乐，这些曲目传统上以专辑格式排列。 然而，通过允许访问者重新排列网站的 DNA 元素，专辑的概念得以传达，不仅仅是一系列曲目，而是随着时间的推移碎片元素的非线性构造。

视觉层次结构中的形状

当谈到形状时，让我们考虑一下简单的心形如何立即传达其在大多数社交网络 UI 中“喜欢”的潜在用途。 要确定重要性或组，请考虑四个圆圈中的一颗心。 几何形式就像颜色一样，形状带有某些赋予元素个性或意义的内涵。

在交互设计中，几何形状对于有效沟通至关重要，因为它们比文本更快速、更普遍地传达意义。 图标（符号）通常是简单的几何形状，而不是文本，已成为大多数导航系统和 UI 的类比。

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

为了突出传统印刷媒体和数字媒体之间的不同交互模式，请考虑通过实际报纸搜索艺术部分与在大多数应用程序中使用搜索图标之间的区别。 直到最近，大多数报纸网站的页面布局都与印刷版一样，筛选内容的体验既笨拙又令人迷失方向。

Signes du Quotidien 网站打破了传统的网页布局，以一种微妙的方式使用基本的方形和圆形来呈现独特的视觉层次结构，引导访问者浏览内容。 菜单位于页面的中心，当访问者单击它时，会出现代表网站四个部分的四个彩色圆点。 游客然后将其中一个点拖入广场以前往该部分。

视觉层次结构中的运动

一个移动的元素会在一组停滞的元素中承载更大的视觉重量，视觉层次中的运动是一个不可能在印刷中使用但绝对可以包含在视觉设计师的工具包中的原则。

除了自身的字面翻译之外，运动还能传达什么？ 运动通常在 UI 中用作元素可以交互的线索。 是否可以进一步推动运动的使用并用作传达独特事物的一种方式？ 如果视觉层次不仅关乎交流的效率，还关乎嵌入的意义，那么运动如何作为一种必不可少的视觉交流工具呢？

对于“我记得”网站，主界面（动画）在邀请互动时立即脱颖而出。 尽管动作和界面是功能性导航工具，但视觉设计师利用这些元素的潜在损失来传达网站的基本使命：阿尔茨海默病。 就像该组织为其筹集资金的患者逐渐消失的记忆一样，该网站在没有积极互动的情况下慢慢消失得无影无踪。

信息层次中的声音

声音是另一种无法在印刷媒体中使用的工具，但尚未在等级原则内开发。 由于声音完全是非视觉的，因此没有可参考的规则。 但声音也可以是一种有效传达内容以及情绪或意义的设计工具。 携带某些声音的设计元素可能会相对于彼此进行分组，而那些最大胆的可能似乎是最重要的，或者可能意味着与该组分离。

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

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

由于它在集体创作工作中的重要性，为古根海姆德国艺术家团体 ZERO 的展览创建的网站使用声音作为大气背景，并在浏览网站时作为一种反馈形式。 大胆的铃声确立了代表主题开始的片段，而第三项目则在背景中单击。

视觉层次的概念

视觉层次是一个简单的概念，理解理论实际上比设计师执行结构良好的组合的实际能力更容易。 然而，在保持良好设计的同时在新媒体中发挥创造力是一项挑战。

新的媒介一直在出现，具有挑战性的情况不会减少——恰恰相反。 今天有超过 200 种不同的屏幕尺寸在使用。 这只是二维的。 首先是互联网、桌面浏览器，然后是手机和平板电脑，现在我们正借助交互式电视、物联网、可穿戴设备、虚拟和增强现实等技术进入新领域。

真正突破数字媒体界限的设计仍处于起步阶段。 希望视觉层次和良好设计的原则能够跟上技术的快速发展，使我们对数字媒体的体验充满意义和乐趣。

进一步阅读 Toptal 设计博客：

• 通过清晰的视觉层次提升您的用户体验
• 设计基础——视觉层次结构指南（附信息图）
• 设计原则：层次结构介绍
• 提高可扫描性的 UI 设计最佳实践
• 使用这些成功的交互设计原则提升您的用户体验