Web App · 應用程式
Essencepedia
以植物療癒為核心的知識型 Web App——把散落各處的精油植物知識,整理成一座可搜尋、可探索的互動資料庫。
- 客戶
- Essencepedia · 植癒之境
- 類型
- 知識型 Web App · 資料庫
- 時程
- 2025
- 服務
- 設計 · 開發 · 資料架構
01 / Background
客戶背景
與面臨的問題。
精油與植物療癒的知識,散落在原文書籍、部落格與論壇之間:同一種植物有好幾個名字,功效說法不一,查一支精油的資料往往要開十個分頁。對學習芳療的人來說,「查找」本身就是最大的門檻。
植癒之境想解決的就是這件事:一座中文的植物療癒知識庫——每種植物有自己的檔案頁,香氣、功效、分類清楚標注,想找什麼,搜尋一下就有;沒有目標時,也能像逛植物園一樣隨意探索。
知識庫不該像一本字典,而該像一座可以散步的植物園。
這句話定義了整個產品的體驗方向:查得快,也逛得舒服。
02 / Design
設計決策
與系統建構。
資料型產品最怕做成冷冰冰的表格。植癒之境的介面刻意「輕」:乾淨的紙白基底、以植物攝影為主角的卡片,每張卡片就是一種植物的名片——照片、名稱、香調一眼掌握,點進去才展開完整檔案。
互動設計圍繞兩種使用情境:目標明確的查找(頂部搜尋+側欄的香氣與分類篩選,全程即時響應)與漫無目的的探索(卡片網格自由捲動,靠攝影與色彩引導視線)。兩條路徑都通向同一個植物檔案頁。
資訊設計上最重要的決定:把「香氣分類」做成第一級的導覽語言。花香、草本、木質、柑橘——芳療使用者本來就是這樣思考的,介面只是順著他們的直覺鋪路。
03 / Tech
技術選型
與工程取捨。
這是一個以「查詢體驗」為核心的 React Web App。搜尋與篩選都在前端即時完成——輸入關鍵字的每一個字、點下每一個香氣標籤,結果都即刻更新,沒有等待載入的斷裂感。
工程重心其實在看不見的地方:植物資料的結構設計。名稱(中文、英文、學名)、香調、功效、分類、注意事項——欄位定義好了,搜尋、篩選、檔案頁全都是同一份資料的不同視角,日後擴充新植物也只是多一筆資料。
04 / Results
成果展示
與交付內容。
上線後,原本要開十個分頁才拼得齊的植物知識,現在一個網站就查完:搜尋、篩選、比較、深入閱讀,動線一氣呵成。結構化的資料庫也讓內容能持續擴充,越長越大而不會越長越亂。

