產品

Lottielab

面向產品團隊及設計師的網頁動效設計工具,可建立和編輯 Lottie 動畫並發布到應用和網站。

lottielab.com Discord設計 / UI/UX 設計與原型

AI 競品立項評估
電腦版
行動端
每月造訪次數
228.6K
上升13.1%較上月2026 年 9 月
公開營收
未公開
暫無公開營收證據
入門價
未知
收費方式為免費增值,方案價格尚未識別
創作者
Andrew Ologunebi
@drewosophy· 737 追蹤與 Ayo Oluwanusin、Harvey 等 4 人 共創
首次發布
3 年前
2023-08-15 · 估算

訪問

每月造訪次數資料截至 2026 年 9 月 · 2026 年 10 月待更新
事件3 個變化

行銷動作

發布、搜尋與內容、引薦、促銷
  • 在 Product Hunt 發布發布

    The easiest and most powerful motion design tool for teams

    2024 年 12 月 16 日 · 23 個月前發布頁

  • 在 Show HN 發布(23 分 · 6 評論)發布

    Create interactive vector animations with Lottielab Interactivity — I'm excited to announce the release of Lottielab Interactivity, an open standard for defining interactive state machines in files conformi…

    2024 年 8 月 13 日 · 2 年前發布頁

  • 在 Product Hunt 發布發布

    Create and export interactive Lottie animations easily

    2024 年 8 月 13 日 · 2 年前發布頁

  • 在 Product Hunt 發布發布

    Publish optimised animations to your site or app in 1-click

    2024 年 5 月 30 日 · 2 年前發布頁

  • 在 Show HN 發布(154 分 · 57 評論)發布

    Lottielab – Create product animations in the browser easily — Hi HN! Today we are releasing Lottielab, a web-based animation tool, to the public as an open beta. The main tool for editing and exportin…

    2023 年 8 月 15 日 · 3 年前發布頁

第三方評測與案例拆解

客戶來源管道拆解、工程師評測與開源檔案
Show HN
2023-08-15查看原文
創作者原帖摘錄:
Hi HN! Today we are releasing Lottielab, a web-based animation tool, to the public as an open beta. The main tool for editing and exporting Lottie animations today is Adobe After Effects, a 30-year-old visual effects tool that’s not fit for this purpose, has a steep learning curve, and requires a patchwork of error-prone plugins. With Lottielab, we are aimin
Show HN
2024-08-13查看原文
創作者原帖摘錄:
I'm excited to announce the release of Lottielab Interactivity, an open standard for defining interactive state machines in files conforming to the popular Lottie format. Along with this standard, we're releasing native support for creating, previewing and sharing such interactive animations in the Lottielab editor, similarly to Rive. We are also releasing L

流量來源

2026 年 9 月

訪問構成

管道

  • 自然搜尋56%
  • 直接訪問32%
  • 外部引薦6%
  • 社交媒體4%
  • 其他2%

國家/地區

  • 印度13%
  • 宏都拉斯12%
  • 美國8%
  • 土耳其5%
  • 德國4%

搜尋

站點權重 —網域名稱註冊 2019-09-27

關鍵字月搜尋量
lottie64.9K
lottielab5,870
lottie viewer3,360
json to mp42,480
lottie to mp41,010

流量資料:Vaneform

定價

Free
未知
Unlimited files · Upload lottie & svg files · Import from figma · Export to gif & mp4
Pro
未知
Export to lottie · Export HD and 4K video · Team library & shared files · Comments & mentions · Unlimited collaborators (viewers) · File size optimization
Enterprise
未知
Dedicated account contact · Custom payment methods · Legal & compliance support · Onboarding assistance

試用:未提供 · 設企業客製化檔 · 觀察於 2026-11-03 · 原定價頁

頁面與變化

開始記錄於 2023-08-15

關鍵頁面

每週快照
www.lottielab.com/ 快照 2026-11-04

變化

  1. 11 月 1 日 · 14 天前

    移除技術棧:Sentry功能

    Sentry→—

  2. 11 月 1 日 · 14 天前

    新增採用技術棧:Tailwind CSS功能

    —→Tailwind CSS

  3. 11 月 1 日 · 14 天前

    移除技術棧:cdnjs功能

    cdnjs→—

