观看研究室HELIA VISUAL STUDIES

第 9 卷 / 共十卷

时间、空间与互动

让形式沿时间展开,也让人的行动获得回应

五篇研究 · 约 18 分钟文字阅读 · 图像可慢慢看

屏幕中的字会变化,人会在空间里走动,一次操作也会改变下一刻的画面。本卷把这些过程放到具体作品和信息系统中研究。

视觉证据只覆盖实际查看的照片与图像;交互过程、设计意图和标准要求分别由一手资料支持。未完成现场测试的地方保持明确,不把设计推论写成用户成效。

09 / 01

动态字体:把阅读时间当作构图材料

文字出现、停留、转向和离开的方式,会改变读者能否完成阅读,也会改变一个空间的节奏。

从柱面上的文字场开始

M+的光影铭谢墙把支持者的姓名呈现在建筑主力柱上。实际查看THA发布的现场照片,窄长的发光面贯穿大厅高度,密集文字沿斜向形成连续条带,中间较大的类别文字从姓名群中突出。柱面、斜线和大厅中的斜向结构同时进入画面,文字因此既承担命名,也参与空间的方向感。

馆方介绍将《字质文理》描述为受旧式翻页显示屏和古迹刻字触感启发的数字组合作品,并说明它位于地面大厅。THA的项目署名列出中村勇吾担任艺术指导,Akitomo Okuda与Asuya Sato负责设计和编程。这些记录可以确认项目形式与作者,不能仅凭照片推定动画一轮多长、每个名字停留多久。

原创教学示意:运动让观看获得先后次序三个位置说明一段变化。静态图只能标出关键状态,实际速度、持续时间和停顿需要播放后判断。一个状态连续状态
原创教学示意运动让观看获得先后次序三个位置说明一段变化。静态图只能标出关键状态,实际速度、持续时间和停顿需要播放后判断。

作品细读

M+ Donor Wall/光影铭谢墙《字质文理》

艺术指导:Yugo Nakamura/中村勇吾;设计与编程:Akitomo Okuda、Asuya Sato;团队:THA LTD. · 2021;馆方列示展出起始日为11月12日 原始来源 ↗

已查看官方现场照片。密集姓名和较大类别文字形成两层尺度;照片由THA页面发布,单独摄影者未列明。

关于翻页显示屏的启发来自馆方说明。未完成全循环动态观察与现场走动测试,不量化其停留时间或读取效果。

带到下一件作品把运动阶段与可读停留分别设计;进入真实空间后,增加侧向、近距与走动状态的验证。

文字的两种时间

阅读一个名字需要保持字形关系,感知一个文字场却可能只需要看到方向、密度与亮暗变化。动态排版应考虑这两种时间:画面整体如何展开,以及一个具体词能否稳定到足以被读完。若每个字都一直变形,观看可能转向纹理;若全部静止,又可能失去作品原本希望建立的时间过程。判断应回到这件作品需要完成的阅读任务。

设计自己的动态标题时,可以先把时间分成进入、可读停留、离开三个阶段。进入阶段交代生成方向,停留阶段让词形完整,离开阶段说明它如何让出空间。三个阶段不必等长,也不要求每件作品都使用相同曲线。关键是留出能够被明确指出的阅读窗口,并以真正的文字长度检查,而非拿几个短单词代替所有内容。

时间与空间需要一起测试

大屏上的文字还会被观看距离、走动速度和斜视角改变。照片经过取景,给出了有利的观察位置;现场观者却可能正走过、站得很近,或从另一面接近。把一张静态截图判为清楚,不能证明整段动画在现场都清楚。较稳妥的研究应记录关键帧、播放过程及不同观看位置,并把未知保留下来。

迁移到网页时,动效应该保有暂停或静态阅读途径,尤其当它与长文同时出现。名字、日期和必要说明不能只藏在短暂出现的一帧。对于汉字,笔画较密的字在缩小与变形时更容易出现局部粘连;应以实际字组检查,而不能用拉丁字母的变化幅度作为统一标准。这里提出的是制作时的检查方向,不宣称已验证M+现场的全部可读性。

