视频（及简单页面）UI
日期：2026-10-22 · 类型：指南 · 状态：有效
摘要： 界面的“质感”是让动态效果可信的关键。本技能汇集了通用的界面规则（层级、间距、排版、色彩、状态），以及当界面进入视频时所需的变化：在手机上可读、以图层方式复现、每个部件可独立动画。也适用于简单页面（落地页、个人简介链接）。数字和示例详见 references/regras-detalhadas.md。
两种使用方式：
- 创建： 绘制新界面或复现实物产品的界面并将其放入视频。
- 审核： 审计已有的界面，指出每条规则被违反的地方，如果请求包含修正要求则需要修正。
1. 绘制前的背景
- 找到项目或主题品牌的视觉系统：设计令牌（颜色、字体、间距、圆角）和组件。对于第三方品牌，从其官网获取（方法见 video-referencias 第 3 节）。以下规则调整执行方式，不替换品牌。
- 确定界面类型：落地页/网站（排版幅度大）或 应用/仪表板（密度高，文字最大 24px）。
- 列出每个区块需要传达的内容以及每个区块中最重要的元素。在视频中：叙述在那一刻说了什么。
2. 绘制前的参考
| 需要 | 来源 |
|---|---|
| 应用或网站界面、落地页区块（首屏、价格、常见问题、用户评价）、仪表板、流程（新手引导、结账） | Mobbin，如果用户有权限（MCP 使用 search_sections、search_screens、search_flows） |
| 没有 Mobbin，或 Mobbin 中没有 | Dribbble 和 Pinterest（使用简短的英文关键词）以及产品的真实截图 |
| 动效、动画效果、美学、照片、环境 | |
| 视频中提到的真实产品 | 产品本身：录制界面或捕获官方截图 |
| 现成的过渡效果、变形图标、微交互、AI 代理界面 | 组件库：references/motion-e-componentes.md |
如何搜索和保存：references/referencias.md。每屏收集 3 到 6 个参考，并记录每个参考中借鉴的模式。参考用于结构、层级、间距和行为；不要复制第三方品牌、文本或图像。
3. 规则（摘要）
- 指示器： 界面自解释。使用容器分组，突出选中项，灰化非活跃项。可点击元素显示悬停、按下和活跃状态；无标签图标需要提示文字。
- 层级： 大小、位置和颜色。最重要的内容在顶部、更大且加粗；次要内容更小且灰色。每个区块一个颜色突出点。用图像、徽标和图标代替标签（如“发件人：”、“餐厅：”）。标签-值列表全部相同是表格，不是设计。
- 间距： 先有空白再有网格。使用 4 的倍数（4 到 40px）。区块之间使用一个基础间距（例如 32px），相邻项目之间使用一半间距（16px）。
- 排版： 一个无衬线字体家族。大字号文字字间距 −2% 到 −3%，行高 110% 到 120%。落地页：最多 6 个字重。仪表板：最大 24px。
- 色彩： 一个主色，配以浅色版用于背景和深色版用于文字（50–950 渐变）。其他颜色仅用于功能：蓝色焦点、红色错误、黄色警告、绿色成功。
- 深色模式： 边框浅色且几乎看不见；通过比背景更亮的表面制造深度；芯片使用低饱和度深色背景和同色浅色文字。
- 阴影： 低不透明度、高模糊。如果阴影是首先注意到的，那就错了。
- 图标和按钮： 图标大小与文字行高一致，靠近文字。水平内边距 = 垂直内边距的 2 倍。CTA 按钮对：主按钮填充 + 次要按钮幽灵样式。
- 反馈： 按钮有默认、悬停、按下、禁用和加载状态。输入框有焦点、带消息的错误和警告。每个操作都应有响应。
- 图片上文字： 在文字后面使用局部渐变，而非在整个照片上覆盖暗层。
- 全界面细微动画： 卡片悬停时上移约 2px 带宽弱阴影，点击时轻微波纹效果，区块从下向上淡入进入，加载时骨架闪烁。简短且低调：除加载外，无元素自行移动。
- 昂贵的设计是做容易的决策，而不仅仅是看起来干净： 销售图片是卡片中最大的元素；3 级文字，决策数据用粗细或颜色区分；按钮说明结果（“查看 41 处房产”、“支付 R$ 239.90”）；每屏一个徽章；导航比内容更安静；一个统一的圆角尺度。表格见 references/design-caro.md。
- 可扫描界面： 没人阅读界面，而是搜索答案。每个元素接触 2 条或多条边（文字左对齐，数值和时间右对齐；只有不用于阅读的内容才居中）。密度通过区分解决（头像、带标题的分组、带图标的芯片），而非增加间距。强调是与周围元素的差异：要突出，就削弱环境。避免盒子套盒子。
4. 视频中的界面
- 在手机上可读： 在 1080 像素宽度的画面中，界面正文至少 ~22px；影响性标题要更大。测试：在手机尺寸下暂停画面 1 秒。首先看到的是否与叙述内容相符？
- 以图层方式复现，从不粘贴截图： 每个按钮、文字、图标和气泡都是独立图层，以便单独动画（弹簧进入、高亮、被点击）。截图仅作为证据（新闻、真实帖子）。
- 忠实于真实产品： 使用公众所知的 APP（WhatsApp、Gmail、银行）相同的颜色、字体、圆角、图标和组件。使用官方图标（SF Symbols、Material Symbols 或品牌 SVG）。
- 真实的运动状态： 输入时系统键盘升起且按键高亮，绝不通过遮罩“拉伸”文字；按钮在点击时按下；加载过程真实显示；通知以平台真实格式呈现。
- 合理的示例数据： 符合行业背景的名称、数值和时间；无“Lorem ipsum”，且界面上不包含任何真实的个人数据、电子邮件或凭证。
- 画面中一屏一个想法： 如果界面有 10 条信息而叙述只提到一条，则其他信息保持中性，相机框定在重要部分。
5. 审核模式
- 渲染界面（浏览器、引擎预览或视频画面）并截取桌面端和手机端，或手机尺寸的画面。
- 执行检查清单并记录每个问题：位置、违反的规则、当前值和建议的修正。
- 按影响排序：层级和可读性优先，然后是间距和排版，最后是打磨（阴影、状态、微交互）。
- 以小且可验证的变更进行修正，保持品牌和文本不变。
检查清单（每个项也是“AI 气味”的线索）
- 是否有卡片或列表看起来像表格（重复标签、全部相同大小）？
- 每个区块是否有一个唯一的支配元素？是否有超过一个突出颜色在争夺注意力？
- 间距是否不是 4 的倍数，或者应分组的项目之间间距相等？
- 是否使用了超过一个字体家族？落地页超过 6 个字重，或仪表板中文字超过 24px？
- 大标题是否使用默认字间距和行高？
- 颜色是否仅用于装饰，或语义色被替换？
- 阴影是否过重，或在内容之前可见？深色模式下边框是否过亮？芯片是否霓虹效果？
- 图标是否大于文字行高、远离标签，或在小且歪斜的彩色方块中（图形应占框的约 55%）？
- 按钮内边距是否不成比例，或两个 CTA 权重相同？
- 是否缺少状态（悬停、按下、焦点、禁用、加载、错误）？
- 文字是否直接放在照片上白色，或整张照片被暗化？
- 是否每个区块上方都有全大写标签，或“3 个编号步骤”用居中图标代替显示真实内容？
- 廉价设计：小图片、灰色连续元数据、无意义按钮（“应用”）、超过一个徽章、圆角混杂？
- 是否有元素悬空，没有 2 条边对齐？卡片套卡片？
- 是否使用通用的紫色-蓝色渐变、表情符号作为图标、所有角落和阴影相同、填充文本？
- 在视频中：在手机上可读吗？以图层方式复现了吗？忠实于真实产品了吗？第一眼是否落在叙述所说的内容上？
6. 验证
- 渲染并观察：桌面端（1440px）和手机端（390px），如果存在则检查浅色和深色模式；视频中检查手机尺寸的画面。
- 在代码中确认规则数值（尺寸、行高、间距、阴影）。
- 交互测试：悬停、点击、焦点和提交是否都有响应。
- 比较前后差异并列出改变的内容及其原因。