---
# System prepended metadata

title: '設計系統討論 #003 20210617'

---

# 設計系統討論 #003 20210617

前次會議紀錄：
https://hackmd.io/-j88zbVgTCeN3LEi1PGB3A

### OUTLINE
- update 上次會議內容
- 分享下一動的大致計畫，集思廣益～

### 上次會議小結（與參事、子維）

- 建議先從 PDIS 內部 pilot，同步國發會，待怡君稍微有空時再邀請加入討論
- 由書漾先寫設計規範的大綱，內容最好有重要性的排序，再 cue PDIS 內成員討論
- 還不用生出內容也沒關係，可以先列出有哪些問題是需要思考的，先丟出來讓大家討論
- 也可以參考各國的設計規範，以及目前國發會已經出的數位服務指引
- 目的要讓人看得懂，所以如果有必要，大致的風格指南也可以同時出來
- 進程大約是兩三年的事情，但可以參考數位服務指引推行的過程：
    - 全國資訊主管會議中報告試行版
    - 行文給各部會
    - 一年後如果各部會沒什麼問題（或沒什麼反應）即可轉為正式版
- 接下來，找尋與部會合作的機會，避免紙上談兵
- 最後要做到什麼程度？
    - 對於部會來說，要解決痛點，比如說「看完之後，我就知道我接下來幾週該怎麼做」
- 期待管理做好，不斷推出 beta 版
- 可以思考發酵的轉捩點，例如各部會跨部會合作時 -> 「向山致敬」案例

### 計畫：下一動
    - 6 月： 內部對齊，挖坑（資訊坑、設計坑、寫作坑/ 風格坑、規範坑、應用坑、承辦心聲代表、廠商心聲代表）
    - 7 月： 設計規範初稿製作、風格指南雛形 
    - 8 月： 互評（討論）、實測（找一兩個內部網站來試用）
    - 9 月： 修正、迭代
    - 10 月：交出 beta 版

### 坑們

- 規範坑/寫作坑：討論設計規範、列出大綱、在規範坑裡面的人應該要有能力提出該討論的問題，並列舉初步的選項。難以決定時，主動與子維、參事、怡君討論交換意見。初步的大綱產出後，能夠以簡練的語言撰寫出可供人閱讀的文字。一般民眾能大致看懂、設計師、工程師、承辦人員或廠商看完後能夠得到初步的期待管理即可。在規範坑的人可能須能夠參考現成的設計規範，對設計規範的撰寫口吻有一定程度的掌握，與同坑人協力將大綱撰寫為規範初稿。
- 風格坑/設計坑：討論風格指南、在設計軟體（如 Figma）上做出初版的風格指南。風格的形成並非天馬行空，而是需要大量參考現有網站的重複元素，搭配規範的大綱或初稿來逐步迭代製作。在這個坑的人可能要有足夠的耐心、不怕來回修改，也要有細心，對 pixel level 的細節講究。
- 應用坑/資訊坑：主動關心規範與風格坑的進度，在看到技術上不合理之處即時提出。幫忙提出在 PDIS 中可以作為應用練習的網站。在應用坑中必須有人具備將風格中的 component 實作成程式中的 component 的能力。並且要能夠思考在日後應用時，提供程式開發人員什麼樣的 code snippet 較有幫助。
- 承辦心聲代表、廠商心聲代表：在這個坑的人可能要對於公部門的網站開發有一定的經驗，能夠設想承辦人或是廠商的立場。主動關心其他坑的產出，提出對於承辦或會有助於節省溝通成本或是提高工作效率的地方，也就是設計系統能解決到他們什麼問題。這對於日後真的推行時會非常有幫助，免於只是紙上談兵。
    - 可以找 PDIS 以外的人某一兩個 PO? / Apple?

|      | 6 月         | 7 月                       | 8 月                                         | 9 月       | 10 月        |
| ---- | ------------ | -------------------------- | -------------------------------------------- | ---------- | ------------ |
| 進度 | 內部對齊挖坑 | 設計規範初稿、風格指南雛形 | 互評（討論）、實測（找一兩個內部網站來試行） | 修正、迭代 | 交出 beta 版 |
| 坑(每週投入時間) | Anyone         | 規範坑(2~3 小時討論, 4~5 小時自行作業) 、風格坑(2~3 小時討論, 4~5 小時自行作業)   | 規範坑(2~3 小時討論, 1~2 小時修改)、風格坑(2~3 小時討論, 1~2 小時修改)、應用坑(2~3 小時討論, 4~5 小時自行作業)                                |   規範坑、風格坑、應用坑(2~3 小時討論, 1~2 小時修改)         |              |
|  產出    |    計畫          |   設計規範初稿、資訊架構初稿、風格指南雛形    |   設計規範修正、風格指南修正、Library、Design System 網站雛形    |    設計規範beta版定稿、風格指南beta版定稿、Design System 網站      |         交付、內部網站試做   |



### TODO
確認跳坑：
- 規範坑/ YW, ST, Targee, Wendy, Fang
- 風格坑/ ST, Wendy, Fang
- 應用坑/ Targee, YW, ST, Wendy
- 承辦心聲代表、廠商心聲代表： Targee/Taco, Apple

接下來：
* 6 月先自行研究&準備 
    * 設計系統的定義：「設計原則」(Design Principle)、「設計規範」(Design Guideline)、「設計規則」(Design Rules)、「風格指南」(Style Guide)。而其中，國發會上架的「數位服務指引」類似於「設計原則」的層次。
    * 找一兩個公家機關的設計系統參考
        範例：
        - [英國的設計系統/GOV.UK Desgin system](https://design-system.service.gov.uk)
        - [台灣的數位服務指引/Taiwan Digital Service Guidelines](https://www.ndc.gov.tw/Content_List.aspx?n=E7F6C261A5F5D9F5)
        - [澳洲的設計系統/Australia Design System](https://designsystem.gov.au)
        - [加拿大英屬哥倫比亞設計系統/British Columbia DevHub](https://developer.gov.bc.ca/Design-System/About-the-Design-System)
        - [新加坡的設計系統/singapore design system](https://www.designsystem.tech.gov.sg/about/)
        - [美國的設計系統/U.S. Web Design System (USWDS)](https://designsystem.digital.gov/)
    * 找一個公司的設計系統參考
        * [Google Material Design](https://material.io/design)
    * 找一兩個中文的設計系統參考
        * https://ant.design/index-cn
    
    * 注意公家機關跟公司的差別
    * 注意英文跟中文的差別
* 自由在 channel 上丟連結（儘量要附一段說明文字讓大家知道要看哪裡～看什麼～）
* 下下週約一次自由分享（學習資料、參考連結、摘要 etc）6/30 
* 找出一個7月之後適合每週討論的時間。每週二 - 7/6開始










