UI 交互模式实战参考库

为什么需要这份参考库

当你从零开始设计一个落地页或产品界面时，很容易陷入两种困境：要么凭直觉反复试错，要么被理论文章里的抽象原则淹没。更常见的是，页面上线后才发现关键位置放了轮播图、表单留了六个字段、按钮写了 "Submit"——这些问题本可以在设计阶段就被拦截。

这个技能的价值在于，它不教你"什么是好的设计"，而是直接给出已上线产品验证过的决策规则：某个组件应该有几个变体、什么绝对不能放、错误提示应该出现在哪里。

它如何工作

技能的核心是一套分层的规则体系：

五大设计原则约束全局判断：交互模式要跟随用户已有的心理模型；信息按上下文渐进披露；每个视口只放一个主 CTA；同一产品内一致优先于创意变化；所有规则从 375px 开始验证，再向大屏扩展。

组件级 DO/DON'T覆盖最常踩坑的区域。以 Hero 区为例，技能限定了三种已验证变体——Statement Hero、Split Hero、Immersive Hero，同时明确禁止轮播、标题超过 15 词、自动播放带声音的视频。导航、卡片、表单、CTA 同样有对应的硬性边界。

七种实战模式针对具体场景给出结构参考，包括 SaaS 落地页的特性展示标签页、产品介绍的左固定右滚动布局、Cmd+K 命令面板等。每种模式标注了适用场景和核心思路。

反模式清单列出八类在实践中反复出现问题的设计——轮播作为主导航、无方向的无限滚动、弹窗套弹窗、隐藏主 CTA 等。

验收清单把规则收敛为十四条可勾选项，方便在设计评审或实现前逐项核对。

适用边界

这套规则聚焦于落地页和产品界面的交互结构，不涉及视觉系统的具体实现。颜色、排版、间距等属于 visual-direction 的范畴，组件的代码结构需要参考 component-patterns。无障碍、响应式、AI 特有界面等更细分的领域通过交叉引用衔接。

安全边界上，技能不自动安装依赖或修改系统权限；涉及发送、发布、付款等外部写入操作时，会先展示目标与影响并等待确认。