🖥️

Universal & Official Web

Universal & Official Web

此章節說明 Universal 與 Official Web 的互動元素及操作行為設計規則。

Animation Scenarios

動畫情境

我們將動畫情境區分為三項，分別是載入的動畫 (Loading)、轉換的動畫 (Transition)、以及動態的模組/元件 (Animated Module / Element)。

Loading 載入

載入動畫的作用在於提示使用者系統正在進行需要耗費時間的運作；好的載入動畫設計通常會盡快地讓使用者看到內容，例如使用 Skeleton 的方式讓使用者可預期內容。好的載入動畫也會清楚地傳達內容正在載入中。如果載入時間過長，載入動畫也可以給予提示讓使用者知道需要多久才能完成。

‣
目前產品中的載入動畫使用種類：
image

下載歌曲

動態：進度條固定頻率旋轉。其中灰色代表等待下載（Universal 一次僅會下載一首歌），藍色代表正在下載。

應用：歌曲下載的進度顯示。Universal

image

Loading more

動態：三個圓點會同時有顏色深淺及尺寸大小的縮放。

應用：用來表示頁面載入更多資料的狀態。Universal

image

Loading more

動態：loading 時 Icon 會轉圈。

應用：用來表示載入更多資料的狀態 Official Web。

image

Skeleton

動態：用動態漸層色塊來代替文字和圖片。

應用：在列表載入完成之前，可以先看到該列表輪廓。Universal

image

Buffering

動態：用顏色深淺動態漸變。

應用：讓使用者理解現在播放的歌曲正在緩衝中，而非暫停。Universal

Transition 轉換

轉換動畫主要用於內容呈現時出現的方式，這邊的動態需要考量內容的位置與形式來符合使用者的預期。

image

Move In (Dialog)

動態：元件由下往上進來。

應用：Dialog Universal。

image

Collapse

動態：由左往右收起。

應用：關閉下載佇列膠囊Universal。

image

Move In (Toast)

動態：元件由右往左進來。

應用：Toast Universal。

image

Move In

動態：由下往上進來。

應用：打開 NowPlayingBar Official Web。

image

Expand

動態：由右往左展開。

應用：打開下載佇列膠囊Universal。

image

Move Out

動態：由上往下回去。

應用：收起 NowPlayingBar Official Web。

Animated Module / Element 動態模組

在產品中有時為了功能性或是互動的豐富度，我們也會使用動態的模組或元件來達成效果，讓產品介面中不是只有靜態的元素。

跑馬燈 Universal

image

動態：由左到右重複跑，兩側淡出

應用：Mini mode Title 過長時會套用此效果。(未上線)

Now Playing Icon（俗名「舞動三兄弟」*） Universal Official Web

image

動態：有高低起伏的音質圖形。

應用：顯示當前播放的歌曲，因應平台 Icon 位置會略有不同。

登入畫面 Universal

image

Header Official Web

image

動態：往下滑動時，Header 文字 move out 換成下載 Button。

應用：特色功能頁。

HomePage Official Web

image

Interaction

互動

當使用者使用滑鼠、鍵盤和產品內的元件互動時，我們會運用動態效果來傳達視覺與點擊上的回饋，讓使用者知道互動行為的開始、進行中與結束，確保使用者能夠認知到是否有成功完成他想要進行的任務，提升產品的反應與順暢度。

Hover

滑鼠移動至可點擊物件上時，會有形態變化的反應 (可至各別元件了解規範) Card, List, Icon

image

Click (Focus) 點擊

滑鼠點擊物件。

Focus 為點擊物件時的型態，讓使用者了解當前點擊的地方在哪。

  • Input Field (focus/unfocus)
  • Now Playing Bar (open/collapse)
  • Dropdown Menu (open/collapse)
  • List(Universal) (focus/unfocus)
  • Switch (on/off)
  • Tab Switch (active/inactive)
  • Radio Button (active/inactive)
image

Double click 雙點擊

滑鼠雙點擊兩下物件。

Drag 拖曳

  • 歌曲清單拖曳至歌單 Universal

Scroll 捲動畫面

image
image
image