本頁目錄
內部文件 · 請勿外流

蔚禾身心診所官網案 · 事件與說明

本頁供山川內部交接使用，讀者為公司管理層與接手本案的業務。 目的是讓未參與過程的人，能在一頁內完整、對齊現況地掌握：發生了什麼、一度為何看似卡住、現在方向如何收斂， 以及三個設計版本（A／B／C）各在什麼狀態。過程中的落差源於「資訊分散／單面傳遞」這個流程性原因， 本頁只擺事實、不評論個人；先前看似對立的「粒子之爭」，經溯源與客戶 5/29 親自拍板水波後，已實質解除。

客戶：蔚禾身心診所（身心／精神科） 我方：山川久也設計公司（設計乙方） 整理日期：2026-05-29 上線期限：2026 年六月底

00摘要 TL;DR

  1. 我們替蔚禾身心診所做官網，六月底要上線，wireframe／設計需多次來回，前後端開發時間被壓縮。
  2. 看似的「粒子之爭」已實質解除：客戶從來沒有否決粒子，前兩天看起來像對立，是一場因資訊分散造成的「誤讀」（把客戶不要的「自動動畫」誤接到設計師做的「點擊粒子」上，方向其實相反）。客戶真正的軸線是「使用者觸發 ✅ vs 自動播放 ❌」，而 demo 實測本就 100% 點擊觸發、零自動播放。唯一的落差只在特效的長相（flavor）；而 5/29 客戶已親自拍板「就用第二個 demo 的特效（點擊水波）來做調整」，連長相方向也定了。現在進入「把水波點擊特效的感覺調對」的執行階段，方向已對齊。
  3. 目前有三個版本，均需依官方需求（多頁式架構、首頁移除預約、Intro 街頭攝影、點擊水波特效）重新補驗：A 版（Dawa）最接近官方方向，但 footer 缺基本資訊、Hero 仍是滿版背景圖、有死碼殘留；B 版（叔叔）動態手法幾乎踩滿客戶「不要清單」、入口又藏在「i」鈕後，需較多調整；C 版（V3）在 B 的骨架上修掉最多問題、修正度最高，只剩 Intro 開門頁的自動進場動態與假電話／門診時間不一致等資料債未清。
  4. 難得的好消息：三條獨立來源指向同一答案——水波／承接回彈。客戶 5/29 要的「水波紋／承接回彈」＝官方品牌 Logo 的「水波／分層堆疊」＝設計校正主推的「水・漣漪」，本案設計方向其實異常清晰。
  5. 過程中有善意投入（多版設計、補一批批 ref、即時回覆），也有資訊分散下的溝通落差（措辭歧義、單面傳遞）；爭議解除後關係已進入協作執行階段。要不要繼續（keep vs walk）仍是管理層的決定，本頁只把事實擺清楚，不替管理層選擇。

01專案基本盤

團隊角色

方代號角色本案動作
我方
山川久也		陳建綸 Alan對外窗口／PM／業務電話與 LINE 主要發言者；以成交為先、調性多變，是正常且該被尊重的業務角色
徐鉦坤 RonePM／文案＋動態 ref 溝通建群、定時程；提供 ref 連結
許辰輝 Dawa設計師（A 款作者）5/27 10:40 被加入外部群組，需快速進入狀況
「叔叔」設計師（B 款作者）會議當天請假；B 款由其設計
客戶
蔚禾		Carter aka 阿麵客戶端窗口全程清楚表達需求：要使用者觸發的互動反饋、不要自動播放；5/29 已親自拍板用點擊水波特效
窗口位置提醒

Carter 是客戶窗口，實質夾在「我方」與「診所內部（其主管／合夥醫師）」之間。診所內部對山川的觀感，幾乎全透過 Carter 過濾——因此把資訊一次對齊、讓 Carter 好對內溝通，是後續協作的關鍵。

時程與風險

  • 六月底須上線（硬期限）。
  • 功能需求不複雜，但設計端可能多次來回修改 → 前後端開發時間被壓縮的風險（Rone 於內部群組啟動時即點明）。
  • wireframe 原訂「盡量本週定稿」。

資料連結

02客戶要什麼（需求單一真相）

整理自會議逐字稿、5/27 Carter 的 recap，以及官方品牌網站規劃。★ 代表客戶重複強調 ≥2 次（最在意、最不容許再犯）。

官方品牌規劃定下的需求（前置基準）

以下整理自官方品牌網站規劃文件（noodio）與客戶回饋，是先於會議細節的架構性需求，三個版本都應以此為基準補驗。

#需求重複
1整站多頁式架構：PC 選單點擊跳「子頁」，非錨點跳轉、非單頁長捲
2首頁移除線上預約：拿掉 Line 預約／預約方式，改為「聯繫我們」按鈕
3Intro 使用 7–10 張台灣街頭攝影（非診所空間照，攝影為主體）
4微動態定調：像呼吸一樣自然而不張揚、不喧賓奪主（攝影才是主體）、低硬體門檻、桌機＋手機皆可★
5品牌唯一圖形語言：Logo「水波／分層堆疊」圓形符號（呼應禾＝穀物、承接、層層包覆）
6品牌 slogan「成為溫柔承接的容器」；UX 主張＝讓使用者「被看見」

明確要的（會議與 recap）

