Taiwan SPCA｜動保協會官網：讓每一份關心，都找得到出口

專案背景

台灣防止虐待動物協會（Taiwan SPCA）2009 年成立，每年處理上千件動物虐待與不當飼養案件，也推動動物福利教育、志工培訓與送養。十幾年下來，官網累積了 3,600 多篇文章、50 多個內頁，但首頁是活動海報輪播，捐款、志工、通報這些最重要的事，要在選單與長文裡慢慢找。

這是留白設計以 Taiwan SPCA 為題的概念提案：如果重新來過，一個動保協會的官網應該長什麼樣子？

改版前後

• 首頁：活動海報輪播 → 滿版照片搭配一句標語「終結受虐，讓愛即時」，下方一行協會數據
• 捐款：右下角圓形浮動鈕 → 頁首與每一頁右下角都有捐款 DONATE，愛心碼 1772 有自己的頁面
• 志工：資訊寫在長文裡 → 時間、地點、名額整理成資訊卡，報名按鈕放在最上面
• 通報：連到外部網站 → 六種通報直接在站內表單完成
• 圖表：低解析度圖片 → 組織架構、五大領域、經費圖以向量重繪，手機版另有直式版本
• 語言：中英文是兩套網站 → 同一個網站 EN／中 一鍵切換
• 更新：內容要找工程師 → 以內容後台自行更新，含 SEO 與 Google Analytics 設定

解決方案

開場動畫與中英切換 Preloader & English

開場時 Logo 置中，白色的貓狗腳印隨載入進度從左右走出來，載入完成後畫面從中央以圓形展開。右上角 EN／中 一鍵切換，切換時重播開場動畫，英文內容取自協會原本的英文版。

想幫忙的人，馬上知道怎麼做 Volunteer

收容所、調查、宣傳、設計、翻譯五種志工頁，都改成同一套版型：最上方是報名、小隊長、捐款等行動按鈕，時間、地點、名額整理成資訊卡，內文旁放照片，長文可以一路讀下去。

把文字變成圖 Five Domains

動物福利的「五大領域」原本是一段條列文字，我們把它重繪成圖：營養、環境、健康、行為四個生理需求，環繞著中間的心理狀態，一眼就看懂它們的關係。

放大也清楚 Vector Charts

組織架構原本是一張低解析度圖片，放大就糊。我們以向量重繪組織架構與經費圖，任何尺寸都清楚，手機上另外排成直式版本，不必左右滑動。

手機優先 Mobile First

首頁、側邊選單、動物送養與志工頁都先為手機設計，手機版首頁滿版、選單從側邊滑入，捐款按鈕一樣隨時按得到。

一篇都不漏 Every Page Migrated

原站的 3,600 多篇文章、50 多個內頁與送養動物全部搬移，失效連結與圖片一併清理，PDF 以新分頁開啟，通報改成站內表單。協會之後可以在內容後台自己發文章、上架送養動物、修改 SEO 與 Google Analytics 設定，儲存後網站自動更新。

成果

• 首頁一句標語、一行數據，第一眼就知道協會在做什麼
• 捐款、志工、通報三個行動，在每一頁都找得到
• 3,600 多篇文章與 50 多個內頁完整搬移，舊內容不流失
• 中英一鍵切換，內容後台讓協會自己更新

給非營利組織的建議

非營利組織的官網，是捐款人、志工與求助者共同的入口。改版時可以思考：

1. 把行動放在最前面：捐款、報名、通報，不該藏在長文的最後一段。
2. 把文字變成圖：理念、架構、經費，畫成圖比寫成段落更容易被理解與分享。
3. 舊內容是資產：十幾年的文章是協會的信任基礎，改版要完整搬過來。