留给以后的小实验可选的小实验

用一句真实双语标题画进入、停留、离开三个关键帧,并标明预计持续时间。

比较每种语言是否都有完整可读的阶段;尚未制作与测量播放结果。

文字沿时间展开后,身体也会改变观看。下一篇从街道地图研究位置与方向如何进入信息。

回到本卷目录 ↑

09 / 02

空间导视:从人站在哪里开始设计

导视的任务发生在人、标识和路径之间。地图需要帮助人把纸面方向接回眼前环境。

地图朝向面对真实身体

TfL对Legible London的官方说明指出,街道地图采用与使用者面对方向一致的朝向,而非统一把北方放在上面。读者向前看,再低头看地图,两种空间关系更容易接上。五分钟与十五分钟两种范围分别帮助附近查找和较大区域定位;步行时间以平均速度估计,不能解释成每个人都会在同样时间抵达。

本次已读取机构文字说明,但浏览器图像访问遇到验证页面,未完成地图原图观看。本章据此只讨论官方明确描述的机制,不编造地图色彩、某条道路位置或标识与建筑之间的现场细节。系统署名和早期研究背景另由Applied Information Group的一手项目相关资料补充。

原创教学示意:空间中的信息需要提前出现方向提示与目的地标签承担不同任务。示意只展示路径关系,实际导视必须在建筑和人流中检验。只标目的地在决策前给方向到达
原创教学示意空间中的信息需要提前出现方向提示与目的地标签承担不同任务。示意只展示路径关系,实际导视必须在建筑和人流中检验。

从来源记录进入

Legible London:街道步行地图与标识

Applied Information Group参与系统设计;运营与地图说明:Transport for London及合作机构 · Applied相关资料记研究始于2004年;本章采用机构现行说明 原始来源 ↗

来源说明:已确认面向使用者的地图朝向、五分钟与十五分钟范围及不同标识形态的适用位置。未完成原图观看,不标注image-viewed。

未复核整个伦敦的设施数量或实时可走路线,文中没有把历史项目效果数字写成当前结论。

带到下一件作品先用真实路径确定决策点与信息角色,再设计版面;给路线限制、定位误差和内容更新留下处理方式。

先分清定位与选择

一个人刚走出车站,通常先要知道自己在哪个出口、面对什么方向,随后才选择要去的街道。把大量目的地列表堆在最醒目的位置,可能让已经迷失方向的人更难开始。导视可以依次给出位置、朝向、附近地标和下一步路径,再让读者展开更多目的地。这是根据使用过程提出的分析,并非声称所有人都以唯一顺序阅读。

导视点还影响人群停留。宽地图适合多人聚集查看,但需要足够的人行空间;窄标识占地较小,信息面积也更有限。TfL产品说明正是把不同形态与街道空间联系起来。设计图上的留白无法代替现场的让行空间。研究版面时,还要问一个人停下来读它,会不会挡住另一人的前进路线。

无障碍信息需要准确的地面事实

台阶、人行道宽度和过街位置都可能影响路线可用性,TfL明确把这些列入地图信息。设计者选择显示什么,会直接影响谁能够依靠地图作决定。仅靠醒目的目的地名称,无法让使用轮椅的人判断中间是否有台阶。视觉层级因此也涉及资料完整性:重要的路线限制要能够与位置一起被找到。

把这一机制用于校园或展馆时,可以先画出入口、决策点、坡道和目的地,再选择需要设置标识的位置。最后沿真实路径走一次,检查在转弯之前是否已经得到信息,在走错之后是否能恢复方向。手机地图虽然可动态定位,也需要处理定位误差与无网络状态。不能因为数字界面可以放大,就假设它天然覆盖了实体导视的所有任务。

维护也是导视的一部分