#需求重複
1「動態」= 使用者操作（滑鼠點擊／拖曳／手機點按）才產生的視覺反饋特效，純好玩好看、無功能性（如點擊出現彩帶／紙屑般動態，無聊時可一直點）★
2此點擊反饋特效要能在不同裝置／平台都運作★
3版面內容「簡單就好」，重點放在動態（點擊反饋）設計
4使用者依自己節奏閱讀，自行決定觀看的時機與順序★
5給使用者「安穩、舒適、安定、穩定」的體驗（仍是診所網站）★
6資訊「一層一層、按節奏慢慢揭露」，非快速資訊路線
7Intro page／排版顧及 UX，入口清楚、知道如何進站、不迷路★
8最下方 footer 要保留基本資訊（A 款被拿掉的請補回）
9資訊呈現順序依先前線稿
10照片素材後續全換成診所空間照片
11照片比例縮小（線稿已要求），非滿版
12若仍主張粒子／灰塵，須提出「為何粒子／灰塵適合身心科」的真實論述，否則改方向

明確不要的（會議與 recap）

#不要重複
1不要各角落塞動畫（選單動畫、進主頁文字逐字跑出等「整體動態」），整體動態盡量減少（避免裝置負擔／lag）★
2不要錨點跳轉／畫面跳轉★
3不要自動播放的動畫★
4不要圖片自動輪播／跑馬燈★
5不要畫面資訊不按操作、自己 run（「拉著使用者跑」）★
6不要干擾閱讀的動態（如文字柔焦出現、手機版字模糊）
7不要直式排版（文字量少會困惑左右讀、下滑被切）
8不要 intro 一進去就揭露診所全部完整資訊
9不要一進來就是滿版大照片
10不要照片上下錯落、未對齊（氛圍不夠穩重安定）
11不要嵌入影片（沒有影片需求）
12不要 guideline 沒有的圖形、背景裝飾性圖形、新創的東西（沙丘浮水印、banner 的雲可拿掉）★
13不要「爆散星點」那種活潑 flavor（過於清新活潑，不符沈穩品牌）——要的是水波／承接回彈（5/29 客戶已親自指定）。注意：這是「不要那個長相」，不是「不要點擊觸發特效」

取捨張力（彼此可能衝突，需權衡）

以下是客戶語句中客觀存在的張力，不含我方主張：

  • 「點擊互動要好玩、可一直點」 vs 「整體氛圍要安定穩重」 — flavor 已定為水波（5/29 客戶拍板），張力收斂為「水波互動的趣味性 vs 沈穩調性」的參數拿捏（振幅、配色、回彈程度），不再是「該不該用粒子」的方向之爭。
  • 「動態是網站重點」 vs 「整體動態盡量減少」 — 「動態重點」僅限點擊反饋這一塊，其餘一律收斂，邊界要明確界定。
  • 「資訊一層層慢慢揭露」 vs 「入口要直覺、不迷路」 — 分層探索性與入口可發現性之間要平衡，別為了慢慢揭露而犧牲可發現性。
  • 「互動特效需即時動態」 vs 「動態不干擾閱讀、避免 lag」 — 互動視覺強度與效能成本要在不影響閱讀、不卡頓的前提下實作。

03事件時間軸

涵蓋區間：2026-05-27（三）10:40 至 05-29（五）PM 回覆。紅點為信任受損的關鍵節點；綠點為修補／止血的轉向節點。

  • 05/27（三）客氣，但客戶已先設防線
    • 10:40Alan 把設計師 Dawa 加入外部群組。
    • 10:45Carter 開場即預警：不希望內部分工造成「資訊傳達落差、成果偏離第一線討論」，並舉例「已溝通好的需求沒落實、要避免的卻再次出現」。（這是預警，不是寒暄。）
    • 11:00Carter 五點 recap：①動態僅限「點按才出現的視覺反饋」、其餘整體動態盡量減少；②給安穩自主體驗，避免畫面跳轉／自動播放／跑馬燈；③資訊順序按線稿；④Intro page 別讓人迷路；⑤避免 guideline 沒有的圖形、背景裝飾性圖形。
    • 18:17Carter 問是否也有 layout ref；Alan（18:31）答「先以動態 ref 為主，來得及才一起給 layout」。（客戶此時已明確區分「動態 ref vs layout ref」並在等 layout。）
    • 18:44雙方互道「辛苦了」。（表面溫度最高點，建立在「明天會交出對焦過的東西」的預期上。）
  • 05/28（四）出現裂縫
    • 17:11Rone 給兩個連結：① 牙醫式粒子互動展示頁（可右側調參）；② liquid_light 視覺參考，稱「看整體的風格和視覺感受」。
    • 17:21–17:25Carter 質疑第二連結不像 layout；Rone 改口「都是動態 ref、layout 還在調」。Carter 點明：「因為你說是『整體風格』，我以為要看 layout。」
    • 17:31Carter 問第一連結不論怎麼調是否都只噴粒子；Rone（17:46）確認「是的」，並稱此效果與簡潔留白最搭、是內部篩選後的兩個方向之一。
    • 17:55Carter 轉折：重申「昨天和 Alan 開會已明確強調不要牙醫粒子特效」「自己調過粒子大小與飛散速度確認不適合」，「不太理解這次山川依舊提供粒子特效的原因」，並要求提供內部測試過的其他方向。
    • 18:15Rone 才丟出一批替代 ref（v7.usestate、codepen、tympanus 系列、reactbits splash-cursor 等）——皆為「你碰它就回應」的互動特效，但都不是粒子。
    • 18:55Carter 僅回「感謝。」（單字，溫度明顯下降。）
  • 05/29（五）誤讀被點出 → PM 認錯止血 → 客戶當天親自拍板水波，方向對齊
    • 09:56Alan 書面定調：「參數已預設好、團隊共同討論、較符合蔚禾品牌調性」，附「你碰它它就回應你／不自動播放／不強迫／介於太靜與太動之間」一段論述。
    • 10:49Carter 交代 photo credit 需求（放第二層、字小一點、後台可留空）；Rone 回「收到」。
    • 11:17Carter（兩則）核心質問：① Alan 電話曾說「先用粒子示意、確認參數後再討論造型」，今天為何改口稱團隊覺得粒子＋灰塵較適合？② 09:56 的說明套在任何點擊特效都成立，沒說到為何是「粒子與灰塵」適合身心科；③ 自舉牙醫粒子的合理理由，反問「蔚禾為何適合粒子與灰塵？不然我無法說服內部接受我們一開始就表明不適合的方向」。
    • 11:17 後PM 回覆 Carter（內部對齊前先行回覆）：正面回應、化解誤讀——坦承提案說明描述的是「觸碰後產生非功能性視覺回饋」這個概念，而非某個具體造型，造型此階段仍未定、目前借用きしもと歯科的技術實作方式；向 Carter 與院長致意；最後轉為邀請客戶一起討論什麼視覺形式能傳遞「輕盈、被接住、有所回應」又不違和於診所調性。話題自此從「對焦造型」轉入「協作」。
    • 13:27–13:33Carter 親自拍板（最高權威、方向定案）：「我們就用第二個 demo 的特效（點擊水波）來做調整，希望呈現『被輕穩承接』、物體安穩落地的些微回彈感。」四點執行：① 拿掉探照燈高光，保留點擊時的水波彈彈特效；② 拿掉滑鼠移動時的流動特效（減輕硬體負擔），桌機＋手機都只保留點擊觸發；③ 拿掉手機版點擊處的半透明黑點；④ 點擊水波整體優化成「介於水波與物體震動之間」——不要完全像水、也不要太像固體彈力，目標「安穩承接的回彈感」（客戶附 2 張 ref 圖，待向客戶索取）。並加註全站所有頁面可操作、可連點（無聊想玩可多點）；同時提議與 Alan 快速通話對焦。至此互動方向（點擊觸發）與長相（水波／承接回彈）皆已對齊。

