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

Brand Website · 形象官網

CCHR Taiwan

公民人權協會

為精神醫療人權倡議的非營利組織打造形象官網——讓求助的人快速找到資源,讓沉重的議題被溫柔地看見。

客戶
CCHR Taiwan · 中華公民人權協會
類型
形象官網 · 非營利組織
時程
2025
服務
設計 · 開發 · SEO
連結
cchr-taiwan.vercel.app ↗
CCHR Taiwan 首頁截圖
CCHR Taiwan
cchr-taiwan.vercel.app ↗

01 / Background

客戶背景
與面臨的問題。

N° 02

中華公民人權協會(CCHR Taiwan)是關注精神醫療人權的非營利組織,提供免費法律諮詢、案例記錄與公民教育資源,陪伴在精神醫療中受侵害的人與家屬。

這類議題的網站有一個天生的兩難:太官方,求助的人不敢靠近;太柔軟,議題的份量又立不住。而會來到這個網站的人,往往正處在最脆弱、最需要被接住的時刻。網站要做的不是華麗的品牌展演,而是一個清楚、可信、溫暖的入口。

「在最深的暗處,點一盞燈。陪你走過去。」

這是協會網站的主標語,也是整個設計的方針:網站本身,就該是那盞燈。

02 / Design

設計決策
與系統建構。

N° 02

刻意避開 NGO 網站常見的制式藍與冷灰。整體視覺以「一盞燈」為核心:溫暖的紙色基底像一封手寫的信,鴿子與光的插畫意象貫穿全站,琥珀橘作為「光」的點綴色——出現在每一個求助入口上。

字體以宋體細字重為主,標語用較大的級距慢慢讀;內文行距放寬,讓沉重的內容有呼吸的空間。所有「尋求協助」的按鈕都用琥珀色實心呈現——在整頁的柔和裡,一眼就能找到。

資訊架構的核心決定:把「求助」放在第一層、每一頁都能抵達。議題說明與案例記錄負責建立信任,但無論訪客讀到哪裡,「免費法律諮詢」的入口永遠在一步之內。

Warm Paper
暖紙基底
Dove Ivory
鴿羽白
Lamp Amber
燈火琥珀
Stone
暖石灰
Ink
深墨文字

03 / Tech

技術選型
與工程取捨。

N° 02

對倡議型組織來說,網站最重要的技術指標是被找到。正在搜尋「精神醫療 權益」「強制住院 諮詢」的人,應該在搜尋結果裡遇見協會。所以這個案子以 Next.js 建構、靜態生成頁面,把 SEO 基礎(語意結構、Meta、OG、載入速度)做滿。

同時,考量到訪客可能在手機上、在深夜、在情緒低谷裡打開這個網站——頁面刻意保持輕量與快速,沒有厚重的動畫與彈窗,部署在 Vercel 上全球加速。

Framework
Next.js
Hosting
Vercel
UI
React
Rendering
靜態生成
SEO
Meta · OG
Content
議題 · 案例
Help
諮詢入口
RWD
全裝置

04 / Results

成果展示
與交付內容。

N° 02

上線後,協會第一次有了一個能完整代表自己的數位入口:議題是什麼、協會做過什麼、需要幫助時該找誰——三件事在同一個網站上說清楚。乾淨的 SEO 基礎也讓議題內容能持續累積自然搜尋的能見度。

Desktop · 首頁
Desktop · 首頁
Mobile · 求助入口
Mobile · 求助入口
3
內容板塊
議題 · 案例 · 資源
1
求助入口
每頁可達
100%
響應式設計
手機 · 平板 · 桌機
2025
正式上線
Vercel

Next · 下一件

Essencepedia →

N° 03 · 植物療癒知識 Web App

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

Your brand, brilliantly built.

Pages

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

Services

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

Contact

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