一张精确地图会随道路施工、入口调整和建筑用途改变而变旧。TfL说明区分标识拥有者的维护责任与基础地图更新工作。迁移时应同样确定谁能报告错误、谁确认地面变化、哪个版本已经替换。图形系统建立的信任,要靠长期内容准确性继续维持。

留给以后的小实验可选的小实验

为一条熟悉的公开路线画三处决策点,只记录地点与转向,不收集他人活动轨迹。

检查每个点的地图是否与站立朝向一致,以及走错后能否找到恢复路径。

导视让人选择下一步,互动作品则会把人的行动重新写进画面。

回到本卷目录 ↑

09 / 03

交互与反馈:看清行动留下的结果

互动的可理解性来自行动与结果之间的联系。画面变化需要让参与者知道哪一部分与自己有关。

一次输入怎样进入共同画面

Rafael Lozano-Hemmer的《Pulse Room》创作于2006年。根据艺术家项目页,参与者握住感应界面后,附近灯泡按照测得的心跳节奏闪烁;松手后,记录沿灯泡队列移动,新记录进入前端,已有记录依次向后。这个过程同时包含即时反馈与短期留存:参与者离开输入位置后,刚才的节奏仍暂时存在于空间里。

已查看的官方摄影中,前景一只透明灯泡清楚地发亮,背景灯点散成不同亮度的圆斑。它能够说明光源的物质形态与空间深度,无法单独证明每只灯的节奏。具体交互顺序来自作者文本。图片档案把照片现场标为Puebla、2008,而作品创作年为2006;两种年份在本章保持区分。

原创教学示意:反馈让操作的后果能够被看见输入、等待与完成是不同状态。状态差异需要通过信息与结构共同表达。操作入口操作后的反馈开始处理中进度可见
原创教学示意反馈让操作的后果能够被看见输入、等待与完成是不同状态。状态差异需要通过信息与结构共同表达。

作品细读

Pulse Room:灯泡近景与交互结构

Rafael Lozano-Hemmer;编程:Conroy Badger;照片:Alejandro Biazquez(按原页署名) · 作品2006;所看照片页面列现场2008 原始来源 ↗

近景照片已查看;队列更新与心率映射来自项目文本,未由静态照片推断闪烁节奏。

图片资源目录含puebla_2007,图像说明页却列2008;采用说明页记录并保留差异,不用URL目录替代年代证据。

带到下一件作品先让局部输入获得可辨认的反馈,再展示它如何进入共同状态;同时设计无输入、失败与退出路径。

让因果在合适的距离里被看见

最近的灯先回应当前输入,让人有机会建立“这个变化与我有关”的联系。随后记录移向更远位置,共同空间中逐渐出现多人留下的节奏。本文据这一结构提出分析:反馈先要足够局部,才容易被认领;留存再把局部动作与其他参与者连接。若所有灯在输入瞬间都同时改变,人也许看见了壮观结果,却更难辨认自己的贡献。

这条分析可以迁移到普通交互页面。提交成功后,结果应该出现在与刚才操作有联系的位置,说明发生了什么;随后再更新整页统计或历史记录。若只是远处一个数字变化,用户可能无法确定提交是否完成。反过来,只有按钮短暂变色却没有可查看的结果,也不能支持后续查证。视觉反馈与状态记录需要接续起来。

失败与退出同样属于交互

研究一个互动系统时,还要追问没有成功输入会怎样:感应不到、握得太短、多人同时等待,是否会产生容易误认的状态?本章没有现场测试《Pulse Room》的这些情况,因此不声称原作存在某项缺陷。这些问题属于迁移方法时应补做的验证,它们能帮助设计者看见演示视频常常没有覆盖的阶段。

涉及身体数据的作品还需要让参与者知道感应发生了什么、数据如何呈现,以及是否可以选择不参与。这里不对原作的未公开数据处理方式作推测。用于自己的教学原型时,可以先以按钮节奏或明确标注的模拟数据研究队列和反馈,不必收集真实心率。这样仍能检验视觉因果,而不会把不必要的数据采集当作互动成立的前提。

留给以后的小实验可选的小实验

