Components

Action Sheet

Badge

Button

Cards

Dialog

Fixed Banner

Floating message

Image

Input field

Message Block

Status

Tab

Tag

Tooltips

Fixed Banner

固定顯示於指定位置的橫幅資訊 PO專案實作中

⚡️ 相關資源：

Components Figma File

UI Spec Figma File

Anatomy

解構

1. Icon Optional 功能相關圖示或引導提醒用戶的裝飾性圖示
2. Text 主要資訊
3. CTA 指定連結至對應畫面，或協助用戶更改狀態
4. Close Button

Variants（Types）

變形（類型）

❶ 標題前含 icon

依據用戶身份、狀態提示資訊，並提供對應 CTA，協助用戶順利進行操作，此形式的 fixed banner 會一直固定存在於畫面中，直到用戶的身份、狀態改變。icon 圖型則可搭配內容主題做更換。

❷ 標題前不含 icon

同上述 ❶ 的形式，設計師也可依據實際應用的效果，選擇不顯示icon。

目前使用於 SP 各狀態的提示、P0 狀態提示，因為外區顯示文字較長，為了爭取更多文字顯示空間，因此選擇使用標題前不含 icon 的版本

❸ 標題前不含 icon，且可以關閉

當提示資訊為一次性的訊息通知，則可顯示關閉 icon 讓用戶自行關閉橫幅。

目前使用於 14 天免費試用提示、付費扣款失敗提示、Apple Watch 資料傳輸提示。

Behaviors

行為

• 可依內容屬性的差異，定義不同的出現時間及停留時間。
• 當含有關閉 icon 的形式被關閉時，整個 fixed banner 和漸層色背景會消失 ; 如果畫面尚未滑動，下方內容會往上滑動遞補空出來的空間。

Usage Guidelines

使用規範

icon 和關閉鍵不可同時存在

Changelog

On This Page

• Fixed Banner
• Anatomy
• Variants（Types）
• ❶ 標題前含 icon
• ❷ 標題前不含 icon
• ❸ 標題前不含 icon，且可以關閉
• Behaviors
• Usage Guidelines
• Changelog