---
order: 0
title: 
  zh-CN: 介绍
  en-US: Introduce
---



<div class="file-logo">
  <div class="ant-logo">
   <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" height="100%"/>
  </div>
  <span>+</span>
  <div class="landing-logo">
    <img src="https://gw.alipayobjects.com/zos/rmsportal/SVDdpZEbAlWBFuRGIIIL.svg" height="100%">
  </div>
</div>

Ant Design Landing 是针对产品首页的解决方案，我们秉承 [Ant Design](https://ant.design) 的 [设计价值观](https://ant.design/docs/spec/introduce-cn)，延用 [Ant Design](https://ant.design) 的 [设计原则](http://ant.design/docs/spec/proximity-cn)，可以快速搭建出你想要的首页，进一步提升你的工作效率。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多首页模块的代码实现，阐述首页(Landing page)的最佳实践，也十分期待你的参与和共建。

## 作用

- 激发用户的探索兴趣，继续深入访问。
- 引导用户直接购买产品或服务。
- 用户通过提供个人信息或注册来交换一些试用与服务。
- 让用户分享、评论或产生其它一些互动。

## 构成元素

- 全局导航
- 首屏阐述 Banner:
  > - USP(unique selling proposition) 产品卖点或价值主张: 产品 logo，名称，slogan， 媒体展示(背景，图片，视频)。
  > - CTA(Call-To-Action): 行动按钮，登录/ 注册。
- 分点阐述: 
  > - 产品特色/优势。
  > - 使用方法 + 核心功能 + 解决方案
- 合作伙伴/客户: 成功案例，客户展示，客户证言。
- 价格表
- 团队展示
- 联系我们
- 全局页脚

### 动效

延用 [Ant Motion](https://motion.ant.design) 动画组件与规范，提供基本的动画组件与 banner 切换效果，以 `scroll-anim` 组件为基本动画框架，随滚动来完成页面的进出场效果。

- [单元素动效执行组件](https://motion.ant.design/components/tween-one)
- [样式进出场组件](https://motion.ant.design/components/animate)
- [队列进出场组件](https://motion.ant.design/components/queue-anim)
- [文字动效组件](https://motion.ant.design/components/texty)
- [随滚动执行效果组件](https://motion.ant.design/components/scroll-anim)
- [Banner 切换效果组件](https://motion.ant.design/components/banner-anim)

## 设计资源

我们提供完善的设计规范、最佳实践和设计资源文件 Sketch，来帮助业务快速设计出高质量的产品原型。


## 谁在使用

目前 Ant Design 旗下产品全部使用 Landing 搭建，如果你和你的组织使用了这个产品，欢迎到 Ant Design Landing Users 留言。


### For 设计者

如果你是产品或设计师，你可以找到相关模板或各模块的 Sketch 设计资源，大幅度提升设计效率和沟通效率。

### For 开发者

如果你是工程师，只需将你下载的以『Home』为名的文件包替换掉你的项目里的首页即可，具体介绍请查看 [使用文档](/docs/use/getting-started)。


## 如何贡献

我们欢迎任何形式的贡献，有任何建议或意见，请给我们 [提问]()。
