火星网校
探讨UX设计中视觉层次结构的重要性
发布时间：2024-07-31 19:28:44 浏览量：231次
自设计之初就已经存在。从过去到今天我们使用的电子设备，我们已经使用并继续使用设计来传达我们的重要信息。我们设计中的每个元素都应有助于改善用户体验，并更清楚地传达该信息。在本文中，我们将学习 UX Design 中的 Visual Hierarchy，以及如何使用它来改进产品并优化用户体验。
什么是视觉层次？
视觉层次结构用于按您希望用户查看它们的顺序对设计元素和影响进行排序。通过使用对比，比例，平衡等原则，您可以帮助在正确的位置建立每个元素，并帮助最重要的元素脱颖而出。
为什么视觉层次结构在UX设计中很重要？
视觉层次结构可以在您的信息体系结构规划中发挥关键作用，以帮助您的用户更轻松地浏览产品。这可以大大减少与您的产品互动所需的工作量。UX设计的全部目的在于消除摩擦并增强产品的可用性，而关注视觉层次结构是实现这一目标的关键方法。
使用大小和比例吸引焦点
尺寸调整是一项非常基本但至关重要的原则，可以使元素比其他元素更重要，并有助于将观众的视线吸引到特定区域。通过增加元素的比例，您可以立即吸引观看者的注意力。但是，您要小心一点，不要放大太多元素或增加大小，而这可能会降低屏幕上其他元素的重要性。
请注意，在上面的示例图中，您的眼睛已被绘制，并且随着对象调整大小，透视图如何变化。
如下图所示，Simply Chocolate是一个很好的示例，说明了如何使用大小和比例来强调视觉层次。设计中首先要吸引您的是吸引人的文字，它解释了产品的全部含义。这样做的方式不会影响屏幕上的其他元素。
使用颜色和对比度使对象脱颖而出
颜色可以与大小和重量类似地使用，以提高设计中元素的重要性。通常，较暗的，不饱和的颜色更鲜艳的颜色将吸引观众的注意力。
同样，具有较高对比度的颜色将显得更重，更接近观看者，从而赋予它们更多的重要性。在下面的示例中，您可以看到，较亮的颜色在较暗的背景下看起来更近，而在较亮的背景上则较远。
无论将元素按设计的顺序放置在哪里，使用一种明亮的颜色作为焦点都可以帮助吸引人们的注意。在下面的示例中，以及大多数网站导航中，您会注意到按钮上的主要高对比色是最关键的号召性用语。通过帮助用户了解您希望他们去哪里，您可以为他们提供更愉快的体验，并增加所需流量的转化次数。
发挥视角
大多数界面（例如网站和应用程序）都设计为二维的，并且通常看起来很平坦。通过透视，您可以在元素中创建距离和分隔的错觉，以帮助将焦点集中在设计中很重要的区域。
您可以通过几种方法增加透视的幻觉，即增加与周围物体相关的元素的大小；这会使这些元素看起来离您更近。向您的元素添加视差运动效果以使其移动速度比周围的元素慢或快，添加阴影或在背景或前景层上添加模糊效果也会产生戏剧性的效果。
看一下下面左侧的示例。所有元素看起来都是平坦的，没有深度。由于对比度会与背景竞争，因此难以阅读文本，并且没有阴影效果可帮助文本脱离图像。
另一方面，在上面的右图中，将模糊添加到背景图像，并将阴影添加到文本。这有助于给这些元素一定的距离，并使事情更容易可视化。
在下面的下一个示例中，有多个图像层被设置为以不同的速度滚动，从而提供视差网站效果，从而使观看者更好地理解视角和深度。
查看模式的重要性
您是否知道每个人都有通常用于扫描内容的潜意识观看模式？对于每个人来说，此模式可能有所不同，并且可能会略有不同，具体取决于他们正在查看的内容类型，但是可以说，人们使用的两种最受欢迎的观看模式是Z模式和F模式。
Z花纹
Z模式遵循从左上到右上，然后向下到左下，再到右下的路径。此模式最适用于文本或内容不繁重的内容。将内容设计为以这种模式流动将帮助您的读者快速浏览每个元素，并了解您将每个元素的重要性放在何处。
在Apple网站上，正如您将在Mac页面下方看到的那样，该页面旨在在顶部显示多个Mac选项，进行水平扫描，然后沿对角线方向放置标语。然后以产品的号召性用语结束。所有信息的布局都非常清晰，大多数人已经被下意识地吸引使用。
F花纹
用于查看的F模式在诸如文章和博客文章之类的文本密集型页面上更显着地使用。在这种模式下，查看者通常从左上角到右上角扫描站点，然后从左到右向下扫描到下一行，依此类推。这与大多数西方世界的阅读方向相似。
对于博客和文本密集型内容（例如Verge），简单的F模式布局可帮助读者扫描图像和标题。
在设计内容以这种模式进行播放时，请务必记住，尽管观众可能会扫描前几行的整个宽度，但随着行进和向下移动，他们通常只会扫描每行的左侧部分当他们快速移动以寻找吸引他们注意力的东西时。
利用字体
正确的字体配对可以使您的网站拥有自己的个性，并引起人们对某些领域的关注。具有不同大小和权重的字体也可以用于增加层次结构，并使更重要的文本元素脱颖而出。
大多数网站旨在利用不同大小的标题来强调或标出与它们相关的内容。优良作法是将标题1（H1）用作页面的最大和最重要的标题，并使用标题2（H2），3（H3）等来标注不太重要的区域。这还可以帮助读者浏览文本页面，以准确定位在他们感兴趣的区域上。
除了字体大小之外，您还可以使用不同的字体粗细来使相同大小的字体显得更重或更轻。您还可以在权重较小的较大字体与权重较大的较小字体之间取得平衡，以使它们具有相同的重要性。
使用空格引导用户
当您开始以空白画布的形式进行设计时，您可能会想到利用空间来适应尽可能多的元素的所有方式。但是请记住，您留出空白的空间与您使用的空间一样重要。空格是用于描述设计中元素之间的负间距
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
