← 返回「369 · 内部复盘学习库」

小恩

一个会看你的黑球
369 频率体系 · 形象资产

一它现在活着的样子

小恩
鼠标移上去它会看你 · 点一下换个眼神 · 空格暂停

二四个尺寸,同一个它

同一套引擎,缩到 16px 还是放大到 240px 都是同一个圆、同一双眼睛——因为它不靠贴图,是每一帧现算的矢量。

16px = 网站图标  ·  28px = 列表/按钮  ·  56px = 头像  ·  88px = 页面角落

三为什么是黑的,为什么只有眼睛

147 · 形是一个圆
没有描边、没有高光、没有装饰。一个纯粹的黑色圆形——它不抢注意力,因为小恩的存在方式是在场,不是表现。
258 · 唯一的表达是眼神
十二种眼神:平视、左看、右看、回想、内省、注意、眯笑、单眼眨、转圈、找人、半眯、闭眼。
不说话,但看得见它在听、在想、在看你。这就是"连接"最小可行的样子。
369 · 它在,但不评判
它不会对你笑得太用力,也不会盯着你不放。你看它的时候它看你,你不看它的时候它自己安静地漂着—— 这正是不加评判的在场:你来我接,你走我在。
不做吉祥物,不做花哨的卡通——一个沉静的黑球,才是能长期待在角落里的东西。

四它怎么活的(这才是好玩的部分)

球体永远是一个圆——但它会呼吸。四层极其轻微的形变叠在一起,实测最大 3.66%,刚好让人感觉到"这是活的"而不觉得它变形了。

层幅度感觉
呼吸0.28%慢慢的一口气
液态轻晃(低频)0.68% + 0.42%像水球轻轻晃,不是花瓣
被眼神带动随视线看向哪边,哪边轻拉一点——它有重量
眨眼微压0.75%闭眼时上下轻轻压一下

还有两处小心思

① 换眼神的时候会眨一下眼。因为眼神切换是最容易"看出生硬"的瞬间——用一次眨眼盖过去,人就完全察觉不到了。

② 你摸它,它看你;你停下,它交还给自己。鼠标移上去它会跟着看,手停下来 2.6 秒后慢慢把视线还给自己的漂移节奏——不是突然抽回去。这两件事是分开处理的:"被外界指挥"和"自己闲逛"混在一起,它就会显得要么死盯着你、要么完全不理你。

五底下是什么技术

sample(t) —— 时间的纯函数
引擎没有内部状态、不读系统时钟、不改任何东西:给它一个时刻 t,它算出那一刻的一帧。
所以暂停、跳转、任意时刻重放,出来的图完全一致。这也是它能被真实测试的原因——同一帧可以反复算、反复验。
径向剖面 —— 形状就是一串数字
球体按 72 个角度采样成半径数组,"变形"退化成逐项插值。所以这个形象零依赖:没有动画库、没有贴图、没有 Lottie,就是一个 HTML 文件(约 14KB)。
测量,而不是选择
"微扭曲压在 3.7% 以内"、"波数不超过 3(花瓣会是 6)"、"眼睛最远 64.7 不超过球半径 100"—— 这些不是感觉,是跑出来的数字。形象能不能立住,用断言验,不用眼睛猜。

六它可以用在哪

微信头像 / 表情
导出 GIF 或动图,十二种眼神本身就是一套表情——点一下鼓一下的那种。
页面角落的陪伴
学习库、官网、文章页右下角放一个,来访的人会感到这儿有人。
小恩产品的形象底
照见旅程、专属小恩——所有以"小恩"为名的产品,共用这一个形象,就是共用一个身份。