設計系統

深色模式

ColorPicker 取色器 ​

讓使用者挑選顏色,平時收合成一個色塊,點開才出現面板。使用 Element Plus 的 el-color-picker。

設計準則 ​

  • 典型場景:標籤顏色、分類顏色、圖表自訂色
  • 務必提供 predefine 預設色盤,內容用擴充色盤十色的 500 階,引導使用者選品牌認可的顏色
  • 透明度(show-alpha)在有半透明需求(遮罩、圖表疊色、浮水印)時開啟;注意開啟後色值輸出為 RGBA,儲存端要能接受這個格式
  • 尺寸跟著同一列元件走:表單內用預設,表格內、工具列用 small
  • 取色器旁邊放文字,說明這個顏色的用途(如「標籤顏色」)
  • 若取色是畫面的主要任務,改用攤開的 ColorPickerPanel

不使用的變體 ​

Element Plus 文件裡有,但 Accuhit 產品不使用的變體:

  • 色值格式(color-format):統一用預設格式(HEX;開透明度時自動為 RGBA),不改成 hsl 等其他格式;色碼才能和設計稿、資料庫對得起來

基本用法 ​

搭配品牌擴充色盤(500 階)作為預設選項:

loading

尺寸 ​

跟著同一列元件的尺寸走,表格內、工具列用 small:

loading

透明度 ​

有半透明需求時開啟 show-alpha,色值以 RGBA 輸出:

loading

Do / Don't ​

✅ Do❌ Don't
predefine 給擴充色盤 500 階讓使用者在色譜上隨便滑
旁邊文字說明顏色用途一個光禿禿的色塊
有半透明需求才開 show-alpha預設就開透明度
尺寸跟同一列元件一致同一列大小不一

給工程師 ​

完整 API 見 Element Plus ColorPicker 文件。 本站規範優先於 EP 文件中的視覺建議。