用模拟按钮节奏画四个状态:等待、输入、确认、离开后留存。

比较当前动作能否被立即认出,旧记录是否仍能与新记录区分。

当交互留下记录,下一步是决定这些记录如何被编码、解释和重新阅读。

回到本卷目录 ↑

09 / 04

信息图:从记录规则到可读的图形

图形的秩序需要能够追溯到数据的组织方式。颜色与形状一旦承担含义,图例便进入作品的核心。

用一周作为观察的边界

《Dear Data》由Giorgia Lupi与Stefanie Posavec完成。两位作者在一年中每周选择生活中的一种数据,手绘成明信片寄给对方。项目说明解释,正面承载数据图,背面放入解读图形的图例。记录、绘画、寄送和等待都属于这项工作,信息传递的时间并没有在图形完成时结束。

本章查看MoMA收藏的第28周“微笑”主题正反面图像。正面的一张图以细线和小型圈状符号沿几条方向展开,另一张使用不同颜色与纹样的三角形组成较密的竖向带。两种记录共享一周主题,视觉组织却各有方法。反面的手写说明让观者知道图形需要被解码;本次展示尺度不足以核实每项细小编码,因此不替符号编写具体含义。

原创教学示意:图形的尺度要忠实对应数据用相同数据比较长度与面积编码。展示方式会影响比较难度;图中的数值仅为教学例子。长度比较面积比较2 : 1面积 2 : 1
原创教学示意图形的尺度要忠实对应数据用相同数据比较长度与面积编码。展示方式会影响比较难度;图中的数值仅为教学例子。

作品细读

Dear Data:第28周,Smiling To Strangers/A Week of Smiles

Giorgia Lupi、Stefanie Posavec;馆藏:MoMA · 2015 原始来源 ↗

已查看MoMA正面图及图例面;页面图像资源为馆方真实资源。只展示正面,不转录明信片的邮寄地址。

作品年份与材料由馆藏页确认;正文对记录单位的讨论为教学分析,不擅自解码未看清的小字。

带到下一件作品先定义记录单位、缺失与零,再选择能被解释的视觉编码;让图例支持局部回读。

先问一个记号代表什么

绘制信息图之前,应定义记录单位:一次事件、一段时间、一个对象,还是一种自我判断。同一个主题若记录单位不同,数量便不能直接比较。比如记录“笑了几次”和记录“与多少人微笑”,看似接近,得到的图却可能非常不同。这里使用的是教学假设,用来说明编码前的决策,并非对两位作者原始记录方法的转述。

缺失数据也需要与零区别。一天没有记录,可能是没有发生,也可能是忘了记;两个状态若都画成空白,图形会显得整洁,事实却被合并。个人数据尤其依赖注意力、记忆和当时的分类判断。把这些限制写入图例,不会减弱作品,反而让观者知道怎样阅读、哪些比较不能过度推论。

图例让美感获得第二层阅读

远看数据绘画,可以先感到密度、色彩与节奏;靠近后,图例让每个小记号重新获得含义。这两层阅读能够互相支持,但不能默认自动发生。如果图例很长、对照又困难,读者可能停在纹样层面。迁移时可以选择少量重要编码,先让一两个维度被稳定读出,再增加更细的信息,避免所有数据都争取一个独立颜色。

数据图也可以允许不同观察尺度:整体看分布,局部看异常,再回到文字理解情境。用于面向公共决策的图表时,应优先明确单位、范围和比较基准;用于个人通信或艺术研究时,可以给细读和主观分类更大空间。二者的判断目标不同,不能因一张手绘图动人,就把它当作准确统计或普遍行为结论的证据。

留给以后的小实验可选的小实验

使用一组公开或自行编造并明确标注的事件数据,设计两种编码,并各写完整图例。

检查同一数据能否从图形读回,缺失与零是否被区分;不收集或公开他人私密记录。

当图形进入不同阅读方式,编码需要继续保住。最后一篇讨论媒介转换与可访问性。