設計

首屏畫面視覺分析與 :root CSS

純白底配深色與紫色雙色大標題,細線頂欄分隔,膠囊紫按鈕居中,下方灰字資料與品牌標誌橫排。

首屏畫面預覽 · 點擊放大

首屏畫面講了什麼與轉化路徑

“The motion design tool for product teams”

頂欄下居中標題、說明與按鈕,再接信任資料句與標誌牆。

首屏畫面轉化路徑:居中標題加按鈕 + 純排版與圖形幾何 → 免費開始 / 立即註冊 · 配合客戶或媒體標誌牆建立信任

色板 · 點擊複製

五維設計評分7.3 / 10
字體與排版
8.0
色彩與對比
7.0
構圖與留白
8.0
細節與工藝
7.0
風格辨識度
6.0

結構

字體
Inter
首屏畫面版式
居中標題加按鈕
主視覺
純排版與圖形幾何
信任背書
客戶或媒體標誌牆
導航
頂部通欄導航
明暗與密度
淺色 · 留白多
圓角與層級
膠囊 · 細線分層
預覽 AI 設計說明全文(含 :root CSS 變量與版式規則)只寫風格參數,禁止復刻該產品的品牌名、標誌、文案與圖片
# 設計說明:極簡單色

黑白灰加一個強調色,細線分隔,大量留白,靠字號與字重分層級。

## 設計參數

```css
:root {
  --background: #ffffff;
  --surface: #f4f5f7;
  --foreground: #1c1a33;
  --muted-foreground: #8e8e9a;
  --accent: #7b6cf6;
  --radius: 9999px;
  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
}
```

色彩面積配比:背景 #FFFFFF(約 62%) · 面板 #F4F5F7(約 14%) · 正文 #1C1A33(約 10%) · 次要文字 #8E8E9A(約 8%) · 強調 #7B6CF6(約 6%)。背景與面板占絕大部分面積,強調色只用於主按鈕與當前激活狀態。

## 版式與轉化結構

- 首屏畫面版式:居中標題加按鈕
- 導航結構:頂部通欄導航
- 明暗與密度:淺色 · 留白多
- 圓角與層級:膠囊;不用陰影,用細線與留白區分層級
- 主視覺載體:純排版與圖形幾何
- 轉化動作:免費開始 / 立即註冊 · 信任背書採用客戶或媒體標誌牆
- 標題切入點:品類定位錨點
- 首屏畫面元件特徵:資料指標欄、客戶標誌牆
- 空間布局拆解:頂欄下居中標題、說明與按鈕,再接信任資料句與標誌牆。
- 視覺特徵總結:純白底配深色與紫色雙色大標題,細線頂欄分隔,膠囊紫按鈕居中,下方灰字資料與品牌標誌橫排。

## 避免

- 多種強調色並用
- 漸層背景
- 重陰影

請按上面的設計參數與版式實現介面:顏色只用這些變量,強調色只給主要操作與當前狀態。只採用這種風格,禁止復刻任何參考產品的品牌名、標誌、文案與圖片。

問題與證據

Lottielab 的價格是多少?
Free: 未知; Pro: 未知; Enterprise: 未知. 觀察於 2026-11-03。 當前計費條件、用量限制與稅費以來源頁面為准。來源
Lottielab 的網站造訪次數是多少?
Vaneform 估算 2026-09 網站造訪次數為 228.6K。造訪次數包含重複訪問,付費客戶數與收入需分別查看對應證據。來源
Lottielab 是什麼產品,支援哪些平台?
Lottielab 歸屬「UI/UX 設計與原型」市場領域:Lottielab 是一款面向產品團隊及設計師的網頁動效設計工具,可建立和編輯 Lottie 動畫並發布到應用和網站。。 支援平台包括:僅網頁。

同分類研究對象

設計 / UI/UX 設計與原型

這些產品屬於同一目錄分類。選型時請進一步核對客戶任務、功能與部署要求。

查看「UI/UX 設計與原型」全部產品與定價基準 →