04核心議題：一場已解除的誤讀

先講清楚：這不是「爭議」，是「誤讀」，而且已經解除

前兩天看起來像「客戶反對 vs 我方堅持」的對立，經過溯源 + 客戶 5/29 親自拍板，已證實是一場因資訊分散而被誤讀的假爭議。客戶從來沒有否決粒子——客戶真正的軸線是「使用者觸發 ✅ vs 自動播放 ❌」，而我方 demo 一直都做到了。真正要調的只是特效的長相（flavor），而長相方向客戶 5/29 也已親自指定＝水波／承接回彈。把這件事看懂，整段就從「誰對誰錯」變成「方向其實一直對齊」。

誤讀的結構（方向其實相反）

沒有任何檔案寫過「客戶否決粒子」。實際發生的是一個方向相反的誤接：把會議結論「移除自動動畫／物件自行漂浮」（這是客戶不要的「自動」）誤接到設計師做的「點擊粒子」（這是客戶要的「觸發」）上——一個是自動播放、一個是使用者觸發，兩者方向完全相反。客戶在會議逐字稿親口舉日本網站「點擊出現彩帶、紙屑、純好玩好看的互動」當「主要需要的」方向；而「彩帶紙屑（confetti）」技術上本來就是粒子系統——所以設計師選粒子，是對 brief 最忠實的回應，不是會錯意、也不是抄襲。

demo 點擊觸發實測（QA 已驗）

demo（demo.nsdi.com.tw/2026-Effect/）經實測100% 點擊觸發、零自動播放：emitParticles 只在 click handler 內被呼叫、沒有任何 setInterval、靜止狀態下 framebuffer 零變化，桌機與手機一致。這條結果完全符合客戶「觸發 vs 自動」的那條軸線。

唯一的落差只在「長相 / flavor」

demo 現在是「爆散發光星點（活潑／科技感）」；客戶舉例的是「confetti 彩帶紙屑（柔和飄落）」，加上身心診所要平靜——這是參數／造型調整，不是推翻重做。而 5/29 客戶已直接把這個 flavor 拍板成「水波／承接回彈」，所以連長相的方向也已經有答案了。

客戶 5/29 親自拍板（最高權威，疑慮已由客戶自己解除）

5/29 13:27–13:33，Carter 直接定下方向：「我們就用第二個 demo 的特效（點擊水波）來做調整，希望能呈現『被輕穩承接』、物體安穩落地的些微回彈感。」這封訊息把前兩天看似的「對立」一次收掉——客戶不只沒否決互動方向，還親自把 flavor 一字定為水波。

「我們就用第二個 demo 的特效來做調整，希望能呈現『被輕穩承接』、物體安穩落地的些微回彈感。」

① 拿掉探照燈的高光，保留點擊時的水波那種彈彈特效；② 拿掉滑鼠移動時的流動特效（減輕硬體負擔），不論電腦或手機都只保留點擊觸發；③ 拿掉手機版點擊處的半透明黑點；④ 點擊水波整體優化成「介於水波與物體震動之間」——不要完全像水（脈絡不對）、也不要太像固體彈力（過於活潑），目標是「安穩承接的回彈感」（附 2 張 ref 圖）。另：全站所有頁面都要可操作，可連點（無聊想玩可多點）。並提議與 Alan 快速通話對焦。

— Carter，2026-05-29 13:27–13:33（逐字稿要點；2 張回彈感 ref 待向客戶索取）
三條線收斂：水波／承接回彈

本案目前最值得強調的好消息：三個獨立來源指向同一答案。

  • 客戶 5/29 親自拍板：「保留點擊時的水波那種彈彈特效」「介於水波與物體震動之間」「安穩承接的回彈感」。
  • 官方品牌規劃（noodio）：品牌 Logo＝「水波／分層堆疊」圓形符號，呼應「禾＝穀物」與「承接、層層包覆」；slogan「成為溫柔承接的容器」。
  • 本次設計方向校正：點擊反饋主推「水・漣漪」（同心擴散後沉澱回彈），理由是它直接長在 Logo 的「水波分層堆疊」上。

