# Hana 登場 - Spline blog (https://spline.design/zh-hant/blog/introducing-hana)

> 為互動設計而生的全新畫布。

[部落格](https://spline.design/zh-hant/blog)

2025年4月23日

# Hana 登場

為互動設計而生的全新畫布。

[開啟 Hana](https://app.spline.design)

Hana 為互動設計帶來全新的做法。Hana 以效能為核心從零打造，是一個即時畫布，讓你設計並製作互動式 2D 體驗的動畫，從精緻的介面到動態視覺，再交付到正式環境。

Hana 讓你在快速、無限的畫布上，打造以狀態為基礎、會運作、會回應、會反應的豐富內容。

移動滑鼠或觸碰即可互動（以 Hana 打造的體驗）

## 能力

為了 Hana，我們打造了一種新型的渲染引擎，能即時、非常快速地處理向量資料。它讓創作者在一個可協作、原生於瀏覽器的環境中，使用現代化的向量網路編輯、以狀態為基礎的過渡，以及 GPU 加速的效果。

你在 Hana 中設計的一切，預設就能直接上線。無論是簡單的形狀，還是複雜的互動體驗，Hana 的引擎都能處理即時互動，並輕鬆嵌入任何網站或 App。

從精準的向量繪製到柔和的陰影與模糊，Hana 以一種輕盈卻沒有極限的方式，結合了強大與簡單。

以 Hana 打造的體驗

## 即時設計協作

Hana 中的畫框可以是能獨立運作、可播放的元件，全部在編輯器內完成。這省去了「Animate」模式，簡化創作流程。你只要在編輯器中直接在畫框上播放，就能與你的體驗互動。畫框也能個別匯出為即時網址，未來還會支援圖片等更多格式。

分享連結，協作者就能立即加入，體驗並參與你的畫布。每次編輯都即時呈現，意見回饋即時送達。它從設計之初就是多人協作的，而且做得恰到好處。

Hana 沿用了 Spline 3D 編輯器早已支援的即時協作系統，讓你的團隊行動更快、保持同步。

以 Hana 打造的向量網路

## 即時向量網路

向量網路（Figma 於 2016 年提出的概念）讓兩條以上的線段能連接到同一個點，更容易建立各種形狀。

Hana 把這個做法帶到新的層次，推出第一個能在即時環境中建立向量網路的系統。

此外，多層布林運算讓你能打造進階形狀和流體效果，輕鬆做出複雜、可動畫化的形狀。

## 互動與動畫

使用事件驅動的互動，為你的設計加入行為，從懸停狀態到鍵盤輸入都可以。直接在畫布上製作過渡動畫、建立流程並實驗動態，不必切換工具。

有了 Hana，動態與互動成為設計流程的一部分，而不是事後才補上的東西。

## 匯出與分享到正式環境

和 Spline 的 3D 編輯器一樣，在 Hana 中，你可以從任何畫框產生即時互動連結。一切都已針對嵌入正式環境進行最佳化，讓你的作品部署後看起來和在編輯器中一樣出色。

## 互動的新時代

這是一種用於互動思考的新媒介。無論你是在設計產品、打造 UI 互動，還是創作豐富的互動體驗，Hana 都能幫助你實現想法。

**Hana 是未來更多可能的基礎。**

這是邁向更宏大願景的第一步，也就是現在的 Spline 生態系：2D/3D 設計與互動在其中無縫融合與部署。

我們迫不及待想看到你用 Hana 創作的作品！

— Spline 團隊 🌸

[了解更多](https://docs.spline.design/doc/what-is-hana/doccoU2VnAOm)

## 更多部落格文章

[2026年11月3日Spline Arena 登場](https://spline.design/zh-hant/blog/introducing-spline-arena)[2026年10月21日Spline for ChatGPT 登場](https://spline.design/zh-hant/blog/introducing-spline-for-chatgpt)[2026年8月27日Hana V2 登場](https://spline.design/zh-hant/blog/hana-v2)

[Spline](https://spline.design/zh-hant)

為團隊及其 AI 代理打造的 3D 與 2D 編輯器。一鍵發布到網頁、iOS 和 Android。

#### 向 AI 詢問 Spline

#### 產品

- [3D 設計](https://spline.design/zh-hant/3d-design)
- [Hana](https://spline.design/zh-hant/hana)
- [Omma](https://omma.build)
- [AI 3D 生成](https://spline.design/zh-hant/ai-generate)
- [Spline MCP](https://spline.design/zh-hant/mcp)
- [Spline Arena](https://spline.design/zh-hant/arena)
- [價格](https://spline.design/zh-hant/pricing)
- [企業](https://spline.design/zh-hant/enterprise)

#### Runtime

- [Web](https://spline.design/zh-hant/web)
- [iOS](https://spline.design/zh-hant/ios)
- [Android](https://spline.design/zh-hant/android)

#### App

- [下載](https://spline.design/zh-hant/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [下載 Spline Mirror](https://spline.design/download-mirror)

#### 學習

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/zh-hant/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [解決方案](https://spline.design/solutions)

#### 社群

- [Spline 社群](https://community.spline.design)
- [Blog](https://spline.design/zh-hant/blog)
- [更新日誌](https://spline.design/zh-hant/changelog)
- [教育](https://spline.design/zh-hant/education)
- [Contra](https://spline.design/contra)
- [聯盟行銷](https://spline.design/zh-hant/affiliate)

#### 公司

- [客戶](https://spline.design/zh-hant/customers)
- [工作機會](https://www.ycombinator.com/companies/spline/jobs)
- [安全性](https://spline.design/zh-hant/security)

#### 法律資訊

- [條款與細則](https://spline.design/terms)
- [隱私權](https://spline.design/privacy)

#### 聯絡我們

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.