設計系統資源


2024/11/12 下午 04:46:09
設計系統元件

折疊選單 (Accordion)

使用情境舉例 多層級導覽選單。
步驟式填寫表單。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/accordion/
參考 https://guide.nics.nat.gov.tw/components/accordion/index.html
更新日期 11/06/2024


設計系統元件

導覽標記 (Breadcrumb)

使用情境舉例 顯示使用者在目前網站中位置、幫助使用者理解網站的多個層級。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/breadcrumbs/
參考 https://guide.nics.nat.gov.tw/components/breadcrumb/index.html
更新日期 11/06/2024


設計系統元件

按鈕及連結 (Button and Link)

使用情境舉例 所有網站連結與按鈕。如網站上的字級按鈕,應該採用
<button> 按鈕,實際上卻錯誤地採用 <a> 連結。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/button/
參考 https://guide.nics.nat.gov.tw/components/button-and-link/index.html
更新日期 11/06/2024


設計系統元件

輪播 (Carousel)

使用情境舉例 循環顯示一組內容。
樣式及使用者體驗需求 參考 https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
參考 https://guide.nics.nat.gov.tw/components/carousel/index.html
更新日期 11/06/2024


設計系統元件

多重選擇及補充說明 (Checkable)

使用情境舉例 新增的多重選擇欄位及補充說明。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/radios/
參考 https://guide.nics.nat.gov.tw/components/checkable/index.html
更新日期 11/06/2024


設計系統元件

通知提示橫幅 (Cookie Banner)

使用情境舉例 讓使用者接受或拒絕非必要的 cookie。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/cookie-banner/
參考 https://guide.nics.nat.gov.tw/components/cookie-banner/index.html
更新日期 11/06/2024


設計系統元件

可搜尋選項列表 (Datalist)

使用情境舉例 縣市地址選擇列表。
國家選擇列表。
樣式及使用者體驗需求 參考 https://guide.nics.nat.gov.tw/components/datalist/index.html
更新日期 11/06/2024


設計系統元件

數位名片 (Digital Info)

使用情境舉例 由實體名片經QR CODE 連結至的線上數位版本
機關公告或預告事項時,或於電子公文書信中,提供的聯絡人資訊網頁。
樣式及使用者體驗需求 參考 https://guide.nics.nat.gov.tw/components/digital-info/index.html
更新日期 11/06/2024


設計系統元件

頁尾 (Footer)

使用情境舉例 所有網站服務(提供基礎網頁起始範本)。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/footer/
參考 https://guide.nics.nat.gov.tw/components/footer/index.html
更新日期 11/06/2024


設計系統元件

表單欄位 (Form)

使用情境舉例 所有表單欄位,如申請網站有許多的規則的長網址欄位。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/text-input/
參考 https://guide.nics.nat.gov.tw/components/form/index.html
更新日期 11/06/2024


設計系統元件

頁首 (Header)

使用情境舉例 所有網站服務(提供基礎網頁起始範本)。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/header/
參考 https://guide.nics.nat.gov.tw/components/header/index.html
更新日期 11/06/2024


設計系統元件

頁面地標架構 (Landmark)

使用情境舉例 所有網站服務(提供基礎網頁起始範本)。
樣式及使用者體驗需求 參考 https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
參考 https://guide.nics.nat.gov.tw/components/landmark/index.html
更新日期 11/06/2024


設計系統元件

公文 (Official Document)

使用情境舉例 行政院公報的網頁文字版。
機關網站的各項公告事項網頁。
樣式及使用者體驗需求 參考 https://guide.nics.nat.gov.tw/components/official-document/index.html
更新日期 11/06/2024


設計系統元件

密碼輸入欄位 (Password Input)

使用情境舉例 用於網站註冊或登入。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/password-input/
參考 https://guide.nics.nat.gov.tw/components/password-input/index.html
更新日期 11/06/2024


設計系統元件

跳至主要內容區 (Skip-To)

使用情境舉例 此為符合無障礙規範A等級所需要的元件。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/skip-link/
參考 https://paypal.github.io/skipto/
參考 https://guide.nics.nat.gov.tw/components/skip-to/index.html
更新日期 11/06/2024


設計系統元件

表格 (Table)

使用情境舉例 所有資料表單,如申請網站在使用者登入後所出現的已申請列表
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/table/
參考 https://guide.nics.nat.gov.tw/components/table/index.html
更新日期 11/06/2024


設計系統元件

頁籤 (Tabs)

使用情境舉例 顯示多個相關但不同的資訊或選項。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/tabs/
參考 https://guide.nics.nat.gov.tw/components/tabs/index.html
更新日期 11/06/2024


設計系統元件

文字輸入區塊 (Textarea)

使用情境舉例 網站在接收用戶自填欄位時,因資料庫或文書處理關係,限制文字字數。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/text-input/
參考 https://design-system.service.gov.uk/components/character-count/
參考 https://guide.nics.nat.gov.tw/components/textarea/index.html
更新日期 11/06/2024


設計系統元件

文字規範 (Typography)

使用情境舉例 網站中如何選擇、安排和調整字體、字形、大小、間距、行距等元素的規範。
樣式及使用者體驗需求 參考 https://www.w3.org/TR/clreq/
參考 https://design-system.service.gov.uk/styles/type-scale/
參考 https://guide.nics.nat.gov.tw/components/typography/index.html
更新日期 11/06/2024


設計系統元件

警告文字 (Warning Text)

使用情境舉例 勞保局e化服務系系統維護公告。
住宅補貼線上申請受理申請已截止公告。
樣式及使用者體驗需求 參考 https://design-system.service.gov.uk/components/warning-text/
參考 https://guide.nics.nat.gov.tw/components/warning-text/index.html
更新日期 11/06/2024