設計系統元件 | 折疊選單 (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 |