想问问UI设计中的界面分割是什么，有什么作用？
发布网友
发布时间：2022-04-22 09:59
共1个回答
热心网友
时间：2023-07-16 17:55
视觉分割可以说是不过时却又流行的视觉设计技法，在Dribbble和Behance社区也经常看到有WEB UI运用这种技法的作品，一个好的分割和一个不规范的分割能塑造出两种完全不同的效果界面。同时针对不同类型的设计也会采用不同方式来进行分割。今天的文章主要讲的是视觉分割，视觉分割是帮助在屏幕上组织内容，并将内容的各个部分清晰地分开的布局元素。让我们来看看视觉分割是如何工作的，以及哪些类型的视觉分割比较受欢迎。 什么是视觉分割视觉分割是一种排版元素，它可以帮助将内容分成明确的组、部分、选项或部分。这样，它可以帮助设计者按照视觉感知的典型模式组织页面，使页面布局更加清晰，用户更容易消化。分隔板与页面上的其他元素一起，在建立稳固的视觉层次感方面起到了很大的作用。例如，有了它们，用户可以更容易定义内容之间的关系，比如内容之间是否相同、相似、相近、相关，是否有从属关系等等。分隔板对于可用性也很重要：在很多情况下，它们可以创建看起来可点击或可点击的可视化容器，这对于移动界面来说尤为关键。分隔板的视觉类型说到分割器，我们可以从两个方面来分析：外观和功能。从视觉部分开始，在用户界面中，有五种基本且广泛使用的内容划分方法。
线条
颜色
负空间
阴影/体积
图像
线条线条自古以来，无论是在印刷生产中还是在数字界面中，都属于顶级的内容分割方法。它们在这个角色上很容易被认可，所以用户不用多想。另一方面，这种类型似乎超级简单，远非原创。所以，很多时候，设计师们会努力寻找其他的内容分离方式。更重要的是，建议只有在内容无法用其他方式有效分割的情况下，才可以使用线条的方式。太多的线条会让屏幕上的视觉噪音过大，造成不必要的视觉张力。致力于零浪费生活的网站的产品页面使用水平线作为视觉分隔符，以清晰地组织有关商品的不同信息。科学平台的网页使用水平线分隔不同的内容块。茶品牌的电子商务网站使用不同级别的内容可视化分隔，从简单的水平线分隔定价和CTA元素，到具有不规则网格的表格查找有关项目的信息，常规表格查找网站标题中的项目和颜色形成对比，以将视觉内容与文本内容分开。负空间负空间（又名白色空间）意味着屏幕周围和元素内部的空空间。然而，空白并不意味着被动或浪费：和屏幕上的其他元素一样，它的作用是支持积极的用户体验。负空间是最受欢迎的视觉分割之一，尤其是在基于极简主义和简约理念的界面中。在视觉感知的Gestal原则中，例如，近似性和相似性原则，负空间变成了一个有效的、优雅的视觉分割，也让界面有了呼吸，避免了杂乱。旅行计划应用程序将列表中的项目分隔开，而没有任何其他视觉元素，仅带有空白。Health Blog文章列表基于印刷层次结构和负空格，以使它们看起来像一组清晰的项目。色彩对比度另一种有效的视觉划分方式是色彩对比。在UI设计中色彩的选择和组合具有巨大的心理潜力：它们能够强化网站的信息和内容，营造出适当的氛围。对比度是影响页面或屏幕的可扫描性和视觉层次感的关键因素之一。综上所述，色彩对比度可以有效地分隔不同的选项、项目或互动区域，也就是作为视觉分割工作。这也是近年来分屏的流行原因。而这或许也解释了沿对比色背景上呈现的内容块来组织着陆页和单页网站的流行方式。移动菜单概念基于颜色对比，以使项目清晰可见。即使在像这样的柔和元素中，颜色对比的力量也很明显：它有助于将英雄部分的页面与CTA和菜单的活动部分分开。另外，请注意用作菜单项可视分隔线的垂直线：与略微可见的图像一起，在这里它们还可以作为方向提示，并有助于避免在页面上出现完整的错觉。在GNO毛毯的网站设计中，颜色对比有助于将较长的网页划分为易于消化的精美内容。阴影阴影，通常是通过视觉上抬高一部分内容的效果来达到的，也可以有效地起到隔断的作用。它们能创造出一种层次感，将页面分隔在几个层次上，对于人眼来说，往往看起来很自然、很和谐。另一方面，与线条相比，它看起来不那么明显和引人注目，所以这种方法可能有助于实现特定项目的平衡和可读性，而不会产生过多的视觉噪音或分散注意力。展示库存商品的目录屏幕以这种方式使用了阴影，从而使布局更加深入，并清楚地将卡片彼此分开。购买定制花束的移动应用程序还通过从背景中突出显示的卡片来划分目录中的位置。这样一来，内容在界面上显得清晰互动，看起来既轻松又通风。图片各种类型的图片是一种更有效的视觉分割。在这个角色中，它们在有大量文字内容的界面中特别受欢迎，例如，博客、在线媒体和基于文字的着陆页等。照片、插图、3D图形以及动画图像，有助于平衡文字内容，提高可读性和可读性水平，有效地划分视觉区块，并增加趣味性和情感吸引力。加密货币报告的目标页面使用带有动画的“了解更多”号召性用语的醒目的3D图形块。这样，主题块也可以清楚地分开。餐厅应用程序的菜单屏幕将图像用作划分选项的关键元素。功能类型视觉分割的功能类型取决于其工作的层级。全幅式分割器所谓全漂隔板，是指将各部分隔开，跨越整个屏幕布局的长度。 画廊应用程序使用水平线作为艺术家目录中的分隔线。 在完美的食谱应用程式使用全出血分隔的食谱分开。
