设计原理–视觉层次结构简介 _层次结构

本文概述

视觉层次结构：对交互式界面的视觉组成的新理解
视觉层次结构中的颜色
视觉层次结构中的大小
视觉层次结构中的对齐
视觉层次结构中的形状
视觉层次结构中的运动
信息层次结构中的声音
视觉层次结构的概念

随着技术和用户界面的变化, 视觉设计中对设计技能的需求不断增长。每年都有新的典型用户界面示例出现, 我们对视觉层次, 感知和构图的基本理解是否发生了变化？
视觉感知的现代概念不仅扎根于科学, 而且扎根于心理学。因此, 无论用户界面不断变化, 我们看到和感知视觉信息的方式都将保持不变。考虑到这一点, 当代交互设计是否有可能在图形组成和视觉层次的基础上进行改进？
视觉感知的基本规则对于任何视觉设计都至关重要, 因为它们指示了如何尽可能快地传达具有内在含义的信息。但是, 由于视觉设计是图形设计的近亲, 因此这些标准是为印刷媒体建立的, 尚未针对数字进行重新定义。
诸如” 数字包豪斯学校” 之类的可能建立新设计原则的事物尚未形成。当人们以与印刷完全不同的方式体验UI时, 视觉层次结构和构图规则不仅过时, 而且还只是在用户界面中折叠。
在大多数情况下, 设计人员仍然倾向于将屏幕视为静态的二维对象, 而交互式设计人员所面临的挑战是创新, 而不仅仅是将打印格式应用于其数字媒体项目。但是在进行新设计之前, 需要重新考虑对视觉层次, 感知和构图的基本理解。

文章图片
最初, 网络上的大多数设计层次结构都来自基于印刷的设计, 例如报纸版面。
视觉层次结构：对交互式界面的视觉组成的新理解什么是视觉层次结构, 为什么重要？视觉层次结构是构成内容的布局, 以便有效地传达信息并传达含义。视觉层次结构首先将观众引导至最重要的信息, 然后引导至次要内容。
通过适当地使用尺寸, 颜色, 形状, 距离, 比例和方向来建立构图的意义, 概念和氛围, 这是通过创造性地使用确定视觉层次的图形元素来传达的。

文章图片
设计师如何使用尺寸, 颜色, 形状和方向传达设计中的含义和心情？
视觉层级对于每种类型的视觉设计都至关重要, 无论是需要引导访问者眼球的登录页面还是移动UI的导航。用户对每个元素的理解都取决于构图及其上下文中的其他元素。对组成元素进行相应处理, 以形成视觉关系, 从而在整个设计中建立视觉层次。
视觉层次结构中的颜色视觉层次结构的许多规则看似非常简单, 甚至平庸, 但它们是良好视觉设计的关键基础。例如, 色彩是视觉设计中最具影响力的创意元素。
考虑一下红十字与单色十字的直接含义。几乎普遍来说, 红叉表示中立和保护。这就是使用颜色立即进行交流的潜力。颜色通常还用于标识组, 因为当以某种方式突出显示三个单色中的一个红色十字时, 该颜色更为显着。
明亮, 丰富的色彩比柔和的色彩更突出, 因此具有更大的视觉冲击力。在界面中, 颜色可用于呈现结构感并指向可用的交互。单色界面中的单色可以区分选择, 甚至可以提示用户将鼠标悬停在按钮之外的内容。

文章图片
颜色或单色设计元素中缺少的颜色可用于概述UI元素, 并在潜意识水平上吸引用户。
颜色中还植入了意义和情感, 可以将明确的信息传递给观看者的潜意识。在品牌推广方面, 已经对色彩进行了大量的心理学研究, 因为它在消费者与品牌进行任何有意义的交互之前会在消费者身上产生内在的反应。例如, 蓝色通常被认为是可靠, 安全和镇定的, 而红色则可以刺激人, 并且可以提高人们的心跳率。但是, 根据文化的不同, 颜色可能具有不同的意义。
在Web设计中有意义地, 结构性地使用颜色的一个很好的例子是The Names for Change网站。该站点通过使用颜色立即传达其结构；该组织默认情况下是分散的, 但可以按主题和/或颜色重新排列。
但是, 选择的音调有助于克服站点含义的潜在困难之一。袜子或卫生棉条等日常用品的筹款活动不足以自我推销, 因此网站的激进图形基调可以提高日常用品的感性价值, 同时建立必要的基础组织结构。

