ASUS VivoWatch
依照既有設計完成產品互動網站，精準處理動態與跨裝置呈現。
案件資料
把精細產品設計轉成跨裝置頁面，也讓感測與健康資訊自然動起來。
產品頁以八個段落說明感測器、脈波、心電圖、心率、血氧、睡眠與運動功能。三伍杉負責把產品圖、錶面遮罩、動態素材與文字節奏組合成前端，並針對手機重新編排。
產品VivoWatch 5 AERO
產品段落8 段
動態GIF mask／AOS／Swiper
交付Static frontend
實際流程
產品細節，要在每一種裝置上都成立。
- 01 素材拆解
確認八段產品敘事、圖層、遮罩與動態條件
- 02 前端合成
產品、錶面遮罩與健康動態精準組合
- 03 手機重排
依窄螢幕重新安排尺寸、圖層與閱讀順序
01 DETAIL
產品圖層、文字與動態需要精準對位。
GIF 被放入錶面遮罩並與產品圖合成，讓心電圖與量測畫面留在裝置裡，而不是浮在版面上的一般動畫。
02 STORY
八個段落各自說明一項健康與產品價值。
AOS、Swiper、SCSS 與 JavaScript 支援進場、輪播與內容切換，動態服從產品閱讀順序。
03 MOBILE
手機版重新安排，不是把桌機整頁縮小。
產品尺寸、文字位置、圖層與閱讀順序依窄螢幕重新配置，確保重點與操作仍然清楚。
04 QA
動畫完成後，還要回到各種瀏覽器與尺寸逐段確認。
錶面 GIF、遮罩、AOS 進場與 Swiper 在不同瀏覽器有各自的載入時機。測試會逐段確認圖層是否錯位、文字是否壓住產品，以及手機旋轉與窄螢幕是否仍能順序閱讀。
下一個案例
安沛購物商城 →