0%

第 5 章 我们的边界视觉很糟糕

笔记

中央凹的分辨率与边界视野的分辨率比较

中央凹分辨率高的三个原因:

  • 像素密度
  • 数据压缩
  • 资源处理

笔者认为,数据压缩与资源处理指的是同一方面,可做归纳:

  • 输入的有效信息多。中央凹视锥细胞的密度是其他部分的 17 倍。
  • 处理神经深度大。中央凹的传入神经不池化感受细胞的信息,且神经深度更大,其他部分多个感受细胞才与一个神经节细胞相连。

两种视细胞的区别:

  • 视锥细胞。集中分布在中央凹,其他部位较少。主要负责白昼的光觉,有色觉,光敏感性差,但视敏感性高,空间分辨率高。
  • 视杆细胞。中央凹处无分布,主要分布在视网膜周边部,呈环形带。主要负责黑夜的光觉,色觉差,光敏感性高。

边界视觉有什么用

功能一:引导中央凹

如果在一个农产品市场寻找草莓,一个处于视觉边界的模糊红色色块就能够吸引我们的眼球和注意力,虽然它有时可能就是块红色的东西而不是草莓。

功能二:察觉运动

如果说边界视觉引导中央凹(例如上述红色草莓的例子)是一个目的影响感知的条件反射运动——后天形成,那么边界视觉察觉运动的功能更像是非条件反射——先天具有。这个机制让人类更容易生存,也告诉我们采用运动的方式更容易引起我们关于边界位置的注意。比如一个嵌入在微信的网页,内有一个分享的按钮,按下后告诉用户点击右上角的(微信提供的)按钮拉起分享菜单,如果只是一个箭头加一段文字出现在边界,用户可能不会注意,但通过箭头运动 + 背景变暗等方式,用户更易察觉

功能三: 让我们在黑暗中看得更清楚

正如视杆细胞在光线良好的环境下会超负荷(见第 4 章),低亮度时视锥细胞无法很好地工作,所以视杆细胞接管了这一功能。低亮度时,视杆细胞主导的视觉称为暗视觉。一个有趣的事实是,因为中央凹没有视杆细胞,在低亮度条件下如果你不直接看着物体(如流星), 反而能看得更清楚。

电脑用户界面的例子

在一个表单中,错误消息的提醒很容易被用户忽略,用户可能只有当反复点击无响应后,才会注意到表单开头某些错误提醒。因此,图中表单标题应该为红色以外的颜色如黑色,红色的提醒字段应该放在 LOGIN 按钮旁边,并且可以把该输入框变红警示,这么做的原因是:

  • 错误消息是因为某输入框的错误引起的,该输入框需要醒目变化;
  • 错误消息是在用户按下 LOGIN 按钮后产生的,用户需要把注意从 LOGIN 按钮转移至该错误消息。
apple.com 的表单控件

让信息可见的常用方式

有几个常见的、 为人熟知的方法,可以确保出错消息被看到。

  • 放在用户所看的位置上
  • 标记出错误
  • 使用错误符号
  • 保留红色以呈现错误(信息)

让用户注意到信息的重武器:请小心使用

方法一:弹出式对话框中的信息

用对话框显示错误消息,直接将其摆在用户面前,使其很难被忽略。错误消息对话框打断用户的工作而且要求立即将注意力转向它。如果这是紧急情况下的错误消息,那么这样做是正确的;但如果仅仅用于确认用户请求操作的执行情况等不重要的信息,就会让人觉得厌烦。

弹出对话框令人厌烦的程度随着模式级别的提高而提高。 非模式的弹出窗口允许用户忽略它们,继续自己的工作。应用程序层的弹出窗口停止了该程序下的所有工作,但允许用户与计算机上的其他程序互动。系统级别的弹出窗口阻止了所有的用户操作直到对话框被关闭。

警告提醒除了需要注意提醒用户方式的轻重以外,还需要指出用户的错误。弹出式对话框、文字 / 图标型弹出式提醒难以指出用户在一个长表单中的错误内容,但可以指出用户在一个系统性的关键问题上的错误,而且错误内容不在页面内,比如关闭页面时尚未保存等。

方法二:使用声音(如蜂鸣声)

方法三:闪烁或者短暂的晃动

苹果 Apple ID 的密码输入框在 iOS 中是以弹出式对话框的形式存在。这样的形式有两个弊端:

  • 提示框阻止了用户操作其他系统进程。对于一个喜欢复制密码代替输入,或是在输入框弹出后想不起账号的用户来说,这样的设计使得他的体验极不流畅。其实是一个牢记账号密码的用户,弹出式输入框也会给他一个很强的急迫感。
  • 输入错误会短暂晃动。这样的晃动很醒目,但对于一个忘记密码的用户来说,多次输入错误、多次晃动输入框线的极为厌烦。
iOS 设置 app 中 Apple ID 的账号操作令人极其厌烦,而微信 app 中的账号设置就显得十分舒适。

小心使用

谨慎地使用以上这些 “重武器”,只在显示关键信息时使用,以避免让用户对此形成习惯。 当频繁使用弹出窗口、声音、动作和闪烁来吸引注意时, 一个心理学上被称为 “习惯化” 的现象就会出现(见第 1 章)。我们的大脑对频繁产生的刺激越来越不注意。

视觉搜索是线性的,除非目标 “跳入” 边界视野内

视觉搜索是线性的,在纯文本中查找字符的时间与干扰字符的数量以及该字符的位置这两个变量几乎成线性关系。补充一点,浏览纯文本时换行所需要的注意转移时间较高,同时跳行错误率也存在。行长越长,行距越小,跳行的概率就越大。对于杂志等要求空间紧密的排版来说,段间距不可过大,可以舍弃,行距也需要尽量缩小,所以杂志会采用分栏的排版;而对于手机网页或电脑网页来说,纵向是不需要锁紧空间的,因此网页中的段间距一般至少大于一行(字号 + 两倍行距),而电脑端因为行长长,在不加大行距的前提下,可以选择缩小文本区域(文本框)的水平距离。

在设计中利用边界视野的 “跳出” 特性

在设计中利用边界视野跳出特性的方法:

  • 视觉层级结构。层级标题、段落 / 文本样式、粗体、列表、锁进、段间距等
  • 颜色。保留红色作为警示色,保留绿色、黄色等作为基本提示色
微信小程序用户界面设计指南

有多个观察目标时

此前提到的 iOS 应用图标统一圆角矩形外框虽然具有相似性容易被归为一类,视觉上更协调,但这种 “归类” 加重了视觉检索的负担。某些用户喜欢以图标颜色为依据建立文件夹,正是一种相似性的演绎

macOS 上的图标没有统一外框,但依然按照网格排列,视觉体验虽然没有 iOS 那样协调,但是更容易被检索,每个 app 图标形状清晰、颜色鲜明,而且具有更拟物而不是更扁平的设计风格,更符合人类视觉的识别系统。

对比大型计算机程序,通过添加列表 Logo、将菜单操作可视化等方式,移动端的程序尽量的减少了检索的时间成本,其中 iMovie 等程序为移动端程序设计树立了典范。

Apple 推出的 SF Symbols 帮助开发者更轻松的使用各个粗细的符号,统一地可视化操作文字。