数字产品设计与心理学15 - 提供视觉结构

数字产品设计与心理学

视觉依赖结构来简化信息。格式塔原理告诉我们,视觉甚至会主动「创造」结构以减轻信息加工的负担。如果想高效地传递信息,就必需为视觉提供一个清晰、符合直觉的视觉结构。

结构是不同对象之间的关系。比如说,一篇文章采用总-分结构,意味着段落之间形成了总体-组成部分的关系,作者先给出总的结论,然后用多个段落说明分论点。

让我们来复习一下 DP10 讲过的视觉搜索。我们知道,视网膜的分辨率从中心向边缘递减。视觉边缘只能识别较大的目标,无法看清细微的物体。如果一个细小的目标不在视网膜中央的探测域内,那要怎样才能把它找出来呢?秘诀在于快速眼动。眼球多次移动,如果一次聚焦没有找到目标,就在探测域附近继续搜索,直到确定目标。

2.4.4多次眼动检测目标

如上图所示,眼球在查找目标的过程中,一共移动并聚焦了 5 次。在第 4 次注视时,发现目标在探测域边缘,下一次眼动就可以把目标对准到视网膜中心。这种方法也可以应用在数字产品的界面布局上面。

层级

设计良好的页面层级结构,不只是因为「好看」,这些结构其实在为视觉搜索提供线索,暗示眼睛可以先看哪里、再看哪里,而不必茫然扫视。如果信息较多,则需要提供不同的层级结构,引导用户先搜索大的结构,找到感兴趣的模块,再进一步寻找位于细节层次中的信息。如果用户对结构之间的关联理解正确,就能提高视觉搜索的效率。

2.4.4web chunk

层级清晰的网页结构

这个过程使用电子地图类似。首先,定位到一个大的兴趣范围,然后放大这个区域;水平移动让这个区域位于屏幕中央;继续寻找兴趣范围,放大,平移。在数字设备中的视觉搜索,就是「框定范围-聚焦-搜索」的层层嵌套的过程。

位置

当视觉层级中有多个对象时,它们分别处在什么位置?A 在 B 的上面还是下面?关系紧密的对象之间的距离远吗?它们有内在的顺序吗?我们一般习惯先看到哪个再看到哪个?提供元素之间有意义的位置结构,也是引导视线的关键。

2.3.4位置关系

矩形的空间关系模式(蒂莫西·萨马拉,2016)

焦点

这些对象之间,以哪个为主?哪个处于靠近中心的位置?还有什么特征表示出它的重要性?如果想提供信息传递的效率,必需仔细思考哪些元素是重点,如何确保它们获得足够的、优先的关注。数字产品设计与心理学06 - 扫视,而不是阅读总结了一些常见的扫视模式,比如 Z 型模式是用图片和文字作为焦点,当它们交替摆放时,用户的焦点就会来回摆动,形成 Z 字型。而蛋糕模式,则以标题和小标题为焦点,用户只要快速扫视标题,就可以判断这个部分是否需要进一步阅读。

2.1.2patternall-2

时间

呈现元素的时间关系,表示一系列事件或者变化,也是提供视觉结构的方法。

顺序关系。

s-headspace

正念冥想应用 Headspace App 的课程,以天为单位按顺序排列

因果关系。

s-京豆任务完成

京东 App 在完成某个任务后,弹出浮层提示任务已完成

变化/动画。

2.3.4gmail motion

打开 Gmail 时,页面动画+进度条的变化告诉用户正在进入

变量关系。

2.4.4imoney

使用货币转换应用 iMoney 时,输入任意一种货币的数值,其他货币对应的数值就会实时变化

无论是空间结构还是时间结构,结构表达了元素之间的关系。重复与交错、节奏与韵律、对称与均衡、对比与调和、比例与适度、变异与秩序、虚实与留白、变化与统一等形式,都是规划版面的关系法则。

下面是两个网站的首页设计,我们一起来看看设计师如何处理结构,而结构又是如何影响感知和视觉搜索的。

chunking-web-no

图片来源:https://www.pinterest.com/pin/805299977096401005/

第一个页面设计很大方,但是整体结构不是太合理。虽然只有四个主要的内容区域(不包含顶部导航和页脚),但是每一个区域都没有闭合成一个视觉层级。整体扫视下来,有多达数十个相对独立的视觉元素。层级关系不明确,会干扰视线快速浏览和集中,也就容易产生认知上的负荷。它处理得比较好的部分,是每一个部分都有焦点,在区域内搜索时,容易聚焦到重点内容上。

下面是第二个网站首页:

图片来源:https://www.pinterest.com/pin/89931323793367013/

一眼扫视下来,整个页面只有两个大的组块:处于背景的标题、页脚内容,和处于前景的主要内容。在主要内容这个大的组块中,又非常明确地区分出了四部分内容,只要简单扫视,就可以定位到感兴趣的组块。在各组块内,基本都遵循了「先从左至右,再从上到下」的顺序和优先级,方便用户以相同的模式搜索组块内的内容,进一步确定视觉焦点。组块内的焦点也很明确、突出,以图片和数字为主。

所有的视觉结构,都是为了呈现元素之间的关系。下一次使用数字产品时,不妨留意一下,它如何提供视觉层级,是否容易发现自己感兴趣的内容。

Ref

蒂莫西·萨马拉. (2016). 好设计的造型元素 (齐际, 何清新, & 温迪, Trans.). 广西美术出版社.

kidult00 wechat
扫码关注 00 的公众号
如果文章帮您节省时间或者解答疑问,不妨打个赏 :)