歌唱名師形象網站重建｜碎片經歷到可視化信任
把散落在各處的經歷與素材，整理成一個讓陌生人也能快速理解與信任的介紹頁。
挑戰｜資訊很完整，但沒有主線
- 得獎、評審、教學、活動經驗全部混在一起，看不出重點
- 內容靠口頭補充，網站本身無法完整說明『為什麼要選這位老師』
- 照片素材有限，只有少量學員合照與活動紀錄
- 看完需要問好幾次：所以他主要是教什麼？
亮點｜把看不見的經驗，變成看得見的地圖
重點：這是本次最特別的三個設計
- ⭐ 設計互動式SVG熱力地圖，將百餘場評審經歷可視化——滑鼠移到不同縣市，會顯示該地區的服務經歷
- 🖱️ 地圖支援滑鼠拖曳與觸控縮放，不只是裝飾，是真的可以探索的互動元件
- 🔴🔵 雙地圖對比：評審用紅色熱力、主持用藍色熱力，同一套架構區隔兩種專業
- 🔍 完整實作Schema.org結構化資料（Person, Occupation, Place），讓搜尋引擎真正理解這是一位在地的專業老師
- 📸 在照片有限的情況下，用照片牆（object-fit: contain）與網格佈局，讓每張照片都被完整看見
做法｜把碎片整理成一條路
重點：先理解 → 才放心 → 才行動
1
第一步：先定位這是誰
開頭英雄區不直接介紹經歷，而是用全國大賽冠軍和核心信念讓人在第一眼就知道這是誰、他相信什麼。
2
第二步：把經歷可視化
經驗太多太抽象？畫成地圖。多年主持經驗無法被看見？畫成另一張地圖。讓數字和縣市變成可以滑、可以看的互動元件。
3
第三步：資訊階層化
把教學服務、評審經歷、主持經歷、公益活動拆成四個獨立區塊，每個區塊有自己的視覺語言，讓人可以掃描閱讀。
4
第四步：用照片說故事
學員獲獎照片、公益活動紀錄，雖然數量不多，但透過照片牆和卡片網格的編排，讓每一張都被最大化利用。
5
第五步：出口單一
最後聯絡區只留幾個清楚的方向，不分散注意力。
影響｜從『聽說的懷疑』變成『不怕驗證的確認』
100+
場評審經驗可視化
14+
年專業經驗
5
個服務區塊重整
- 📌 來詢問的人已經對老師的經歷有基本理解，問題變得更聚焦
- 🗺️ 地圖互動成為介紹時的話題點，讓抽象的經驗可以被看見和討論
- ⏱️ 說明時間明顯縮短，網站本身就能回答大部分問題
- ✅ 客戶覺得終於有一個地方可以完整介紹自己，不用再靠口頭補充
畫面展示｜匿名結構示意
結構重點
開頭先讓人知道這是誰，而不是直接列出經歷。核心亮點用關鍵詞建立第一印象。（姓名與機構名稱已模糊處理）
結構重點
⭐ 評審熱力地圖：顏色越深代表服務越多。滑鼠移上去會跳出該縣市的詳細經歷。這是本次最大的視覺亮點。
結構重點
🔵 主持熱力地圖：用不同色系區隔，同樣支援互動。雙地圖對比讓兩種專業各自被看見。
結構重點
📸 學員成果照片牆：在照片有限的情況下，用『不裁剪』的方式讓每張照片完整呈現，搭配獲獎標示與學員故事。（學員臉部已模糊處理）
結構重點
🎯 評審/主持邀約統一收在一個區塊，用標籤列出服務類型，讓有需求的單位一眼就知道可以洽詢哪些項目。
註：僅展示頁面結構與資訊排序，內容已匿名處理。
一點反思
這個案子讓我學到，經驗本身是看不見的，我的工作就是把這些抽象的經歷，翻譯成別人可以看見、可以理解、可以信任的畫面。地圖只是一個媒介，真正有價值的是背後的思考：哪些資訊該被放大、哪些該被組織、哪些該被可視化。如果照片可以更多，公益活動的紀錄會更有溫度；但受限於素材，這次用結構和文字補上了視覺的不足，也算是一種解法。