Slider
Slider

Slider

Slider

Slider 是一種利用拖曳的方式讓使用者調整數值的元件。
💡
此元件目前使用兩種形式，在 Now playing 頁中雙平台使用共同的 UI 設計，亦為本篇主要介紹的內容 ; 其餘頁面使用各自平台的原生元件，細節請參考各平台系統範例。
image

⚡️ 相關資源：

icon
Components Figma File
icon
UI Spec Figma File

Anatomy

解構

image
  1. Track 滑動的軌道，可以讓使用者直觀的了解一個概略數值
  2. Handle 讓使用者操作的把手，用戶可以拖曳把手來調整數值或選擇範圍

Variants

變形

image

❶ Normal

無任何文字或圖示輔助說明，目前使用於播放設定中的『音量限制』，為較少見的應用方式。

❷ With icon

用圖標 (Icon) 表示兩個端點的意涵，使用時請特別注意圖標是否容易被辨識。

❸ With value

用文字表示當前狀態，經常為單獨的數字、時間或數字加上某個單位，例如：10、10 秒、10 %。

Usage Guidelines

使用規範

根據文字的擺放位置而有對應的解讀方式

文字在右側時，該文字代表當前拖曳的數值，且文字會隨使用者拖曳立即變更

目前位置為 12 秒
目前位置為 12 秒

左側與右側的圖示需有關聯

叉叉和愛心的關聯性較低，難以讓人聯想兩者之間的漸進關係
叉叉和愛心的關聯性較低，難以讓人聯想兩者之間的漸進關係

使用容易讓人理解的圖示

用常見的圖示表示音量
用常見的圖示表示音量

Changelog

Date
Version
Notes
Chapters
Person
August 8, 2023
1.34

・新增 Checkbox / Checkmark / Slider / Toggle

CheckboxCheckmarkSliderToggle
Verna Wang
November 21, 2023
1.35

・增加雙平台 UI 說明

Slider
C
Camille Cheng
December 4, 2023
1.36

・雙平台說明 review 後調整

Slider
C
Camille Cheng