Ant Design Landing 产品首页的设计神器

Ant Design Landing 产品首页的设计神器

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

 

通过在Landing编辑器中，拖拽组件，快速搭建出用户需要的首页

 

作用

• 激发用户的探索兴趣，继续深入访问。

• 引导用户直接购买产品或服务。

• 用户通过提供个人信息或注册来交换一些试用与服务。

• 让用户分享、评论或产生其它一些互动。

 

构成元素

• 全局导航

• 首屏阐述 Banner:

  • USP(unique selling proposition) 产品卖点或价值主张: 产品 logo，名称，slogan， 媒体展示(背景，图片，视频)。

  • CTA(Call-To-Action): 行动按钮，登录/ 注册。

• 分点阐述:

  • 产品特色/优势。

  • 使用方法 + 核心功能 + 解决方案

• 合作伙伴/客户: 成功案例，客户展示，客户证言。

• 价格表

• 团队展示

• 联系我们

• 全局页脚

 

动效

延用 Ant Motion 动画组件与规范，提供基本的动画组件与 banner 切换效果，以 scroll-anim 组件为基本动画框架，随滚动来完成页面的进出场效果。

• 单元素动效执行组件

• 样式进出场组件

• 队列进出场组件

• 文字动效组件

• 随滚动执行效果组件

• Banner 切换效果组件

 

设计资源

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

 

谁在使用

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

 

For 设计者

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

 

For 开发者

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

 

如何贡献

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