Loading
科学艺术美学与表现性动态如何打造生动的作品集体验。
大多数设计系统从情绪板开始。Exira-X 从一个问题开始。
站在我们所理解的边缘是什么感觉?不是舒适的边缘——是真正的边缘。在那里,物理学变得奇怪,AI 的行为不再可解释,模拟产生了它的创造者未曾预料到的东西。那种同时确定又不确定的感觉——扎根于方法,悬浮在不知道的深渊之上。
这就是我希望这个设计所呈现的感受。每一个决策——颜色、动效、字体、间距——都是在不做解释的情况下让那种感觉可读的一次尝试。当你解释一种感受时,它就不再是感受,而成了对它的描述。设计的工作是直接产生体验。
设计唯一的工作: 直接产生体验。当你解释一种感受时,它就不再是感受,而成了对它的描述。
弹簧交互表达动量;短暂的颜色与透明度变化应保持安静、直接。
最重要的设计决策不是颜色选择或字体搭配,而是一个宇宙论上的决定。
可观测宇宙——你能看见、测量和触摸的一切——大约占宇宙存在物的 5%。剩余的 95% 是暗物质和暗能量:我们知道它们存在,因为它们影响可见物质的行为,但我们完全不知道它们究竟是什么。我们从未直接探测到它们,也许永远无法直接探测到。它们支配着一切,却对我们构建的一切都不可见。
这种二元性不是我应用于设计的主题,而是设计从中涌现的结构。两种模式,两种物理学,两种在宇宙中立足的方式。
浅色模式是你能用手握住的物理学。深色模式是那支撑着其他一切却不自我宣告的物理学。
当你在两种模式之间切换时,你改变的不是偏好设置,而是你站在宇宙的哪一侧。用户是否知道这一点无关紧要——重要的是他们是否感受到了。一个需要解释才能起效的设计决策已经部分失败。最好的选择在解释到来之前就已经落地。
大多数网页动画有一个让我困扰的地方:它们使用缓动曲线。
缓入、缓出、cubic-bezier——这些是对事物应该如何运动的多项式近似,如果物理学是方便的、无摩擦的,世界是由平滑渐变构成的。但真实物体不会缓动,它们振荡。它们会超过目标位置。它们通过阻尼稳定下来,随着能量耗散到介质中而趋于平衡。弹簧到达平衡,不会按照时间表滑向停止。
Exira-X 只在动量能够传达状态变化时使用弹簧物理。短暂的颜色、透明度与焦点变化则采用克制的 CSS 时序;并非每个过渡都需要表演。
// 用于动量承载意义的交互
const springConfig = {
type: "spring",
stiffness: 280,
damping: 22,
mass: 0.8,
};
// No duration. No bezier. The physics determines when it stops.实时模拟与空间转场带着动量并自然稳定;卡片边框和颜色变化则保持迅速、安静。关键正是这种层级。物理感能够增加意义时,动态应像网站所讨论的系统那样运动;只会增加噪声时,它就应该消失。
动效规则: 如果去掉一个动画会让体验变差,保留它。否则,删掉它。
这个原则比听起来更难执行。诱惑总是添加:再一个过渡,再一个悬停状态,再一个入场动画。每个添加在孤立看来都像是抛光。组合起来,这些添加积累成噪声——一个什么都在动却没有任何重点的网站。我删除的动画比发布的多。留下的不是为了极简主义而极简,而是因为所有非必要的东西都在让必要的东西更难被看见。
主页上旋转的原子被匆匆看过的人称为装饰性的,它不是。
原子核代表三个核心学科——物理、AI、机器人——不是作为列表,而是作为引力中心。它们之间的关系并不对等,但都围绕着一个共同的问题运转:复杂性如何从简单性中涌现?原子核就是那个问题,一切都在它的周围旋转。
电子是各个项目。每个都因特定原因占据特定轨道。粒子生命最近——纯粹的物理学,自然法则到可见行为最直接的翻译。生物进化更远——物理加计算,进化的盲目优化过程获得了数字基底。心智图谱更远——计算趋向于某种类似理解的东西,语言作为领域而非空间或时间。
轨道轨迹是经过深思熟虑的。目的地的重要性不及路径。Exira-X 不是一套陈列中的成品,而是运动的记录——提出的问题、进行的实验、令人惊喜或失望的结果、从远处看比实际更有趣的方向。轨迹表明有什么在运动中,静止的位置会是对这项工作本质的谎言。
光晕脉动。不是按计时器,不是由悬停触发。它呼吸——缓慢、持续的振荡,与任何用户行为都不对应。因为这项工作是活的,就其正在进行、未完成、仍在改变的意义而言。静态的光晕会是关于完成的声明,脉动是关于过程的声明。
我用这个词来描述这个网站在做什么,但值得精确,因为这个词被宽泛地使用。
科艺不是为大众图解化的科学,不是有科学主题的艺术——黑洞的绘画,DNA 螺旋形状的雕塑。这些是科学图像的装饰性使用,不是这个网站试图做的事情。
我所使用的科艺,是一种具体的尝试:让科学发现的感觉变得可及。不是内容,不是解释,不是简化版本,而是那种感觉——遭遇意想不到的结果时的迷失感,认识到宇宙的组织方式与你假设的不同时的感受,在原本是噪声的地方出现规律时那种特别的愉悦。
这比图解难得多。图解是翻译——取科学内容并视觉化地呈现它。科艺是生成——在观看者中产生一种感受到的体验,它在结构上类似于做科学的体验,而不需要任何先决知识。
这个网站上的每一个设计决策都以那个目标为准。色彩系统不解释物理学——它编码每个领域的情感基调,使得切换领域感觉像在不同的认知方式之间移动。动效系统不模拟物理学——它使用物理动力学,使网站的行为与它所描述的系统的行为保持一致。字体排版不引用科学——它系统地区分数据与含义、事实与论证、机器与人。
这一切是否有效,是真正不确定的。以情感体验为目标的设计总是在不完整的反馈下运作。你可以观察人们点击什么和停留多长时间,却无法观察他们是否感受到了你试图让他们感受的东西。意图与接受之间的鸿沟,是设计中永远不会弥合的部分。
设计会随着项目的变化而变化。这是承诺,不是可能性。
随着粒子生命变得更加复杂——更多粒子类型、更多交互规则、更大规模——视觉语言需要在不失去项目所问问题的意义的前提下容纳这种复杂性。随着 Ayri 从概念发展为部署的系统,网站需要一种呈现交互中智能的方式,而不仅仅是聊天界面——因为聊天界面是工具,而 Ayri 是项目,这两种框架需要不同的视觉处理。
设计与作品不是分开的事物。设计是一个关于与项目相同问题的项目——关于如何让不可见的系统可见,如何创造体验而不只是描述,如何构建通过形式而不仅仅通过内容来传达的东西。
作品集是作品集中的第一个项目。
这是一个原则,不是标语。它意味着设计可能是错的,应该被纠正。它意味着新工作创造新的设计问题。它意味着第一版不是一个已启动的完成之物——它是持续探索的开局位置。
这是第一版。