回到本卷目录 ↑

继续到创意发生

记录怎样成为一种实践

从图例与编码继续往前,看 Dear Data 怎样把观察、绘制与交换放进日常生活。

09 / 05

可访问性与媒介转换:保住读者要完成的事

视觉作品转到另一种媒介时,应先确定哪些信息与关系必须保留,再选择新的表达方式。

一张图需要多长的文字说明

W3C的复杂图像教程用图表、地图和结构示意讨论文本替代:短说明用于识别图像,较长说明传达关键数值、关系和趋势。对一张分析用图而言,“彩色图表”通常不足以让读者获得它承载的内容。描述长度应由图像的任务决定,不能把所有替代文本统一压成一句形式标签。

回到《Dear Data》,若要解释它的设计方法,文字可以交代两种视觉编码如何不同、图例在哪里,以及记录如何被组织;若要传达某一周的完整数据,则还需要逐项读取并核实图例与数值。两种目标需要不同信息量。本系列目前完成的是前一种研究,没有假称已经重建全部明信片数据。

原创教学示意:换一种观看条件,结构仍要成立右图把宽屏的并排关系改为纵向次序。重新安排应保留内容,而不是只缩小字号。宽屏并排窄屏顺序
原创教学示意换一种观看条件,结构仍要成立右图把宽屏的并排关系改为纵向次序。重新安排应保留内容,而不是只缩小字号。

从来源记录进入

NPS Unigrid出版物的可访问版本

National Park Service/Harpers Ferry Center及各项目协作者 · 持续制作;所读官方页面更新于2025年 原始来源 ↗

来源说明:官方页面列出无障碍PDF、盲文、大字与音频描述。本文据此分析多媒介内容的连续性,未逐一测试这些外部版本。

带到下一件作品按每种媒介重新组织阅读顺序,保留事实、关系和返回路径;用实际任务验证,而不只比较外观。

减少运动时,仍应能够理解变化

W3C关于暂停、停止、隐藏的解释明确区分自动运动与自动更新。对自动开始、持续超过五秒且与其他内容并行的运动信息,成功准则要求可暂停、停止或隐藏,必要活动有例外;自动更新另有控制条件,不能套用五秒豁免。交互触发动效则对应AAA级的另一条成功准则。

应用到动态字体教学,可以提供关键帧顺序和一段简洁解释,让不播放动画的人仍能理解进入、停留与离开的关系。关闭动效后直接留下空白,或者只剩最初一帧,会丢失教学内容。静态版本需要重新设计信息次序:用并列帧或可手动推进的步骤,承载原来由时间串起来的关系。

同一内容不必保持同一外观

NPS的出版物说明列出盲文、大字、音频描述和无障碍PDF等版本。它们共同服务于理解地点与安排访问,却不可能完全保留折页原来的外观。这给媒介转换提供了具体方向:先保留地点关系、必要事实和可查找结构,再根据触觉、听觉或窄屏阅读选择适合的顺序。漂亮的原版不能成为另一种读者无法使用资料的理由。

自己的页面也应让键盘操作者能够进入与退出图像放大,找到来源和返回按钮;触摸操作不应依赖鼠标悬停才出现说明。对比信息如果只靠颜色区分,还可以加入名称、线型或形状。这里列出的是本研究所建议的检查点,不能仅因把它们写在文章里,就宣称整站已经完成可访问性验证。实际界面证据应由制作与测试分别交付。

把忠实理解为保留关系

一个声音版本无法直接展示颜色,却可以解释颜色对应什么、哪些区域形成对照;一个手机版本无法同时展开大地图,却可以保留全局入口与局部定位之间的返回路径。转换后的作品可以有不同节奏,只要读者仍能获得必要关系。验收时,应分别用目标媒介完成真实任务,再检查原本重要的信息有没有在转换中消失。

留给以后的小实验可选的小实验

把一张已有教学图分别改写为短说明、完整文字说明和三步静态序列。

比较三种版本能否传达同一个关键关系,并明确哪些细节无法等价转换。

