• 關於
  • 服務
  • 作品
  • 報價
  • 聯絡
取得報價→
  • 關於
  • 服務
  • 作品
  • 報價
  • 聯絡
作品集/N° 03

Web App · 應用程式

Essencepedia

植癒之境

以植物療癒為核心的知識型 Web App——把散落各處的精油植物知識,整理成一座可搜尋、可探索的互動資料庫。

客戶
Essencepedia · 植癒之境
類型
知識型 Web App · 資料庫
時程
2025
服務
設計 · 開發 · 資料架構
連結
essencepedia.com ↗
Essencepedia 首頁截圖
Essencepedia
essencepedia.com ↗

01 / Background

客戶背景
與面臨的問題。

N° 03

精油與植物療癒的知識,散落在原文書籍、部落格與論壇之間:同一種植物有好幾個名字,功效說法不一,查一支精油的資料往往要開十個分頁。對學習芳療的人來說,「查找」本身就是最大的門檻。

植癒之境想解決的就是這件事:一座中文的植物療癒知識庫——每種植物有自己的檔案頁,香氣、功效、分類清楚標注,想找什麼,搜尋一下就有;沒有目標時,也能像逛植物園一樣隨意探索。

知識庫不該像一本字典,而該像一座可以散步的植物園。

這句話定義了整個產品的體驗方向:查得快,也逛得舒服。

02 / Design

設計決策
與系統建構。

N° 03

資料型產品最怕做成冷冰冰的表格。植癒之境的介面刻意「輕」:乾淨的紙白基底、以植物攝影為主角的卡片,每張卡片就是一種植物的名片——照片、名稱、香調一眼掌握,點進去才展開完整檔案。

互動設計圍繞兩種使用情境:目標明確的查找(頂部搜尋+側欄的香氣與分類篩選,全程即時響應)與漫無目的的探索(卡片網格自由捲動,靠攝影與色彩引導視線)。兩條路徑都通向同一個植物檔案頁。

資訊設計上最重要的決定:把「香氣分類」做成第一級的導覽語言。花香、草本、木質、柑橘——芳療使用者本來就是這樣思考的,介面只是順著他們的直覺鋪路。

Paper White
紙白基底
Leaf Green
葉綠
Petal Pink
花瓣粉
Pollen Gold
花粉黃
Ink
深墨文字

03 / Tech

技術選型
與工程取捨。

N° 03

這是一個以「查詢體驗」為核心的 React Web App。搜尋與篩選都在前端即時完成——輸入關鍵字的每一個字、點下每一個香氣標籤,結果都即刻更新,沒有等待載入的斷裂感。

工程重心其實在看不見的地方:植物資料的結構設計。名稱(中文、英文、學名)、香調、功效、分類、注意事項——欄位定義好了,搜尋、篩選、檔案頁全都是同一份資料的不同視角,日後擴充新植物也只是多一筆資料。

App
React
Type
Web App
Search
即時篩選
Data
植物資料庫
UI
卡片系統
Media
植物攝影
Domain
essencepedia.com
RWD
全裝置

04 / Results

成果展示
與交付內容。

N° 03

上線後,原本要開十個分頁才拼得齊的植物知識,現在一個網站就查完:搜尋、篩選、比較、深入閱讀,動線一氣呵成。結構化的資料庫也讓內容能持續擴充,越長越大而不會越長越亂。

Desktop · 首頁
Desktop · 首頁
Mobile · 搜尋
Mobile · 搜尋
1
植物資料庫
結構化檔案
2
探索路徑
搜尋 · 漫遊
100%
響應式設計
手機 · 平板 · 桌機
2025
正式上線
essencepedia.com

Next · 下一件

H. Manor →

N° 01 · 精油芳療課程電商平台

看下一件→想開始類似的專案
Flowing Light
流光拾曜

Your brand, brilliantly built.

Pages

  • 關於
  • 服務
  • 作品
  • 報價
  • 聯絡

Services

  • 形象官網
  • 電商網站
  • 一頁式銷售頁
  • 行銷顧問

Contact

  • tinakungk@gmail.com
  • Instagram
  • LINE 官方帳號
© 2026 Flowing Light 流光拾曜
隱私權Taipei · Remote Worldwide