图像、图标与动效Images, icons & motion

# 图像、图标与动效 / Images, icons & motion

ID: assets-motion
Version: 1.2.1

素材帮助识别内容，动效说明状态变化；它们都应服务于用户当前的动作。

Assets help identify content; motion explains state changes. Both should support the user's current action.

## Anatomy
- 真实预览：对应原资源，支持读者判断内容。
  Real preview: identifies the original resource and helps readers assess it.
- 概念插图：说明主题，不作为功能实测证据。
  Concept illustration: expresses a theme without implying hands-on validation.
- 图标与过渡：提供辅助识别和及时反馈。
  Icons and transitions: aid recognition and timely feedback.

## Parameters
- icon.size: 18 / 20 / 24px
  按钮、导航和独立功能图标；使用 Phosphor regular。
  Button, navigation, and standalone icons; use Phosphor regular.
- image.ratio: 16:10 / 2:1
  目录封面 / 首页补充预览；手机紧凑卡片另用固定缩略图。
  Directory covers / supporting homepage previews; compact mobile cards use a fixed thumbnail.
- motion.feedback: 160ms ease-out
  按钮反馈、轻量展开；不延迟真实动作。
  Button feedback and lightweight reveals without delaying the actual action.
- motion.reduced: 0ms / no transform
  尊重减少动态效果设置，保留文字反馈。
  Respect reduced motion and retain textual feedback.

## Rules
- 优先使用有明确来源的真实预览；缺图时保留可读标题和来源。
  Prefer sourced real previews; keep title and source when an image is absent.
- 图片声明尺寸或宽高比，避免加载后把文字推走。
  Declare dimensions or aspect ratio to avoid shifting text after load.
- Logo 等比完整展示；产品截图不能裁掉解释内容所必需的部分。
  Show the whole logo proportionally; do not crop evidence needed to understand a screenshot.
- 高频动作不使用弹跳或长入场动画。加载动画不能冒充真实进度。
  Avoid bounces and long entrances for frequent actions. Loading animation must not imply measured progress.

## States
- 正常加载 / Loaded: 呈现完整预览，装饰性图片使用空替代文本。
  Display the preview; use empty alt text for decorative images.
- 缺失图片 / Missing image: 保留正文与链接，不用随机生成图冒充产品界面。
  Keep text and links; never substitute a fabricated product screenshot.
- 减少动态效果 / Reduced motion: 状态即时切换，完成结果仍用文字提示。
  Switch states instantly and announce completion in text.

## Do / Avoid
- Do: 点击后立即响应，160ms 的轻量反馈只解释变化。 / Respond immediately and use a short 160ms transition only to explain the change.
- Avoid: 先播一段装饰动画再执行操作，或自动循环移动正文。 / Play decorative animation before acting, or continuously animate reading content.

## Code mapping
- src/components/Icon.astro: 图标库入口 / Shared icon library
- src/components/EditorialPreview.astro: 真实预览与无图内容 / Real previews and text-only content

## Dependencies
foundations

## Acceptance
- 图片缺失时内容仍可理解和操作。
  Content remains understandable and actionable without images.
- 减少动态效果模式下没有位移或循环装饰动画。
  Reduced-motion mode removes movement and decorative loops.
- 图标按钮具有可读名称，真实截图与概念插图含义清楚。
  Icon buttons have names; real previews and conceptual art are distinguishable.

## Implementation example
```
@media (prefers-reduced-motion: reduce) {
  .feedback { animation: none; transition: none; transform: none; }
}
```

## Reference
Method reference: https://tmall-design.com/#style/element/motion
Rules, parameters, examples, and branding in this file are specific to AI UP LAB.