186 8150 9801  微信同号
设计中的视觉分割法


什么是视觉分割
 

视觉分割是一种排版元素,它可以帮助将内容分成明确的组、部分、选项或部分。这样,它可以帮助我们按照视觉感知的典型模式组织页面,使页面布局更加清晰,用户更容易消化。

分隔板与页面上的其他元素一起,在建立稳固的视觉层次感方面起到了很大的作用。例如,有了它们,用户可以更容易定义内容之间的关系,比如内容之间是否相同、相似、相近、相关,是否有从属关系等等。


分隔板对于可用性也很重要:在很多情况下,它们可以创建看起来可点击或可点击的可视化容器,这对于移动界面来说尤为关键。


分隔板的视觉类型

说到分割器,我们可以从两个方面来分析:外观和功能。从视觉部分开始,在用户界面中,有五种基本且广泛使用的内容划分方法。

    线条
    颜色
    负空间
    阴影/体积
    图像

线条

线条自古以来,无论是在印刷生产中还是在数字界面中,都属于顶级的内容分割方法。它们在这个角色上很容易被认可,所以用户不用多想。

另一方面,这种类型似乎超级简单,远非原创。所以,很多时候,设计师们会努力寻找其他的内容分离方式。更重要的是,建议只有在内容无法用其他方式有效分割的情况下,才可以使用线条的方式。太多的线条会让屏幕上的视觉噪音过大,造成不必要的视觉张力。



致力于零浪费生活的网站的产品页面使用水平线作为视觉分隔符,以清晰地组织有关商品的不同信息。



负空间

负空间(又名白色空间)意味着屏幕周围和元素内部的空空间。然而,空白并不意味着被动或浪费:和屏幕上的其他元素一样,它的作用是支持积极的用户体验。负空间是最受欢迎的视觉分割之一,尤其是在基于极简主义和简约理念的界面中。在视觉感知的Gestal原则中,例如,近似性和相似性原则,负空间变成了一个有效的、优雅的视觉分割,也让界面有了呼吸,避免了杂乱。



色彩对比度

另一种有效的视觉划分方式是色彩对比。在UI设计中色彩的选择和组合具有巨大的心理潜力:它们能够强化网站的信息和内容,营造出适当的氛围。对比度是影响页面或屏幕的可扫描性和视觉层次感的关键因素之一。综上所述,色彩对比度可以有效地分隔不同的选项、项目或互动区域,也就是作为视觉分割工作。这也是近年来分屏的流行原因。而这或许也解释了沿对比色背景上呈现的内容块来组织着陆页和单页网站的流行方式。



阴影

阴影,通常是通过视觉上抬高一部分内容的效果来达到的,也可以有效地起到隔断的作用。它们能创造出一种层次感,将页面分隔在几个层次上,对于人眼来说,往往看起来很自然、很和谐。另一方面,与线条相比,它看起来不那么明显和引人注目,所以这种方法可能有助于实现特定项目的平衡和可读性,而不会产生过多的视觉噪音或分散注意力。



全幅式分割器

所谓全漂隔板,是指将各部分隔开,跨越整个屏幕布局的长度。