举个例子,看看 Slopes 这个网站。顶部页头的几个链接关系着网站导航交互,它们被放置在一起,距离其他元素也很远,很明显是一组。而从侧面展开的汉堡菜单也类似,不同的链接互相靠近,组成不同的组。根据接近性原则,负空间增强了页面的视觉层次结构。 内容区块和控件 接近性原则的使用还可以延伸到布局当中已经组织好的内容区块和控件上,它们可以不止是文本,还能是图像,链接,图标,控件和CTA元素,卡片,甚至其他的东西。设计师可以利用接近性原则组织出更加贴近人的认知体系的设计。
Jewellery Ecommerce App 以下面这个在线的珠宝购物APP为例,右边的屏幕可以显示产品卡片,其中包含了相关的一般数据,包括颜色、宽度、重量和材质等,通过相互靠近和线条的分割,从而让人轻松分辨出清晰的分组,底部的文本内容也自然而然地被视之为一个统一的内容片段。用户一瞥就能看清哪些是关键的数据,哪些是详细描述。
The Big Landscape 这个在线杂志的布局也是一个不错的例子,同样是倚靠接近性原则来实现清晰的布局。首先,整个网站的布局是严格按照网格系统来排布的,并没有可见的线条框架来区分内容。接近性原则让用户能够一眼区分整个页面的大体布局,顶部的导航链接明显是一组,左侧的列表条目都相互接近,是明显的一组,而右侧占据主要位置的文本内容则和标题非常靠近,它们构成了页面的内容主体。右上角的搜索和订阅是相对次要的功能,但是也因其独特的功能性,被分为一组。这种策略让整个布局更加易于浏览,直观,且易于导航。 虽然接近性原则是格式塔原理的一种使用方式,是非常简单但是极其有效的一种设计策略和技巧,帮助用户节省了大量的经历,根据人的认知习惯和心理模式来构建界面。 原文作者: Tubik Studio 原文地址:https://uxplanet.org/gestalt-theory-for-ux-design-principle-of-proximity-e56b136d52d1 译者:陈子木 译文地址:优设网 (责任编辑:admin) |