时间、空间与操作把设计延伸到观看之外。后续自己的创作研究,应把这些条件一起带进命题、实验和持续修正。

回到本卷目录 ↑

动手看 · 原创关系实验

等待也需要被看见

按下按钮,比较操作前、等待中与完成后的信息变化。延迟只用于演示,所有操作都发生在这个页面里。

尚未开始。

展开观察提示

先记下眼睛最早停在哪里,再比较信息与空白的关系。这里改变的参数提供了一个观察条件;喜欢哪个结果,可以保持开放。把这组关系用到真实作品时,还要重新考虑内容、字体、材料与观看距离。

作品从哪里来

来源与继续阅读

下列条目说明事实依据和继续查找的入口。原作图像保留来源署名;正文中的机制分析与原创图解由本系列作者提出。

  1. M+ Donor Wall ↗

    THA LTD. · 作品一手档案 · 访问于 2026-09-08

    核对设计与编程署名,已看官方现场照片;未完成全循环动态验证。

  2. 光影铭谢墙 ↗

    M+ · 委托机构作品说明 · 访问于 2026-09-08

    支持《字质文理》名称、2021年展出起始日、柱面与翻页屏启发。

  3. Maps & signs ↗

    Transport for London · 机构系统一手说明 · 访问于 2026-09-08

    支持地图朝向、步行范围、标识类型和维护;浏览器图片访问被验证页阻止,未绕过。

  4. Applied recognised with prestigious Queen’s Award ↗

    Applied Information Group · 设计者项目背景 · 访问于 2026-09-08

    补充Legible London研究于2004年开始;不采用宣传性成效结论。

  5. Pulse Room ↗

    Atelier Lozano-Hemmer · 作品一手档案 · 访问于 2026-09-08

    确认2006年与反馈、队列过程及编程署名。

  6. Pulse Room:Puebla照片档案 ↗

    Atelier Lozano-Hemmer · 作品一手图像档案 · 访问于 2026-09-08

    已看近景照片;摄影署名Alejandro Biazquez按页面照录,现场年列2008,与路径中的2007分别保留。

  7. Dear Data:第28周 ↗

    MoMA · 作品一手馆藏档案 · 访问于 2026-09-08

    确认2015年、材料与作者;已看正面及图例面,未转录邮寄地址。

  8. The Project ↗

    Giorgia Lupi与Stefanie Posavec · 创作者一手说明 · 访问于 2026-09-08

    支持52周、每周记录与手绘寄送、正反面分工。

  9. 复杂图像 ↗

    W3C Web Accessibility Initiative · 官方技术教程 · 访问于 2026-09-08

    用于短说明与长说明的内容分工;教程属实施指导。

  10. 理解成功准则2.2.2:暂停、停止、隐藏 ↗

    W3C Web Accessibility Initiative · 官方标准解释 · 访问于 2026-09-08

    核对自动运动的条件和自动更新另有规则;解释文档与规范要求分清。

  11. 理解成功准则2.3.3:交互触发动效 ↗

    W3C Web Accessibility Initiative · 官方标准解释 · 访问于 2026-09-08

    确认AAA级及非必要交互动效可禁用的原则,不误写为AA要求。

  12. Publications ↗

    National Park Service · 机构出版说明 · 访问于 2026-09-08

    支持多种可访问版本的存在;外部版本本次未逐一实测。

本卷的证据与阅读边界

实际查看M+铭谢墙现场图、Pulse Room灯泡近景、Dear Data第28周正面与图例面;均记录一手图像真实URL。

Legible London的官方文本已读取,浏览器进入验证页,未执行验证或绕过;只标source-text。

本卷没有采集真实心率、私密数据或读者行为,也未实测原作的运行性能、可访问性或现场效果。

W3C解释文档属资料性说明;2.2.2与2.3.3范围和等级分别表述。

全部分析由Agent完成,不新增Helia个人偏好;可选实验不标成已执行。

寻找一个问题

    打开原图 ↗