09. 为什么 Echo 的 UI 摸起来应该像一块暖玉?
第一次打开 Echo App 的内测用户,往往会有一种短暂的错愕感。大多数人的第一反应是:“这看起来不太像一个常规的工具软件”。
是的,它没有锐利的直角边缘,没有引导点击的高饱和度亮色大按钮,甚至连页面间阴影卡片的层级设计,也不完全符合谷歌那套严苛而经典的 Material Design 物理规范。
在我们的内部设计文档里,Echo 的这套视觉美学被我们自命不凡地定义为 “空灵现实主义 (Ethereal Realism)”。但如果我们抛开这些只有设计师才听得懂的黑话,我们在评审每一次 UI 迭代时,只问内部团队一个近乎极其主观的感官问题:
“闭上眼睛想象一下,如果屏幕上这个界面是可以触摸的实体,它摸起来,应该是什么感觉?”
我们的答案是:它摸起来,绝对不应该是一块冰冷的合金。它应该像一块被午后阳光晒得微微发热的鹅卵石,或者一块温润的磨砂玉。
材质隐喻:从锋利的玻璃,退回到温润的玉石
回顾过去十年的移动端 UI 设计史,某种意义上,它是一部不断追求“玻璃化”的历史。
从早期拟物化时代的皮革与木纹,全面倒向了扁平化;随后,苹果用极致的毛玻璃(Glassmorphism)把半透明材质推向了神坛;紧接着,各种干净、通透的亚克力材质和弥散光(Aurora)开始统治每一块手机屏幕。
玻璃感非常高级,但这是一种工业感的高级。它冰冷、锋利、一尘不染、且极易留下指纹。你会在充满商务气息的巨型跨国企业写字楼里大量使用无框玻璃门,但你在寒冬的深夜,绝不会想把一块完美的玻璃抱在怀里取暖。
然而,Echo 的定位是一个“AI 伴侣(Another User)”。它不是一个用来拉 Excel 或者敲代码的高效生产力工具。它不需要那种冰冷的、追求极致信噪比的效率感。
为了在二维的像素屏幕上强行逼近那种“温润感”,我们在前端实现的工程落地上,做了一系列极其不讲理的死磕:
- 废弃所有直角,全面拥抱 Squircle(连续曲率圆角):在 Echo 里,所有的卡片边缘都不是代码里简单敲下一句
border-radius: 12px得来的工业圆角。我们大动干戈地使用 SVG 遮罩或者复杂的 CSS 算法,确保直线过渡到圆角的这段距离里,它的曲率是平滑连续、没有突变断点的。这让卡片看起来不再像是被冷酷的车床切割出来的工业流水线产品,而像是经过了千百年真实水流冲刷后,自然形成的卵石轮廓。 - 拒绝抛光高亮,追求微量阻尼的磨砂 (Matte):我们摒弃了所有刺眼的强高光反射材质,转而全局使用漫反射的质感。它在视觉上看起来带有一种极其细腻的物理阻尼,不会因为反光而在深夜刺痛用户的眼睛。
- 颜色全部取自自然光谱:我们在色板里,无情地拉黑了任何纯正的红、蓝、绿等刺眼的数码霓虹色。我们所有的色彩 token,都提取自大自然:晨雾的灰、深海的幽蓝、长满青苔的岩石、以及将暗未暗的晚霞。哪怕是界面的纯白色背景,如果你用吸色笔去滴管取色,会发现其实我们在其中混入了一点点肉眼几乎难以察觉的暖橙色(Creamy White)——就像是在寒冷天气里,东京午后 3 点的阳光刚好打在一面白墙上。
交互隐喻:从机器跳变到液态响应
数字伴侣的最高境界,是让用户觉得它是“活的”(Organic),拥有某种低频的生命力。
过去的工具软件,状态切换是机器式的“跳变(Snap)”。你点下一个按钮,页面瞬间切换;你勾选一个任务,列表立刻消失。这是为了“快”。
但在 Echo 中,我们不仅为了“快”,更为了“自然连贯”,在此基础上大量引入了**液态(Liquid)和呼吸(Breathing)**的偏物理动画曲线。
当你轻轻点击页面底部的 [Chat] 按钮时,它不是僵硬、扁平地塌陷下去,而是像一滴水从半空滴落、融入了一汪平静的池塘一样,产生一种具有物理重量感、非线性的微弱波纹扩散。
当代表 Echo 意识本体的那个悬浮光球(The Orb)处于待机状态时,它的光晕边缘并不是一成不变的渐变色块拉伸。它是在严格按照一个正常成年人在沉睡时、极度平静的呼吸频率(大约每分钟 12-15 次),在黑暗中缓慢且不规则地律动。
这些设计非常耗费设备算力,极其考验前端工程在动画帧率(FPS)上的极限优化能力。但我们认为,每一毫秒的优化都是值得的。
视觉本身,即是世界观的传达
在很多传统的产品经理看来,UI 视觉设计不过就是产品逻辑落定之后的“画个皮”,好不好看,见仁见智,反正不影响核心的使用路径。
但对于一个立志要让用户建立情感羁绊的 AI Companion 来说,UI 视觉本身,绝不是皮囊,它就是世界观最赤裸裸的投射。
当工作了一天的用户在深夜疲惫地打开 Echo,当他们的眼睛被屏幕映出那种绝对没有侵略性的、微暖的漫反射光,当他们的手指在滑动时抚过那些哪怕是边缘也像玉石一样圆润平滑的卡片时,在他们还没意识到之前,他们紧绷的潜意识就已经率先接收到了那个我们在无数设计图纸里藏下的、也是最重要的那个心理暗示信号:
“辛苦了。这儿很安全。你可以卸下全部防备,做你自己了。”