三者不是勉強湊出的共識，而是客戶直覺、品牌符號、設計校正三條線天然交會。對客的切入點很清楚：你要的水波、你們品牌 Logo 的水波、我們校正後主推的水波，是同一件事——本案方向其實一直走在對的軌道上。

那為什麼一度看似卡住？（流程觀察，非究責）

用「資訊分散導致的誤讀」這個框架，就能看懂為何前兩天卡住，而且語氣中性、不需要點名任何人對錯。簡言之：提案說明描述的是「觸碰後產生非功能性視覺回饋」這個概念，而造型細節（粒子是「水波／光暈／漣漪／彩帶」當中的哪一種長相）在溝通上沒同步交代清楚；當「概念」被當成「已定的造型」單面傳遞出去，收訊端自然會困惑「為什麼是這個長相」。這是訊息流轉的落差，不是任何人的失誤——而且這個落差已由 PM 的回覆與客戶的拍板雙雙解除。

PM 回覆 Carter（原文，供接手者理解協作如何重啟）

關於您提出的核心問題：坦白說，您說得對——我們在提案說明裡描述的是「觸碰後產生非功能性視覺回饋」這個概念，而不是某個具體造型。整個動畫本身在這個階段確實還是不確定怎麼呈現，我們目前借用的是きしもと歯科的技術實作方式。

蔚禾的情境不同，如果某個視覺語言對您來說不夠貼合，可以跟我們分享討論：什麼樣的視覺形式，能在使用者點擊後，傳遞「輕盈、被接住、有所回應」的感受，同時不違和於身心診所的調性。這個討論本來就應該是我們和您一起完成的，而不是我們單方面決定造型後要求您接受。

— PM（陳建綸 Alan），2026-05-29 回覆 Carter（原文）
這封回覆做對的事

把球從「我方單方決定造型」改成「一起討論什麼視覺形式才貼合」，終結了前兩天的概念／造型錯位迴圈，讓話題從對焦造型轉入協作。客戶當天下午（13:27）即以「就用點擊水波來調整」正面回應——協作這條路一接上就立刻產生了方向定案。

05為什麼會走到這（解釋層）

這一段給接手者看脈絡用，框成「流程／溝通問題」，不是個人究責。一句話結論：本案一度看似卡住，是資訊分散造成的誤讀，現在已經對齊。

核心：資訊分散造成的誤讀，現已對齊

一句話收斂

本案的工作一度被分散在不同對話、不同來源各做一半，導致「概念」與「造型」這兩件事在傳遞途中被當成同一件事：提案描述的是「觸碰後產生視覺回饋」這個概念，但被讀成「粒子就是定案造型」。當收訊端拿著「定案造型」去問「為什麼是這個長相」，發訊端卻在解釋「為什麼用這個互動概念」，雙方就會錯身而過——這是訊息流轉的落差，不是任何人的判斷錯誤或誠意問題。

這個落差已被雙重解除：PM 5/29 的回覆把話題拉回「一起討論視覺形式」，客戶 5/29 下午隨即親自拍板水波。誤讀一旦攤開，方向其實清晰得不得了（見 §04 三條線收斂）。

一個值得保留的流程觀察：特效與設計的先後順序

流程觀察（中性，供後續方法論參考）

本案的工作節奏偏向「先從 demo 頁挑一個喜歡的特效，再回頭把設計套上去」（effect-first）。這個順序本身沒有對錯——客戶把「重點放在動態」定為框架，是合理的需求表達；只是當特效先被選定，「為什麼用它、它的長相該長怎樣」這類問題若沒在同一時間講清楚，後面就容易出現概念與造型的對不上。後續若再有類似案子，可以把「特效服務於哪個設計概念、對應哪個品牌符號」提早在提案階段就一併寫清楚——本案最終正是靠這一步（特效＝水波＝品牌 Logo 的承接語彙）把方向收齊的。

06三個版本現況

以下判定基於程式碼現況對照客戶要／不要清單。需實機才能斷言之處標【無法判定】。狀態：符合 部分符合 不符合 無法判定（文字＋顏色雙重標示，不只靠顏色）。

重要前提：以下矩陣只驗了「會議清單」，尚未驗「官方需求」

下方矩陣與診斷是對照會議要／不要清單做的，尚未納入官方品牌規劃的四項前置基準：①整站多頁式架構（PC 選單跳子頁、非錨點）②首頁移除線上預約、改「聯繫我們」按鈕 ③Intro 用 7–10 張台灣街頭攝影 ④點擊水波特效（5/29 客戶拍板）。三個版本都需依這四項官方基準再走一輪補驗，下方結論才算完整。

需求 × A／B／C 對照矩陣（會議清單）

#需求關鍵維度A 版 (Dev/Dawa)B 版 (B/叔叔)C 版 (V3)
1動態＝使用者點擊觸發的反饋型（方向已定點擊水波，餘為 flavor 調整）符合不符合部分
2無自動播放動畫符合不符合部分
3無逐字／逐項跑出 (stagger)符合不符合部分
4無柔焦／模糊出現的字符合不符合部分
5無直式排版（中文直書）部分不符合符合
6footer 保留基本資訊（名／址／話／時間）不符合符合符合
7intro 分層漸進 + 入口直覺不迷路符合不符合符合
8無一進來就滿版開場大圖／影片部分不符合符合
9無照片上下錯落、未對齊部分不符合符合
10無圖片自動輪播／跑馬燈符合不符合符合
11無非 guideline 裝飾／浮水印／新創圖部分不符合符合
12整體調性安定、穩重、calm符合部分符合
13跨裝置點擊反饋運作 (RWD)部分部分部分

