关于页
About Page
别名:关于页关于我们公司介绍页团队介绍页我们是谁品牌故事页关于我们页面
这是什么
向访客解释「我们是谁、为什么做这件事」的品牌页面：开头用一句使命宣言定调，中段以创始故事、发展历程或团队照片建立信任，再用价值观与关键数据支撑，结尾导向联系、招聘或产品。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 访客在决策前想了解团队与背景
- 品牌需要传达使命与价值观
- 招聘、融资或合作需要可信的自我介绍
✕ 不适用场景
- 用户只关心功能与价格（用落地页或定价页更合适）
- 团队或公司信息尚未确定
- 需要承载复杂操作流程
常见形式
品牌故事
Brand Story
以创始人叙事为主线，情绪与图片占主导
团队展示
Team Grid
头像网格 + 职位与简介，强调人
历程时间线
Timeline
以时间线串起里程碑与关键数据
页面结构
- 01
顶栏
站点导航与主 CTA，与全站保持一致。
- 02
使命宣言
一句加大的主张配一张品牌照片，先回答「我们为何存在」。
- 03
故事历程
创始故事或时间线，用具体事件与年份建立可信度。
- 04
团队成员
头像、姓名与职位网格，规模小则给每人一句简介。
- 05
价值观
三到四条原则，每条一句解释，避免空泛口号。
- 06
行动区
导向联系、招聘或产品体验，给读者下一步。
实现要点
flexgridgrid-template-columns: repeat(auto-fit, minmax(220px, 1fr))gapobject-fit: cover分区纵向堆叠，团队与价值观用 auto-fit 网格；头像统一正方形并 object-fit: cover，避免拉伸。长页在分区进入时做轻微淡入，需尊重 prefers-reduced-motion；文字与图片的对比度要达 WCAG AA。
相关概念
以圆形或圆角方形小图代表用户或组织：照片、姓名首字母或图标占位。 常与姓名一起出现在导航、评论与成员列表，可附在线状态点或多人叠加。
组件包含组件沿时间顺序组织事件的展示组件，通过时间、节点和内容说明事件之间的先后关系。它适合展示活动日志、项目进展或订单状态。时间线呈现已经发生或计划发生的事件，而步骤条强调需要用户完成的任务阶段；当事件可展开时，应保留事件标题和时间，避免用户失去位置。
组件包含组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件包含组件元素滚动进入视口时才播放淡入、上浮或滑入动画，之前保持隐藏或占位。 把"一次性呈现全部内容"变成"随阅读节奏逐段揭示"，让长页面的信息 更有秩序感。通常由 IntersectionObserver 触发，只播一次。
动效搭配使用收集访客留言并提供多种联系渠道的页面：主表单只问必要字段（姓名、邮箱、主题、留言），提交后给出明确成功反馈；旁边或下方并列邮箱、电话、地址与社交入口，再用简短 FAQ 拦下高频问题。
页面相似概念