微客 Waker：一步一腳印，讓官網帶人走向需要幫助的地方

專案背景

社團法人台灣微客公益行動協會（微客 Waker）成立於 2012 年，以兒童陪伴為出發點，帶領志工以梯隊接力的方式走進國內外的弱勢社區。至今累計 32,682 人次志工參與、陪伴 186,993 人次孩童，服務過 103 個據點。

他們的官網由 CRM 系統商代管，捐款、報名與會員都串在一起，十多年來累積了上百篇消息、故事與活動。這是留白設計以微客為題的概念提案：如果重新來過，一個公益組織的官網應該怎麼帶人走到下一步？

原網站的設計核心

我們先拆解原本的網站，而不是直接重畫。微客的原網站有清楚的品牌底子：一顆橘色的 logo、一句「One Challenge, One Change」，以及大量志工在服務據點拍下的真實照片。問題不在品牌，而在動線：

• 主視覺是一段影片，標語置中壓在畫面上，看完仍不知道下一步該做什麼。
• 選單照組織架構排列：8 個主項目、多層下拉，「捐款」藏在選單裡。
• 每一頁都是同一個模板：大橫幅加置中標題，內頁之間很難分辨。
• 報名直接跳到會員登入：想參加梯隊的人，還沒看到日期與費用就得先註冊。

所以這次改版保留品牌色、logo 與真實照片，改變的是人走進網站之後的每一步。

核心挑戰

公益組織的網站同時要服務兩種人：想報名國際志工的人，以及想捐款支持的人。兩者需要的資訊完全不同，卻都在同一個首頁做決定。

同時，捐款金流、活動報名與會員資料都在既有的 CRM 系統裡，不能、也不該搬動；十多年的內容一篇都不能少；組織沒有專職工程師，網站必須能自己更新。

改版前後

改版前	改版後
影片主視覺，標語置中，看不出下一步	志工真實照片＋一句話說清楚使命，兩個行動：成為國際志工／捐款支持
裝飾性的線條與色塊	一雙左右交替的腳印，貫穿首頁、內頁與開場動畫
8 個主選單、多層下拉	主選單精簡為 6 項；國際志工下拉直接列出 11 個服務隊
6 個下拉選單篩梯隊，常常篩到 0 筆	年月合併、每個選項標出剩幾個梯隊、0 筆自動停用
按「我要報名」直接跳到會員登入	每個梯隊都有說明頁：日期、費用、集合地、據點介紹，再進入報名
搜尋要換頁	原地彈窗搜尋，邊打字邊出結果
內容更新要找系統商	內容後台自行更新，SEO 與 GA4 直接填寫

解決方案

一步一腳印：把精神變成符號

微客的精神是「用自己的力量，一步一步走向需要幫助的人」。我們把常見的裝飾線條，換成一雙左右交替的腳印：金到橘的漸層，一步接一步出現，走完就停住。腳印出現在首頁主視覺、每個內頁橫幅與「陪伴的循環」，經過人物時會走到他們身後，讓畫面有了前後的層次。

真實的人，真實的陪伴

主視覺不再是影片，而是志工與孩子的真實照片，並從原站十多年的上傳檔案中挑出解析度最高的原圖，在大螢幕上也清晰。照片中的人物另外去背，腳印才能從他們身後走過。標語只留一句：「一起讓陪伴的力量，支持孩子們成長發光」，下方直接放兩個行動按鈕。

開場動畫：腳印走向 logo

第一次進站時，一串腳印從畫面左下走來，最後一步落下時 logo 出現、閃爍兩下，再淡出帶出首頁。主標題與腳印動線會等開場結束才開始，不會被蓋掉；同一次瀏覽換頁不再重播。

梯隊篩選：先告訴你有幾個

保留原站的六種篩選條件，但把「年份」與「月份」合併成一個「出發時間」，只列出真的有梯隊的月份。每個選項旁直接標出選了之後還剩幾個梯隊，會篩到 0 筆的選項自動停用，再加一鍵「清除篩選」。訪客不必來回試，就知道哪裡還有位子。

從「先登入」到「先看懂」

原本在梯隊卡片上按「我要報名」，會直接跳到會員登入頁。改版後，每個梯隊與活動都有自己的說明頁：日期、天數、費用、集合地、報名截止一次看清楚，並附上服務據點介紹、費用包含與報名流程。已額滿、過了截止日或活動已結束，按鈕會自動變成灰色並寫明原因；報名頁則以三個步驟帶路，頁首固定顯示正在報名的梯隊與費用。

十多年的內容，一篇都不少

269 篇最新消息、68 篇服務成果故事、24 則媒體報導、歷年活動、出版品與年度報告全部搬進新網站，原本連往外部的連結也都改成站內頁面。消息依年份分組，搜尋改為原地彈窗，邊打字邊出結果。

手機也是主場

手機版主視覺滿版，文字下方加上深色漸層，腳印只走在標題上方；兩個主要行動在第一屏就看得到。國家據點頁加上固定的分頁列：據點介紹、梯隊一覽、志工心得、報名流程、常見問題，一點就到。

服務足跡：從一張圖到一張互動地圖

原本的服務足跡是一張圖片，國家名稱直接印在圖上：字很小、無法點選，手機上幾乎看不清。改版後以向量地圖即時繪製，每個服務據點一個標記；服務過的國家整片上色，滑過國家時，地圖與下方依區域分組的清單同步亮起，點一下就進入該國的服務隊頁。

組織架構：從圖片變成網頁內容

組織圖原本也是一張圖片：改組就得重新出圖，搜尋引擎讀不到，手機上部門名稱小到看不清。改版後改以真正的文字與線條排出，分成幕僚單位、業務部門、全球服務區三層；手機自動改為直向排列，字級與桌機相同。組織調整時，在後台直接修改即可。

成果

• 以「一步一腳印」重新詮釋微客的精神，成為貫穿全站與開場動畫的品牌符號
• 首頁第一屏就看得到兩個主要行動：成為國際志工、捐款支持
• 梯隊篩選與說明頁讓報名前的疑問先被回答，報名不必先登入才看得到內容
• 十多年的內容完整搬遷，全站不連往外部網站，原地彈窗即可搜尋
• 服務足跡地圖與組織架構從圖片變成網頁內容，手機上清楚可讀、可點選，也能在後台自行更新