第 13 項三版皆屬「程式碼層成立、未經實機 Playwright 逐點驗證」。A 標部分是因無 scroll-hijack 等可疑手法但仍未實機驗；B 的桌機 scroll-hijack 觸控流暢度未驗；C 的實機驗收在上一輪因 turn limit 被截斷未跑完。嚴格而言三版上線前都應補一輪實機驗收。

各版一段話診斷

A 版 Dev／Dawa 設計 最接近官方方向

已大幅砍除自動動效（雲朵漂浮、進場淡入、scroll 視差、逐字 BlurText、中文直書全移除），互動幾乎全為點／拖／滑主動觸發，入口是明確文字按鈕「進入網站」。仍待處理四項：(1) Hero 是 cover 滿版橫幅背景圖，與「不要滿版開場大圖」邊緣抵觸；(2) 仍有旋轉 90° 的英文裝飾標籤（雖非中文直書但視覺呈縱向）；(3) footer 缺地址／電話／門診時間（只藏在 home 內文與不可見的 JSON-LD）；(4) card-corner.svg／divider.svg 去留卡在「等品牌 guideline」。

最該注意的 3 件事
  1. 死碼殘留：initBlurText（逐字 stagger）與 flipStrip() 的 JS 仍在改 DOM／掛 observer，只因對應 CSS 被刪才「視覺無效果」——CSS 一旦還原，客戶不要的動效會復活。建議連 JS 一併移除。
  2. footer 缺基本資訊 + 兩條死連結：所有頁 footer 沒有址／話／時間；且 contact.html、article.html 被多處連結但檔案不存在，點擊 404。
  3. 「不要一進入就看到診所資訊」尚未拍板：home 底部 Access 仍硬列址／話／時間；裝飾 SVG 去留卡在等 guideline——這兩項是與客戶方向尚未收斂的缺口。

B 版 B／叔叔 設計 需較多調整

Vue 3 + Tailwind 的策展式攝影集，色調語言安定（森綠／米白／襯線），但行為層幾乎踩滿客戶不要清單：自動播放（呼吸 logo、slowDrift 8s、滿版 autoplay 影片、80s 跑馬燈）、stagger 逐行逐項、柔焦模糊進出、scroll 觸發進場（lift-in 23 處）、?next= 自動跳轉、fractalNoise 顆粒底紋、welcome 直書、照片刻意錯落、桌機 scroll-hijack。最致命的是入口埋在左上「i」資訊面板裡，正是會議上客戶實際踩坑「找不到入口、要點 i 才發現」的那個問題原封未動。唯一站對方向的只有 lightbox 與 hover。

最該注意的 3 件事
  1. 入口埋在「i」面板裡＝客戶已明講的痛點仍在，是首要 blocker。
  2. 動態幾乎踩滿客戶「不要清單」：自動播放、stagger、柔焦模糊、scroll 進場、自動跳轉、顆粒底紋，數量與密度都高。
  3. intro 採桌機 scroll-hijack：全劫持捲動配滿版錯落攝影流，與「使用者主導節奏、安定 calm」衝突，手機觸控實機表現須另驗。

C 版 V3 修正度最高

在 B 的攝影策展骨架上，已針對性修掉多數會議意見。已修正：入口改右上常駐「進入主站 →」按鈕（修掉 B 的「i」痛點）；照片明確歸零 offset／拉伸成同寬共左緣 pixel-perfect（修掉 B 的錯落）；移除自動跑馬燈、滿版 autoplay 影片（home hero 改 75vh 背景圖）、中文直書、嵌入影片；粒子裝飾腳本已從頁面拔除；footer 四項基本資訊各頁齊全；無浮水印／新創裝飾圖。還沒修：Intro 開門頁仍保留客戶點名不要的三件套——自動播放 float-up + blur(8px)→0 模糊淡入 + delay:idx*.18s 逐項 stagger；內頁（首頁除外）.fade-in 仍有 scroll 觸發進場動畫。

最該注意的 3 件事
  1. Intro 開門頁仍有客戶點名不要的動態（最大缺口）：自動播放進場 + 模糊淡入 + 逐項 stagger；內頁 scroll 觸發進場也屬同類。
  2. footer／聯絡資訊有假資料與不一致：電話 (02) 2700-0000 是佔位假號（上線前必換）；門診時間在 footer「週一～週五 09:00–18:00」、contact.html「週一三四 09–17、週二五 09–21」、about.html 又一套，三處需對齊。
  3. 孤兒檔與未完成的跨裝置驗證：about-particles.js 只剩 16 個 .bak 殘檔（建議清理）；上線前建議補一輪桌機＋手機 Playwright 驗收。
整體現況一句話

B 版需較多調整（動態行為幾乎踩滿不要清單 + 入口痛點未解）；A 與 C 都已落在正確方向上，但各差「最後一哩」——A 差在 footer 資訊不齊、Hero 滿版、與「不要一進來就看到診所資訊」尚未拍板；C 差在 Intro 開門頁那組自動播放／模糊／stagger 與內頁 scroll 進場動畫未拔除，外加假電話與三處門診時間不一致的資料債。最大且共通的缺口是「會議點名不要的自動進場動態，在 C 的 Intro 仍存活」與「資訊正確性／一致性（footer、電話、門診時間）尚未對齊」。此外，三版皆尚未依官方四項基準（多頁式、首頁移除預約、街頭攝影、點擊水波）補驗，這是上線前的共通待辦。

07我方立場與貢獻

兩面誠實列出。這不是搶救文、不是道歉文，也不是甩鍋文——是給管理層判斷用的事實底盤。

