Something to Guide
為幫助快速找到各情境下適合使用的元件，將通知類型元件統整，並透過四種主要使用情境分類做說明。 此單元主要講述如何引導指示用戶操作功能，相關細節說明亦可從介紹中連結至該頁面查看。
⚡️ 此情境包含元件：
/w=48,quality=90,fit=scale-down){kind=small}
Components
Tooltips
參考範例
Tutorial
Scenarios
運用情境
- 我想引導用戶操作使用新功能
1. 我想引導用戶操作新功能
建議使用的 UI 元件
- 若需指出功能位置並加上操作說明/功能介紹，建議使用➊
- 適合整頁的手勢操作，不具指向性，建議使用❷
➊ Tooltips
- 功能特色：
- 具指向性的提示對話框
- 底部會有半透明半透明遮罩，凸顯在最上層的元件
- 通常用於提供該物件的相關資訊或操作說明，以增強用戶的使用體驗和便利性
- 可顯示最多三個步驟
- 互動形式：
- 含有一個 button 可選擇使用
- 用戶需要操作完成或是點擊空白處關閉後，才可接續執行其他行為
- 設計進度： 已元件化
- RD 進度： 已元件化並上線
❷ Tutorial
- 功能特色：
- 蓋版式的操作教學
- 畫面可依據情境使用插圖或動畫呈現
- 互動形式：
- 無固定形式，但要確保有明確的關閉選項，讓用戶自行關閉
- 設計進度：
- 需因應情境設計，因此無法元件化
- RD 進度：
- 無元件化
Changelog
Date | Version | Notes | Chapters | Person |
|---|---|---|---|---|
July 24, 2023 | 1.32 | ・修改 Comparison table 表格 ・修改 something to guide ・修改 give a feedback ・修改 special status | Notification |  Paris HanC Camille Cheng |
July 10, 2023 | 1.30 | ・新增 special status 草稿 | Notification | Paris Han |
July 7, 2023 | 1.29 | ・新增 give a feedback 草稿 | Notification | Paris Han |
July 6, 2023 | 1.28 | ・新增 Comparison table 草稿 | Notification | C Camille Cheng |
July 6, 2023 | 1.28 | ・新增 something to guide 草稿 | Notification | Paris Han |
July 19, 2023 | 1.31 | ・Comparison table 表格調整 ・修改 something to guide 草稿 ・修改 give a feedback 草稿 | Notification | C Camille ChengParis Han |
June 26, 2023 | 1.26 | ・修改 something to notice 內容 | Notification | C Camille ChengParis Han |
June 16, 2023 | 1.24 | ・新增 Scenario 區塊 ・新增 Something to notice 情境 | Notification | C Camille ChengParis Han |