Feeling → Phenomenon → System
Breathing Layout Demo
A Rare Ability in the AI Era

把感觉
翻译成现象

当 AI 的生成能力越来越强,真正稀缺的,不再只是“做出来”,而是 把主观感受拆解成结构,再把结构变成画面、交互、节奏与参数。 呼吸感,不只是一个元素在缩放,而是整个系统在张弛;不只是动效在起伏,而是布局、留白、密度与反馈共同构成一种生命感。
inhale
hold
release
呼吸感不只是动画。它也体现在版式的收放、画面的疏密、视觉重心的聚散,以及用户介入时系统如何回应。

感觉,不直接变成元素;而是先变成现象

比如“呼吸感”,它背后可能是:周期性、松弛、回收、充盈、生命性、微弱但持续的起伏。设计的任务,不是直接做一个“会动的东西”,而是先判断这个感受在现实中会表现为什么现象,再把它翻译成画面里的空间、密度、节奏、明暗、反馈与行为。
01

感受解剖

先问:这个感觉的核心是什么?是节律、空气感、松弛、生命性,还是被轻轻托住的安全感。不同判断,会导向完全不同的表达方式。

02

现象翻译

感受不是直接变成“颜色”或“特效”,而是先变成可观察的现象:聚拢与释放、光的扩散、边缘的柔化、重心的收缩、留白的呼出。

03

参数执行

最后才进入工程:速度曲线、缩放幅度、布局占比、层级密度、阴影深浅、鼠标响应、点击下沉、恢复时间。这一步,像技术美术。

感觉 呼吸感、松弛感、压迫感、高级感、安心感。
结构 节律、力度、张弛、聚散、停顿、回收、释放。
现象 留白增多、内容密度变化、光晕外扩、边缘柔化、重心收拢。
执行 缩放曲线、版式占比、间距系统、透明度、阴影、3D 交互、动画时长。

呼吸感,也可以体现在布局本身

真正的呼吸感,不是每个元素都在动,而是整个画面会张弛。核心区域适度聚焦,外围区域逐渐松开;信息有主次,密度有梯度,视线有停顿,空间有缓冲。也就是:局部有吸,整体能呼
真正的呼吸感,不是一个东西在动,
而是整个系统会张弛

一个有呼吸感的 3D 交互按钮

下面这个按钮同时体现三层:一是局部的呼吸起伏;二是鼠标靠近时的 3D 倾斜与光源跟随;三是点击时的下沉与涟漪反馈。你会感觉它不是一个平面控件,而像一个会感知你靠近的物体。

Breathing CTA

这个按钮故意没有做得很吵,而是通过留白、密度、柔和光效与节奏反馈,让“强交互”与“松弛感”同时成立。你可以把它理解为一个小型的“感受编译器”。

呼吸层:通过慢速、非线性的细微缩放与光效扩散,营造生命性的起伏。
交互层:通过 rotateX / rotateY 和高光跟随,让按钮在鼠标靠近时产生立体感。
布局层:按钮周围留有足够空间,让组件不是被信息挤住,而是能“呼气”。

AI 越强,翻译能力越重要

因为执行变便宜了,判断变昂贵了。AI 可以帮你画、写、做、生成,但前提是你得先知道:这个感觉的核心是什么,它会表现成什么现象,又该如何变成一个可执行的系统。这种能力,既像设计,也像技术美术,更像一种面向未来的感受工程。
AI 负责生成“东西”,
人要负责定义:这个东西为什么有感觉