壓縮時程下的善意投入

  • 產出多版設計（A／B／C 三條路線），且 C 已針對會議意見大幅修正。
  • 被要求後即時補上一批批替代 ref（5/28 18:15 一次給出 v7.usestate、codepen、tympanus 系列、reactbits 等）。
  • LINE 上即時回覆、配合客戶逐項需求（如 photo credit 的層級／字級／後台可留空）。
  • 會議意見落地速度快：C 版已移除輪播、滿版影片、直書、浮水印、隱藏入口等多項。
  • 選用粒子（confetti＝粒子系統）其實是對 brief 最忠實的技術回應，且 demo 100% 點擊觸發、零自動播放，方向一直是對的。

資訊分散下的溝通落差（誠實列出，非究責）

  • 「概念」與「造型」沒同步講清楚：提案描述的是「觸碰後產生視覺回饋」這個概念，造型細節（粒子是哪一種長相）在傳遞途中被當成已定案，造成收訊端困惑。
  • 單面傳遞：本案工作被分散在不同對話／來源各做一半，訊息在流轉中對不上，放大了上面的概念／造型錯位。
  • 措辭歧義（如「整體風格」）一度讓 layout ref 被誤判，需來回追問才釐清。
  • 這些都是流程性的訊息落差，已隨 PM 回覆與客戶 5/29 拍板雙雙解除——不是判斷錯誤或誠意問題。
我方立場定調

山川在過程中一直在配合、在補件、在修正，方向也一直走在對的軌道上，這是事實；過程中的溝通落差同樣是事實，源於資訊分散與單面傳遞這個流程性原因，不迴避也不歸咎個人。基於上述、加上爭議已解除、方向已對齊水波，我方判斷本案可以承受結案，也具備繼續做完的良好條件——繼續或收手都在可控範圍內。要不要繼續，是管理層權衡商業關係、團隊負荷與品牌信任後的決定，本頁不替管理層拍板。

08現在的局面與選項

本節把兩條路的事實擺清楚，不替管理層選擇 keep 或 walk。決策權在管理層。

局面更新（5/29 客戶拍板水波後）

看似的粒子爭議已實質解除——經溯源證實客戶從未否決粒子（誤讀方向相反），PM 回覆把話題拉回協作，客戶 5/29 下午隨即親自拍板「就用點擊水波來調整」。局面已從「看似對峙」進入「方向已對齊水波、關係進入協作執行」的階段：互動方向（點擊觸發）與長相（水波／承接回彈）皆已定，剩下的是把感覺調對的執行工作。下方 keep／walk 兩條路維持不變，但決策背景已是「協作執行」，這應一併納入管理層的權衡。

待辦／下一步（依 5/29 客戶拍板，已是執行而非討論）

以下是把客戶 5/29 拍板落地的執行順序，多為「調特效參數 + 校資料」，不是重做架構。

  • 1山川優化水波特效：把現有 demo 的「爆散星點」flavor 調成客戶要的「安穩承接回彈感」。技術轉譯＝阻尼水波（同心擴散後沉澱）＋輕微回彈、低振幅、柔和配色；僅綁 click 事件、移除 mousemove 監聽（拿掉滑鼠流動特效以減硬體負擔）。
  • 2移除 3 項客戶指定要拿掉的：① 探照燈高光 ② 滑鼠移動的流動特效 ③ 手機版點擊處的半透明黑點。
  • 3全站掛載：點擊水波特效需在所有頁面都能操作、可連點（無聊想玩可多點）。
  • 4與 Alan 快速通話對焦：客戶主動提議；把握這通電話確認「介於水波與物體震動之間」的拿捏，並一併索取 2 張回彈感 ref。
  • 5調後 demo 回客戶確認：水波 flavor 調整完成後，回交客戶確認感覺是否到位。
待補（資料／資產缺口，需向外索取或補驗）
  • 品牌手冊 p.4-5（官方色票／字體／Logo 規範）：目前不在手上，向 noodio 索取。多項裝飾 SVG 去留卡在等這份 guideline。
  • Carter 的 2 張回彈感 ref：用來界定「安穩承接的回彈感」，向 客戶索取（可在約定通話時一併要）。
  • A／B／C 三版依官方補驗：依官方四項基準（多頁式、首頁移除預約、街頭攝影、點擊水波）逐版校核，現有矩陣只驗了會議清單。

若 keep（繼續做完）

技術面收斂成本可控、方向也已對齊水波：以 C 版（V3）為基礎收斂，A 版作單點借鏡，B 版退役。剩下的多是「調水波特效 + 刪殘留動效 + 校資料」，不是重做架構。除上方「待辦／下一步」的水波特效工作外，C 版本身另有以下技術債待清（按優先序）：

  • P1拔除 Intro 自動進場動態：移除 ib-float-up-y／ib-float-up-fade（含 blur(8px)）／animation-delay stagger，改為照片靜態直接顯示。
  • P2關閉內頁 scroll 進場動畫：about／contact／news／schedule 的 .fade-in IntersectionObserver 比照首頁強制顯示處理。
  • P3資料校正三件：電話換真實號碼（不用佔位 (02) 2700-0000）；門診時間統一成同一份正確資訊（footer／contact／about 三處現不一致）；確認 footer 診所全名／地址正確。
  • P4清孤兒檔：刪 about-particles.js 的 16 個 .bak。
  • P5補一輪實機驗收：桌機＋手機 Playwright 動態驗證（上一輪因 turn limit 截斷未跑完）。
原本的開放問題已由 5/29 客戶拍板解除

先前待確認的「是否整頁全靜、唯點擊才有動作」，已由客戶 5/29 拍板回答：桌機＋手機都只保留點擊觸發、移除滑鼠移動的流動特效——方向是「全站只有點擊水波會動」。上述 P1／P2 的自動進場動態應比照此原則拔除。

