Edit mode
編輯行為包含:拖曳、刪除。
1. 行為會直接影響 UI 呈現
2. KKBOX 以原生交互為原則進行設計
3. 下方圖示為線上『情境懶人包』截圖,實作時 iOS 套用原生的 UI,因此 Cell 高度與 Design Spec 略有差異
此元件分為 iOS 及 Android 兩種 UI 形式,流程上也互有差異,細節可瀏覽下方介紹資訊。
⚡️ Guidline:
Type of edit
編輯行為分類
1. Delete 刪除
使用者可以針對有提供對應功能的列表進行刪除。
iOS/Android 流程:
1. Default
・iOS 刪除⊖ 與拖曳 icon 同時出現
・Android 勾選 icon 與拖曳 icon 同時出現
2. Select
・iOS 點擊刪除⊖,列表自動滑動後出現刪除鍵(僅能單筆刪除)
・Android 點擊勾選,出現 toolbar 含刪除鍵與取消鍵(能勾選多筆刪除
3. Popup(Optional)
・此非iOS/Android 系統原生流程,Popup提醒僅出現在情境懶人包刪除情境中。建議將 Popup 提示套用於 APP 內所有刪除流程,以防誤觸而直接刪除。
4. Delete
刪除行為的 UI 與流程在舊有畫面尚未統一。
2. Drag 拖曳
使用者可以針對有提供對應功能的列表進行拖曳。
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 | |
February 2, 2024 | 1.37 | ・增加雙平台 UI 說明 ・調整局部文字及圖片說明 | Edit mode | C Camille Cheng |