快缩短网址 · 框架美学
项目地址：suo.run



一、框架：秩序的骨骼
建筑学里，框架是钢筋与混凝土的静默誓言；而在数字世界，它则是信息洪流中的隐形河床。
在交互设计的语境中，框架把页面拆成五层空间——背景层、内容层、全局控制层、临时层、系统层——每一层都在 Z 轴上拥有专属坐标，越靠近用户，优先级越高，呼吸越急促。

二、五层布局：空间的诗学
1. 背景层（-∞）：
像夜色一样安静，只负责托住一切。色值、纹理、氛围在此诞生，却从不喧宾夺主。

2. 内容层（0）：
故事发生的地方。链接、卡片、按钮、文本，像街灯依次亮起，引导目光完成旅程。

3. 全局控制层（+1）：
导航、搜索、账户头像——它们是城市的地铁图，随时告诉用户“我在哪里，可以去哪里”。



4. 临时层（+2）：
弹窗、抽屉、Toast，像雨夜的出租车，短暂停靠，完成使命后即刻消失。



5. 系统层（+∞）：
权限提示、网络异常、版本更新——它们站在舞台边缘，只在危机时刻拉响警报。

三、提前定义：让团队同频呼吸
在 suō.run 的设计体系里，我们把五层坐标写进组件库的第一行注释：
- 背景层统一 #F7F8FA，保证跨端一致；
- 内容层栅格 12 栏，断点 320/768/1440；
- 全局控制层高度 64 px，悬浮阴影 4 dp；
- 临时层动画 200 ms ease-out，退场不留残影；
- 系统异常，系统层用品牌红 #FF4757，一秒唤起注意。

当规则成为共识，设计师无需再为“按钮放多高”而争吵，工程师也无需为“弹窗层级”而翻查旧代码。所有人共享同一张蓝图，像一支默契的室内乐团，各自演奏，却奏出同一首曲子。

四、尾声：让缩短的不仅是网址
suo.run 把冗长链接压缩成一行字符，也把纷杂思绪压缩成清晰的五层空间。
愿这份框架美学，帮你在下一次产品迭代中，用更少的像素，讲更完整的故事。