以植物療癒為核心的知識型 Web App——把散落各處的精油植物知識,整理成一座可搜尋、可探索的互動資料庫。
A knowledge web app centered on plant healing — gathering scattered essential-oil botany into one searchable, explorable interactive database.
精油與植物療癒的知識,散落在原文書籍、部落格與論壇之間: 同一種植物有好幾個名字,功效說法不一,查一支精油的資料往往要開十個分頁。 對學習芳療的人來說,「查找」本身就是最大的門檻。
植癒之境想解決的就是這件事:一座中文的植物療癒知識庫—— 每種植物有自己的檔案頁,香氣、功效、分類清楚標注, 想找什麼,搜尋一下就有;沒有目標時,也能像逛植物園一樣隨意探索。
這句話定義了整個產品的體驗方向:查得快,也逛得舒服。
Knowledge about essential oils and plant healing is scattered across books, blogs, and forums: one plant carries several names, claims vary, and researching a single oil means ten open tabs. For anyone learning aromatherapy, the looking-up itself is the biggest barrier.
Essencepedia set out to fix exactly that: a Chinese-language plant-healing knowledge base — every plant gets its own profile page with aroma, benefits, and categories clearly tagged. Looking for something? Search and it's there. No target in mind? Wander like you would through a garden.
That sentence defined the product's experience: fast to search, pleasant to browse.
資料型產品最怕做成冷冰冰的表格。植癒之境的介面刻意「輕」: 乾淨的紙白基底、以植物攝影為主角的卡片, 每張卡片就是一種植物的名片——照片、名稱、香調一眼掌握,點進去才展開完整檔案。
互動設計圍繞兩種使用情境:目標明確的查找(頂部搜尋+側欄的香氣與分類篩選,全程即時響應) 與漫無目的的探索(卡片網格自由捲動,靠攝影與色彩引導視線)。 兩條路徑都通向同一個植物檔案頁。
資訊設計上最重要的決定:把「香氣分類」做成第一級的導覽語言。 花香、草本、木質、柑橘——芳療使用者本來就是這樣思考的, 介面只是順著他們的直覺鋪路。
Data products risk feeling like cold spreadsheets. Essencepedia's interface stays deliberately "light": a clean paper-white base and photography-led plant cards — each card a plant's calling card with photo, name, and aroma at a glance, expanding into a full profile on click.
Interaction is built around two modes: targeted lookup (top search plus aroma/category filters in the sidebar, all responding instantly) and aimless exploration (a free-scrolling card grid guided by photography and color). Both paths lead to the same plant profile.
The key information-design call: aroma families are the first-level navigation language — floral, herbal, woody, citrus. That's how aromatherapy users already think; the interface just paves their intuition.
這是一個以「查詢體驗」為核心的 React Web App。 搜尋與篩選都在前端即時完成——輸入關鍵字的每一個字、點下每一個香氣標籤, 結果都即刻更新,沒有等待載入的斷裂感。
工程重心其實在看不見的地方:植物資料的結構設計。 名稱(中文、英文、學名)、香調、功效、分類、注意事項——欄位定義好了, 搜尋、篩選、檔案頁全都是同一份資料的不同視角,日後擴充新植物也只是多一筆資料。
This is a React web app built around the lookup experience. Search and filtering happen instantly on the client — every keystroke, every aroma tag tap updates results immediately, with no loading gaps.
The real engineering lives where you can't see it: the plant data model. Names (Chinese, English, botanical), aroma family, benefits, categories, cautions — once the fields were defined, search, filters, and profile pages became different views of the same data, and adding a new plant is just one more record.
上線後,原本要開十個分頁才拼得齊的植物知識,現在一個網站就查完: 搜尋、篩選、比較、深入閱讀,動線一氣呵成。 結構化的資料庫也讓內容能持續擴充,越長越大而不會越長越亂。
Plant knowledge that once took ten open tabs now lives in one place: search, filter, compare, and read deeply in a single flow. The structured database keeps growing bigger without growing messier.