若 walk（結案／收手）

我方已評估可以承受結案，這條路在商業上是可行選項。需管理層權衡的考量：

  • 信任現況：先前看似的對立已隨溯源與 5/29 客戶親自拍板水波實質解除，方向已對齊、關係已進入協作執行；客戶當天主動提議與 Alan 通話對焦，是良性訊號。若選擇 walk，等於在關係已回穩、方向已清晰時收手。
  • 商業關係：是否影響後續合作機會、口碑與轉介，由管理層評估。
  • 已投入成本：三版設計、多輪 ref 與溝通已投入；結案則這些不再延伸開發。
  • 時程：六月底硬期限若無法在修復信任後達成，也是收手的考量點之一。
這一頁要傳達的最後一句

事實已擺清楚：看似的爭議其實是一場已解除的誤讀，方向已對齊水波（三條線天然交會）、技術上收斂成本可控、關係已進入協作執行、我方可承受結案也具備做完的良好條件。keep 或 walk 是管理層的決定，本頁到此為止，不代為拍板。

09附錄：原始逐字稿

以下為三份原始逐字稿，預設收合。引用時以此為準。

一、內部團隊 LINE（專案啟動與時程）

參與者：徐鉦坤 Rone（PM）、許辰輝 Dawa（設計師，A 款作者）、陳建綸 Alan（PM）、陳志亞 Tony、李東遠 ah、林呈晏 monet、鄧曼綾 súsù。

  • Rone 建群並邀請 Dawa／Tony／ah／Alan／monet（後 Dawa 邀 súsù）。
  • Rone：「附上蔚禾新案的時程表，請大家看一下。幾點說明：wireframe 我會盡量這週定稿；功能需求不複雜，但六月底須上線；設計端可能會有多次來回修改；前後端開發時間因此有被壓縮的風險。」（專案管理：merp.div.tw/projects/22）
  • Alan：「提醒：時程表今天記得給客戶喔。」Rone：「收到。」
  • Rone（給 Dawa）：客戶提供的參考資料（Google Drive），一些已確定風格，像 LINE 初診單。相關資料在 merp 檔案夾 201。
  • Rone：目前 wireframe → demo.nsdi.com.tw/2026-wayheal/intro.html
  • Dawa：上傳「[蔚禾] 品牌網站規劃_260428.pdf」(16.2 MB)。
二、外部 LINE（客戶 Carter ↔ 山川 Alan／Rone）— 動態方向溝通至水波拍板

參與者：Alan（山川 PM）、Rone（山川文案與 ref 溝通）、Dawa 阿輝（山川設計，5/27 10:40 被加入）、Carter aka 阿麵（蔚禾客戶端窗口）。

5/27（三）

10:40Alan 把 Dawa 加入群組。
10:45Carter：感謝一早開會，今日會議結論請傳達給 Rone。明白山川內部分工明確、對設計有要求，但不希望因此在資訊傳達上有落差、造成最後成果偏離第一線討論的方向；例如之前已溝通好的需求沒被落實、要避免的部分卻再次出現。
10:48Alan：後續對焦＆調整會注意；時程內部討論後回覆。
11:00Carter（recap）：1.動態為「滑鼠／手機點按出現視覺反饋特效」，各裝置都能做到、盡量不影響閱讀，其餘整體動態盡量減少（避免裝置負擔／lag）。2.給安穩舒適體驗，使用者按自己節奏決定觀看時機與順序；避免畫面跳轉、自動播放動畫、圖片跑馬燈。3.資訊順序按先前線稿。4.Intropage 與排版考量 UX，避免使用者迷路或不知如何進入網站。5.避免使用 guideline 沒有的圖形、背景裝飾性圖形。
18:04Alan：互動示意明天提供，週五還可討論。18:17Carter：明天除動態 ref，也會有 layout ref 嗎？18:31Alan：先以動態 ref 為主，來得及會一起給 layout ref，趕工中。18:44Carter：辛苦了。18:48Alan：你們也是。

5/28（四）

17:11Rone：兩個動態 ref：①「參考牙醫網站」做的互動展示頁，可右側調參、找喜歡的截圖傳回 → demo.nsdi.com.tw/2026-Effect/ ；②設計師找的視覺參考，看整體風格與視覺感受 → demo.nsdi.com.tw/2026-Effect/liquid_light/
17:21Carter：這兩個都是動態設計對嗎？第二個好像不是 layout 的視覺參考。17:23Carter：第二個打開是「水波＋探照燈」特效。17:23Rone：都是動態 ref。17:24Rone：layout 還在調整，會以喜歡的動態 ref 再套入效果。17:25Carter：因為你說是「整體風格」，我以為要看 layout😂。內部討論一下。
17:31Carter：第一個網址不管參數怎麼調，都是噴粒子出來嗎？還是有其他特效可選？17:46Rone：是的。以目前簡潔色調與留白風格，這個動態效果和整體調性最搭、視覺較協調。內部也測試過其他幾個方向，但風格差異蠻大，最後篩選出這兩個給您參考。
17:55Carter：方便提供你們內部測試過的其他方向嗎？昨天和 Alan 開會已蠻明確強調不要用牙醫網站的粒子特效，因為過於清新活潑不適合品牌沈穩調性（我也調過粒子大小與飛散速度，真的不適合）。不太理解這次山川依舊提供粒子特效的原因😅。
18:15Rone：（一批 ref 連結）v7.usestate.org／codepen VoXelo RNWQJdJ／tympanus FlowmapDeformation／tympanus webgl-mouseover-effects step3／tympanus IntroGridMotionTransition／tympanus InteractiveParticles。18:16Rone：reactbits.dev/animations/splash-cursor。18:55Carter：感謝🙏。

