从「人眼视觉特性」到「UI有效化」

本篇分享会从「人眼视觉特性」出发,浅谈如何让UI设计更加贴近「人眼舒适区」,从而让信息更加高效地传达给用户。

从「人眼视觉特性」到「UI有效化」

01、人眼视觉特性

用户如果获取「界面信息」?

科学地来说,用户通过人眼视觉系统的视锥细胞捕获外界的视觉信息,再传递到大脑皮层。

但是人眼视觉系统能够「有效捕捉」的信息却有极限,人眼可识别的电磁波长大约为400-800nm,所能识别的光谱波长极其甚微;外界信息越脱离视觉系统的「舒适区」,我们眼睛获取信息就越低效甚至无法「工作」。

本篇分享会从「人眼视觉特性」出发,浅谈如何让UI设计更加贴近「人眼舒适区」,从而让信息更加高效地传达给用户。

从「人眼视觉特性」到「UI有效化」

02、「一个空间」原则

我们双眼在同一立面,交叉视野产生了立体视觉:人眼会捕捉景深来构成一个立体空间。

这一能力帮助了古人类在丛林中快速定位目标及其距离,进行障碍躲避、精准跳跃到树杈;显然「立体视觉」可以帮助我们在复杂的「信息丛林」里获取信息。问题在于,我们的UI似乎都是二维平面的,我们如何应用一些小技巧,让UI形成一个「立体信息空间」,让用户有层次且有效地获取信息。

「一个空间」原则。

首先,处于「一个空间」的视觉调性需要规制统一,毫无规律的视觉语言会造成用户心理上明显的视觉疲劳

为二维界面竖立一个「z轴」,利用光源来形成空间感:将重要的信息推近用户,将无用的信息后置。

借鉴于真实的物理世界:

从「人眼视觉特性」到「UI有效化」

越远离底板的物体投影会更加发散和淡薄,越贴近底板的物体投影会更加聚拢和浓郁,甚至没有投影。

越靠近光源的物体会越发染上光源的色彩。通常来说,采用单一条状纯白光源,利于页面实现和设计规范的简单化。

从「人眼视觉特性」到「UI有效化」

03、「视觉焦点」原则

人眼的晶状体可以帮助我们快速聚焦,集中注意力到某个物体,而模糊掉周边无用信息。效率上,单数规律信息 > 复数规律信息 > > 复数无规律信息。

如果将所有信息平摊在界面空间里,是杂乱无序的,用户无法有效甚至耐心地读取所有信息,因为抓不住重点信息。而我们所需要做的,就是让信息形成有效焦点的信息组,让用户轻负担地获取重点信息。

「视觉焦点」原则。

界面的信息有其背后的含义,可能是页面定位信息,操作按钮,或者是详细数据展示,理解它们的所属含义,将逻辑关联的信息产生联系,给予规律性,便于用户快速理解和记忆。

从「人眼视觉特性」到「UI有效化」

关联紧密的信息拥有更亲密的距离,而越不相干的信息的距离会更加疏离,这可以让用户更快速掌握信息组的规律性。经验来说,信息组内的间距会是子信息本身尺寸的0.5X/1X/1.5X,而信息组与信息组的间距会是子信息本身尺寸的1X/2X/3X。

从「人眼视觉特性」到「UI有效化」

相类似内容的重复出现,虽然利于用户快速掌握其规律性,但是也容易产生「催眠效果」,人眼会陷入疲劳而失焦重点信息;流水线式的故事会让人枯燥,跌宕起伏的剧情才能引人入胜,我们常常需要「峰」和「谷」的对比来激活人的眼球,从而有节奏的传达重点信息。在UI上,强化甚至夸张化的重点信息,并弱化次要信息,形成对比可以非常直观地告诉用户焦点信息是什么。

从「人眼视觉特性」到「UI有效化」

此外我们也需要考虑人眼误差,例如信息实际上需要高度偏上一些,才能在「肉眼」看起来是居中对齐的。诸如此类的小偏差需要设计师去衡量调整。

04、总结

简而言之,通过上述两个原则来帮助我们达到:重要信息聚焦化,次要信息收敛化。UI设计让界面变得「好看」不单是审美层面的,也包含了对信息有效传达的处理,从人眼本身的特性考虑,让UI设计得更符合用户的浏览舒适区。

从「人眼视觉特性」到「UI有效化」

业界动态

网红电商时代的“如涵启示录”

2021-4-30 9:04:49

业界动态

如何把页面编辑体验做的更顺滑?

2021-4-30 9:13:51

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索