Special Status
為幫助快速找到各情境下適合使用的元件,將通知類型元件統整,並透過四種主要使用情境分類做說明。 此單元主要講述如何在用戶遇到特殊狀態時,給予適當的引導,相關細節說明亦可從介紹中連結至該頁面查看。
⚡️ 此情境包含元件:
Components
Dialog
Components
Floating message
Components
Status
Scenarios
運用情境
- 當用戶執行的動作發生錯誤 / 有需要跟用戶確認的行為時,我可以如何告知用戶?
- 當畫面處於空值、離線….等特殊狀態時,我可以如何引導用戶?
1. 當用戶執行的動作發生錯誤
建議使用的 UI 元件
- 若為用戶主動行為觸發的訊息,建議使用➊
- 若為系統自動觸發的事件,建議使用❷
➊ Dialog 中的文字版
- 功能特色:
- 純文字為主,主要用於操作行為的通知
- 不含圖片,讓用戶專注在文字內容
- 互動形式:
- 含有三種層級 button 可選擇使用
- 強制遮擋畫面,需執行後才能繼續操作
- 用戶點彈窗以外的範圍可以關閉
- 設計進度:
- 已元件化,中間文字對齊方式可彈性調整為置中或齊左。
- RD 進度:
- 已元件化且已上線
❷ Floating message
- 功能特色:
- 為系統自動觸發的狀態,而非用戶主動的行為觸發
- 用來標示暫時的狀態,狀態結束後即消失
- 互動形式:
- 無互動行為,顯示數秒後會自行消失
- 設計進度:
- 此為線上既有的設計,並未元件化
- 日後可另行設計新的元件
- RD 進度:
- 未元件化
2. 當畫面處於空值狀態,可利用圖示引導用戶新增資料擺脫空值
➊ Status
目前已經可運用的情境包含:空值狀態、錯誤狀態、網路未連接狀態、此路不通、離線狀態
- 功能特色:
- 當 APP 處於列出的特殊狀態時,會採用插圖+文字說明現在狀態
- 分為二種形式:
- 滿版式:當頁面中的內容空白時使用
- 半版式:當頁面中只有部分區域的內容是處於特殊狀態時使用
- 互動形式:
- 若有解除狀態的方法,可提供 CTA 按鈕
- 若狀態無法解除,會藉由文字說明,而無下一步動作
- 設計進度:
- 各狀態已元件化
- RD 進度:
- 離線狀態已元件化且上線
Changelog
Date | Version | Notes | Chapters | Person |
---|---|---|---|---|
June 16, 2023 | 1.24 | ・新增 Scenario 區塊 ・新增 Something to notice 情境 | Notification | C Camille Cheng |
July 24, 2023 | 1.32 | ・修改 Comparison table 表格 ・修改 something to guide ・修改 give a feedback ・修改 special status | Notification | C Camille Cheng |
July 6, 2023 | 1.28 | ・新增 Comparison table 草稿 | Notification | C Camille Cheng |
July 10, 2023 | 1.30 | ・新增 special status 草稿 | Notification | |
July 7, 2023 | 1.29 | ・新增 give a feedback 草稿 | Notification | |
July 19, 2023 | 1.31 | ・Comparison table 表格調整 ・修改 something to guide 草稿 ・修改 give a feedback 草稿 | Notification | C Camille Cheng |
July 6, 2023 | 1.28 | ・新增 something to guide 草稿 | Notification | |
June 26, 2023 | 1.26 | ・修改 something to notice 內容 | Notification | C Camille Cheng |