Spin The Wheel

Spin The Wheel

UXEngWearableConnect IQ

做不了決定? 在 Garmin Connect IQ 上打造一款直觀好操作的命運轉盤 Widget

以「快速做出決定」為核心,設計並開發一款操作直覺、回饋明確的轉盤 Widget,讓使用者按幾下就能轉起來抽籤。在限制下重構轉盤呈現方式,兼顧效能與可讀性,上架後依使用者回饋持續調整設定流程。

角色
UI/UX 設計師 + 獨立開發
平台
Garmin Connect IQ

一個下班後的日常問題:晚餐到底要吃什麼?

身為一個外食族,我常常在晚餐的選擇障礙裡打轉,便當、便利商店、拉麵、健康餐...,選項很多但就是下不了決定。

不只是吃什麼,生活中常有這種不是很重大的小決定。週末去哪裡晃晃、晚上要不要出門運動?

Garmin watch glance inspiring the idea for a fortune wheel widget

算了,就交給命運好了,抽籤決定最快。低頭一看手錶,一個在手錶上抽籤的「命運轉盤」靈感就這樣冒出來了。

這是一個「隨手使用」的 Widget

剛好手上有支Garmin手錶,興趣使然便嘗試在Connect IQ上進行開發,我先從閱讀官方文件開始,作為設計與實作的基礎。

Garmin 的 UX 原則提醒我:「Great wearable apps stay out of the user's way and keep interactions to a minimum.」這個 Widget 的定位就是「隨手使用」,不是一個要讓人花時間的工具。

互動越少越好

只保留必要操作,不在流程中加入任何多餘步驟。

秒級節奏

打開→按一下→出結果,整個互動在幾秒內結束。

清楚的回饋體驗

回饋清楚,同時保留抽籤過程應有的期待感。

轉動過程才是抽籤的靈魂:旋轉、減速、震動

如果只是啪一下直接顯示隨機結果,幾毫秒就能結束,但這樣並沒有什麼感覺。轉盤的靈魂在於那個等待的過程——指針掃過選項、速度漸漸慢下來且要停不停、最後定格在某個結果上。我圍繞這個核心感受,設計了三層動態反饋。

減速曲線

四次方 easing 拉長低速滑行,讓轉盤在快停下來時保留期待感。

Illustration of an easeOutQuart deceleration curve comparing spin speed over time

刻度震動

指針掃過每個選項時加入短震動,模擬實體指針卡過刻度的觸感。

Animated fortune wheel reference illustrating tick-like vibration as the wheel spins

結果揭曉

最後定格時用強烈震動與醒目動畫收尾,讓抽中的那一刻更有重量。

Wheel of Fortune celebration reference illustrating the energy of the final result reveal

限制下的解法:從披薩扇形到圓環指針,兼顧效能與可讀

起初很直覺認為轉盤介面就應該像是披薩切片,每個扇形放一個選項,是大家最熟悉的樣子。但在 Monkey C 開發上很難處理文字旋轉效果,以及轉動時畫面更新幅度大,動畫容易卡頓,體驗反而很不順暢。

山不轉路轉,最終方案是反過來,轉盤本體不動,改讓指針沿著圓環旋轉。這樣大幅降低了運算量,動畫流暢許多,中央也能留出空間,清楚顯示目前指到的選項名稱。

最終方案:固定圓環 + 旋轉指針,中央同步顯示完整選項名稱
Garmin 手錶上的實際轉盤體驗

上架後被打臉,使用者期待可在手錶上進行設定

v1.0 的轉盤設定入口只放在手機 Connect IQ App,理由是在手機輸入文字比手錶上輸入更為方便,應該是更好的體驗。興高采烈上架後的幾則低分評論讓我意識到,使用者的直覺完全不同。

v1.0 僅提供手機端設定,與使用者預期不符

既然是在手錶上玩的轉盤,理所當然就應該能在手錶上改內容。

於是我在 v1.1 加入了手錶端設定入口,同時保留手機端作為「更快的推薦方式」。這次迭代雖然增加了開發複雜度,但帶來更直覺的設定體驗,也開始收到更正向的評論。

v1.0.0 到 v1.1.0:從手機端設定,擴充為可在手錶上編輯轉盤

相容性挑戰

從後台發現 1/4 下載量來自 Forerunner 55,但這款舊裝置不支援 SDK 內建的文字輸入元件,需要額外補上一套相容的輸入方案,確保舊裝置也能在手錶端進行設定。

後台裝置統計:Forerunner 55 下載比例最高

封面圖的威力

設定流程修好之後,我也換了一張更吸睛的封面圖。沒想到下載量明顯提升、效果十分顯著😮。

換了封面圖後,下載量從 10+ 衝到 1K+

結尾:把小東西做到有靈魂

這個命運轉盤 Widget 走完了一個完整的迭代循環:從需求與靈感出發,定義互動原則,設計並打磨體驗細節,實作後上架驗證。更重要的是,上架後的回饋讓我重新對齊了使用者的預期。

我很享受把一個小東西做到有靈魂的過程,也會繼續迭代讓它更順、更完整。