Figma Color10
#EBF6F4Color/Brand Primary/10
UI COMPONENTS
元件
以視覺預覽找出可重用的 UI Components；Icon 與其他元件都在同一個目錄中。
UI Components另有 個 Icon
SYSTEM · 01
Color｜色彩
依 Figma 色彩（Color）定義，查找原始色票（Primitives）、語意用途（Semantic），以及淺色／深色（Light／Dark）的引用與值。
設計來源與 Token 對照
選色與閱讀順序
- Primitives｜原始色票
- 依品牌主色、品牌次色、中性色與語意色盤列出固定色值；Figma 此層標示為模式 2（Mode 2）。
- Semantic｜用途角色
- 先依邊框（Border）、按鈕（Button）、表單（Form）、圖標（Icon）、文字（Text）選擇用途，再查看淺色／深色（Light／Dark）各自引用的色票與值。
- 套用與狀態
- 滑入（Hover）、停用（Disabled）、選取（Selected）等狀態使用對應角色；不要只因顏色相近就互換，也不自動把深色（Dark）值反相。
以下保留 Figma 原始角色名稱及淺色／深色（Light／Dark）定義。本站主題切換只調整說明介面，色票維持來源實際數值。
Color usage｜色系與用途總覽
依主要、次要、警示與輔助用途快速選色；色碼依本次 Figma 定義，實際元件仍使用下方語意角色。
Primary｜主要色系
主要操作與品牌識別。綠色與深藍建立視覺主次，滑入時使用各自對應色。
- 主要綠
#45B29D - 主要綠滑入
#3AA48F - 深藍
#3C4D5E - 深藍滑入
#2B3C50
Secondary｜次要色系
用於次要資訊、停用或中性分隔；實際用途依下方語意角色選用。
- 中性灰
#979797 - 淺灰
#CECECE
Alert｜警示色系
紅色表達警示或錯誤，橘黃色表達提醒與注意，並搭配明確文字。
- 警示紅
#F46155 - 警示紅滑入
#F1473A - 提醒橘黃
#FF9900 - 提醒橘黃滑入
#FF7F00
Supporting｜輔助色系
支援背景與資料辨識，以淺色區分交錯列、未讀與選取狀態。
- 白底／奇數列
#FFFFFF - 偶數列
#FBFBFB - 中性淺底
#EFEFEF - 未讀列
#FFFAE7 - 選取列
#EBF6F4
Primitives｜基礎色
27 筆原始色票。分為品牌主色（Brand Primary）、品牌次色（Brand Secondary）、中性色（Neutral）及語意色盤（Semantic）；原始名稱保留供查找。
Brand Primary｜品牌主色
80
#45B29DColor/Brand Primary/80
90
#3AA48FColor/Brand Primary/90
Brand Secondary｜品牌次色
10
#EAEBEDColor/Brand Secondary/10
60
#686E74Color/Brand Secondary/60
80
#3C4D5EColor/Brand Secondary/80
90
#2B3C50Color/Brand Secondary/90
Neutral｜中性色
00
#FFFFFFColor/Neutral/00
10
#FBFBFBColor/Neutral/10
20
#EFEFEFColor/Neutral/20
30
#E1E1E1Color/Neutral/30
40
#CECECEColor/Neutral/40
50
#979797Color/Neutral/50
60
#646464Color/Neutral/60
70
#4E4E4EColor/Neutral/70
80
#383838Color/Neutral/80
90
#222222Color/Neutral/90
Semantic｜語意色盤
Blue/10｜藍色
#F0F3F7Color/Semantic/Blue/10
Blue/80｜藍色
#6883A1Color/Semantic/Blue/80
Other/10｜其他輔助色
#FFFAE7Color/Semantic/Other/10
Other/80｜其他輔助色
#FFBA52Color/Semantic/Other/80
Red/20｜紅色
#FCDAD8Color/Semantic/Red/20
Red/80｜紅色
#F46155Color/Semantic/Red/80
Red/90｜紅色
#F1473AColor/Semantic/Red/90
Yellow/20｜橘黃色
#FFE5CCColor/Semantic/Yellow/20
Yellow/80｜橘黃色
#FF9900Color/Semantic/Yellow/80
Yellow/90｜橘黃色
#FF7F00Color/Semantic/Yellow/90
Semantic｜語意色
38 個用途角色。每筆同時列出淺色／深色（Light／Dark）的引用與解析值；即使兩個模式相同，也依原稿保留。
Border｜邊框
border-alert警示邊框
- Light｜淺色
#F46155Color/Semantic/Red/80- Dark｜深色
#F46155Color/Semantic/Red/80
border-default預設邊框
- Light｜淺色
#CECECEColor/Neutral/40- Dark｜深色
#CECECEColor/Neutral/40
border-input輸入欄邊框
- Light｜淺色
#E1E1E1Color/Neutral/30- Dark｜深色
#E1E1E1Color/Neutral/30
border-select選取邊框
- Light｜淺色
#6883A1Color/Semantic/Blue/80- Dark｜深色
#6883A1Color/Semantic/Blue/80
Button｜按鈕
btn-alert警示按鈕
- Light｜淺色
#F46155Color/Semantic/Red/80- Dark｜深色
#F46155Color/Semantic/Red/80
btn-alert-hover警示按鈕滑入
- Light｜淺色
#F1473AColor/Semantic/Red/90- Dark｜深色
#F1473AColor/Semantic/Red/90
btn-disabled停用按鈕
- Light｜淺色
#CECECEColor/Neutral/40- Dark｜深色
#CECECEColor/Neutral/40
btn-neutral中性按鈕
- Light｜淺色
#FFFFFFColor/Neutral/00- Dark｜深色
#EAEBEDColor/Brand Secondary/10
btn-neutral-hover中性按鈕滑入
- Light｜淺色
#321B1B1A直接色值（含透明度）- Dark｜深色
#321B1B1A直接色值（含透明度）
btn-notice提醒按鈕
- Light｜淺色
#FF9900Color/Semantic/Yellow/80- Dark｜深色
#FF9900Color/Semantic/Yellow/80
btn-notice-hover提醒按鈕滑入
- Light｜淺色
#FF7F00Color/Semantic/Yellow/90- Dark｜深色
#FF7F00Color/Semantic/Yellow/90
btn-primary主要按鈕
- Light｜淺色
#45B29DColor/Brand Primary/80- Dark｜深色
#45B29DColor/Brand Primary/80
btn-primary-hover主要按鈕滑入
- Light｜淺色
#3AA48FColor/Brand Primary/90- Dark｜深色
#3AA48FColor/Brand Primary/90
btn-secondary次要按鈕
- Light｜淺色
#3C4D5EColor/Brand Secondary/80- Dark｜深色
#3C4D5EColor/Brand Secondary/80
btn-secondary-hover次要按鈕滑入
- Light｜淺色
#2B3C50Color/Brand Secondary/90- Dark｜深色
#2B3C50Color/Brand Secondary/90
btn-txt-disabled停用按鈕文字
- Light｜淺色
#979797Color/Neutral/50- Dark｜深色
#979797Color/Neutral/50
Form｜表單與頁面
form-row-even偶數資料列
- Light｜淺色
#FBFBFBColor/Neutral/10- Dark｜深色
#FBFBFBColor/Neutral/10
form-row-odd奇數資料列
- Light｜淺色
#FFFFFFColor/Neutral/00- Dark｜深色
#FFFFFFColor/Neutral/00
form-row-select選取資料列
- Light｜淺色
#EBF6F4Color/Brand Primary/10- Dark｜深色
#EBF6F4Color/Brand Primary/10
form-row-unread未讀資料列
- Light｜淺色
#FFFAE7Color/Semantic/Other/10- Dark｜深色
#FFFAE7Color/Semantic/Other/10
form-thead表格標題列
- Light｜淺色
#E1E1E1Color/Neutral/30- Dark｜深色
#E1E1E1Color/Neutral/30
form-title-primary主要表單標題
- Light｜淺色
#3C4D5EColor/Brand Secondary/80- Dark｜深色
#3C4D5EColor/Brand Secondary/80
form-title-secondary次要表單標題
- Light｜淺色
#686E74Color/Brand Secondary/60- Dark｜深色
#686E74Color/Brand Secondary/60
page-bg頁面背景
- Light｜淺色
#F0F3F7Color/Semantic/Blue/10- Dark｜深色
#F0F3F7Color/Semantic/Blue/10
Icon｜圖標
icon-default預設圖標
- Light｜淺色
#222222Color/Neutral/90- Dark｜深色
#222222Color/Neutral/90
icon-gray灰色圖標
- Light｜淺色
#979797Color/Neutral/50- Dark｜深色
#979797Color/Neutral/50
icon-invert反白圖標
- Light｜淺色
#FFFFFFColor/Neutral/00- Dark｜深色
#FFFFFFColor/Neutral/00
icon-primary主要圖標
- Light｜淺色
#45B29DColor/Brand Primary/80- Dark｜深色
#45B29DColor/Brand Primary/80
icon-red警示紅圖標
- Light｜淺色
#F46155Color/Semantic/Red/80- Dark｜深色
#F46155Color/Semantic/Red/80
icon-secondary次要圖標
- Light｜淺色
#3C4D5EColor/Brand Secondary/80- Dark｜深色
#3C4D5EColor/Brand Secondary/80
icon-yellow提醒黃圖標
- Light｜淺色
#FFBA52Color/Semantic/Other/80- Dark｜深色
#FFBA52Color/Semantic/Other/80
Text｜文字
text-alert警示文字
- Light｜淺色
#F46155Color/Semantic/Red/80- Dark｜深色
#F46155Color/Semantic/Red/80
text-default預設文字
- Light｜淺色
#222222Color/Neutral/90- Dark｜深色
#222222Color/Neutral/90
text-disabled停用文字
- Light｜淺色
#979797Color/Neutral/50- Dark｜深色
#979797Color/Neutral/50
text-invert反白文字
- Light｜淺色
#FFFFFFColor/Neutral/00- Dark｜深色
#FFFFFFColor/Neutral/00
text-placeholder提示文字
- Light｜淺色
#979797Color/Neutral/50- Dark｜深色
#979797Color/Neutral/50
text-primary主要文字
- Light｜淺色
#45B29DColor/Brand Primary/80- Dark｜深色
#45B29DColor/Brand Primary/80
text-secondary次要文字
- Light｜淺色
#3C4D5EColor/Brand Secondary/80- Dark｜深色
#3C4D5EColor/Brand Secondary/80
中性按鈕（btn-neutral）的淺色（Light）為 #FFFFFF，深色（Dark）為 #EAEBED；中性按鈕滑入（btn-neutral-hover）為含透明度（Alpha）的 #321B1B1A，顯示結果會隨底色混合。其餘值依本次設計稿列示，不推測額外暗色值。
來源與核對紀錄
查看 Color 核對摘要
核對日期：2026-10-21。已讀取 Figma Color_sys 2243:2925 的 27 筆 Primitives、38 筆 Semantic 與 Light／Dark 引用。主要深藍依本稿為 #3C4D5E，取代本頁舊資料 #3C4C5E。
本次更新 Color 說明及色票，不改全站 CSS 色彩、其他元件或既有 Token Registry。Variables ID、工程 CSS variable 與既有快照命名仍須逐項核對；未宣告全站或 Vue 已同步。
SYSTEM · 02
字體
整理內部系統舊版 Guideline 的字體家族、字重與文字層級；正式 Text Style 與 Token 待確認。
Storybook 字體堆疊：Arial, Helvetica, Noto Sans TC（思源黑體）, 微軟正黑體, sans-serif ／ 字元間距：0.06em
字體預覽：使用 Storybook 提供的 Noto Sans TC（思源黑體）woff2 Regular／Bold。
思源黑體Noto Sans TC Regular
思源黑體Noto Sans TC Bold
微軟正黑體Microsoft JhengHei Normal
微軟正黑體Microsoft JhengHei Bold
ArialArial Normal
ArialArial Bold
文字層級
頁面標題頁面標題22px · Bold · #3C4C5E
基本字體頁面基本字體16px · Normal · #222222
表單段落標題表單段落標題20px · Bold · #3C4C5E
導覽列通知訊息頁面內容我的最愛
首頁版型
內頁版型
系統首頁範例頁面
- 1導覽列
- 2通知訊息
- 3個人導航板
- 4系統連結地圖
- 5我的最愛
1 導覽列｜共用元件，左側企業 Logo、系統名稱為固定規格；右側功能元件可依系統需求選用。
2 通知訊息｜顯示系統通知訊息，可收合控制。
3 個人導航板｜個人化導航面板，顯示相關數字並可連結至該頁面。
4 系統連結地圖｜全部系統列表及其子列表可收合展開，點選星號快速加入我的最愛。
5 我的最愛｜點選展開，可快速連結至已加入之我的最愛頁面。
系統內頁範例頁面
- 1導覽列
- 2側邊選單
- 3內頁內容
1 導覽列｜共用元件，左側企業 Logo、系統名稱為固定規格；右側功能元件可依系統需求選用。
2 側邊選單｜共用元件，提供系統內部其他頁面的固定連結。
3 內頁內容｜內頁內容主要呈現區塊，依各系統規劃其內容。
NAVIGATION
Navigation｜導覽元件
依 Figma 共用指南，整理導覽列、公告、側邊選單、麵包屑、使用者／通知與分頁器。
設計元件及開發源碼
導覽列／公告／使用者與通知
Vue Navigation（待同步）
陳○安 01234
既有導覽列實作與尺寸參考
- 高度：60px ／ 左右距離 padding：30px
- 背景色：#45B29D
- 固定元件：企業 Logo、系統名稱
企業 Logo
nav > #navPageLogo > a > img- 圖片尺寸 155px × 32px
系統名稱
nav > #navPageTitle- 中文全型符號「｜」＋系統名稱
- 20px ／ Bold ／ #FFFFFF
功能元件
快速撥號
id="navCallContainer"登出
id="navLogoutContainer"訊息提示
id="navNotifyContainer"
新訊息：button class="alert"分機登入
# 7711 
id="navExtensionContainer"上線控制
上線
id="navOnlineContainer"側邊選單｜Sidemenu／Submenu
既有收合／雙層選單實作參考
- 一般系統請使用基礎側邊選單。
- 若有特殊需求或版面資訊過多，可選用收合側邊選單；建議仍以基礎側邊選單為主。
基礎側邊選單樣式
id="sideMenuContainer"- 所在頁面：
li class="select"，#45B29D 與前方直線引導；點選項目可檢視選取狀態。 - 二階選單：
li.withSubMenu > ul.sideSubMenu > li；第一層目錄不含連結。 - 互動來源：舊版 Guideline；Storybook 尚待同步補齊。
收合側邊選單樣式
｜系統名稱id="sideMenuContainer" class="hamburger"- 點選漢堡圖標展開；展開後切換為深藍底的 X，點選可收合。
- 互動來源：舊版 Guideline；Storybook 尚待同步補齊。
雙層基礎側邊選單樣式
- 第一層：
div.firstList > ul.sideMainMenu - 第二層：
div.secondList > ul.sideMainMenu
雙層收合側邊選單樣式
｜系統名稱- 同時使用
hamburger、firstList與secondList結構。 - 點選漢堡圖標展開；展開後切換為深藍底的 X。
- 互動來源：舊版 Guideline；Storybook 尚待同步補齊。
麵包屑｜Breadcrumb
分頁器｜Pager
- 基礎分頁器樣式：
class="pagerContainer"。 - 所在頁面使用
li class="now"：深藍色#3C4C5E與圓形底色；其他頁碼為灰色#979797。
一般頁碼｜含前後頁
class="pagerContainer totalPageMore"
此範例列出 5 頁；前後箭頭切換相鄰頁碼。
一般頁碼｜不同頁數
2 頁
class="pagerContainer totalPage2"
3 頁
class="pagerContainer totalPage3"
4 頁
class="pagerContainer totalPage4"
5 頁
class="pagerContainer totalPage5"
輸入頁數樣式
共 100 筆
頁／7 頁
class="pagerContainer inputPage"
頁數過多時，可輸入 1 至 7 的頁碼快速查找。
- 瀏覽器頁籤網頁名稱前，需設定玉山 Logo 為頁籤圖標。
- 一般系統請使用基礎頁籤圖標樣式；特殊需求才選用特殊頁籤圖標樣式。
基礎頁籤圖標樣式
- Favicon 圖檔為 images 資料夾內的 ESUN.ico
<link rel="shortcut icon" type="images/x-icon" href="images/ESUN.ico">
特殊頁籤圖標樣式
- Favicon 圖檔為 images 資料夾內的 ESUN-2.ico
<link rel="shortcut icon" type="images/x-icon" href="images/ESUN-2.ico">
舊版以 ESUN.ico 作為基礎樣式、ESUN-2.ico 作為特殊樣式。現行部署 favicon 與對應設計來源尚待確認，以下只呈現使用判斷。
基礎一致的玉山識別
一般系統優先採用，讓多系統切換時可辨識。
特殊有明確情境才使用
不可只為了裝飾而產生不同頁籤圖標。
交付檢查HTML head 與圖檔
實際 favicon 應在部署前確認檔案與載入設定。
- 基礎 Popup：
class="popup" > class="popupContainer"。 - 依內容類型選用文字、圖示文字或表單結構。
文字 Popup
純文字
popupContainer messagepopupMessageContainer > messageContent：訊息文字。
文字 Popup
圖示＋文字
popupContainer messagepopupMessageIcon success／alert。
表單 Popup
表單
popupContainer formpopupFormContainer > formContainer。
- 以
Internal_Error.html頁面為模板，並依情境調整文字及圖示。 - 特別提醒文字使用 #F46155。
親愛的主管、同仁，您好：
目前系統正進行維護作業，暫時無法正常使用。
維護期間造成您的不便，敬請見諒！
- 圖示：
class="messageIconContainer" > img - 文字：
class="messageTextContainer" > class="mainContent"；提醒文字以class="alert"呈現。
這些檔案未被本網站載入，也不代表現行工程標準。僅在需要忠實重現舊版行為時，依下列順序選用；套件版本、事件規則與無障礙要求仍須在導入前確認。
站內可發布快照根目錄
查看取用說明assets/legacy-guideline/已保留舊版 CSS、JS、圖片、日期選單 Sprite 與 Loading JSON；CSS 的 ../images/ 相對引用可在此結構內正常解析。
CSS 說明
JS 說明
| 分類 | 相對路徑 | 用途 |
|---|---|---|
| 共用基礎 | assets/legacy-guideline/js/jquery-3.3.1.min.js | jQuery 3.3.1，相依程式需先載入 |
| 共用設定 | assets/legacy-guideline/js/main.js | 主要動態設定 |
| 元件 JS | assets/legacy-guideline/js/select2.full.min.js | 搜尋下拉選單程式 |
assets/legacy-guideline/js/jquery-ui.min.js | 日期選單及排序程式 | |
assets/legacy-guideline/js/kendo.timepicker.min.js | 時間選單程式 | |
assets/legacy-guideline/js/input_pager.js | 輸入頁數程式 | |
assets/legacy-guideline/js/lottie.min.js | Loading 動畫函式庫 | |
assets/legacy-guideline/js/loading.js | Loading 程式設定 |
舊版相依載入順序
以下是舊版 index.html 的載入順序。若只引用個別元件，仍需保留該元件所需的前置套件；不要將整組檔案直接加入本頁。
assets/legacy-guideline/js/jquery-3.3.1.min.js→assets/legacy-guideline/js/main.jsassets/legacy-guideline/js/jquery-ui.min.js→assets/legacy-guideline/js/select2.full.min.js→assets/legacy-guideline/js/kendo.timepicker.min.js→assets/legacy-guideline/js/input_pager.jsassets/legacy-guideline/js/jquery.easing.min.js→assets/legacy-guideline/js/scrollwatch.js→assets/legacy-guideline/js/FileSaver.min.js→assets/legacy-guideline/js/jszip.min.jsassets/legacy-guideline/js/lottie.min.js→assets/legacy-guideline/js/loading.js→assets/legacy-guideline/js/design_guideline.js
- 完整快照亦包含
assets/legacy-guideline/css/design_guideline.css、assets/legacy-guideline/js/datepicker.js與assets/legacy-guideline/js/esun_cbp2_loading.json。 - 圖片、SVG 與日期選單 Sprite 位於
assets/legacy-guideline/images/；請保留此相對目錄，避免 CSS 圖示引用失效。
ELEMENT · 01
按鈕
依最新 Figma Button 元件集與 44 筆 Token 呈現用途、變體、尺寸及狀態。
設計元件及開發源碼
閱讀順序
元件定位
使用場景與操作層級
| 場景 | 選用層級 | 使用方式 |
|---|---|---|
| 表單提交／流程下一步 | Primary Fill | 送出申請、儲存設定、建立案件等主行動。 |
| 次要操作／同區塊輔助行動 | Secondary Outline | Primary 已存在，或操作重要性較低時使用。 |
| 刪除／撤銷／警示操作 | Negative | 依負向嚴重程度選色；有風險時搭配確認 Popup 或二次確認流程。 |
Anatomy｜元件結構
文案原則
色彩使用情境與 Token 對應
Primary Fill｜綠色
class="legacy-button uiStyle sizeM size-m green btnGreen"comp/btn/primary
Primary Fill｜深藍色
class="legacy-button uiStyle sizeM size-m deep btnDarkBlue"comp/btn/secondary
Primary Fill｜警示紅
class="legacy-button uiStyle sizeM size-m red btnRed"comp/btn/alert
Secondary Outline｜綠色
class="legacy-button uiStyle sizeM size-m outline-green btnGreenLine"comp/btn/primary-outline
Secondary Outline｜深藍色
class="legacy-button uiStyle sizeM size-m outline-deep btnDarkBlueLine"comp/btn/secondary-outline
Secondary Outline｜白色
class="legacy-button uiStyle sizeM size-m outline-white btnWhiteLine"comp/btn/neutral
Primary Fill｜警告橘
class="legacy-button uiStyle sizeM size-m notice btnNotice"comp/btn/notice
按鈕尺寸
S｜小尺寸
class="legacy-button uiStyle sizeS size-s green"
內距 7px／15px；字級 16px；圓角 20px。
M｜中尺寸
class="legacy-button uiStyle sizeM size-m green btnGreen"
內距 9px／15px；字級 16px；圓角 20px。
L｜大尺寸
class="legacy-button uiStyle sizeL size-l green"
內距上 10px、右左 15px、下 11px；字級 20px；圓角 24px。Alert／Notice 的 L 水平內距為 20px。
以 Figma 主元件的 padding 與字級控制尺寸，不把舊版 36／40／48px 固定高度當作本次 Token 規格。主元件字型為 Microsoft JhengHei、700 字重、normal 行高；未安裝該字型時使用系統替代字型。
Icon 位置
左側 Icon
class="legacy-button uiStyle sizeM size-m green withIcon with-icon"
Icon 24px；左側與上下內距使用 icon-inset 8px。
右側 Icon
class="legacy-button uiStyle sizeM size-m green withIcon with-icon icon-right"
Icon 與文字間距直接引用 icon-label-gap 8px。
Icon 間距以已確認的 Token 8px 為準。Figma 主元件目前 gap 10px 的套用差異保留於比對工作單，本站不沿用。
Status｜狀態與回饋
來源與核對紀錄
查看 Button 核對摘要
- 核對日期：2026-10-20。已核對 Figma Button 元件集、Designer guide 與 44 筆 Token 的名稱、Alias 及 Light／Dark 值。
- 已補齊 8 筆預設色彩 Token，修正 Hover overlay 10% 透明度；Icon 與文字間距依確認採 8px。
- 待補充：Figma 元件的 Icon 間距綁定、深色 Primary 文字對比、Focus／Loading／Error 工程驗收，以及正式版本資訊。
- 待同步：既有任務樣板與 Storybook。本次更新僅套用於本頁 Button 範例。
COMPONENT
標籤
視覺規範與使用情境待補充；目前可查閱既有 Token 對照。
COMPONENT
右側標籤
視覺規範與使用情境待補充；目前可查閱既有 Token 對照。
ELEMENT · 02
選擇元件
依 Figma Radio Btn、Checkbox 與 Switch Designer guide 整理元件定位、結構、場景、型態及狀態。
先判斷選項是否互斥，以及切換後是否立即生效，再選擇元件。下列互動僅為網站示範，未連接實際系統設定。
設計元件及開發源碼
Figma 入口連至本次核對的 Designer guide；Vue 入口連至站內已存在的對應 Docs。
選用原則
- Radio Btn
- 一組互斥答案，只能選一項；需要一次看見所有選項。
- Checkbox
- 獨立選項，可選零至多項；也適用於條款確認。
- Switch Toggle
- 立即生效的開／關設定；三個固定互斥選項才使用 switch-multi。
Radio Btn｜單選元件
使用原則
Radio Button 用於一組互斥選項，使用者只能選擇其中一個答案。選項可同時成立時改用 Checkbox；只有開關兩態且立即生效時改用 Switch。
- 1. Purpose
- 先確認互斥關係：每組只回答一個問題，選項之間不能同時成立。
- 2. Variants
- 依介面密度選 large／small；需要文字說明時使用 text，已有清楚脈絡時可使用 primary。
- 3. Scenario
- 檢查選項文案、預設值，以及 Disabled 與鎖定原因是否清楚。
元件定位
- Use when｜建議
- 同一題只能選一項，且使用者需要直接看見所有可選答案。
- Consider when｜評估
- 可複選改用 Checkbox；開／關設定改用 Switch；選項很多或需要搜尋時改用 Select。
- Avoid when｜避免
- 不要用 Radio 表示多選，也不要將單一 Radio 當成確認或啟用功能的按鈕。
Anatomy｜元件結構
Radio 由 control、label 與 state feedback 組成；text variant 的文字也是可點擊範圍。
- Control
- 圓形選取控制與內部 dot。
- Label
- 選項文字與點擊範圍，描述相同層級的答案。
- State
- Enable、Selected、Disabled、Selected-lock；同時表達是否已選及能否操作。
使用場景與判斷
- 單一題目、只能擇一
- 例如身分類別、通知方式或案件類型；選項彼此排斥，送出時只保留其中一個值。
- 少量篩選條件
- 例如全部／待處理／已完成。選項約 2–5 個，切換後立即影響清單或頁面結果。
- 已選定但不可更改
- 既有資料、權限限制或送出後鎖定時，使用 Selected-lock 顯示目前值，並在附近補充原因。
Do／Avoid
- Do
- 每組只回答一個問題；選項文案維持相同語意層級，避免混入不同分類。
- Avoid
- 複選、功能切換或大量選項，改用對應元件。
- Check
- 確認預設選取、鍵盤焦點順序，及 Disabled／Selected-lock 是否有足夠脈絡。
Variants overview｜型態與尺寸
Large／Primary
已有場域脈絡、不需在控制項內顯示文字的緊湊場景。
Large／Text
需要文字 label 且整列可點擊的表單場景。
Small／Primary
表格、篩選列或空間較緊湊的區塊。
Small／Text
緊湊區塊仍需文字說明時使用。
Status｜狀態與回饋
Enable 對應未選且可操作；Selected-lock 對應已選但不可變更。Figma 指南寫作 selected-lock，現有 Variables 路徑為 selected-locked，兩者不可誤判為缺漏。
Enable／Default
可操作但未選取。點選控制項或文字可選取。
Selected
已選取；同組其他選項維持未選。
Disabled
不可操作；降低對比，並在原因不明時補充說明。
Selected-lock
已選取但不可變更；用於權限限制、已送出資料或系統固定值。
Checkbox｜多選元件
使用原則
Checkbox 讓使用者對多個獨立項目選取、取消或確認，可允許零至多項。單選流程不應用 Checkbox 取代 Radio。
- 1. Purpose
- 先判斷是否多選：選項必須可獨立成立。
- 2. Variants
- 選擇 Primary、Text 或 Primary-delete，再依資訊密度選 Large／Small。
- 3. Scenario
- 補齊 Selected、Disabled、Selected-lock 的語意，讓使用者理解目前是否可操作。
元件定位
Checkbox 不負責互斥決策，也不代表立即切換系統狀態。
- Use when｜建議
- 清單篩選、批次勾選、條款確認，或允許全不選的多選任務。
- Consider when｜評估
- 開關狀態優先使用 Switch；只能擇一時優先使用 Radio。
- Avoid when｜避免
- 不要用於互斥選項、主要動作按鈕，或需要立即切換設定的情境。
Anatomy｜元件結構
由選取框、勾選圖示、文字標籤與狀態語意組成；有文字時，label 與 selector 應同步操作。
- Box
- 尺寸、邊框、底色與圓角。
- Indicator
- 勾選圖示，表達 Selected 狀態。
- Label
- 選項文字、禁用色與可點擊區域。
使用場景
- 資料篩選
- 類別、狀態或部門等多個條件可並存，可同時勾選多項。
- 批次選取
- 用於列表或表格項目選取，可支持多筆資料後續刪除、匯出或移動。
- 條款確認
- 由使用者主動確認單一條件；若是即時設定開關，改用 Switch。
Do／Avoid
- Do
- label 清楚描述選項，selector 與 label 都指向同一個選取行為。
- Avoid
- 不要呈現互斥選項；不要混用 Disabled 與 Selected-lock。
- Check
- 確認每組能否多選或全不選，狀態命名與 Component Token 對應一致。
Variants overview｜型態與尺寸
- Primary
- 一般 selector，不附選項文字；適合列表前方、批次操作或清單篩選。
- Text
- 需要文字輔助時使用；label 與 selector 表達同一個選取行為。
- Primary-delete
- 僅用於刪除、移除或高風險批次選取，避免與一般選取混用。
- Large／Small
- Large 用於一般表單與操作區；Small 用於密集列表、表格或空間受限的選項。
Primary-delete｜刪除／移除語意圖例
Large／Primary
Large／Text
Small／Primary
Small／Text
Status｜狀態與回饋
狀態需同時說明是否已選、是否可操作，以及禁用或鎖定的原因。Disabled 降低視覺強度；Selected-lock 用於必選、權限限制或系統預設保留項。
Enable／Default
可操作但未選取。點選控制項或文字可選取。
Selected
已選取；再次點擊可取消，除非該項被鎖定。
Disabled
不可操作；降低對比，並在原因不明時補充說明。
Selected-lock
已選取但不可變更；用於權限限制、已送出資料或系統固定值。
Switch Toggle｜切換元件
使用原則
Switch 用於單一設定的開啟／關閉，或少量互斥選項的立即切換。若需先閱讀再提交，改用 Radio、Checkbox 或表單選擇元件。
- 1. Purpose
- 先判斷是否立即生效；若需送出確認，改用表單控制。
- 2. Variants
- 依情境選純 switch、附文字 switch-text，或三段式 switch-multi。
- 3. Scenario
- 確認選項數量：兩種狀態用 switch，三個互斥選項才考慮 switch-multi。
元件定位
- Use when｜建議
- 開關設定、顯示切換、狀態啟用等立即生效的操作。
- Consider when｜評估
- 需要文字說明使用 switch-text；三個互斥選項評估 switch-multi。
- Avoid when｜避免
- 多選、長選項、需要送出確認或切換結果不明確的情境。
Anatomy｜元件結構
Switch 由 track、thumb 與可選 label 組成；switch-multi 以 container 與 selected segment 表達目前選項。
- Track
- 承載 on／off 狀態與背景色。
- Thumb／Segment
- 表示目前選取位置或選項。
- Label
- 可選文字：開、關或選項名稱，補充切換語意。
使用場景
- 單一設定開關
- 例如啟用通知、顯示額外資訊；情境已有 title 時可使用純 switch。
- 需要文字輔助
- 需明確知道開與關代表什麼時使用 switch-text。
- 三段式狀態切換
- 只有確定存在三個固定且互斥選項時才使用 switch-multi。
Do／Avoid
- Do
- 狀態、文字與切換結果一致；必要時以 label 補足語意。
- Avoid
- 不要將 switch-multi 當多選；不要用 Switch 承載長文字選項。
- Check
- 確認是否立即生效、選項是否少量，以及狀態是否不只靠顏色辨識。
Variants overview｜型態
Switch
由外部欄位標題描述設定用途。
Switch-text
控制項內的開／關文字跟隨狀態改變。
Switch-multi
目前：未處理
三個選項互斥，切換後顯示目前結果。
Status｜狀態與回饋
- On／Selected
- 功能已開啟或選項已選取，以 active track、thumb 或 selected segment 強調。
- Off／Enable
- 功能關閉但可操作；可再次點擊或以鍵盤切換。
- Text label
- 需要說明切換語意時加入開／關或選項名稱，不只靠顏色理解。
- Multi selected
- 三個互斥選項中清楚標示目前 segment，不作為一般多選。
On／Selected
Off／Enable
Text／On
Disabled
現有 Token 的停用補充範例；與 Off 的可操作狀態不同。
來源與核對紀錄
查看選擇元件核對摘要
核對日期：2026-10-20。已閱讀三份 Designer guide 的使用原則、定位、Anatomy、場景、Do／Avoid、變體與狀態；範例保留原生單選、多選、開關與鍵盤操作。
現有 Token 快照為 Radio 17、Checkbox 18、Switch collection 17 筆（含 switch-multi）。2026-10-22 已核對正式元件的 Primary-delete 紅底白叉、三段 A／B／C 配色與鎖定態，並同步 Storybook。Figma Dark Mode 的 Next steps 仍列為持續定義；深色工程預覽保留核對後的 Light 控制項色彩，不能視為正式 Dark 規格驗收。
ELEMENT · 03–06
Input｜輸入元件
文字輸入欄、下拉選單、日期與時間選單共用 Figma Input 指南，依資料型態、操作目的與狀態選用。
Input 是輸入、搜尋或選擇資料的入口。先決定需要收集的資料，再選擇功能與狀態；各範例可直接操作。
設計元件及開發源碼
Figma 連結為本次已核對的 Designer guide；Vue 連至站內對應文件。
使用原則
讓使用者知道要輸入什麼、目前能否操作，以及發生錯誤時如何修正。欄位本身不承擔過多說明，必要提示放在 label、placeholder 或 helper text。
- 1. Purpose
- 先判斷資料型態：文字、搜尋、日期、時間與長文字應使用不同 Input 功能。
- 2. State
- 明確呈現狀態，讓使用者理解此場景採用此元件的原因。
- 3. Scenario
- 確認需求文件的使用情境，與需求方釐清，不直接複製文件描述作為設計定義。
元件定位
Input 用於使用者主動提供資料，不用來呈現靜態資訊或替代文字標籤。
- Use when｜建議
- 輸入姓名、帳號、關鍵字、備註、日期或時間等需要使用者提供資料的欄位。
- Consider when｜評估
- 少量固定選項優先使用 Radio、Checkbox 或 Switch，避免使用者手動輸入；固定清單可使用 Select。
- Avoid when｜避免
- 只顯示不可編輯資訊時，使用文字或資料欄位樣式，不以 Input 假裝可操作。
Anatomy｜元件結構
由輸入容器、輸入內容、輔助按鈕與狀態訊息組成；區分 label、placeholder、value 與 helper／error text。
- Container
- 邊框、背景、尺寸與焦點狀態。
- Value／Placeholder
- 預設提示、已輸入文字或選擇值；placeholder 在輸入後消失，不能代替 label。
- Affix／Feedback
- 搜尋、日期、時間圖示與操作，以及說明或錯誤訊息。
Variants overview｜型態與功能
- Type
- 分為 Input 與 Selector。Input 接收文字；Selector 協助選擇固定值、日期或時間。
- Input
- Type：一般文字；Search：資料搜尋；TextArea：備註或較長文字。
- Selector
- Select：固定選項清單；DatePicker：年／月／日；TimePicker：固定格式時間。
- Status
- Default、Focus、Error、Disabled；同一種型態需清楚呈現四種狀態。
Status｜狀態與回饋
- Default
- 可輸入但尚未操作；placeholder 說明資料格式或輸入方向。
- Focus
- 正在輸入或選擇，邊框需明確強化，避免與 Default 混淆。
- Error
- 資料格式錯誤或必填未完成時使用，需提供可修正的錯誤說明。
- Disabled
- 條件未滿足或不可編輯時使用；不可只靠 placeholder 解釋原因。
下方 Focus 欄固定呈現焦點外觀；使用 Tab 仍可檢查真實焦點。錯誤訊息與欄位建立關聯，Disabled 使用原生停用屬性。
使用場景
- 一般文字輸入
- 姓名、帳號、金額或代碼等單行資料。
- 資料搜尋
- 大量資料表或清單上方，用於縮小資料範圍。
- 固定選項
- Select 開啟清單，適合中等數量固定選項，避免手動輸入錯誤。
- 日期與時間選擇
- 需要固定格式的年月日或時間時使用。
- 長文字內容
- 備註、說明或較長內容使用 TextArea。
Do／Avoid
- Do
- 使用清楚的 label 與 placeholder，錯誤時提供可以修正的訊息。
- Avoid
- 不要把大量說明塞進 placeholder；輸入後 placeholder 會消失。
- Check
- 確認 Type、Status、helper text 與資料格式一致，使用者能理解目前是否可操作。
Input／Type
一般單行文字，例如姓名、帳號與代碼；Input-S 用於字數較短或固定長度的資訊。
Default
請依欄位標題填寫。
Focus
可使用鍵盤或滑鼠操作。
Error
請填寫有效的客戶姓名。
Disabled
條件未滿足，目前不可編輯。
Input-L｜較長文字欄位
需要相對較多文字時，提供較寬的輸入空間；多行長內容仍使用 TextArea。
Default
請依欄位標題填寫。
Focus
可使用鍵盤或滑鼠操作。
Error
請填寫有效的備註標題。
Disabled
條件未滿足，目前不可編輯。
Input／Search
用於大量資料搜尋，通常放在表格或清單上方。輸入後按 Enter 或搜尋按鈕查看示範結果。
Default
請依欄位標題填寫。
Focus
可使用鍵盤或滑鼠操作。
Error
請填寫有效的搜尋關鍵字。
Disabled
條件未滿足，目前不可編輯。
Input／TextArea
用於備註、說明或較長文字內容。
Default
請依欄位標題填寫。
Focus
可使用鍵盤或滑鼠操作。
Error
請填寫有效的補充說明。
Disabled
條件未滿足，目前不可編輯。
Selector／Select
固定選項清單，避免手動輸入選項值。
Default
請依欄位標題填寫。
Focus
可使用鍵盤或滑鼠操作。
Error
請填寫有效的案件類型。
Disabled
條件未滿足，目前不可編輯。
Selector／DatePicker
需要選擇年、月、日時使用；以下為瀏覽器原生日期欄位。
Default
格式依瀏覽器語系顯示，資料值為 YYYY-MM-DD。
Focus
可使用鍵盤或滑鼠操作。
Error
請填寫有效的申請日期。
Disabled
條件未滿足，目前不可編輯。
Selector／TimePicker
需要選擇時間時使用；以下為瀏覽器原生時間欄位。
Default
請選擇通知時間。
Focus
可使用鍵盤或滑鼠操作。
Error
請填寫有效的通知時間。
Disabled
條件未滿足，目前不可編輯。
搜尋與群組選單｜互動補充
保留原有下拉搜尋與群組範例。此區補充清單篩選行為，共用上方 Input 指南；工程實作請對照 Vue Select 文件。
一般搜尋選單
- 選項一
- 選項二
- 選項三
- 選項四
- 找不到符合項目
class="selectField withSerch"select class="selectWithSearch"
群組搜尋選單
- A－國內航空
- 長榮航空 BR
- 中華航空 CI
- 台灣虎航 IT
- B－國外航空
- 日本航空 JL
- 全日空航空 NH
- 阿聯酋航空 EK
- 找不到符合項目
class="selectField withSerch"select class="selectWithSearch"
搜尋選單｜無法選擇
- 選項一
class="selectField withSerch"select disabled class="selectWithSearch"
來源與核對紀錄
查看 Input 核對摘要
核對日期：2026-10-20。已閱讀 Figma Input Designer guide 2294:874 的使用原則、定位、Anatomy、型態、狀態、場景、Do／Avoid、類型補充與 Status 對照。
03、04、05、06 保留各自入口，共用本指南並定位對應功能。2026-10-22 已同步 03 的 Vue Input 使用指南、文字／搜尋／長文字及四種狀態；04–06 尚未同步。未宣告 Figma 全部 Variables、尺寸綁定與正式 Dark 規格已驗收。
- 基礎資訊小卡：
class="infoCardContainer"。 - 人物識別使用
class="infoCardIcon female"或male。
資訊小卡樣式
女性
黃○山 13131部門名稱／單位名稱資深專員02-2598-1313 #1313
class="infoCardIcon female"
男性
陳○玉 15432部門名稱／單位名稱技術經理02-2598-1313 #3131
class="infoCardIcon male"
- Popup 基礎結構：
class="popupContainer" > class="popupCallContainer"。 - 輸入欄可由鍵盤或數字鍵盤帶入；清除按鈕僅在有輸入內容時可用。
快速撥號樣式
請以電腦鍵盤或點選數字按鈕進行撥號
class="popupCallContainer"class="callTextContainer"、class="keypadContainer"button class="btnKeypad"
- 基礎結構：
class="transferFormContainer"。 - 左側
transferFrom勾選後同步至右側transferTo。
穿梭框樣式
請選擇左側欲代理權限
class="transferFormContainer"class="transferForm transferFrom"、class="transferForm transferTo"input name="transferFromOption"、input name="transferToOption"
ELEMENT · 11
Loading
舊版以 Lottie JSON 呈現 Loading；此頁保留相同的基礎、遮蔽與進度 Loading 結構，以 CSS 動畫提供無相依示範。
Loading 動畫
基礎樣式
id="lottieLoadingSimple"
尺寸：80px × 80px
遮蔽樣式
class="loadingShade"class="loadingContainer"
進度 Loading 動畫
class="progressLoadingContainer"class="progressLoading" > class="progressLoadingbar"
ELEMENT · 12
進度條｜Progress
依 Figma Loading & Progress 指南，呈現多步驟流程的目前位置、完成狀態與責任資訊。
先判斷使用者需要知道「正在處理」，還是「流程走到哪裡」。Progress 用於可追蹤的流程階段，短暫等待請使用 Loading。
設計元件及開發源碼
Figma 連結開啟本次核對的 Progress 頁面；Vue 使用站內已存在的對應文件。
使用原則
- 1. Purpose
- 區分等待與流程：短時間處理使用 Loading；有明確節點、順序與責任單位時使用 Progress。
- 2. Variants
- 選擇正確型態：Progress 分為主節點、子節點、收合與連線狀態。
- 3. Scenario
- 補足狀態文字：等待超過可感知時間或流程狀態改變時，搭配清楚文字與時間資訊。
需要阻擋背景操作與避免重複送出時，請參考 11 Loading 的 basic／shade 型態。
元件定位
- Use when｜建議
- 呈現案件或任務的多步驟進度，以及目前負責處理的階段。
- Consider when｜評估
- 若只是單一結果回饋，可改用狀態訊息、Toast、Empty state 或提示文案。
- Avoid when｜避免
- 不要用 Progress 取代導覽；沒有實際處理時，不持續顯示 Loading，也不在沒有進度資訊時硬放 Progress。
Anatomy｜元件結構
由狀態指示、連接線、標籤與輔助資訊組成，不同型態維持一致語意。
- Indicator
- 辨識完成、目前、未來及錯誤狀態；圖示與文字一同表達，不只依賴色彩。
- Line／Track
- 主線、子線、完成線與未完成線，表達節點之間的先後及層級。
- Label／Meta
- 單位、日期、人員與備註資訊；標籤說明階段，補充資訊交代責任與處理時間。
使用場景
- 表單送出等待
- 送出、查詢或儲存時顯示 basic Loading；需要阻擋背景操作時使用 shade。
- 案件流程追蹤
- 案件有進件、缺件、徵審、結案等明確節點時，以 Progress 呈現目前狀態。
- 多層級或收合流程
- 流程包含子節點或大量單位時，以 collapse／sub line 降低視覺負擔。
Do／Avoid
- Do
- 以 Done、Current、Next、Error 等語意命名狀態，搭配必要日期或責任單位。
- Avoid
- 不要只用顏色區分狀態；沒有真實進度資訊時，不顯示虛假百分比或流程進展。
- Check
- 確認預覽使用實際元件，節點名稱、完成狀態與資料來源一致，再核對 Component／Progress 的 Token 套用。
Variants overview｜型態與層級
- 基本流程
- 主節點依處理順序排列，呈現已完成、警示、目前與未來階段。
- Collapse combined
- 主節點搭配可收合子流程；可操作的標籤提供 Hover 與鍵盤焦點回饋。
- Uncollapsible
- 不需展開時只呈現流程與狀態，不製作沒有內容的可點擊入口。
- Sub／Progress line
- 子流程以較小指示點與子線表達層級；連線仍對應完成、目前與未來語意。
Status｜狀態與回饋
- Done／Completed
- 已完成節點使用完成色與勾選圖示；若有 Alert，需用文字補充原因。
- Error／Alert
- 需要處理的異常或缺件，搭配警示圖示與原因，不以完成勾選取代。
- Current／Now
- 目前節點以主要色強調，保留單位、日期或人員資訊。
- Next／Upcoming
- 尚未發生的後續節點降低視覺強度，不讓使用者誤認為已完成或可操作。
- Hover／Shade／Loading
- 收合節點可有 Hover 回饋；shade Loading 用於阻擋背景操作並避免重複送出。
基本流程｜完成、警示、目前與未來
- 進件
- 缺件
- 徵審
- 覆核
- 結案
示範案件資料，並非即時銀行流程。節點以有序清單表達，只有目前階段使用 aria-current="step"。
收合流程｜主節點與子流程
- 填表人
- 結案
業管單位｜子流程
- 總務
- 經辦
- 單位主管
點選「業管單位」展開或收合；也可使用 Enter／空白鍵，展開後按 Escape 收合。
不可收合流程｜Uncollapsible
- 填表人
- 單位主管
- 結案
標籤只呈現階段資訊，不提供展開操作。
子節點與連線｜Sub／Progress line
- 總務
- 經辦
- 單位主管
主線｜完成
連接主要流程節點。
主線｜未來
後續尚未到達的階段。
子線｜完成
從屬流程中的已完成連線。
子線｜未來
從屬流程中的後續階段。
來源與核對紀錄
查看 Progress 核對摘要
核對日期：2026-10-20。已閱讀 Progress 頁面中的 Loading & Progress Designer guide，以及主／子節點、收合與連線圖例。Loading 的選用界線在此說明，11 Loading 頁面未變更。
本頁依指南呈現完成勾選、目前節點、警示與後續節點。現有 16 筆 Progress Token 的 Done／Current 色彩對應與指南圖例有差異，尚需逐筆核對 Variables 與主元件綁定；本次不覆寫 Token 值，也不宣告 Vue 已同步。
- 提示工具以
class="tooltip"加上或移除show控制。 - 依相對位置加入
top或bottomclass。
提示工具樣式
上方提示工具
上方提示工具測試文字
class="tooltip top"
下方提示工具
下方提示工具測試文字
class="tooltip bottom"
- 基礎結構：
class="formLabelContainer" > class="formLabel"。 - 依頁籤數量加上
label2至label5；所在頁籤加上select。
頁籤樣式
目前頁籤：基本資料
class="formLabelContainer label4"class="formLabel select"；選取色 #3C4C5E，其他頁籤 #EFEFEF。
頁籤數量
2 個頁籤
formLabelContainer label2
3 個頁籤
formLabelContainer label3
5 個頁籤
formLabelContainer label5
表單段落標題
表單標題
class="formContainer" > class="formSectionTitle"
運用於表單段落的標題分類。
次表單標題
次表單標題
class="formContainer" > class="formRow formSectionSubTitle"
運用於同一段落中的次群組。
標題運用
申請人資料
聯絡方式
formSectionTitle 後可接 formSectionSubTitle，再放置欄位群組。
- 基礎表單：
class="formContainer"。 - 資訊列表使用
listForm；填寫表單使用fillForm，並依內容密度選擇less或more。
資訊列表
日期標題日期標題標題欄位標題欄位標題編輯
class="formContainer listForm"；資訊列表欄位寬度依內容長度自行設定。- 一列：
class="formRow"；一欄：class="formCell"；標題列：class="formRow formTitle"。 - 奇數列
#FFFFFF／偶數列#FBFBFB／hover#EFEFEF。 - 未讀列：
class="formRow unread"，淺黃#FFFAE7；目前選擇列：class="formRow select"，淺綠#EBF6F4並有左側直線。點選列可切換範例選取狀態。
排序拖曳列表
欄位標題欄位標題標題欄位標題
欄位內容 B欄位內容欄位內容欄位資訊欄位資訊欄位資訊欄位資訊欄位資訊
欄位內容 A欄位內容欄位內容欄位資訊欄位資訊欄位資訊欄位資訊欄位資訊
欄位內容 C欄位內容欄位內容欄位資訊欄位資訊欄位資訊欄位資訊欄位資訊
欄位內容 D欄位內容欄位內容欄位資訊欄位資訊欄位資訊欄位資訊欄位資訊
點選「編輯」後，可拖拉每列右側的拖曳把手調整順序。
class="formContainer listForm listSortable"；基礎設定沿用資訊列表。- 標題列排序控制：
class="formRow formTitle" > class="formCell sortableCell" > button class="btnSort"、button class="btnSortSave"。 - 可編輯排序列表內容置於
class="sortableZone"。點選class="btnSort"開啟拖曳排序，點選class="btnSortSave"完成編輯。
填寫表單
多內容表單（1～4 欄）
欄位標題欄位標題日期標題欄位標題
欄位標題欄位標題欄位標題
欄位標題欄位標題
欄位標題欄位標題
欄位標題
class="formContainer fillForm more"；一列 1～4 欄使用class="formRow set4"。- 標題欄：
class="formCell formTitle"，寬度 105px；資訊欄：class="formCell"。 - 以 4 欄為基礎：1／4
formCell、2／4formCell cell4-2、3／4formCell cell4-3、4／4formCell cell4-4。
少內容表單（1～3 欄）
欄位標題
欄位標題欄位內容欄位標題欄位內容
欄位標題欄位內容欄位標題欄位內容欄位標題
class="formContainer fillForm less"；一列 1／2／3 欄分別使用class="formRow set1"、set2、set3。- 標題欄：
class="formCell formTitle"，寬度 135px；資訊欄寬度平均分配。
- 底部容器：
class="formBtnContainer"。 - 按鈕使用
button class="uiStyle sizeL"，並依優先序配置顏色與長度。
表單底部按鈕
表單填寫完成後，請確認資料再送出。次要操作放在左側，主要操作放在右側。
class="formBtnContainer twoSize"button class="uiStyle sizeL subLength btnDarkBlue"、button class="uiStyle sizeL mainLength btnGreen"。
操作優先序
次要深藍色｜220px可暫存、返回或保留目前內容。
主要綠色｜320px送出、確認或完成主要流程。
ICON
圖標｜Icon
依 Figma Icon Designer guide，整理圖標的語意、結構、用途與狀態；下方圖庫保留搜尋、預覽與 SVG 下載。
設計元件及開發源碼
使用原則
Icon 以精簡的視覺符號協助辨識操作、狀態與內容類型，優先搭配清楚文字或可理解的情境；當圖形語意不明確、容易混淆或承擔主要訊息時，不單獨使用 Icon。
- 1. Purpose｜先確認語意
- 使用團隊已熟悉、可直接聯想到功能或狀態的圖形。圖標輔助辨識，不取代必要文字。
- 2. Variants｜再選擇尺寸
- 一般操作使用 32px 圖示；較強的結果回饋才使用大型圖像，不因裝飾需求任意放大。
- 3. Scenario｜最後補情境
- 在按鈕、欄位或狀態訊息中，檢查圖標是否仍能被正確理解。
元件定位
- Use when｜熟悉且高頻
- 導覽、搜尋、返回、展開等慣用操作，可使用系統既有 Icon 快速辨識。
- Consider when｜低頻或專有
- 圖形不容易被理解時，搭配文字標籤或 Tooltip，並先驗證使用者認知。
- Avoid when｜關鍵訊息
- 錯誤原因、交易結果與不可逆操作不能只靠 Icon，需補上明確文字。
Anatomy｜元件結構
- Container
- 32px 基準尺寸與安全留白。維持既有容器比例，不裁切圖形或壓縮留白。
- Glyph
- 保持一致線條、比例與視覺重量，避免不同來源或風格混用。
- Semantic color
- 區分預設、資訊、成功、警示與錯誤；色彩只輔助語意，仍需文字或元件狀態。
此處以網站既有 SVG 示意結構；尚未宣告與 Figma 圖庫的每個圖形完全一致。
Icon 類型與使用狀況
Figma 32px library 依 Action、Navigation、Content、Status、Feedback、Brand 六類用途整理。設計時直接使用既有 component instance，避免自行重畫或混入其他圖庫。
- Action｜操作
- 辨識搜尋、刪除、編輯等操作。
- Navigation｜導覽
- 辨識方向、返回、展開與導覽入口。
- Content｜內容
- 辨識日期、人員、檔案等內容類型。
- Status｜狀態
- 輔助辨識目前狀態，搭配文字。
- Feedback｜回饋
- 輔助說明成功、警示與錯誤結果。
- Brand｜品牌
- 使用既有品牌資產，依原始識別呈現。
下方圖庫目前沿用既有中文檢索分類；這些分類是網站搜尋標籤，尚未逐筆改為 Figma 六類對應。
States｜狀態與語意色彩
Icon 本身通常沒有 Hover 或 Focus 狀態，互動回饋由按鈕、欄位等上層容器控制；不要將圖標調色直接當成元件狀態。
- Default／Neutral
- 一般操作與內容識別使用預設中性色，可操作性由外層元件呈現。
- Information
- 資訊提示使用既定 info icon 與語意色，不自行改造成裝飾色。
- Success／Warning／Error
- 流程結果採對應圖示與顏色，並搭配明確標題或說明文字。
- Disabled
- 由上層元件控制透明度與對比；Icon 不單獨承擔禁用語意。
結果圖例使用網站既有 SVG 與語意色示意；不將示意尺寸視為新增 Token。
使用場景
- 導覽與方向操作
- 返回、前進、展開與收合採用一致方向，同一流程不混用不同箭頭語彙。
- 工具與內容操作
- 搜尋、篩選、下載、編輯等高頻功能可搭配文字，縮短辨識與學習時間。
- 結果與狀態回饋
- 成功、警示與錯誤使用對應語意圖示；大型圖像只用於需要聚焦的結果區。
Do／Avoid
- Do｜沿用既有圖示與語意
- 優先使用 32px icon library，保持同一功能、方向與色彩語意一致。
- Avoid｜混用來源或只靠顏色
- 避免不同線條風格、任意縮放，或只靠紅綠色區分成功與錯誤。
- Check｜辨識與替代資訊
- 確認小尺寸仍清楚；無文字時提供 Tooltip 或無障礙名稱，關鍵訊息補上文字。
來源與核對紀錄
查看 Icon 核對摘要
核對日期：2026-10-20。已讀取 Figma Icon Designer guide 2542:4103，確認 32px 圖庫 2243:2384 與結果圖像 2243:2501。
下方 102 個 SVG 為既有 Guideline 發布副本。Figma 圖庫的逐項名稱、增刪、路徑、分類及 Variables 綁定仍待比對；未以指南核對取代資產驗收，也未宣告 Vue 已同步。
圖庫查找與下載
既有 102 個 SVG 可依上方搜尋、用途分類、預覽尺寸與色碼查找；點選圖標可複製名稱、下載原始或調色 SVG。32px 是原始畫布；16／24／48px 為網站縮放預覽。
資產來源：Internal Design Guideline 1.3.17 發布副本；與最新 Figma 的逐項對應待核對。
請輸入 # 加上 6 碼十六進位色碼，例如 #007d73。
找不到符合的圖標
試試較短的關鍵字，或重設篩選。