文章图片
在” 更改名称” 站点上使用颜色支持视觉层次结构和结构。
视觉层次结构中的大小假设有一个大鸟坐在三只小鸟旁边的图示。无需任何其他信息, 此简单图形即可立即传达其元素之间的关系：父母与子女共同传达家庭的信息。
在传统的图形设计中, 典型的策略是使最重要的元素最大, 然后逐步缩小元素的大小。大小建立了视觉层次, 因为最大的元素首先会吸引注意力, 因此似乎是最重要的。
文本正文中也经常使用不同的字体大小来表示明显的差异, 例如标题, 节和引号。辅助内容(例如图像标题)通常较小, 以免与文本主体竞争。

文章图片
考虑一些最广泛使用的视觉界面, 例如Instagram。屏幕上没有任何东西可以与图像和视频竞争, 它们占据了大多数屏幕的60％以上。 UI的目的是即时的。
艺术/设计工作室Ro / Lu的作品集网站是颠覆Web设计中视觉层次结构典型结构的一个示例。他们不寻常的网站可能不是最直观的, 但它挑战了典型在线创意作品集的视觉布局。由于有意随机分配了他们的各个项目, 因此每次访问者访问该站点时, 一个不同的项目就显得占主导地位, 这使每次访问都变得独特而有趣。
大多数创意设计工作室的作品没有按层次进行组织, 因为每个项目都是独一无二的, 并且被认为同样重要。 Ro / Lu网站的设计创造了一个充满活力的构图, 每次访问都具有不同的兴趣水平, 并鼓励观众研究工作室的广泛产品组合。因此, 设计工作室的折衷, 跨学科性质是由内容的随机显示所代表的。

文章图片
艺术/设计工作室Ro / Lu的网站极大地颠覆了设计层次。
视觉层次结构中的对齐视觉层次结构中的对齐通过在空间上连接元素来传达秩序感。就像非线性小说中的章节一样, 想象一个正方形在图形组成中脱颖而出。当单个元素破坏已建立的结构时, 它会从组成中脱颖而出, 从而相对于其余元素具有意义。
除非元素从视觉网格(即从秩序感)中脱颖而出, 否则硬性构图可能会变得停滞不前, 并且在视觉上变得无趣。错位或” 破坏网格” 是赋予图形元素更多视觉效果的机会。这个概念是设计中视觉层次结构的基础。
根据传统视觉设计中的原理, 放置在框架中心的元素显得更为重要。例如, 主要内容或界面元素可以放在中间, 而导航, 菜单和其他次要内容则经常放在侧面。
但是, 开创性的设计师喜欢挑战现状。当交互式设计应用基本的视觉层次结构原理, 然后将边界推向创新的视觉构图时, 就会产生有趣的新体验。通过使用不同的对齐方式, 可以在元素之间建立新的关联和含义。
例如, DNA项目是一个使用一系列相互分离的层次结构交流音乐家专辑创意结构的网站。网站的结构很复杂, 相册的结构也很复杂。
首先, 邀请访问者通过单击专辑的曲目(通常按照专辑格式对齐)来听音乐。但是, 通过允许访问者重新排列该站点的DNA元素, 专辑的概念得以传达, 不仅是一系列音轨, 而且是随着时间的流逝, 碎片元素的非线性构造。

文章图片
DNA项目的站点具有异常但清晰的视觉层次。
视觉层次结构中的形状在形状方面, 让我们考虑一下简单的心脏形状如何立即传达其在大多数社交网络用户界面中” 喜欢” 的潜在用途。要建立重要性或群体, 请考虑四个圈子中的一颗心。几何形式就像颜色, 因为形状带有某些赋予元素个性或含义的含义。
在交互式设计中, 几何形状对于有效交流至关重要, 因为它们比文字更快速, 更通用地传达含义。通常是简单的几何形状的图标(符号)已取代文本, 而已成为大多数导航系统和UI的模拟。
“ 点赞” 图像, 下载文件, 拨打电话或检查消息的目的是通过图标(几何形状)直接直接传达的。这种有效的视觉交流形式在全球市场中变得越来越重要, 在该市场中, 数字产品经常以多种语言为广大国际受众服务。

