Special Status
Special Status

Special Status

Scenarios

Notification
Requesting PermissionRequesting PermissionEdit modeEdit mode
Advertisement

Special Status

為幫助快速找到各情境下適合使用的元件,將通知類型元件統整,並透過四種主要使用情境分類做說明。 此單元主要講述如何在用戶遇到特殊狀態時,給予適當的引導,相關細節說明亦可從介紹中連結至該頁面查看。

⚡️ 此情境包含元件:

icon
Components Dialog
Components Floating message
icon
Components Status

Scenarios

運用情境

  1. 當用戶執行的動作發生錯誤 / 有需要跟用戶確認的行為時,我可以如何告知用戶?
  2. 當畫面處於空值、離線….等特殊狀態時,我可以如何引導用戶?

1. 當用戶執行的動作發生錯誤

建議使用的 UI 元件

  • 若為用戶主動行為觸發的訊息,建議使用➊
  • 若為系統自動觸發的事件,建議使用❷

Dialog 中的文字版

  1. 功能特色:
    • 純文字為主,主要用於操作行為的通知
    • 不含圖片,讓用戶專注在文字內容
  2. 互動形式:
    • 含有三種層級 button 可選擇使用
    • 強制遮擋畫面,需執行後才能繼續操作
    • 用戶點彈窗以外的範圍可以關閉
  3. 設計進度:
    • 已元件化,中間文字對齊方式可彈性調整為置中或齊左。
  4. RD 進度:
    • 已元件化且已上線

Floating message

  1. 功能特色:
    • 為系統自動觸發的狀態,而非用戶主動的行為觸發
    • 用來標示暫時的狀態,狀態結束後即消失
  2. 互動形式:
    • 無互動行為,顯示數秒後會自行消失
  3. 設計進度:
    • 此為線上既有的設計,並未元件化
    • 日後可另行設計新的元件
  4. RD 進度:
    • 未元件化
此
此為實作範例,使用於情境懶人包
此
此為實作範例,使用於一起聽聊天室

2. 當畫面處於空值狀態,可利用圖示引導用戶新增資料擺脫空值

Status

目前已經可運用的情境包含:空值狀態、錯誤狀態、網路未連接狀態、此路不通、離線狀態

  1. 功能特色:
    • 當 APP 處於列出的特殊狀態時,會採用插圖+文字說明現在狀態
    • 分為二種形式:
      • 滿版式:當頁面中的內容空白時使用
      • 半版式:當頁面中只有部分區域的內容是處於特殊狀態時使用
  2. 互動形式:
    • 若有解除狀態的方法,可提供 CTA 按鈕
    • 若狀態無法解除,會藉由文字說明,而無下一步動作
  3. 設計進度:
    • 各狀態已元件化
  4. RD 進度:
    • 離線狀態已元件化且上線
上
上圖為滿版,下圖為半版

Changelog

Date
Version
Notes
Chapters
Person
June 16, 2023
1.24

・新增 Scenario 區塊 ・新增 Something to notice 情境

Notification
C
Camille Cheng
Paris Han
July 24, 2023
1.32

・修改 Comparison table 表格 ・修改 something to guide ・修改 give a feedback ・修改 special status

Notification
Paris Han
C
Camille Cheng
July 6, 2023
1.28

・新增 Comparison table 草稿

Notification
C
Camille Cheng
July 10, 2023
1.30

・新增 special status 草稿

Notification
Paris Han
July 7, 2023
1.29

・新增 give a feedback 草稿

Notification
Paris Han
July 19, 2023
1.31

・Comparison table 表格調整 ・修改 something to guide 草稿 ・修改 give a feedback 草稿

Notification
C
Camille Cheng
Paris Han
July 6, 2023
1.28

・新增 something to guide 草稿

Notification
Paris Han
June 26, 2023
1.26

・修改 something to notice 內容

Notification
C
Camille Cheng
Paris Han