5/29（五）

09:56Rone：早安，想再確認「圖片點擊放大後，下方有小字放照片 credit（需可編輯文字＆留空）」的部分有需要保留嗎？
09:56Alan：早安，參數已預設好，也是團隊共同討論較符合蔚禾品牌調性，原因：這個特效做到的事就是「你碰它，它就回應你」。不是自動播放、不強迫你看，是你主動碰它才有反應——這跟蔚禾想給人的感覺一樣，你準備好了，我就在這裡。另一考量：身心診所使用者通常有點心理門檻，太靜的頁面像看衛教資料，太動的有壓力，這特效剛好在中間——你不想互動它就安靜，你想玩點幾下都行，你說了算，不會被推著走。參數已調好，內部覺得最佳：demo.nsdi.com.tw/2026-Effect/
10:49Carter：需要保留，但提醒：1.功能放第二層（點擊照片後才顯示）。2.文字可小一點。3.後續上稿照片無 credit，後台編輯時這欄要可留空。10:50Rone：收到。
11:17Carter（第一則）：不好意思昨日電話中 Alan 說「更改粒子造型較花時間，因此先用粒子示意、確認參數後再討論粒子造型」；不明白為什麼今天改口說團隊還是覺得粒子和灰塵較適合？另外這說明套用在任何「滑鼠點擊後會產生特效」的場合都適用，完全沒說到為什麼是「粒子與灰塵」適合身心科😅。
11:17Carter（第二則）：牙醫網站適合粒子噴灑特效，或許是為了 1.呼應牙科治療的噴頭、2.緩解看牙醫緊張感、增加輕鬆愉快氛圍。但如果山川覺得粒子適合，那請告訴我們為什麼蔚禾會適合粒子以及灰塵特效？不然我無法說服內部接受我們一開始就表明不適合的方向，謝謝。
11:17 後Alan（PM）（回覆）：坦白說您說得對——我們在提案說明裡描述的是「觸碰後產生非功能性視覺回饋」這個概念，而不是某個具體造型；動畫此階段確實還不確定怎麼呈現，目前借用的是きしもと歯科的技術實作方式。蔚禾情境不同，若這個視覺語言不夠貼合，可以一起討論什麼形式能在點擊後傳遞「輕盈、被接住、有所回應」又不違和於診所調性——這本來就該是我們和您一起完成的。（向 Carter 與院長致意。）
13:27–13:33Carter（拍板）：我們就用第二個 demo 的特效來做調整，希望呈現「被輕穩承接」、物體安穩落地的些微回彈感。1.拿掉探照燈高光，保留點擊時的水波那種彈彈特效。2.拿掉滑鼠移動時的流動特效（減硬體負擔），電腦＋手機都只保留點擊觸發。3.拿掉手機版點擊處的半透明黑點。4.點擊水波整體優化成「介於水波與物體震動之間」——不要完全像水、也不要太像固體彈力，目標是安穩承接的回彈感（附 2 張 ref 圖）。另：全站所有頁面都要可操作、可連點（無聊想玩可多點）。也想跟 Alan 快速通話對焦一下。
三、會議逐字稿（精簡版）— 客戶對 A 款／B 款的回饋

A 款＝Dawa 設計；B 款＝設計師「叔叔」設計（當天請假）。

【開場】昨天看了兩款設計與設計理念文字，跟前面討論方向有落差——不是風格好不好看，而是最基本的需求方向偏掉了。

【大方向一：動態理解落差】版面簡單就好、重點放動態。要的是「簡單動態」：依使用者操作（點擊／拖曳／手機點按）產生視覺反饋——像日本網站點擊出現彩帶、紙屑般、純好玩好看的互動。但兩款操作時沒有任何反饋；反而各角落塞動畫（選單動畫、進主頁文字逐字跑出）。再聚焦：要「單純點擊就出現特效」，讓使用者無聊時可一直點，且各平台都能運作。

【大方向二：使用者主導節奏】不要錨點跳轉、不要自動播放、避免圖片輪播，不要「拉著使用者跑」。

【針對 A 款 (Dawa)】很用心——文字跑出有鏡頭柔焦、手機版某些字模糊，手法有趣但造成閱讀障礙。要避免直式排版（文字量少會困惑左右讀、下滑被切）。A 款 footer 基本資訊被拿掉了，請補回（像 B 款那樣）。

【針對 B 款 (叔叔)】抓了之前的 reference，但組合不適合。intro page 點進去突然出現診所全部資訊——我們不想走醫療網站快速資訊路線，要一層層按節奏揭露。而且團隊收到時第一時間找不到入口、亂點才發現要點「i」才進得去。先前說不要一進來滿版大照片，但 B 款還是滿版。沒有嵌入影片需求。

【設計細節】仍是診所網站，使用者狀態必須安定穩定。照片上下錯落、未對齊不適合，氛圍不夠穩重。避免輪播。

【底圖討論】問 Dawa：A 款沙丘浮水印底圖想表達什麼？Dawa：上面有雲，表達寧靜、融入山林、心裡寧靜；整個網站像燈塔般錨點，讓人在沒方向時找到這裡。客戶：照片素材後續全換診所空間照片，banner 不會放這張，雲可拿掉；要避免新創的東西。

【Dawa 回應】溝通轉了一手各自詮釋不同。主流網站都做微互動讓使用者不無聊，我沒做一打開就動個不停的，只是讓動態提示這塊開始有內容。可能跟你期待有落差——你是希望整頁都不動、只有點擊才有動作？理解了可再修改。直式排版有氛圍感（像拿一本書、享受閱讀），不喜歡可拿掉。文案不多偏感受性。