ui-patterns

UI-Patterns

来自已上线产品的成熟交互模式。没有理论——只有获奖网站和成功产品中的真实模式。

适用范围

在以下情况下使用此技能：

• 设计具体的 UI 元素（主视觉区、导航、卡片、表单、页脚）
• 构建落地页，并需要与转化相关的模式
• 设计定价表、用户评价或 CTA
• 确保设计模式符合既定标准

原则

1. 模式应符合预期

用户有自己的心理模型。汉堡菜单会打开导航；购物车图标会跳转到结账页面。只有在能带来明确附加价值时，才打破用户预期。

2. 渐进式披露

只展示当前情境下相关的内容。通过交互展示详情，而不是一次性全部呈现。

3. 每个视口只有一个主要 CTA

每个可见区域都应恰好有一个主要操作。其他内容都是次要或辅助操作。

4. 一致性优先于创意

在同一产品中，相同操作必须采用相同的外观。不同产品之间可以有创意变化，同一产品内部则要保持一致。

5. 移动优先是硬性要求

模式必须先适配 375px，再扩展到 1440px。

规则

主视觉区

• 应该：从三种成熟的主视觉区样式中选择一种：
  • 陈述式主视觉区：大标题 + 副标题 + CTA。无图片。适用于 SaaS/科技产品。
  • 分栏式主视觉区：左侧文本，右侧视觉内容。适用于需要通过视觉进行说明的产品。
  • 沉浸式主视觉区：全屏图片/视频，并叠加文字。适用于品牌/作品集。
• 应该：确保 CTA 在首屏内可见。
• 应该：明确视觉层级：标题 > 副标题 > CTA > 次要元素。
• 不应该：在主视觉区使用滑块/轮播。事实证明其互动率较低。
• 不应该：主视觉区标题超过 15 个词。
• 不应该：自动播放带声音的视频。

导航

• 应该：选择成熟的导航模式：
  • 顶部固定栏：Logo 在左，链接在中间/右侧，CTA 在右侧。适用于 SaaS。
  • 汉堡菜单覆盖层：点击汉堡图标后显示全屏导航。适用于创意类网站。
  • 极简页眉：仅包含 Logo + 汉堡菜单。适用于沉浸式体验。
• 应该：向下滚动时自动隐藏，向上滚动时重新显示。
• 应该：在导航中通过视觉样式标明当前页面。
• 不应该：主要导航项超过 7 个。
• 不应该：在移动设备上使用大型菜单。改用折叠面板。
• 不应该：导航缺少供键盘用户使用的跳转链接。

卡片布局

• 应该：采用一致的卡片结构：顶部图片、标题、描述、元信息、底部 CTA。
• 应该：让整张卡片都可点击，而不只是 CTA 文本。
• 应该：设置悬停状态：阴影加深、轻微放大（1.02）、图片放大或叠加层。
• 不应该：卡片没有视觉边界（必须使用阴影、边框或背景色）。
• 不应该：同一行中的卡片高度不一（有意采用瀑布流布局的情况除外）。

表单

• 应该：使用单列布局——完成率更高。
• 应该：在输入框失去焦点时进行行内验证，而不只在提交时验证。
• 应该：将标签放在输入框上方，而不是用作占位符。
• 应该：在受影响的字段旁直接显示错误，而不是在汇总消息中显示。
• 不应该：每个可见区域的字段超过 5 个。
• 不应该：默认使用验证码。应先使用蜜罐和速率限制。

CTA

• 应该：主要 CTA 使用填充样式按钮，并采用对比鲜明的颜色。
• 应该：使用以操作为导向的标签：“开始使用”“免费试用”“预约演示”。
• 应该：提供视觉反馈：悬停状态、加载状态、成功状态。
• 不应该：并排放置超过 2 个 CTA。
• 不应该：将“提交”或“点击此处”用作按钮标签。

其他规则（定价、用户评价、页脚）：参见 references/extended-rules.md

模式

详细的模式说明：参见 references/patterns.md

模式	用途	核心理念
功能展示标签页	SaaS 着陆页	水平标签页，内容交替展示
粘性分区滚动	产品介绍	左侧固定，右侧滚动
社交证明滚动条	B2B SaaS、平台	Logo 行自动滚动
命令面板	高级用户工具、仪表板	Cmd+K 模糊匹配
转化型大型页脚	SaaS、最后的转化机会	CTA 区块 + 经典页脚
对比表	竞争差异化	按列对比并标注勾选或叉号
引导向导	复杂产品	多步骤流程，最多 5 步

反模式

1. 将轮播用作主要导航 —— 用户很少浏览第一页之后的幻灯片。
2. 没有方向提示的无限滚动 —— 没有页面末尾，就无法结束浏览。必须提供“返回顶部”。
3. 模态框叠加模态框 —— 嵌套模态框会让人困惑。最多只允许一层覆盖层。
4. 隐藏主要 CTA —— 最重要的按钮只有滚动后才会显示。
5. Toast 通知泛滥 —— 同时显示多条通知会造成干扰。应使用队列并设置超时时间。
6. 将工具提示作为唯一说明 —— 移动设备没有悬停状态。工具提示应作为补充，而非替代说明。
7. 虚假聊天小组件 —— 模拟聊天的弹窗实际上只是表单。
8. 选项少于 5 个时使用下拉菜单 —— 单选按钮或分段控件更快捷。

检查清单

• 首屏采用三种成熟方案之一（宣言式、分栏式、沉浸式）
• 每个视口中恰好显示一个主要 CTA
• 导航的主要项目不超过 7 个
• 在导航中标记当前页面
• 整张卡片均可点击
• 表单采用单列布局，标签置于字段上方
• 已实现失焦时的行内验证
• 定价展示 3 种选项，并突出推荐方案
• 推荐语包含真实姓名、职位和照片
• 页脚包含法律声明和隐私政策链接
• 移动导航采用独立模式
• 提供键盘导航跳过链接
• 为所有异步操作提供加载状态
• 为表单和数据加载提供错误状态
• 为列表和仪表板提供空状态

交叉引用

• design-trends —— 塑造这些模式的总体趋势
• visual-direction —— 模式的视觉呈现（颜色、字体排印、间距）
• component-patterns —— 这些模式的技术组件结构
• agent-ui-design —— AI 专属 UI 模式
• navigation-design —— 深入介绍导航模式
• landing-pages —— 着陆页专属模式应用
• responsive-design —— 模式的移动端变体
• accessibility —— 无障碍要求