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 組件爲基本動畫框架,隨滾動來完成頁面的進出場效果。

 

設計資源

我們提供完善的設計規範、最佳實踐和設計資源文件 Sketch,來幫助業務快速設計出高質量的產品原型。

 

誰在使用

目前 Ant Design 旗下產品全部使用 Landing 搭建,如果你和你的組織使用了這個產品,歡迎到 Ant Design Landing Users 留言。

 

For 設計者

如果你是產品或設計師,你可以找到相關模板或各模塊的 Sketch 設計資源,大幅度提升設計效率和溝通效率。

 

For 開發者

如果你是工程師,只需將你下載的以『Home』爲名的文件包替換掉你的項目裏的首頁即可,具體介紹請查看 使用文檔

 

如何貢獻

我們歡迎任何形式的貢獻,有任何建議或意見,請給我們 提問

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章