设计师要懂心理学2——6 周边视觉就像低分辨率图像

让我们重新回到前面提到的场景：星期六上午11 点，你正在家中用笔记本电脑浏览网页。如果我在任何一个时间点问你在中央视觉中看到了些什么，你可能会很好地向我描述出来。你可能会说：“我正在看网页上的一篇文章，正读到‘The’这个单词。我发现这个单词的首字母是个大写的T，它由一条竖线和竖线上面的一条短些的横线构成。” 但是，倘若我问你，在通过中央视觉阅读“The”这个单词时，你的周边视觉又看到了些什么呢？你会发现很难向我清楚地表述周边视觉所看到的事物。你的周边视觉所看到的视野范围，边界模糊，你也并不十分清楚在周边视觉中看到了些什么，所以也就更难描述你所看到的内容了。 麻省理工学院的计算机科学与人工智能实验室就周边视觉的样子提出了他们的看法。Ruth Rosenholtz 带着她的研究团队制作了一个电脑模型来模拟大脑通过周边视觉看到的内容。Rosenholtz 称把这些模拟图像称作合成图（mongrel）。 模糊的周边视觉 周边视觉和中央视觉的一个差别就在于周边视觉放弃了对图像细节的关注，以便获得对图像的整体印象。为了使图像信息处理的速度更快、范围更大，周边视觉给大脑提供的是一个更广阔的图景。这个图景真有点像一张分辨率相当低的图像，并且越到边缘就越模糊。 周边视觉在设计竞赛中的胜出 2013 年， 波士顿市举行了一场重新设计地铁交通图的比赛。 Rosenholtz（她的实验室正好位于麻省理工学院的波士顿校区）将比赛之前的地铁交通图和赢得了这场设计比赛的地铁交通图一起输入了她的合成图电脑模型。 图6-1 显示的是重新设计之前的地铁交通图。这张地图上圈出了红色轨道线上的麻省理工学院站/ 坎道站。 图6-1　重新设计之前的波士顿地铁交通图 假设你的中央视觉注视着这个圆圈。根据Rosenholtz 的电脑模型， 中央视觉和周边视觉的组合看起来就像图6-2。中央视觉区域图像清晰、边界分明，但是周边视觉区域则是模糊的。 图6-2　包含了重新设计之前的波士顿地铁交通图周边视觉图像的合成图电脑模型 Michael Kvrivishvili 是一名来自莫斯科的设计师。正是他赢得了这次波士顿市的地铁交通地图设计大赛。图6-3 就是他新设计的地铁交通图。和前面一样，我也在图上用一个圆圈标出了坎道站。 图6-3　Michael Kvrivishvili 赢得比赛的新设计（感谢Michael Kvrivishvili 提供照片，网址：www. fllckr.com/photos/10247460@NO3/） 同样，我们假设你的中央视觉注视着这个圆圈，图6-4 呈现的就是 在观察Kvrivishvili 的地图时，中央视觉和周边视觉所看到内容的合成图。这张图同样是模糊的，但是Kvrivishvili 地图的合成图和原始地图的合成图之间还是有一些差别的。 图6-4　包含了Kvrivishvili 获奖交通图周边视觉图像的合成图电脑模型 细节信息越少，看到的信息反而越多 交通图的原始版本（图6-1）提供了很多准确的地理信息，比如绿色轨道线西部和红色轨道线南部的一些地理信息。但是，因为这些地理特征相当复杂，所以它们在合成图模型（图6-2）中反而失去了向用户提供信息的效用。 将图6-1 中的这些区域和Kvrivishvili 新设计的地铁交通图（图6-3） 进行比较，Kvrivishvili 新设计的地铁交通图对实际地理信息的描绘就没有那么精确和详细，只是提供了一些代表性的信息。虽然从实际地理信息来看，图6-3 对这些区域提供的信息并没有图6-1 中的那么准确，但是在图6-4 中，周边视觉反而能够更加准确地把握地图想要传达的大致信息。通过简化设计，Kvrivishvili 让地图变得更加清晰，尤其是周边视觉部分提供的信息。 设计时要同时考虑中央视觉和周边视觉 很多设计师往往并没有意识到他们主要根据中央视觉的需要设计作品。毕竟，中央视觉才是设计师最熟悉的视觉，也是意识中最常出现的视觉。但是，或许你也想为周边视觉进行设计。这时，可以试试简化设计，特别是简化设计作品周边的内容。 即使你没有Rosenholtz 的合成图电脑模型，也可以尝试使用自己的周边视觉简单测试。首先选择设计作品中你希望人们用中央视觉观察的一个地方，比如网站的导航栏。然后，用你的中央视觉注视导航栏，同时看看能否对网页上的其他内容有一个大致的印象。需要简化网页其他部分的内容以便网页浏览者通过周边视觉渠道有效地获取网页信息吗？ 违背设计常识的屏幕设计原则 Rosenholtz 关于周边视觉的研究有很多有趣的发现，其中一个与我们经常提到的设计常识刚好相反。比如说，我们常常会遇到这样的设计原则：智能手机上的图标和logo 应该比台式电脑上的更小、更简单。从表面上看，这个设计原则似乎很有道理：如果图标和logo 的细节过多， 它们会随着屏幕变小愈加模糊，愈加难以识别。 然而，我们还可以从另外一个视角来思考这种尺寸和图像清晰度之间的关系。在一块大屏幕上，可视区域只有很小一部分处于中央视觉覆盖的范围之内；屏幕绝大部分则处于周边视觉覆盖的范围之内。现在， 智能手机的屏幕越来越大。在一部大屏智能手机上，我们完全有可能既要使用中央视觉，也要用到周边视觉。即便如此，至少还是会有75% 的可视区域处于中央视觉范围之内。在一个相对较小的智能手机屏幕上，绝大部分或者所有的可视区域都可能处于中央视觉的范围之内。对于一台小设备来说，如智能手表，很有可能屏幕显示的所有内容都处于我们中央视觉覆盖的范围之内。 可视区域处于中央视觉范围之内的部分越多，所使用图像的细节 就可以越多，而不是越少。中央视觉可以抓住图像的细节。随着屏幕变大，屏幕左上方的logo或者右上方的图标很有可能处于周边视觉的范围之内，这意味着这个logo或者图标应该更简单一些，以便周边视觉轻松地把握这个图形的视觉形象和内容——这和我们现行的一些设计原则刚好相反。 启　　示 不管你是在设计独立的图像、信息图，还是网页，都应该记得同时考虑周边视觉和中央视觉。 周边视觉是模糊的，所以设计作品的外缘一定要简化。 为小屏幕（如智能手机）设计作品时，可以在作品中包括更多的细节内容。 为大屏幕（如笔记本电脑）设计作品时，应该简化设计，减少一些细节内容。