文章图片
报纸必须迅速调整其设计以适应新技术。其他内容行业也紧随其后。
要突出显示传统印刷媒体和数字媒体之间的不同交互方式, 请考虑在实际报纸中搜索” 艺术” 部分与在大多数应用程序中使用搜索图标之间的区别。直到最近, 大多数报纸网站的页面布局都与印刷版相同, 并且浏览内容的过程既笨拙又迷失方向。
Signes du Quotidien网站突破了传统的Web布局, 以微妙的方式使用基本的正方形和圆形形状来呈现独特的视觉层次结构, 从而引导访问者浏览内容。菜单位于页面中心, 当访问者单击它时, 将显示代表站点四个部分的四个彩色圆点。然后, 访客将其中一个点拖到正方形中以转到该部分。

文章图片
日常生活迹象网站
视觉层次结构中的运动运动元素将在一组停滞元素中承担更大的视觉重量, 视觉层次结构中的运动是一项原则, 虽然无法在印刷品中使用, 但绝对可以包含在视觉设计师的工具包中。
运动除了本身的字面翻译外还能传达什么？运动通常在UI中用作可以与元素进行交互的线索。可以进一步推动运动的使用并将其用作传达独特事物的方式吗？如果视觉等级制度不仅与沟通的效率有关, 而且与嵌入的意义有关, 那么如何将运动用作基本的视觉传达工具？
对于” 我记得” 站点, 它的主界面(动画)在邀请交互时会立即脱颖而出。尽管运动和界面是实用的导航工具, 但视觉设计师还是利用这些元素的潜在损失来传达网站的基本使命：阿尔茨海默氏病。就像该组织为其筹集资金的患者逐渐消失的回忆一样, 该网站在没有积极互动的情况下慢慢消失了。

文章图片
信息层次结构中的声音声音是另一种无法在印刷媒体中使用的工具, 但尚待在层次结构原则内进行开发。由于声音完全是非视觉的, 因此没有可参考的规则。但是声音也可以是一种有效传达内容, 情绪或含义的设计工具。带有某些声音的设计元素可以彼此相对地分组, 而那些最粗体的设计元素似乎是最重要的, 或者表示与该组分离。
附加到元素上的声音的质量应快速识别, 表征或帮助构建内容。与其关联的视觉元素形成对比的声音如何传达新的含义？
声音本身可能非常复杂, 以至于在感知到任何视觉效果之前就建立了整个情绪或设计信息。就像彩色背景营造出一种氛围一样, 声音可以坐在背景中, 也可以在UI中提供反馈, 例如响应移动设备上的按钮点击。该技术的原理是基本的, 但是可以运用其创造力的地方是可以发生魔术的地方。
由于其在集体创作中的重要性, 为古根海姆德国艺术家团体ZERO展览而创建的网站使用声音作为大气背景, 并在浏览网站时作为反馈形式。粗体铃声会建立代表主题起点的片段, 而第三项目则在背景中单击。

文章图片
古根海姆艺术家团体ZERO的网站, 声音在其中起着重要作用
视觉层次结构的概念视觉层次结构是一个简单的概念, 与设计者执行结构良好的构图的实际能力相比, 理解理论实际上更容易。然而, 在保持良好设计的同时在新媒体中进行发明具有挑战性。
不断出现新的媒介, 挑战性的局面不会减弱-相反。如今, 有200多种不同的屏幕尺寸正在使用。那只是二维的。首先是互联网, 台式机浏览器, 然后是手机和平板电脑, 现在我们通过交互式电视, IoT, 可穿戴设备, 虚拟和增强现实等技术进入新领域。
真正突破数字媒体界限的设计仍处于起步阶段。希望视觉层次结构和良好设计的原理能跟上技术的飞速发展, 从而使我们在数字媒体方面的经验仍然充满意义和乐趣。
【设计原理–视觉层次结构简介】? ? ?
在srcmini设计博客上进一步阅读：