Edit mode
Edit mode

Edit mode

Scenarios

Notification
Requesting PermissionRequesting PermissionEdit modeEdit mode
Advertisement

Edit mode

編輯行為包含:拖曳、刪除。
💡
1. 行為會直接影響 UI 呈現 2. KKBOX 以原生交互為原則進行設計 3. 下方圖示為線上『情境懶人包』截圖,實作時 iOS 套用原生的 UI,因此 Cell 高度與 Design Spec 略有差異
image
💡
此元件分為 iOS 及 Android 兩種 UI 形式,流程上也互有差異,細節可瀏覽下方介紹資訊。

⚡️ Guidline:

Type of edit

編輯行為分類

1. Delete 刪除

使用者可以針對有提供對應功能的列表進行刪除。

image
⚠️
iOS/Android 流程: 1. DefaultiOS 刪除 與拖曳 icon 同時出現 ・Android 勾選 icon 與拖曳 icon 同時出現 2. Select ・iOS 點擊刪除⊖,列表自動滑動後出現刪除鍵(僅能單筆刪除) ・Android 點擊勾選,出現 toolbar 含刪除鍵與取消鍵(能勾選多筆刪除 3. Popup(Optional) ・此非iOS/Android 系統原生流程,Popup提醒僅出現在情境懶人包刪除情境中。建議將 Popup 提示套用於 APP 內所有刪除流程,以防誤觸而直接刪除。 4. Delete

刪除行為的 UI 與流程在舊有畫面尚未統一。

image

2. Drag 拖曳

使用者可以針對有提供對應功能的列表進行拖曳。

image
⚠️
iOS/Android 流程: 1. Default 模式 ・iOS/Android 皆支援拖曳,長按拖曳按鈕即可進行排序。 2. Select 模式 ・iOS 在此模式下不支援拖曳。 ・Android 有項目被勾選時,仍支援拖曳功能。

Changelog

Date
Version
Notes
Chapters
Person
June 19, 2023
1.25

・新增 Scenario - edit mode 草稿

Edit mode
Yit Chung
February 2, 2024
1.37

・增加雙平台 UI 說明 ・調整局部文字及圖片說明

Edit mode
C
Camille Cheng
Paris Han