How Government Design Systems Transform Public Services: Insights from the UK, France, and Taiwan

五月進入報稅季，可能是最多人同時使用政府的產品的時期。與此同時我們來聊一聊政府的設計系統。原本寫在自己的電子報上，但寫完發現篇幅似乎也可以直接變成文章給更多人閱讀，所以就搬過來了。

Design System for Government

首先，先讓我們快速看一下最近大家可能都有用過的網站：

申請普發 6000 的 6000.gov.tw
申請疫苗健康護照的 dvc.mohw.gov.tw
大家報稅要用的 efile.tax.nat.gov.tw

申請普發 6000 的 6000.gov.tw
申請疫苗健康護照的 dvc.mohw.gov.tw
大家報稅要用的 efile.tax.nat.gov.tw

是不是覺得彼此之間存在著一些既類似卻不太一樣的畫面呢？在討論之前，我們先來看看可能是最廣受人知的 GOV.UK Design System 以及其他國家的設計系統。

🇬🇧 英國 gov.uk

gov.uk 是英國的政府網站，當中提供了超過 700 種服務，同時擁有多餘 300,000 頁的資訊。而這些資訊通常是由不同的部門去建立與維護，所以雖然看起來是一個完整的網站，但實際上卻是數百個小網站，並由至少 25 個獨立部門去建立與維護。

GDS，是隸屬於內閣辦公室下的「政府數位服務團」（Government Digital Service），在 2012 年成立，設立宗旨是協助各機關在英國政府 GOV.UK 上，打造簡單、明確又便捷的服務，讓民眾在必須和機關接觸時，優先使用政府提供的數位服務。在初始，GDS 是從服務設計的角度出發，有效地讓政府網站的造訪率大幅提升。

但在當時，很多站點其實是透過其中一個部門為了網站所寫出來的框架，來讓自己的網站「看起來」像是 gov.uk。但實際上真正的去從前端剖析，能夠發覺這個框架因為在一個 all-orgainic 且臨時的環境下發展壯大，充滿了各種重複、不一致的問題。

GDS 的成員解釋原本 GOV.UK 的前端架構。

GDS 的成員解釋原本 GOV.UK 的前端架構。

但往好處想，因為有這樣的框架而且大家都被迫使用它，他們才得以從更好的角度去切入，並在 2017 年開始打造 GOV.UK Design System。而其中包含了 GOV.UK Design System、GOV.UK Prototype Kit 以及 GOV.UK Frontend。（紐西蘭政府甚至引用了 GOV.UK 的開源程式碼作為基礎去建立了自己的設計系統）

🇫🇷 法國

受到 GOV.UK 啟發，不少也開始跟進製作自己的設計系統，法國也是其中一個。但最大的不同在於，英國將各個站台整併成一個完整的網站 GOV.UK，而法國則是需要在 3000 多個網站上去達成設計系統的一致性。

GDS 的成員解釋原本 GOV.UK 的前端架構。

GDS 的成員解釋原本 GOV.UK 的前端架構。

法國的團隊除了面對上述的挑戰之外，也需要去面對一些非常「法國」的問題，比如說習慣性的不信任、以及對於中央集權倡議相關的敵意 😂

📣 推廣

不論是英國還是法國，在推廣上都採取了「開源」的方式並將開源作為最一開始的核心概念之一。這種被法國團隊形容為「中心化同時去中心化」的模式，能夠盡可能地讓更多人向設計系統這個專案貢獻。這也是法國與英國的設計系統原則提到的「Keep it Open 🇫🇷」以及「Make things open: it makes things better 🇬🇧」。

The GOVUK Design System is helping people to... apply for a blue badge, apply for direct rent payments, apply for an environmental permit, apply for legal aid, apply for money if you are ill or disabled, book a drivers theory test, claim criminal injuries compensation, file your company accounts, find government information online, find teaching vacancies, get help with child maintenance, get divorced, make a will, sell part of your property, train as a teacher, verify your identity, apply for a juggling license... @timpaul - GDS

在上線後 GDS 透過追蹤哪些部門使用了他們的程式碼，進而了解多少人開始使用這套設計系統。同時為此展開了每個月固定的教育訓練，教導設計系統的使用者（設計師、工程師）如何應用這套系統，並嘗試建造一個虛擬的服務，讓設計系統更容易的被使用、被貢獻。而法國也是持續地舉辦社群的活動、網路培訓研討會等等來加速推廣各部門的應用。

✨ 可近用性

而作為政府機構的設計系統，最核心的宗旨莫過於服務整個國家的國民。在兩國也都將這項核心概念列在了設計原則之中：「Design with and for everyone 🇫🇷」、「This is for everyone 🇬🇧」。然而這意味著所有政府的網站必須要具備可近用性（A11y）。

我相信許多人想到 A11y 就會想到必須去符合 WCAG 而做出來的醜網站（看著眾多台灣的網站），並將 A11y 視為是設計的枷鎖。但法國透過幾個方法，允許 A11y 以及美學可以同時存在。

法國政府的可近用性色彩系統與色彩模型

法國政府的可近用性色彩系統與色彩模型

以設計師最常去檢查的顏色對比度為例，為了良好的 A11y 必須要通過至少 WCAG AA 的標準。他們將設計系統色票中的每個顏色，透過 HSL 模型中的亮度（Lightness）以 25 為一個階度從 0–1000 中切分出 40 個色票，並發現只要當兩個色票的階度大於 500 便能夠符合 WCAG AA 的標準。透過這套色彩系統，再加上語義化的 Color token，A11y 將再也不是綑綁設計的枷鎖。由下圖可以看到 2022 年的法國政府網站，除了有遵循自己的設計系統外，色系還是保有一定的差異與活潑。

法國政府網站（2019/2022）。2019 中間為空是因為當時還沒有設計系統。

法國政府網站（2019/2022）。2019 中間為空是因為當時還沒有設計系統。

🇹🇼 台灣

那我們再次將鏡頭拉回台灣，再看看我們最一開始的首圖。

有些看起來挺相似但又有點不一樣的風格，似乎跟英國當時 GOV.UK 各個站台各自營運時參考一套框架想辦法讓彼此長得類似頗為類似。但網站的營運，卻又更像是法國那般，各個單位、部門其實都有各自的網站、網域，而不像英國一般集大成於 GOV.UK。

但難道台灣沒有設計系統嗎？其實是有的（拿大聲公）！

PDIS（Public Digital Innovation Space）是台灣的行政院公共數位創新空間，主要協助政府部會提升數位服務品質，以創新方式改善和增進公務體系的工作流程、方針規則及使用工具。而 PDIS 其實在 2022 年 3 月 15 號才在 GitHub 發布第一個 pre-release，目前在 PDIS Design System 上雖然內容有限，但所具備的元素仍足以建構出一個完整的服務網頁了。